feat(web): add async solver worker

src/lib/solver.rs

@@ -75,7 +75,7 @@ impl Solver {
             - new_possible_solutions.equal_likelieness_entropy();
 
         if new_possible_solutions.len() == 0 {
-            return Err("Solution space is empty".to_string());
+            return Err("Applying this guess would empty the solution space!".to_string());
         }
 
         self.possible_solutions = new_possible_solutions;

web/src/App.svelte

@@ -1,64 +1,80 @@
 <script lang="ts">
-    import { Color, Solver } from "wordle-solver";
-  import WordleLine from "./components/WordleLine.svelte"
+    import { Color } from "wordle-solver";
+    import WordleLine from "./components/WordleLine.svelte";
+    import { solver_guess } from "./solver/solver.ts";
 
-  let guesses = $state([{
-    letters: ["", "", "", "", ""],
-    colors: [Color.GREY, Color.GREY, Color.GREY, Color.GREY, Color.GREY]
-  }]);
+    let guesses = $state([
+        {
+            letters: ["", "", "", "", ""],
+            colors: [
+                Color.GREY,
+                Color.GREY,
+                Color.GREY,
+                Color.GREY,
+                Color.GREY,
+            ],
+        },
+    ]);
 
-  let cursor = $state(0);
+    let infos_gained: (Promise<number> | null)[] = $state([null]);
 
-  let solver = Solver.new();
+    let cursor = $state(0);
 
-  let info_gained = $state(solver.guess_infos());
-  let solution_space = $state(solver.solution_space());
-  let solution_space_uncertainty = $state(solver.solution_space_uncertainty());
+    function handleKey(event: KeyboardEvent) {
+        if (event.key === "Enter") {
+            const guess = guesses[guesses.length - 1];
 
-  function handleKey(event: KeyboardEvent) {
-    if (event.key === "Enter") {
-      cursor = 0;
-      const guess = guesses[guesses.length-1];
+            if (guess.letters.join("").length != 5) {
+                return;
+            }
 
-      solver.guess(guess.letters.join(""), guess.colors)
-      solution_space = solver.solution_space();
-      solution_space_uncertainty = solver.solution_space_uncertainty();
-      info_gained = solver.guess_infos();
+            infos_gained[infos_gained.length - 1] = solver_guess(
+                guess.letters,
+                guess.colors,
+            );
+            infos_gained.push(null);
 
-      guesses.push({
-        letters: ["", "", "", "", ""],
-        colors: [Color.GREY, Color.GREY, Color.GREY, Color.GREY, Color.GREY]
-      });
+            cursor = 0;
+
+            guesses.push({
+                letters: ["", "", "", "", ""],
+                colors: [
+                    Color.GREY,
+                    Color.GREY,
+                    Color.GREY,
+                    Color.GREY,
+                    Color.GREY,
+                ],
+            });
+        }
     }
-  }
 </script>
 
 <svelte:window onkeydown={handleKey} />
 
-<div class="min-h-screen bg-zinc-950 text-zinc-100 flex items-center justify-center">
-	<div class="text-center">
-		<h1 class="mb-6 text-3xl font-bold">
-			Wordle Solver
-		</h1>
+<div
+    class="min-h-screen bg-zinc-950 text-zinc-100 flex items-center justify-center"
+>
+    <div class="text-center">
+        <h1 class="mb-6 text-3xl font-bold">Wordle Solver</h1>
 
-    <p class="mt-4 text-sm text-zinc-500">
-      Solution-space: {solution_space} · {solution_space_uncertainty.toFixed(2)}bits
-    </p>
+        <p class="mt-4 text-sm text-zinc-500">SolutionSpace</p>
 
-    <div class="mt-4 flex flex-col gap-2">
-      {#each guesses as g,i (g)}
-        <WordleLine active={i === guesses.length-1}
+        <div class="mt-4 flex flex-col gap-2">
+            {#each guesses as g, i (g)}
+                <WordleLine
+                    active={i === guesses.length - 1}
                     bind:cursor
                     bind:letters={guesses[i].letters}
                     bind:colors={guesses[i].colors}
-                    info_gained={i < info_gained.length ? info_gained[i] : null}
-        />
-      {/each}
+                    info_gained={infos_gained[i]}
+                />
+            {/each}
+        </div>
+
+        <p class="mt-4 text-sm text-zinc-500">
+            Type letters · ← → navigate · Space cycle color · Backspace delete ·
+            Enter apply
+        </p>
     </div>
-
-
-    <p class="mt-4 text-sm text-zinc-500">
-        Type letters · ← → navigate · Space cycle color · Backspace delete · Enter apply
-    </p>
-	</div>
 </div>

web/src/components/SolverOutput.svelte

@@ -0,0 +1,2 @@
+<script lang="ts">
+</script>

web/src/components/WordleLine.svelte

@@ -1,15 +1,23 @@
 <script lang="ts">
     import { Color } from "wordle-solver";
 
-    let { active=false,
-          cursor=$bindable(0),
-          letters=$bindable(["", "", "", "", ""]),
-          colors=$bindable([Color.GREY, Color.GREY, Color.GREY, Color.GREY, Color.GREY]),
-          info_gained=null } = $props();
+    let {
+        active = false,
+        cursor = $bindable(0),
+        letters = $bindable(["", "", "", "", ""]),
+        colors = $bindable([
+            Color.GREY,
+            Color.GREY,
+            Color.GREY,
+            Color.GREY,
+            Color.GREY,
+        ]),
+        info_gained = null,
+    } = $props();
 
     function handleKey(event: KeyboardEvent) {
         if (!active) {
-          return;
+            return;
         }
         if (/^[a-zA-Z]$/.test(event.key)) {
             letters[cursor] = event.key.toUpperCase();
@@ -27,7 +35,7 @@
             }
 
             if (active) {
-              letters[cursor] = "";
+                letters[cursor] = "";
             }
         }
 
@@ -65,7 +73,25 @@
             {letter}
         </div>
     {/each}
-  <span class="w-12 text-sm text-zinc-500 self-center">{
-    (info_gained !== null) ? info_gained.toFixed(2) + "bits" : '↵'
-  }</span>
+    <span
+        class="w-12 text-sm text-zinc-500 self-center flex items-center justify-center"
+    >
+        {#if info_gained === null}
+            ↵
+        {:else}
+            {#await info_gained}
+                <div
+                    class="size-3 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700"
+                ></div>
+            {:then i}
+                {i.toFixed(2)}
+            {:catch e}
+                <span
+                    title={e}
+                    class="lex size-4 items-center justify-center rounded-full border border-red-500 text-[10px] font-bold text-red-500"
+                    >!</span
+                >
+            {/await}
+        {/if}
+    </span>
 </div>

web/src/solver/solver.ts

@@ -0,0 +1,48 @@
+import type { Color } from "wordle-solver";
+import SolverWorker from "./worker?worker";
+import type { SolverRequest, SolverResponse } from "./types";
+
+let solver_worker = new SolverWorker();
+
+let msg_id = 0;
+
+const pending = new Map<number, {
+  resolve: (value: unknown) => void;
+  reject: (error: unknown) => void;
+}>();
+
+export function solver_guess(word: string[], colors: Color[]): Promise<number> {
+  const id = msg_id++;
+
+  return new Promise((resolve, reject) => {
+    pending.set(id, { resolve, reject });
+
+    const r: SolverRequest = {
+      type: "guess",
+      id: id,
+      input: { word: word, colors: colors },
+    };
+    
+    solver_worker.postMessage(JSON.parse(JSON.stringify(r)));
+  });
+}
+
+
+solver_worker.onmessage = (event: MessageEvent<SolverResponse>) => {
+  let res = event.data;
+  const pendingRequest = pending.get(res.id);
+
+  if (!pendingRequest) {
+    return;
+  }
+
+  pending.delete(res.id);
+  
+  if (res.error) {
+    pendingRequest.reject(res.result);
+  } else if (res.type == "guess") {
+    pendingRequest.resolve(res.result.info_gained);
+  } else if (event.type == "evaluate_words") {
+    pendingRequest.resolve(res.result.stats);
+  }
+};

web/src/solver/types.ts

@@ -0,0 +1,44 @@
+import { Color } from "wordle-solver";
+
+export type SolverRequest =
+  | {
+    type: "guess",
+    id: number,
+    input: Guess
+  }
+  | {
+    type: "evaluate_words",
+    id: number,
+    input: EvaluateWords
+  };
+
+export type SolverResponse =
+  | {
+    type: "guess",
+    id: number,
+    error: boolean,
+    result: GuessResult | string
+  }
+  | {
+    type: "evaluate_words",
+    id: number,
+    error: boolean,
+    result: EvaluateWordsResult | string
+  };
+
+export type Guess = {
+  word: string[],
+  colors: Color[]
+};
+export type GuessResult = {
+  info_gained: number,
+};
+export type EvaluateWords = {
+  n: number,
+};
+export type WordStats = {
+  word: string,
+};
+export type EvaluateWordsResult = {
+  stats: WordStats[]
+};

web/src/solver/worker.ts

@@ -0,0 +1,54 @@
+import { Solver } from "wordle-solver";
+import type { SolverRequest, SolverResponse } from "./types";
+
+
+let solver = Solver.new();
+
+self.onmessage = (event: MessageEvent<SolverRequest>) => {
+  const request = event.data;
+
+  switch (request.type) {
+    case "guess": {
+      try {
+        solver.guess(request.input.word.join(""), request.input.colors);
+        const infos = solver.guess_infos();
+
+        const response: SolverResponse = {
+          type: "guess",
+          id: request.id,
+          error: false,
+          result: { info_gained: infos[infos.length - 1] }
+        };
+
+        self.setTimeout(() => {
+          self.postMessage(JSON.parse(JSON.stringify(response)));
+        }, 1000);
+      } catch (e) {
+        const response: SolverResponse = {
+          type: "guess",
+          id: request.id,
+          error: true,
+          result: e,
+        };
+
+        self.setTimeout(() => {
+          self.postMessage(JSON.parse(JSON.stringify(response)));
+        }, 1000);
+      }
+
+
+      break;
+    };
+    case "evaluate_words": {
+      const response: SolverResponse = {
+        type: "evaluate_words",
+        id: request.id,
+        error: true,
+        result: "Not implemented"
+      };
+
+      self.postMessage(JSON.parse(JSON.stringify(response)));
+      break;
+    };
+  }
+};