feat(web): use input types as cells

web/src/App.svelte

@@ -15,7 +15,7 @@
     } from "./solver/types.ts";
     import SolverOutput from "./components/SolverOutput.svelte";
     import { FolderGit2 } from "@lucide/svelte";
-    ("@lucide/svelte");
+    import { tick } from "svelte";
 
     let guesses = $state([
         {
@@ -41,6 +41,7 @@
     let best_words: Promise<EvaluateWordsResult> | null = $state(null);
     let best_words_progress: EvaluateWordsProgress | null = $state(null);
 
+    let w_lines: WordleLine[] = [];
     let cursor = $state(0);
 
     async function reset() {
@@ -72,8 +73,10 @@
         }
     }
 
-    function handleKey(event: KeyboardEvent) {
-        if (event.key === "Enter" && event.shiftKey) {
+    async function handleKey(event: KeyboardEvent) {
+        if (/^[a-zA-Z ]$/.test(event.key)) {
+            w_lines[guesses.length - 1].focus();
+        } else if (event.key === "Enter" && event.shiftKey) {
             best_words = solver_evaluate_words(5, (p) => {
                 best_words_progress = p;
             });
@@ -105,6 +108,10 @@
                     Color.GREY,
                 ],
             });
+
+            await tick();
+
+            w_lines[w_lines.length - 1].focus();
         }
     }
 </script>
@@ -154,6 +161,7 @@
             {#each guesses as g, i (g)}
                 <WordleLine
                     active={i === guesses.length - 1}
+                    bind:this={w_lines[i]}
                     bind:cursor
                     bind:letters={guesses[i].letters}
                     bind:colors={guesses[i].colors}

web/src/components/SolverOutput.svelte

@@ -13,7 +13,7 @@
     }: {
         data: Promise<EvaluateWordsResult>;
         progress: EvaluateWordsProgress | null;
-        insert_guess: (word: string[]) => void | null;
+        insert_guess: ((word: string[]) => void) | null;
     } = $props();
 
     function renderMath(txt: string | null) {

web/src/components/WordleLine.svelte

@@ -15,19 +15,16 @@
         info_gained = null,
     } = $props();
 
+    let inputs: HTMLInputElement[] = [];
+
+    export function focus() {
+        inputs[cursor].focus();
+    }
+
     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) {
@@ -41,10 +38,12 @@
 
         if (event.key === "ArrowLeft") {
             cursor = Math.max(0, cursor - 1);
+            inputs[cursor].focus();
         }
 
         if (event.key === "ArrowRight") {
             cursor = Math.min(4, cursor + 1);
+            inputs[cursor].focus();
         }
 
         if (event.key === " ") {
@@ -57,18 +56,39 @@
 
 <div class="flex justify-center gap-2">
     {#each letters as letter, i}
-        <div
+        <input
+            disabled={!active}
+            tabindex="-1"
             class="
                 flex h-16 w-16 items-center justify-center
                 rounded-lg border-2
                 text-3xl font-bold
-                transition-all
+                transition-all text-center caret-transparent
+                focus:outline-none
             "
+            bind:this={inputs[i]}
+            bind:value={letters[i]}
             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}
+            onbeforeinput={(event) => {
+                if (event.inputType === "insertText") {
+                    event.preventDefault();
+                    let key = event.data ?? "";
+
+                    if (/^[a-zA-Z]$/.test(key)) {
+                        letters[i] = key.toUpperCase();
+                        if (cursor < 4) {
+                            cursor++;
+                        } else {
+                            cursor = 0;
+                        }
+                        inputs[cursor].focus();
+                    }
+                }
+            }}
             onclick={() => {
                 if (!active) {
                     return;
@@ -79,9 +99,7 @@
                     cursor = i;
                 }
             }}
-        >
-            {letter}
-        </div>
+        />
     {/each}
     <span
         class="w-16 text-sm text-zinc-500 self-center flex items-center justify-center"