Tell us what’s happening:
why are these test not passing despite the game working fine
4. The first click of a button.square element should result in X being displayed within the element.
5. Clicking on the button#reset element should reset the game.
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.
8. Clicking on an already used button.square element sho
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: styles.css */
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
width: 100vw;
background-color: lightblue;
}
.container {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
margin: 2px auto;
padding: 30px;
}
.row {
display: flex;
gap: 10px;
}
.square {
width: 40px;
height: 40px;
transition: all 0.3s;
}
#reset-btn{
padding: 10px 15px;
background-color: #aff;
border: none;
color: #000;
border-radius: 10px;
transition: all 0.5s;
}
#reset-btn:hover{
transform: translateY(2px)
}
#reset-btn:active{
transform: translateY(-2px);
border: none;
}
#reset-btn:focus{
border: none;
}
/* file: index.jsx */
const { useState, useEffect } = React;
export function Board() {
function Box ({value, getValue}) {
return <button onClick={getValue} className="square" disabled={disableBtn}>{value}</button>
};
const [disableBtn, setDisableBtn] = useState(false)
let [history, setHistory] = useState(Array(9).fill(null))
const [xIsNext, setXIsNext] = useState(true);
const handleClick = (e) =>{
if(history[e] || disableBtn) return;
let copyHistory = history.slice();
xIsNext? copyHistory[e] = "X" : copyHistory[e] ="O";
setHistory(copyHistory);
setXIsNext(!xIsNext)
};
function handleReset(){
setHistory(Array(9).fill(null))
setXIsNext(true);
setDisableBtn(false);
};
function calculateWinner (click){
let lines = [
[0,3,6],
[1,4,7],
[2,5,8],
[0,1,2],
[3,4,5],
[6,7,8],
[0,4,8],
[2,4,6]
];
for(let i=0; i< lines.length; i++){
let [a,b,c] = lines[i];
if(click[a] && click[a] === click[b] && click[a] === click[c]){
return click[a]
}
}
return null
}
useEffect(()=>{
let winner=calculateWinner(history);
if(winner || isDraw){
setDisableBtn(true)
}
}, [history]);
let winner = calculateWinner(history);
let isDraw = !winner && history.every(square=> square !==null)
return <div className="container">
<h1>Tic-Tac-Toe</h1>
{winner? <h3>The winner is {winner}</h3> :isDraw? <h3>Draw No Winner</h3> : <h3>Next player is {xIsNext? "X" : "O"}</h3>}
<div className="row">
<Box value={history[0]} getValue={()=>handleClick(0)}/>
<Box value={history[1]} getValue={()=> handleClick(1)}/>
<Box value={history[2]} getValue={()=> handleClick(2)}/>
</div>
<div className="row">
<Box value={history[3]}getValue={()=> handleClick(3)}/>
<Box value={history[4]}getValue={()=> handleClick(4)}/>
<Box value={history[5]}getValue={()=> handleClick(5)}/></div>
<div className="row">
<Box value={history[6]}getValue={()=> handleClick(6)}/>
<Box value={history[7]}getValue={()=> handleClick(7)}/>
<Box value={history[8]}getValue={()=> handleClick(8)}/>
</div>
<button onClick={handleReset} id="reset-btn">Reset</button>
</div>
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Challenge Information:
Build a Tic-Tac-Toe Game - Build a Tic-Tac-Toe Game
https://www.freecodecamp.org/learn/full-stack-developer/lab-tic-tac-toe/build-a-tic-tac-toe-game