feat(web): use input types as cells

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"