Untitled

import React from 'react';

// Square component
const Square = ({ takeTurn, id, player }) => {
  console.log('Square re-rendering now.');
  const palet = ["blue", "red", "green"];
  const [color, setColor] = React.useState(2);

  const handleClick = () => {
    const newPlayer = takeTurn(id);
    setColor(newPlayer === 1 ? 0 : 1); // Blue for Player 1, Red for Player 2
  };

  return (
    <button
      id={id}
      onClick={handleClick}
      style={{ backgroundColor: palet[color] }}
    >
    </button>
  );
};

// Board component
const Board = () => {
  const [player, setPlayer] = React.useState(1);
  console.log('Board re-rendering now.');

  const takeTurn = (id) => {
    const newPlayer = player === 1 ? 2 : 1;
    setPlayer(newPlayer);
    return newPlayer;
  };

  const renderSquare = (i) => {
    return <Square takeTurn={takeTurn} id={i} player={player} key={i} />;
  };

  return (
    <div className="game-board">
      <div className="grid-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div id="info">
        <h1>Status {player === 1 ? 'Player 1' : 'Player 2'}</h1>
        <button onClick={() => setPlayer(player === 1 ? 2 : 1)}>Change Player</button>
      </div>
    </div>
  );
};

// Game component
const Game = () => {
  return (
    <div className="game">
      <Board />
    </div>
  );
};

if(typeof module != 'undefined'){
  module.exports = {Game,Board, Square};
}