...

TODO.md

@@ -1,3 +1,7 @@
+- deploy
+  - now.sh, waiting for it to be purely front end
+    - purely front end except for mailing list
+- make text inputs big enough for MAX_DIGITS_PROBLEMS and MAX_DIGITS_BITS
 - show a message on submit
 - show warning when specifying invalid number of bits or problems
 - prevent submissions more than x times per time

src/App.svelte

@@ -1,33 +1,9 @@
 <script>
-    import download from './utils/download.js'
-    import { MIN_BITS, MAX_BITS, MIN_PROBLEMS, MAX_PROBLEMS, DEFAULT_BITS, DEFAULT_NUM_PROBLEMS } from './config.js'
-    let bits
-    let num_problems
-
+    import Inputs from "./Inputs.svelte";
+    import Quiz from "./Quiz.svelte";
 </script>
-
 <main style="margin: 2em;">
     <h1>Binary Quiz!</h1>
-        <form on:submit|preventDefault={() => download(bits || DEFAULT_BITS, num_problems || DEFAULT_NUM_PROBLEMS)}>
-            <div id=inputs style="margin: 2em;">
-                <label>
-                    <input
-                            style="text-align: right; width: 2em; border: none; outline: none"
-                            placeholder={DEFAULT_BITS}
-                            autofocus
-                            type=text bind:value={bits}
-                    >
-                    Bits
-                </label>
-                <label>
-                    <input
-                            style="text-align: right; width: 2em; border: none; outline: none"
-                            placeholder={DEFAULT_NUM_PROBLEMS}
-                            type=text bind:value={num_problems}
-                    >
-                    Number of Problems
-                </label>
-            </div>
-            <input type=submit style="cursor:pointer;" value="Download PDFs" >
-        </form>
+    <Inputs />
+    <Quiz />
 </main>

src/Inputs.svelte

@@ -0,0 +1,45 @@
+<script>
+    import download from './utils/download.js'
+    import {
+        MIN_BITS, MAX_BITS, MIN_PROBLEMS, MAX_PROBLEMS, DEFAULT_BITS, DEFAULT_NUM_PROBLEMS ,
+            MAX_DIGITS_BITS, MAX_DIGITS_PROBLEMS
+    } from './config.js'
+    import { bits, num_problems } from './stores.js'
+
+    $: valid = ($bits || DEFAULT_BITS) <= MAX_BITS
+            && ($bits || DEFAULT_BITS) >= MIN_BITS
+            && ($num_problems || DEFAULT_NUM_PROBLEMS) >= MIN_PROBLEMS
+            && ($num_problems || DEFAULT_NUM_PROBLEMS) <= MAX_PROBLEMS
+
+    const downloadAndClear = () => {
+        download($bits || DEFAULT_BITS, $num_problems || DEFAULT_NUM_PROBLEMS)
+        bits.update(() => null)
+        num_problems.update(() => null)
+    }
+
+</script>
+
+<form on:submit|preventDefault={downloadAndClear}>
+    <div id=inputs style="margin: 2em;">
+        <label>
+            <input
+                    style="text-align: right; width: 2em; border: none; outline: none"
+                    maxlength={MAX_DIGITS_BITS}
+                    placeholder={DEFAULT_BITS}
+                    autofocus
+                    type=text bind:value={$bits}
+            >
+            Bits
+        </label>
+        <label>
+            <input
+                    style="text-align: right; width: 2em; border: none; outline: none"
+                    maxlength={MAX_DIGITS_PROBLEMS}
+                    placeholder={DEFAULT_NUM_PROBLEMS}
+                    type=text bind:value={$num_problems}
+            >
+            Number of Problems
+        </label>
+    </div>
+    <input disabled={!valid} type=submit style="cursor:pointer;" value="Download PDFs" >
+</form>

src/config.js

@@ -1,7 +1,9 @@
-export const MIN_BITS = 2
+export const MIN_BITS = 3
 export const MAX_BITS = 16
 export const MIN_PROBLEMS = 1
-export const MAX_PROBLEMS = 90
+export const MAX_PROBLEMS = 99
+export const MAX_DIGITS_PROBLEMS = MAX_PROBLEMS.toString().length
+export const MAX_DIGITS_BITS = MAX_BITS.toString().length
 export const DEFAULT_BITS = 8
 export const DEFAULT_NUM_PROBLEMS = 20
 

src/stores.js

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store'
+
+export const bits = writable()
+export const num_problems = writable()