Tactic Tac Toe

Turn-based play

The active symbol alternates with the number of turns. A square becomes disabled once occupied.

Player names and move log

Names can be edited in the player panels. Recent moves are listed alongside the board.

End a game and replay

Eight possible winning lines are checked. A full board without a winner is a draw; Rematch clears the turns.

Turns are the source of truth

React stores an array of moves rather than a separate state value for each cell. A helper reconstructs the board from that array.

Derived active player and winner

The number of moves determines whose turn it is. The rendered board is compared against the eight winning combinations.

Keep board and log in sync

Problem: Maintaining a separate cell state and move history could let them disagree.

Solution: The board is generated directly from the move log, so both views follow the same sequence of turns.

Stop repeated moves

Problem: Players must not overwrite a square that already contains X or O.

Solution: The board component disables buttons for occupied squares.