diff --git a/pages/apps/tictactoe/index.js b/pages/apps/tictactoe.bak/index.js similarity index 100% rename from pages/apps/tictactoe/index.js rename to pages/apps/tictactoe.bak/index.js diff --git a/pages/apps/tictactoe.bak/index.jsx b/pages/apps/tictactoe.bak/index.jsx new file mode 100644 index 0000000..60f496e --- /dev/null +++ b/pages/apps/tictactoe.bak/index.jsx @@ -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) => ( + + ); + + 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 ( +