feat(web): add solver output

2026-08-21 15:49:24 +02:00
parent 8d501d42a3
commit 7667ff24cd
9 changed files with 238 additions and 25 deletions
@@ -1,2 +1,59 @@
 <script lang="ts">
+    import type {
+        EvaluateWordsProgress,
+        EvaluateWordsResult,
+    } from "../solver/types";
+
+    let {
+        data,
+        progress = null,
+    }: {
+        data: Promise<EvaluateWordsResult>;
+        progress: EvaluateWordsProgress | null;
+    } = $props();
 </script>
+
+{#await data}
+    <div class="flex items-center justify-center gap-2 p-6 text-gray-600">
+        Solving...
+        {#if progress}
+            <span class="text-sm">
+                {progress.i} / {progress.n}
+            </span>
+        {/if}
+    </div>
+{:then d}
+    <div class="overflow-x-auto rounded-lg border border-gray-500 shadow-sm">
+        <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>
+                </tr>
+            </thead>
+
+            <tbody class="divide-y divide-gray-500">
+                {#each d.stats as s}
+                    <tr class="transition-colors hover:bg-gray-50">
+                        <td class="px-4 py-3 font-bold">{s.word}</td>
+                        <td class="px-4 py-3"
+                            >{s.solution_probability.toFixed(3)}</td
+                        >
+                        <td class="px-4 py-3"
+                            >{s.expected_information_gained.toFixed(3)}</td
+                        >
+                        <td class="px-4 py-3"
+                            >{s.expected_score_after_guess.toFixed(3)}</td
+                        >
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
+{:catch e}
+    <div class="rounded-lg border border-red-200 bg-red-50 p-4 text-red-700">
+        {e}
+    </div>
+{/await}