Build a simple Tic Tac Toe game using React. This game allows two players to take turns and play on a 3x3 board. The goal is to get three of the same symbol (X or O) in a row (horizontally, vertically, or diagonally).
Functional Requirements:
-
Render a 3x3 grid of squares.
-
Each player takes a turn placing "X" or "O".
-
Show a message like “Next Player: X” or “Next Player: O”.
-
Detect the winner or a draw and show the result.
-
Disable all squares after a win or draw.
-
Include a “Restart Game” button to reset the board. The restart button must have an id="restart".
-
Each cell must have an id in the format cell-0 to cell-8, corresponding to its position.
-
You must display a message showing the current status of the game. This message should appear at all times and clearly indicate one of the following:
-
Possible Status Messages:
Next Player: X – when it's X's turn.Next Player: O – when it's O's turn.Winner: X – when player X wins.Winner: O – when player O wins.It's a Draw! – when all 9 cells are filled and there's no winner.
- The element that displays this message must have the HTML
id="status", so it can be accessed easily in automated tests.
Reference UI
