From 6e6e1b67ec99900b7e22a2495b51952b9d94c6b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20R=C3=B6ger?= <jonas.roeger@tu-dortmund.de>
Date: Sun, 23 Aug 2026 01:18:22 +0200
Subject: [PATCH] feat(web): make ivalid guesses visually irrelevant

---
 web/src/components/WordleLine.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/src/components/WordleLine.svelte b/web/src/components/WordleLine.svelte
index 414206c..5b48a9b 100644
--- a/web/src/components/WordleLine.svelte
+++ b/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>