From 27c308d632ac9658bd6c2b83c3c301c8ead6a729 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20R=C3=B6ger?= <jonas.roeger@tu-dortmund.de>
Date: Thu, 20 Aug 2026 19:04:10 +0200
Subject: [PATCH] feat(web): solver input

---
 src/lib/solver.rs                    | 17 +++++--
 src/lib/wasm.rs                      | 23 +++++----
 web/src/App.svelte                   | 73 ++++++++++++++++++++--------
 web/src/components/WordleLine.svelte | 71 +++++++++++++++++++++++++++
 4 files changed, 151 insertions(+), 33 deletions(-)
 create mode 100644 web/src/components/WordleLine.svelte

diff --git a/src/lib/solver.rs b/src/lib/solver.rs
index ad11e0e..0086c44 100644
--- a/src/lib/solver.rs
+++ b/src/lib/solver.rs
@@ -7,9 +7,9 @@ use crate::word_list::WordList;
 use derive_more::Display;
 use tabular::{Row, Table};
 
-struct Guess {
-    pattern: Pattern,
-    information_gained: f64,
+pub struct Guess {
+    pub pattern: Pattern,
+    pub information_gained: f64,
 }
 
 pub struct Solver {
@@ -141,6 +141,17 @@ impl Solver {
         table.to_string()
     }
 
+    pub fn guesses(&self) -> &Vec<Guess> {
+        &self.guesses
+    }
+
+    pub fn stats(&self) -> (u64, f64) {
+        (
+            self.possible_solutions.len() as u64,
+            self.possible_solutions.equal_likelieness_entropy(),
+        )
+    }
+
     pub fn tabular_format(&self) -> String {
         let mut table = Table::new("{:<} | {:<}");
 
diff --git a/src/lib/wasm.rs b/src/lib/wasm.rs
index ce9e14c..bbe268e 100644
--- a/src/lib/wasm.rs
+++ b/src/lib/wasm.rs
@@ -21,11 +21,6 @@ pub enum Color {
     GREEN,
 }
 
-#[wasm_bindgen]
-extern "C" {
-    pub fn alert(msg: &str);
-}
-
 #[allow(dead_code)]
 #[wasm_bindgen]
 impl Solver {
@@ -50,14 +45,24 @@ impl Solver {
                 .collect(),
         )?;
 
-        alert(&format!("{:?}", pat));
-
         self.0.apply_guess(pat)?;
 
         Ok(())
     }
 
-    pub fn stats(&self) -> String {
-        self.0.tabular_format()
+    pub fn guess_infos(&self) -> Vec<f64> {
+        self.0
+            .guesses()
+            .iter()
+            .map(|g| g.information_gained)
+            .collect()
+    }
+
+    pub fn solution_space(&self) -> u64 {
+        self.0.stats().0
+    }
+
+    pub fn solution_space_uncertainty(&self) -> f64 {
+        self.0.stats().1
     }
 }
diff --git a/web/src/App.svelte b/web/src/App.svelte
index 34c394f..a907521 100644
--- a/web/src/App.svelte
+++ b/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>
diff --git a/web/src/components/WordleLine.svelte b/web/src/components/WordleLine.svelte
new file mode 100644
index 0000000..94e275f
--- /dev/null
+++ b/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>