diff --git a/src/App.css b/src/App.css index 28425e9..1685faa 100644 --- a/src/App.css +++ b/src/App.css @@ -28,3 +28,7 @@ body { content: ''; display: table; } + +.status { + margin-bottom: 10px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 494c5f2..39a8bc3 100644 --- a/src/App.js +++ b/src/App.js @@ -18,6 +18,9 @@ function App() { const [squares, setSquares] = useState(Array(9).fill(null)); function handleClick(i) { + if (squares[i] || calculateWinner(squares)) { + return; + } const nextSquares = squares.slice(); if (xIsNext) { nextSquares[i] = "X"; @@ -28,8 +31,17 @@ function App() { setXIsNext(!xIsNext); } + const winner = calculateWinner(squares); + let status; + if (winner) { + status = "Winner: " + winner; + } else { + status = "Next player: " + (xIsNext ? "X" : "O"); + } + return ( <> +