Untitled
unknown
plain_text
a month ago
1.5 kB
2
Indexable
Never
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}; }
Leave a Comment