Bug: if user does not make any guess, but presses Check button, it processes as if he/she has chosen the right code.

[patobottos]

That is happening because, in the beginning of the game, the Check button is operative, when it shouldn't.

[patobottos]

• Solved making this adjustment to the Board.tsx:

` "use client";

import React, { useEffect, useState } from "react"; import { useGameStore } from "@/utilities/store"; import Circle from "./Circle"; import { initialColorValues } from "./ColorButton"; import ColorButtonRow from "./ColorButtonRow"; import AnswerRow from "./AnswerRow"; import CheckButton from "./CheckButton"; import NewGameButton from "./NewGameButton"; import Lottie from "lottie-react"; import confetti from "@/app/assets/confetti.json";

export default function Board() { const { tryNumber, gameState, playerGuesses, evaluations, randomCode, initializeGame, makeGuess, evaluateGuess, } = useGameStore();

const [isInitialized, setIsInitialized] = useState(false); const [isGuessComplete, setIsGuessComplete] = useState(false);

useEffect(() => { initializeGame(); setIsInitialized(true); }, [initializeGame]);

useEffect(() => { if (playerGuesses.length === 0) return; const currentGuess = playerGuesses[tryNumber - 1]?.guess || initialColorValues; const complete = currentGuess.every( (color) => color.color !== "transparent" ); setIsGuessComplete(complete); console.log("Guess completeness updated:", complete); }, [playerGuesses, tryNumber]);

useEffect(() => { // Reset isGuessComplete when tryNumber changes setIsGuessComplete(false); console.log("New try started, guess completeness reset"); }, [tryNumber]);

const handleColorChange = (color: string, position: number) => { makeGuess(position, color); const currentGuess = playerGuesses[tryNumber - 1]?.guess || initialColorValues; const newGuess = currentGuess.map((g, index) => index === position ? { ...g, color } : g ); const complete = newGuess.every((color) => color.color !== "transparent"); setIsGuessComplete(complete); console.log("Color changed, guess completeness updated:", complete); };

const handleCheckButtonClick = () => { const currentGuess = playerGuesses[tryNumber - 1]?.guess || initialColorValues; if (currentGuess.some((color) => color.color === "transparent")) { alert("Please, pick a color for each circle and try again."); return; } evaluateGuess(); };

const handleNewGameClick = () => { initializeGame(); setIsGuessComplete(false); // Reset the guess completion state };

const playersChances = [1, 2, 3, 4, 5, 6, 7, 8];

return (

Random Generated Code:

{randomCode.map((CodePosition, index) => ( ))}

{tryNumber <= 7 ? (

You have {9 - tryNumber} tries left.

) : (

You have 1 try left. Come on!

)}

{/* THESE ARE THE 8 ROWS CORRESPONDING TO THE 8 GUESS TRIES */}

{playersChances.map((_, index) => (

handleColorChange(color, position) } isEnabled={index + 1 === tryNumber && gameState === "playing"} />

))}

{gameState === "playing" && ( )} {/* THIS IS THE FINAL SCREEN */} {gameState !== "playing" && (

{/* CONFETTI ANIMATION FOR THE WINNERS!*/} {gameState === "won" && (

Congratulations! You've won! It has taken you{" "} {tryNumber === 1 ? "just one try! The average is A NUMBER HERE." : `${tryNumber} tries. The average is A NUMBER HERE.`}

{randomCode.map((CodePosition, index) => ( ))}

)} {gameState === "lost" && (

You've reached the maximum number of tries. You've lost. The answer code was:

{randomCode.map((CodePosition, index) => ( ))}

Let's start a new game.

)}

)}

); } `

The only doubt that remains: we are now using 3 useEffects in the same file... while I was taught to keep them to 1 or 2 max per file... Anyway, is working.