feat(web): solver input

web/src/App.svelte

@@ -1,33 +1,64 @@
 <script lang="ts">
-	let count = $state(0);
+    import { Color, Solver } from "wordle-solver";
+  import WordleLine from "./components/WordleLine.svelte"
 
-	function increment() {
-		count += 1;
+  let guesses = $state([{
+    letters: ["", "", "", "", ""],
+    colors: [Color.GREY, Color.GREY, Color.GREY, Color.GREY, Color.GREY]
+  }]);
 
-	}
+  let cursor = $state(0);
+
+  let solver = Solver.new();
+
+  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") {
+      cursor = 0;
+      const guess = guesses[guesses.length-1];
+
+      solver.guess(guess.letters.join(""), guess.colors)
+      solution_space = solver.solution_space();
+      solution_space_uncertainty = solver.solution_space_uncertainty();
+      info_gained = solver.guess_infos();
+
+      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">
-			svelte tests
+			Wordle Solver
 		</h1>
 
-		<button
-			onclick={increment}
-			class="
-				rounded-lg
-				bg-blue-600
-				px-5 py-2.5
-				font-semibold
-				text-white
-				shadow-lg
-				transition
-				hover:bg-blue-500
-				active:scale-95
-			"
-		>
-			Clicked {count} {count === 1 ? "time" : "times"}
-		</button>
+    <p class="mt-4 text-sm text-zinc-500">
+      Solution-space: {solution_space} · {solution_space_uncertainty.toFixed(2)}bits
+    </p>
+
+    <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}
+    </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/WordleLine.svelte

@@ -0,0 +1,71 @@
+<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();
+
+    function handleKey(event: KeyboardEvent) {
+        if (!active) {
+          return;
+        }
+        if (/^[a-zA-Z]$/.test(event.key)) {
+            letters[cursor] = event.key.toUpperCase();
+
+            if (cursor < 4) {
+                cursor++;
+            } else {
+                cursor = 0;
+            }
+        }
+
+        if (event.key === "Backspace") {
+            if (letters[cursor] === "" && cursor > 0) {
+                cursor--;
+            }
+
+            if (active) {
+              letters[cursor] = "";
+            }
+        }
+
+        if (event.key === "ArrowLeft") {
+            cursor = Math.max(0, cursor - 1);
+        }
+
+        if (event.key === "ArrowRight") {
+            cursor = Math.min(4, cursor + 1);
+        }
+
+        if (event.key === " ") {
+            colors[cursor] = (colors[cursor] + 1) % 3;
+        }
+    }
+</script>
+
+<svelte:window onkeydown={handleKey} />
+
+<div class="flex justify-center gap-2">
+    {#each letters as letter, i}
+        <div
+            class="
+                flex h-16 w-16 items-center justify-center
+                rounded-lg border-2
+                text-3xl font-bold
+                transition-all
+            "
+            class:border-blue-500={i === cursor && active}
+            class:border-zinc-700={i !== cursor || !active}
+            class:bg-green-600={colors[i] === Color.GREEN}
+            class:bg-yellow-600={colors[i] === Color.YELLOW}
+            class:bg-grey-600={colors[i] === Color.GREY}
+        >
+            {letter}
+        </div>
+    {/each}
+  <span class="w-12 text-sm text-zinc-500 self-center">{
+    (info_gained !== null) ? info_gained.toFixed(2) + "bits" : '↵'
+  }</span>
+</div>