feat(web): ui improvements

- flex-wrap elements
- refine output table
- reset state

web/src/App.svelte

@@ -80,8 +80,10 @@
             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") {
-            stopSolver();
+            await stopSolver();
         } else if (event.key === "Enter") {
             const guess = guesses[guesses.length - 1];
 
@@ -119,7 +121,12 @@
 <svelte:window onkeydown={handleKey} />
 
 <div
-    class="min-h-screen bg-zinc-950 text-zinc-100 flex items-center justify-center gap-8"
+    class="min-h-screen w-full max-w-full
+           bg-zinc-950 text-zinc-100
+           flex flex-wrap
+           items-center justify-center p-10 gap-2
+           overflow-x-hidden
+  "
 >
     <a
         class="fixed top-4 right-4"
@@ -129,9 +136,9 @@
         <FolderGit2 />
     </a>
     <div class="text-center">
-        <h1 class="mb-6 text-3xl font-bold">Wordle Solver</h1>
+        <h1 class="mb-4 text-3xl font-bold">Wordle Solver</h1>
 
-        <p class="mt-4 text-sm text-zinc-500">
+        <p class="text-sm text-zinc-500">
             Use Wordle-Answers:
             <input
                 type="checkbox"
@@ -145,7 +152,7 @@
             />
         </p>
 
-        <p class="mt-2 text-sm text-zinc-500">
+        <p class="mt-0 text-sm text-zinc-500">
             {#await solution_space}
                 loading
             {:then s}
@@ -157,7 +164,7 @@
             {/await}
         </p>
 
-        <div class="ml-16 mt-4 flex flex-col gap-2">
+        <div class="ml-16 mt-2 flex flex-col gap-2">
             {#each guesses as g, i (g)}
                 <WordleLine
                     active={i === guesses.length - 1}
@@ -172,7 +179,8 @@
 
         <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 · Escape reset
+            Enter apply · Shift+Enter solve · Escape abort solver · Ctrl+Esc
+            reset
         </p>
     </div>
     {#if best_words}

web/src/components/SolverOutput.svelte

@@ -28,7 +28,9 @@
 </script>
 
 {#await data}
-    <div class="flex items-center justify-center gap-2 p-6 text-gray-600">
+    <div
+        class="flex items-center justify-center gap-2 text-gray-600 max-w-full"
+    >
         Solving...
         {#if progress}
             <span class="text-sm">
@@ -37,7 +39,7 @@
         {/if}
     </div>
 {:then d}
-    <div class="overflow-x-auto rounded-lg border border-gray-500 shadow-sm">
+    <div class="rounded-lg border border-gray-500 shadow-sm max-w-full">
         <table class="w-full text-left text-sm text-gray-700">
             <thead class="bg-gray-800 text-xs uppercase text-gray-600">
                 <tr>
@@ -46,7 +48,7 @@
                     <th
                         class="px-4 py-3 math-header"
                         title="The probability that this word is the solution."
-                        {@attach renderMath("p(x=\\text{word})")}
+                        {@attach renderMath("p(x)")}
                     ></th>
                     <th
                         title="The expected information to gain when guessing this word."
@@ -73,15 +75,15 @@
                     >
                         <td class="px-4 py-3 font-bold">#{i + 1}</td>
                         <td class="px-4 py-3 font-bold">{s.word}</td>
-                        <td class="px-4 py-3"
+                        <td class="px-4 py-3">
-                            >{s.solution_probability.toFixed(3)}</td
+                            {(s.solution_probability * 100).toFixed(2) + "%"}
-                        >
+                        </td>
-                        <td class="px-4 py-3"
+                        <td class="px-4 py-3">
-                            >{s.expected_information_gained.toFixed(3)}</td
+                            {s.expected_information_gained.toFixed(2)} bits
-                        >
+                        </td>
-                        <td class="px-4 py-3"
+                        <td class="px-4 py-3">
-                            >{s.expected_score_after_guess.toFixed(3)}</td
+                            {s.expected_score_after_guess.toFixed(3)}
-                        >
+                        </td>
                     </tr>
                 {/each}
             </tbody>