From d1eb2d070652025f0753d1dd83b9aeb9db51d535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20R=C3=B6ger?= <jonas.roeger@tu-dortmund.de>
Date: Sat, 22 Aug 2026 19:56:26 +0200
Subject: [PATCH] feat(web): add click-only interaction

---
 web/src/App.svelte                     | 94 +++++++++++++++++---------
 web/src/components/SolverOutput.svelte |  9 +++
 web/src/components/WordleLine.svelte   | 14 +++-
 3 files changed, 83 insertions(+), 34 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index b66f846..5be8643 100644
--- a/web/src/App.svelte
+++ b/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,6 +84,38 @@
         }
     }
 
+    async function doGuess() {
+        const guess = guesses[guesses.length - 1];
+
+        if (guess.letters.join("").length != 5) {
+            return;
+        }
+
+        infos_gained[infos_gained.length - 1] = solver_guess(
+            guess.letters,
+            guess.colors,
+        );
+        infos_gained.push(null);
+        solution_space = solver_solution_space();
+
+        cursor = 0;
+
+        guesses.push({
+            letters: ["", "", "", "", ""],
+            colors: [
+                Color.GREY,
+                Color.GREY,
+                Color.GREY,
+                Color.GREY,
+                Color.GREY,
+            ],
+        });
+
+        await tick();
+
+        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();
@@ -85,35 +128,7 @@
         } else if (event.key === "Escape") {
             await stopSolver();
         } else if (event.key === "Enter") {
-            const guess = guesses[guesses.length - 1];
-
-            if (guess.letters.join("").length != 5) {
-                return;
-            }
-
-            infos_gained[infos_gained.length - 1] = solver_guess(
-                guess.letters,
-                guess.colors,
-            );
-            infos_gained.push(null);
-            solution_space = solver_solution_space();
-
-            cursor = 0;
-
-            guesses.push({
-                letters: ["", "", "", "", ""],
-                colors: [
-                    Color.GREY,
-                    Color.GREY,
-                    Color.GREY,
-                    Color.GREY,
-                    Color.GREY,
-                ],
-            });
-
-            await tick();
-
-            w_lines[w_lines.length - 1].focus();
+            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>
diff --git a/web/src/components/SolverOutput.svelte b/web/src/components/SolverOutput.svelte
index 0c1bcf5..cb9f1cc 100644
--- a/web/src/components/SolverOutput.svelte
+++ b/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) {
diff --git a/web/src/components/WordleLine.svelte b/web/src/components/WordleLine.svelte
index 28d43ec..fdb76a2 100644
--- a/web/src/components/WordleLine.svelte
+++ b/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}
             ↵