Build a Tic-Tac-Toe Game

JavaScript
1

I’m a bit stumped here.

I’ve yet to fulfill these tests. I’m not sure what’s wrong. It looks alright when I try program.

const { useState, useMemo } = React;

export function Board() {
  const [sym, setSym] = useState("X");
  const [gameGoing, setGameGoing] = useState(true);
  const [gameMsg, setGameMsg] = useState("");
  
  const matches = [[0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 4, 8], [2, 4, 6]];

  const toggleSym = (e) => {
    if (gameGoing === true){
      if (e.target.innerText === ""){
        e.target.innerText = sym;
        setSym(prevSym => prevSym === "X" ? "O" : "X");
          
      }
      checkGame();
    }
    
    return;
  };
  function checkGame(){
    const gameButtons = [...document.querySelectorAll("button.square")];

    for (let i = 0; i < matches.length; i++){
      let matchCheckArr = gameButtons.filter((_el, j) => {
        return matches[i].includes(j)
      });

      if (matchCheckArr.every((el, _i, arr) => (el.textContent === arr[0].textContent && arr[0].textContent !== ""))){
        setGameGoing(false);
        setGameMsg(`Winner:${sym}`);
        break;
      } else {
        if (gameButtons.every(button => button.textContent !== "")){
          setGameGoing(false);
          setGameMsg("It's a draw.");
          break;
        }
      }

      
    }
  }
  function resetGame() {
    [...document.querySelectorAll("button.square")].forEach(el => el.textContent = '');
    setGameGoing(true);
  }
  return (
    <div id="tic-tac-toe">
      <div id="info">
        <h1 id="title">Tic-Tac-Toe</h1>
        <p>Current Turn: {sym}</p>
        <p id="game-message">{gameMsg}</p>
      </div>
      <div id="board">
        {
          [0,1,2,3,4,5,6,7,8].map(digit => <button className="square" key={digit} onClick={toggleSym}></button>)
          }
      </div>
      <button id="reset" onClick={resetGame}>RESET</button>
    </div>
  );
}

6. The second click of a button.square element should result in O being displayed within the element.
7. All subsequent clicks of a button.square element should alternate between displaying X and O within the element.
9. Clicking on a button.square element after the game has ended should result in no change.
10. The game should display a message indicating the winner to be X or O.
2

Please Try this ..

// App.jsx
import { useState } from “react”;

export default function App() {
const [board, setBoard] = useState(Array(9).fill(“”));
const [sym, setSym] = useState(“X”);
const [gameGoing, setGameGoing] = useState(true);
const [gameMsg, setGameMsg] = useState(“”);

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

const handleClick = (index) => {
if (!gameGoing || board[index] !== “”) return;

const newBoard = [...board];
newBoard[index] = sym;
setBoard(newBoard);

checkGame(newBoard);
setSym((prev) => (prev === "X" ? "O" : "X"));

};

const checkGame = (currentBoard) => {
for (let combo of matches) {
const [a, b, c] = combo;
if (
currentBoard[a] &&
currentBoard[a] === currentBoard[b] &&
currentBoard[a] === currentBoard[c]
) {
setGameGoing(false);
setGameMsg(Winner: ${currentBoard[a]});
return;
}
}

if (currentBoard.every((val) => val !== "")) {
  setGameGoing(false);
  setGameMsg("It's a draw.");
}

};

const resetGame = () => {
setBoard(Array(9).fill(“”));
setGameGoing(true);
setGameMsg(“”);
setSym(“X”);
};

return (

Tic-Tac-Toe
Current Turn: {sym}
{gameMsg}

{board.map((value, index) => (
<button
className=“square”
key={index}
onClick={() => handleClick(index)}

{value}

))}

RESET

);
}