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

JavaScript
1

Tell us what’s happening:

I have disabled the buttons and have messages being displayed for wins and draws but steps 9, 10, 11 do not pass.

Your code so far

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

<head>
    <meta charset="UTF-8" />
    <title>Tic-Tac-Toe</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { Board } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<Board />);
    </script>
</body>

</html>

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

export function Board() {
  
  const [roundEnded, setRoundEnded] = useState(false);
  const [turn, setTurn] = useState("X");
  const [boardArr, setBoardArr] = useState(["", "", "", "", "", "", "", "", ""]);
  const [gameResult, setGameResult] = useState("Player X's Turn");


  function updateBoardArr(index){
    const newBoard = [...boardArr];
    newBoard[index] = turn;
    setBoardArr(newBoard);
  }
  
  function handleButtonClick(index){
    updateBoardArr(index);
    setTurn(prev => (prev === "X" ? "O" : "X"));
  }

  function handleReset(){
    setTurn("X");
    setBoardArr(["", "", "", "", "", "", "", "", ""]);
    setGameResult("Player X's Turn");
    setRoundEnded(false);
  }

  const winningConditions = [
    [0, 1, 2], // Top row
    [3, 4, 5], // Middle row
    [6, 7, 8], // Bottom row
    [0, 3, 6], // Left column
    [1, 4, 7], // Middle column
    [2, 5, 8], // Right column
    [0, 4, 8], // Diagonal-1
    [2, 4, 6]  // Diagonal-2
  ];

  function checkWinner() {
    if(roundEnded) return;
    
    for (let i = 0; i < winningConditions.length; i++) {
    const [x, y, z] = winningConditions[i];
    const a = boardArr[x];
    const b = boardArr[y];
    const c = boardArr[z];

    if (a && a === b && a === c) {
      setRoundEnded(true);
      setGameResult(`Player ${a} has Won!`);
      return;
    }
  }

  if (!roundEnded && !boardArr.includes("")) {
    setRoundEnded(true);
    setGameResult("Game has ended in a draw!");
  }
}

  useEffect(() => {
    if (!roundEnded) {
      setGameResult(`Player ${turn}'s Turn`);
    }
  }, [turn, roundEnded]);

   useEffect(() => {
    checkWinner();
  }, [boardArr]);

  return (
    <div className="content">
      <h1>A Game of Tic-Tac-Toe</h1>
      <h2>{gameResult}</h2>
      <div className="game-board">
        <button className="square" disabled={boardArr[0] !== "" || roundEnded} onClick={() => handleButtonClick(0)}>
          {boardArr[0]}
        </button>
        <button className="square" disabled={boardArr[1] !== "" || roundEnded} onClick={() => handleButtonClick(1)}>
          {boardArr[1]}
        </button>
        <button className="square" disabled={boardArr[2] !== "" || roundEnded} onClick={() => handleButtonClick(2)}>
          {boardArr[2]}
        </button>
        <button className="square" disabled={boardArr[3] !== "" || roundEnded} onClick={() => handleButtonClick(3)}>
          {boardArr[3]}
        </button>
        <button className="square" disabled={boardArr[4] !== "" || roundEnded} onClick={() => handleButtonClick(4)}>
          {boardArr[4]}
        </button>
        <button className="square" disabled={boardArr[5] !== "" || roundEnded} onClick={() => handleButtonClick(5)}>
          {boardArr[5]}
        </button>
        <button className="square" disabled={boardArr[6] !== "" || roundEnded} onClick={() => handleButtonClick(6)}>
          {boardArr[6]}
        </button>
        <button className="square" disabled={boardArr[7] !== "" || roundEnded} onClick={() => handleButtonClick(7)}>
          {boardArr[7]}
        </button>
        <button className="square" disabled={boardArr[8] !== "" || roundEnded} onClick={() => handleButtonClick(8)}>
          {boardArr[8]}
        </button>
      </div>
      <button onClick={handleReset} id="reset">Reset Game</button>
    </div>
  )
}

/* file: styles.css */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: helvetica;
}

.content{
  display: flex;
  flex-direction: column;
}

h1, h2{
  text-align: center;
  margin-top: 4%;
}

.game-board{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;

  width: 350px;
  height: 250px; 

  margin: 5% auto 25px auto;
}

.square{
  font-weight: bold;
  font-size: 2rem;
  color: black;
  background-color: #eee;
}

button:hover{
  cursor: pointer;
}

.square:hover{
  background-color: white;
}

.square:disabled{
  background-color: initial;
  color: initial;
  cursor: initial;
}

#reset{
  width: 100px;
  height: 40px;
  font-weight: bold;
  margin: 0 auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

Challenge Information:

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