feat(web): solver input

2026-08-20 19:04:10 +02:00
parent ae2cf56081
commit 27c308d632
4 changed files with 151 additions and 33 deletions
@@ -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>