fix: worldle game mode

Author: TwoZer00

src/games/Worldle.jsx

@@ -285,55 +285,22 @@ export default function Worldle() {
     setStarted(true);
   };
 
-  useEffect(() => {
-    if (started) containerRef.current?.focus();
-  }, [started, guesses, gameState]);
-
-  if (rawDataset.length <= 0) {
-    return <Navigate replace to="/games" />;
-  }
-
-  if (!started || !answer) {
-    return (
-      <OptionsScreen
-        dataset={rawDataset}
-        onStart={handleStart}
-      />
-    );
-  }
+  const answerName = answer?.name?.common || "";
+  const template = useMemo(() => buildTemplate(answerName), [answerName]);
+  const letterSlots = useMemo(() => template.reduce((count, ch) => count + (ch === null ? 1 : 0), 0), [template]);
 
-  const answerName = answer.name.common;
-  const template = buildTemplate(answerName);
-  const letterSlots = template.reduce((count, ch) => count + (ch === null ? 1 : 0), 0);
-
-  // Dynamic cell size: fit within container, min 28px, max 48px
-  const totalChars = answerName.length;
-  const cellSize = Math.max(28, Math.min(48, Math.floor(320 / totalChars)));
-  const spaceSize = Math.max(8, cellSize * 0.35);
-  const fontSize = cellSize * 0.4;
-
-  const buildGuess = (letters) => {
-    let li = 0;
-    return template.map((ch) => (ch !== null ? ch : letters[li++] || "")).join("");
-  };
-
-  const isFilled = letterInput.length === letterSlots;
-
-  const showMessage = (msg) => {
-    setMessage(msg);
-    setTimeout(() => setMessage(""), 1500);
-  };
-
-  const submitGuess = () => {
-    if (gameState !== "playing") return;
-    if (!isFilled) {
+  const submitGuess = useCallback(() => {
+    if (gameState !== "playing" || !answer) return;
+    if (letterInput.length !== letterSlots) {
       setShake(true);
-      showMessage(`Fill all ${letterSlots} letters`);
+      setMessage(`Fill all ${letterSlots} letters`);
+      setTimeout(() => setMessage(""), 1500);
       setTimeout(() => setShake(false), 500);
       return;
     }
 
-    const full = buildGuess(letterInput);
+    let li = 0;
+    const full = template.map((ch) => (ch !== null ? ch : letterInput[li++] || "")).join("");
     const newGuesses = [...guesses, full];
     setGuesses(newGuesses);
     setLetterInput([]);
@@ -346,7 +313,7 @@ export default function Worldle() {
       setGameState("lost");
       setStats((prev) => ({ correct: prev.correct, wrong: prev.wrong + 1 }));
     }
-  };
+  }, [gameState, answer, letterInput, letterSlots, template, guesses, answerName]);
 
   const processKey = useCallback((key) => {
     if (gameState !== "playing") return;
@@ -364,6 +331,35 @@ export default function Worldle() {
     }
   }, [letterInput, letterSlots, gameState, submitGuess]);
 
+  useEffect(() => {
+    if (started) containerRef.current?.focus();
+  }, [started, guesses, gameState]);
+
+  if (rawDataset.length <= 0) {
+    return <Navigate replace to="/games" />;
+  }
+
+  if (!started || !answer) {
+    return (
+      <OptionsScreen
+        dataset={rawDataset}
+        onStart={handleStart}
+      />
+    );
+  }
+
+  const totalChars = answerName.length;
+  const cellSize = Math.max(28, Math.min(48, Math.floor(320 / totalChars)));
+  const spaceSize = Math.max(8, cellSize * 0.35);
+  const fontSize = cellSize * 0.4;
+
+  const buildGuess = (letters) => {
+    let li = 0;
+    return template.map((ch) => (ch !== null ? ch : letters[li++] || "")).join("");
+  };
+
+  const isFilled = letterInput.length === letterSlots;
+
   const handleKeyDown = (e) => {
     if (gameState !== "playing") return;
     if (e.key === "Enter") e.preventDefault();