feat(web): add click-only interaction

web/src/App.svelte

@@ -40,10 +40,21 @@
 
     let best_words: Promise<EvaluateWordsResult> | null = $state(null);
     let best_words_progress: EvaluateWordsProgress | null = $state(null);
+    let solving: boolean = $state(false);
 
-    let w_lines: WordleLine[] = [];
+    let w_lines: WordleLine[] = $state([]);
     let cursor = $state(0);
 
+    async function toggleSolver() {
+        if (solving) {
+            await stopSolver();
+        } else {
+            best_words = solver_evaluate_words(5, (p) => {
+                best_words_progress = p;
+            });
+        }
+    }
+
     async function reset() {
         await solver_reset(use_default_wordle_answers);
 
@@ -73,18 +84,7 @@
         }
     }
 
-    async function handleKey(event: KeyboardEvent) {
+    async function doGuess() {
-        if (/^[a-zA-Z ]$/.test(event.key)) {
-            w_lines[guesses.length - 1].focus();
-        } else if (event.key === "Enter" && event.shiftKey) {
-            best_words = solver_evaluate_words(5, (p) => {
-                best_words_progress = p;
-            });
-        } else if (event.key === "Escape" && event.ctrlKey) {
-            await reset();
-        } else if (event.key === "Escape") {
-            await stopSolver();
-        } else if (event.key === "Enter") {
         const guess = guesses[guesses.length - 1];
 
         if (guess.letters.join("").length != 5) {
@@ -115,6 +115,21 @@
 
         w_lines[w_lines.length - 1].focus();
     }
+
+    async function handleKey(event: KeyboardEvent) {
+        if (/^[a-zA-Z ]$/.test(event.key)) {
+            w_lines[guesses.length - 1].focus();
+        } else if (event.key === "Enter" && event.shiftKey) {
+            best_words = solver_evaluate_words(5, (p) => {
+                best_words_progress = p;
+            });
+        } else if (event.key === "Escape" && event.ctrlKey) {
+            await reset();
+        } else if (event.key === "Escape") {
+            await stopSolver();
+        } else if (event.key === "Enter") {
+            await doGuess();
+        }
     }
 </script>
 
@@ -168,6 +183,7 @@
             {#each guesses as g, i (g)}
                 <WordleLine
                     active={i === guesses.length - 1}
+                    on_guess_pressed={i === guesses.length - 1 ? doGuess : null}
                     bind:this={w_lines[i]}
                     bind:cursor
                     bind:letters={guesses[i].letters}
@@ -177,20 +193,34 @@
             {/each}
         </div>
 
-        <p class="mt-4 text-sm text-zinc-500 mx-auto w-1/2">
+        <p class="mt-4 text-sm text-zinc-500 mx-auto w-3/4">
             Type letters · ← → navigate · Space cycle color · Backspace delete ·
             Enter apply · Shift+Enter solve · Escape abort solver · Ctrl+Esc
             reset
         </p>
+        <button
+            tabindex="-1"
+            class="mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
+            onclick={(e) => {
+                e.currentTarget.blur();
+                toggleSolver();
+            }}
+        >
+            {#if solving}
+                Cancel
+            {:else}
+                Solve
+            {/if}
+        </button>
     </div>
     {#if best_words}
         <SolverOutput
             data={best_words}
             progress={best_words_progress}
             insert_guess={(g) => {
-                console.log("CB");
                 guesses[guesses.length - 1].letters = g;
             }}
+            bind:solving
         />
     {/if}
 </div>

web/src/components/SolverOutput.svelte

@@ -10,12 +10,21 @@
         data,
         progress = null,
         insert_guess = null,
+        solving = $bindable(true),
     }: {
         data: Promise<EvaluateWordsResult>;
         progress: EvaluateWordsProgress | null;
         insert_guess: ((word: string[]) => void) | null;
+        solving: boolean;
     } = $props();
 
+    $effect(() => {
+        solving = true;
+        data.finally(() => {
+            solving = false;
+        });
+    });
+
     function renderMath(txt: string | null) {
         return (element: HTMLElement) => {
             if (txt) {

web/src/components/WordleLine.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Color } from "wordle-solver";
+    import type { GuessResult } from "../solver/types";
 
     let {
         active = false,
@@ -13,9 +14,17 @@
             Color.GREY,
         ]),
         info_gained = null,
+        on_guess_pressed = null,
+    }: {
+        active: boolean;
+        cursor: number;
+        letters: string[];
+        colors: Color[];
+        info_gained: Promise<GuessResult> | null;
+        on_guess_pressed: (() => void) | null;
     } = $props();
 
-    let inputs: HTMLInputElement[] = [];
+    let inputs: HTMLInputElement[] = $state([]);
 
     export function focus() {
         inputs[cursor].focus();
@@ -55,7 +64,7 @@
 <svelte:window onkeydown={handleKey} />
 
 <div class="flex justify-center gap-2">
-    {#each letters as letter, i}
+    {#each letters as _, i}
         <input
             disabled={!active}
             tabindex="-1"
@@ -103,6 +112,7 @@
     {/each}
     <span
         class="w-16 text-sm text-zinc-500 self-center flex items-center justify-center"
+        onclick={info_gained === null ? on_guess_pressed : null}
     >
         {#if info_gained === null}
             ↵