fix: correct tictactoe page content

2026-07-02 15:31:02 +02:00
parent faac88483e
commit 6e1c5a847e
3 changed files with 91 additions and 1 deletions
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+
+export default function TicTacToe() {
+  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>
+    </div>
+  );
+}