fix: correct tictactoe page content
This commit is contained in:
@@ -0,0 +1,91 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const [board, setBoard] = useState(Array(9).fill(null));
|
||||||
|
const [xIsNext, setXIsNext] = useState(true);
|
||||||
|
const winner = calculateWinner(board);
|
||||||
|
const status = winner
|
||||||
|
? `Winner: ${winner}`
|
||||||
|
: `Next player: ${xIsNext ? 'X' : 'O'}`;
|
||||||
|
|
||||||
|
function handleClick(i) {
|
||||||
|
const boardCopy = [...board];
|
||||||
|
if (winner || boardCopy[i]) return;
|
||||||
|
boardCopy[i] = xIsNext ? 'X' : 'O';
|
||||||
|
setBoard(boardCopy);
|
||||||
|
setXIsNext(!xIsNext);
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateWinner(squares) {
|
||||||
|
const lines = [
|
||||||
|
[0, 1, 2],
|
||||||
|
[3, 4, 5],
|
||||||
|
[6, 7, 8],
|
||||||
|
[0, 3, 6],
|
||||||
|
[1, 4, 7],
|
||||||
|
[2, 5, 8],
|
||||||
|
[0, 4, 8],
|
||||||
|
[2, 4, 6],
|
||||||
|
];
|
||||||
|
for (let [a, b, c] of lines) {
|
||||||
|
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
|
||||||
|
return squares[a];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderSquare = (i) => (
|
||||||
|
<button
|
||||||
|
className="square"
|
||||||
|
onClick={() => handleClick(i)}
|
||||||
|
>
|
||||||
|
{board[i]}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
const statusStyle = {
|
||||||
|
marginBottom: '1rem',
|
||||||
|
fontSize: '1.2rem',
|
||||||
|
};
|
||||||
|
const boardStyle = {
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||||
|
gap: '4px',
|
||||||
|
width: '300px',
|
||||||
|
margin: '0 auto',
|
||||||
|
};
|
||||||
|
const squareStyle = {
|
||||||
|
background: '#fff',
|
||||||
|
border: '1px solid #999',
|
||||||
|
fontSize: '2rem',
|
||||||
|
width: '100%',
|
||||||
|
height: '80px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
cursor: 'pointer',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
|
||||||
|
<h1>Tic Tac Toe</h1>
|
||||||
|
<div style={statusStyle}>{status}</div>
|
||||||
|
<div style={boardStyle}>
|
||||||
|
{[0, 1, 2, 3, 4, 5, 6, 7, 8].map(i => (
|
||||||
|
<div key={i} style={squareStyle}>
|
||||||
|
{renderSquare(i)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{winner && (
|
||||||
|
<button onClick={() => {
|
||||||
|
setBoard(Array(9).fill(null));
|
||||||
|
setXIsNext(true);
|
||||||
|
}}>
|
||||||
|
Play Again
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1 +0,0 @@
|
|||||||
$(cat /tmp/tictactoe-src/pages/index.js)
|
|
||||||
Reference in New Issue
Block a user