Board.txt

// src/Board.js

import React, { useState } from 'react';
import './Board.css';

const Board = () => {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [isXNext, setIsXNext] = useState(true);
  const [winner, setWinner] = useState(null);

  const handleClick = (index) => {
    if (squares[index] || winner) return;

    const newSquares = squares.slice();
    newSquares[index] = isXNext ? 'X' : 'O';
    setSquares(newSquares);
    setIsXNext(!isXNext);

    const winner = calculateWinner(newSquares);
    if (winner) {
      setWinner(winner);
    } else if (newSquares.every(Boolean)) {
      setWinner('Tie');
    }
  };

  const 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 line of lines) {
      const [a, b, c] = line;
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }

    return null;
  };

  const handleReset = () => {
    setSquares(Array(9).fill(null));
    setIsXNext(true);
    setWinner(null);
  };

  return (
    <div className="board">
      <h1>TIC-TAC-TOE</h1>
      {winner && <div className="winner">{winner === 'Tie' ? 'It\'s a Tie!' : `Player ${winner === 'X' ? 1 : 2} Won!`}</div>}
      <div className="grid">
        {squares.map((square, index) => (
          <button key={index} className="square" onClick={() => handleClick(index)}>
            {square}
          </button>
        ))}
      </div>
      <button className="reset-button" onClick={handleReset}>RESET</button>
    </div>
  );
};

export default Board;