Tell us what’s happening:
The game works just like the example provided and does not throw any erros but test 6,7, 9 and 10 refuses to pass. I would appreciate any insight as to why
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: index.jsx */
const { useState } = React;
export function Board() {
const [board, setBoard] = useState([null,null,null,
null,null,null,
null,null,null]);
const [isNextTurn, setIsNextTurn] = useState(true);
const [winner, setWinner] = useState(null);
const [status, setStatus] = useState("Next Player:")
const winningCombo = [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2, 5, 8], [0,4,8], [2,4,6]]
const handleClick = (index)=>{
const copyBoard = [...board];
if(copyBoard[index] || winner)return;
if(isNextTurn){
copyBoard[index] = "X";
}else{
copyBoard[index] = "O"
}
setIsNextTurn(!isNextTurn)
setBoard(copyBoard);
handleWinner(copyBoard)
}
const handleWinner = (copyBoard)=>{
for(let i =0; i < winningCombo.length; i++){
const [a,b,c] = winningCombo[i];
if(copyBoard[a]){
if(copyBoard[a] === copyBoard[b] && copyBoard[a] === copyBoard[c]){
setWinner(copyBoard[a])
return
}
}
}
const isDraw = copyBoard.every(square => square !== null);
if(isDraw){
setWinner("draw")
}
return
}
const handleReset = ()=>{
setBoard([null,null,null,
null,null,null,
null,null,null]);
setWinner(null);
setStatus('Next Player:');
}
return (
<>
<div className="game-container">
<h1>Tic-Tac-Toe</h1>
<div className="status">
{ winner === 'draw'?
"It's a Draw Game!":
winner? `Winner: ${winner}` :` ${status} ${isNextTurn? "X": "O"}`}</div>
<div className="board">
{ board.map((value, index) => (
<button key={index} className="square" onClick={()=>handleClick(index)}>{value} </button>
))
}
</div>
<button id="reset" onClick={()=> handleReset()}>Reset Game</button>
</div>
</>
)
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Challenge Information:
Build a Tic-Tac-Toe Game - Build a Tic-Tac-Toe Game