feat(web): make ivalid guesses visually irrelevant

web/src/components/WordleLine.svelte

@@ -24,7 +24,20 @@
         on_guess_pressed: (() => void) | null;
     } = $props();
 
+    let invalid: boolean = $state(false);
     let inputs: HTMLInputElement[] = $state([]);
+    let info_gained_wrapped: Promise<GuessResult> | null = $state(null);
+
+    $effect(() => {
+        if (info_gained) {
+            info_gained_wrapped = info_gained.catch((e) => {
+                invalid = true;
+                throw e;
+            });
+        } else {
+            info_gained_wrapped = null;
+        }
+    });
 
     export function focus() {
         inputs[cursor].focus();
@@ -86,6 +99,7 @@
             class:bg-green-600={colors[i] === Color.GREEN}
             class:bg-yellow-600={colors[i] === Color.YELLOW}
             class:bg-grey-600={colors[i] === Color.GREY}
+            class:opacity-20={invalid}
             onblur={() => {
                 cursor = -1;
             }}
@@ -123,10 +137,10 @@
         class="max-w-14 w-1/6 text-sm text-zinc-500 self-center flex items-center justify-center"
         onclick={info_gained === null ? on_guess_pressed : null}
     >
-        {#if info_gained === null}
+        {#if info_gained_wrapped === null}
             ↵
         {:else}
-            {#await info_gained}
+            {#await info_gained_wrapped}
                 <div
                     class="size-3 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700"
                 ></div>