feat(web): solver output enhancing

- math render header
- tooltips
- copy word to input
- cancel solver

web/src/App.svelte

@@ -41,7 +41,9 @@
 
     let cursor = $state(0);
 
-    function reset() {
+    async function reset() {
+        await solver_reset(use_default_wordle_answers);
+
         guesses = [
             {
                 letters: ["", "", "", "", ""],
@@ -59,11 +61,22 @@
         solution_space = solver_solution_space();
     }
 
+    async function stopSolver() {
+        await solver_reset(use_default_wordle_answers);
+        for (const g of guesses.slice(0, -1)) {
+            try {
+                await solver_guess(g.letters, g.colors);
+            } catch (_) {}
+        }
+    }
+
     function handleKey(event: KeyboardEvent) {
         if (event.key === "Enter" && event.shiftKey) {
             best_words = solver_evaluate_words(5, (p) => {
                 best_words_progress = p;
             });
+        } else if (event.key === "Escape") {
+            stopSolver();
         } else if (event.key === "Enter") {
             const guess = guesses[guesses.length - 1];
 
@@ -107,11 +120,12 @@
             <input
                 type="checkbox"
                 bind:checked={use_default_wordle_answers}
-                onchange={() => {
-                    solver_reset(use_default_wordle_answers).then(() => {
-                        reset();
-                    });
+                onfocus={(e) => {
+                    if (e.currentTarget) {
+                        e.currentTarget.blur();
+                    }
                 }}
+                onchange={reset}
             />
         </p>
 
@@ -141,10 +155,17 @@
 
         <p class="mt-4 text-sm text-zinc-500 mx-auto w-1/2">
             Type letters · ← → navigate · Space cycle color · Backspace delete ·
-            Enter apply · Shift+Enter solve
+            Enter apply · Shift+Enter solve · Escape reset
         </p>
     </div>
     {#if best_words}
-        <SolverOutput data={best_words} progress={best_words_progress} />
+        <SolverOutput
+            data={best_words}
+            progress={best_words_progress}
+            insert_guess={(g) => {
+                console.log("CB");
+                guesses[guesses.length - 1].letters = g;
+            }}
+        />
     {/if}
 </div>

web/src/components/SolverOutput.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import katex from "katex";
+    import "katex/dist/katex.min.css";
     import type {
         EvaluateWordsProgress,
         EvaluateWordsResult,
@@ -7,10 +9,22 @@
     let {
         data,
         progress = null,
+        insert_guess = null,
     }: {
         data: Promise<EvaluateWordsResult>;
         progress: EvaluateWordsProgress | null;
+        insert_guess: (word: string[]) => void | null;
     } = $props();
+
+    function renderMath(txt: string | null) {
+        return (element: HTMLElement) => {
+            if (txt) {
+                katex.render(txt, element);
+            } else {
+                katex.render(element.innerText, element);
+            }
+        };
+    }
 </script>
 
 {#await data}
@@ -27,16 +41,35 @@
         <table class="w-full text-left text-sm text-gray-700">
             <thead class="bg-gray-800 text-xs uppercase text-gray-600">
                 <tr>
-                    <th class="px-4 py-3">Word</th>
-                    <th class="px-4 py-3">p[solution]</th>
-                    <th class="px-4 py-3">E[Inf.]</th>
-                    <th class="px-4 py-3">E[Score]</th>
+                    <th class="px-4 py-3" title="The best words">Word</th>
+                    <th
+                        class="px-4 py-3 math-header"
+                        title="The probability that this word is the solution."
+                        {@attach renderMath("p(x=\\text{word})")}
+                    ></th>
+                    <th
+                        title="The expected information to gain when guessing this word."
+                        class="px-4 py-3 math-header"
+                        {@attach renderMath("E[\\text{Inf.}]")}
+                    ></th>
+                    <th
+                        title="The expected number of guesses for this wordle when guessing this word."
+                        class="px-4 py-3 math-header"
+                        {@attach renderMath("E[\\text{Score}]")}
+                    ></th>
                 </tr>
             </thead>
 
             <tbody class="divide-y divide-gray-500">
                 {#each d.stats as s}
-                    <tr class="transition-colors hover:bg-gray-50">
+                    <tr
+                        class="transition-colors hover:bg-gray-50"
+                        onclick={() => {
+                            if (insert_guess) {
+                                insert_guess([...s.word]);
+                            }
+                        }}
+                    >
                         <td class="px-4 py-3 font-bold">{s.word}</td>
                         <td class="px-4 py-3"
                             >{s.solution_probability.toFixed(3)}</td
@@ -57,3 +90,13 @@
         {e}
     </div>
 {/await}
+
+<style>
+    .math-header :global(.katex) {
+        font-size: 1em;
+    }
+
+    .math-header :global(.katex .mord) {
+        margin: 0;
+    }
+</style>

web/src/components/WordleLine.svelte

@@ -69,6 +69,13 @@
             class:bg-green-600={colors[i] === Color.GREEN}
             class:bg-yellow-600={colors[i] === Color.YELLOW}
             class:bg-grey-600={colors[i] === Color.GREY}
+            onclick={() => {
+                if (cursor === i) {
+                    colors[cursor] = (colors[cursor] + 1) % 3;
+                } else {
+                    cursor = i;
+                }
+            }}
         >
             {letter}
         </div>