Build a Tic-Tac-Toe Game - Build a Tic-Tac-Toe Game

[hkabeya]

Tell us what’s happening:

Hi all, I can’t just pass the validations tests 9, 10, and 10. My application is working properly following the instructions: it shows “Winner: X” or “Winner: O” or “It’s a Draw!” as the example App does. I don’t really know what should I do at this point. Thanks in advance for your help!

Your code so far

<!-- file: index.html -->

/* file: index.jsx */
const { useState, useRef, useEffect } = React;

export function Board() {
  const [nextPlayer, setNextPlayer] = useState("X");
  const [gameEnd, setGameEnd] = useState(false);
  const btoneRef = useRef(null);
  const bttwoRef = useRef(null);
  const btthreeRef = useRef(null);
  const btfourRef = useRef(null);
  const btfiveRef = useRef(null);
  const btsixRef = useRef(null);
  const btsevenRef = useRef(null);
  const bteightRef = useRef(null);
  const btnineRef = useRef(null);

  const [scores, setScores] = useState([]);
  const [xscores, setXscores] = useState([]);
  const [oscores, setOscores] = useState([]);
  const [winner, setWinner] = useState("");
  const [winning, setWinning] = useState([
    "123","456","789","147","258","369","159","357"
  ]);

  function updateScores(player, id){
      setScores(prev => [...prev,id]);
      if(player === "X"){
        setXscores(prev => [...prev,id]);
      }else{
        setOscores(prev => [...prev,id]);
      }  
    }
    useEffect(() =>{
        //check score and win
      if(xscores.length >= 3 || oscores.length >= 3){
        if(xscores.length >= 3 && checkWinner(xscores)){
            console.log("Winner:X");
            setWinner("Winner: X");
            setGameEnd(true);
        }
        if(oscores.length >= 3 && checkWinner(oscores)){
            console.log("Winner: O");
            setWinner("Winner: O");
            setGameEnd(true);
        }
        //treat draw case here
        if (scores.length === 9 && !winner) {
          setGameEnd(true);
          setWinner("Draw");
        }

      }
    },[xscores, oscores, scores]);

  function checkWinner(playerScores){   
    const finalWin = winning.some(triple => {
      const charTriple = [...triple];      
      return charTriple.every(c => playerScores.includes(Number(c)));         
    });
    return finalWin;
  }

  function handleClick(btnref, id) {
    if (gameEnd || winner) return;
    if (btnref.current.innerText !== "") return;

    btnref.current.innerText = nextPlayer;

    updateScores(nextPlayer, id);
    setNextPlayer(prev => (prev === "X" ? "O" : "X"));
}
  function handleReset(){
    
    setNextPlayer("X");
    setOscores([]);
    setXscores([]);
    setScores([]);
    setGameEnd(false);
    setWinner("");
    document.querySelectorAll(".square").forEach(btn => {
    btn.innerText = "";});
  }

  return(
    <div className="container">
    <p>
  {gameEnd
    ? (winner !=="Draw" ? winner : "It's a Draw!")
    : "Next Player: " + nextPlayer}
</p>
    <div className="board">
      <button className="square" ref={btoneRef} disabled={gameEnd} onClick={e => handleClick(btoneRef,1)}></button>
      <button className="square" ref={bttwoRef} disabled={gameEnd} onClick={e =>handleClick(bttwoRef,2)}></button>      
      <button className="square" ref={btthreeRef} disabled={gameEnd} onClick={e =>handleClick(btthreeRef,3)}></button>
      <button className="square" ref={btfourRef} disabled={gameEnd} onClick={e =>handleClick(btfourRef,4)}></button>
      <button className="square" ref={btfiveRef} disabled={gameEnd} onClick={e =>handleClick(btfiveRef,5)}></button>
      <button className="square" ref={btsixRef} disabled={gameEnd} onClick={e =>handleClick(btsixRef,6)}></button>
      <button className="square" ref={btsevenRef} disabled={gameEnd} onClick={e =>handleClick(btsevenRef,7)}></button>
      <button className="square" ref={bteightRef} disabled={gameEnd} onClick={e =>handleClick(bteightRef,8)}></button>
      <button className="square" ref={btnineRef} disabled={gameEnd} onClick={e =>handleClick(btnineRef,9)}></button>
      </div>
      <button id="reset" onClick={handleReset}>Reset</button>
    </div>
    
  );

}

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Build a Tic-Tac-Toe Game - Build a Tic-Tac-Toe Game

freeCodeCamp.org