Tic-Tac-Toe Game

Medium

Create a Tic-Tac-Toe game for two players. Requirements: ✓ 3x3 game board ✓ Two players: X and O ✓ Display current player ✓ Click on cell places current player's symbol ✓ Automatic winner detection ✓ Detect draw (all cells filled, no winner) ✓ "Restart" button to start new game ✓ Display result (winner or draw) Acceptance Criteria: ✓ Game correctly determines winner by 8 combinations (3 rows, 3 columns, 2 diagonals) ✓ Cannot continue playing after someone wins ✓ Cannot place symbol in occupied cell ✓ "Restart" button resets the game ✓ Display current player and result

Tic-Tac-Toe Game

Medium

Close file
Close file
import { useState } from 'react';
import './styles.css';

export default function App() {
  const [board, setBoard] = useState(Array(9).fill(null));
  const [isXNext, setIsXNext] = useState(true);

  const calculateWinner = (squares) => {
    // Your code here
    // Check all winning combinations
    // Return 'X', 'O', or null
  };

  const handleClick = (index) => {
    // Your code here
    // 1. Check if cell is already filled or game is over
    // 2. Update board with current player's symbol
    // 3. Switch to next player
  };

  const resetGame = () => {
    // Your code here
  };

  const winner = calculateWinner(board);
  const isBoardFull = board.every(cell => cell !== null);
  const isDraw = !winner && isBoardFull;

  let status;
  if (winner) {
    status = `Winner: ${winner}`;
  } else if (isDraw) {
    status = "It's a Draw!";
  } else {
    status = `Next player: ${isXNext ? 'X' : 'O'}`;
  }

  return (
    <div className="app">
      <h1>Tic-Tac-Toe</h1>

      <div className="status">{status}</div>

      <div className="board">
        {board.map((cell, index) => (
          <button
            key={index}
            className={`cell ${cell ? 'filled' : ''}`}
            onClick={() => handleClick(index)}
          >
            {cell}
          </button>
        ))}
      </div>

      <button className="restart-button" onClick={resetGame}>
        Restart Game
      </button>
    </div>
  );
}

Preview

Console