fix: restore tictactoe with correct content
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
export default function Home() {
|
export default function TicTacToe() {
|
||||||
const [board, setBoard] = useState(Array(9).fill(null));
|
const [board, setBoard] = useState(Array(9).fill(null));
|
||||||
const [xIsNext, setXIsNext] = useState(true);
|
const [xIsNext, setXIsNext] = useState(true);
|
||||||
const winner = calculateWinner(board);
|
const winner = calculateWinner(board);
|
||||||
@@ -18,14 +18,9 @@ export default function Home() {
|
|||||||
|
|
||||||
function calculateWinner(squares) {
|
function calculateWinner(squares) {
|
||||||
const lines = [
|
const lines = [
|
||||||
[0, 1, 2],
|
[0, 1, 2], [3, 4, 5], [6, 7, 8],
|
||||||
[3, 4, 5],
|
[0, 3, 6], [1, 4, 7], [2, 5, 8],
|
||||||
[6, 7, 8],
|
[0, 4, 8], [2, 4, 6],
|
||||||
[0, 3, 6],
|
|
||||||
[1, 4, 7],
|
|
||||||
[2, 5, 8],
|
|
||||||
[0, 4, 8],
|
|
||||||
[2, 4, 6],
|
|
||||||
];
|
];
|
||||||
for (let [a, b, c] of lines) {
|
for (let [a, b, c] of lines) {
|
||||||
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
|
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
|
||||||
@@ -36,36 +31,14 @@ export default function Home() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const renderSquare = (i) => (
|
const renderSquare = (i) => (
|
||||||
<button
|
<button className="square" onClick={() => handleClick(i)}>
|
||||||
className="square"
|
|
||||||
onClick={() => handleClick(i)}
|
|
||||||
>
|
|
||||||
{board[i]}
|
{board[i]}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|
||||||
const statusStyle = {
|
const statusStyle = { marginBottom: '1rem', fontSize: '1.2rem' };
|
||||||
marginBottom: '1rem',
|
const boardStyle = { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '4px', width: '300px', margin: '0 auto' };
|
||||||
fontSize: '1.2rem',
|
const squareStyle = { background: '#fff', border: '1px solid #999', fontSize: '2rem', width: '100%', height: '80px', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' };
|
||||||
};
|
|
||||||
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 (
|
return (
|
||||||
<div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
|
<div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
|
||||||
@@ -79,10 +52,7 @@ export default function Home() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{winner && (
|
{winner && (
|
||||||
<button onClick={() => {
|
<button onClick={() => { setBoard(Array(9).fill(null)); setXIsNext(true); }}>
|
||||||
setBoard(Array(9).fill(null));
|
|
||||||
setXIsNext(true);
|
|
||||||
}}>
|
|
||||||
Play Again
|
Play Again
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
Reference in New Issue
Block a user