Tic-tac-toe

Build a two-player tic-tac-toe on a 3×3 board: players alternate placing X and O, and the game detects a win (three in a row) or a draw (full board, no winner). The board is just an array of nine cells, the turn is one boolean, and winning is checking eight fixed lines.

Signature

type Mark = 'X' | 'O' | null;

// A self-contained component. No props.
function App(): JSX.Element;

A 3×3 grid, a status line, and a reset button.

Examples

X plays 0, O plays 4, X plays 1, O plays 8, X plays 2 → X wins (top row 0,1,2)

all 9 filled with no line of three → "Draw!"
clicking a filled cell or after a win → ignored

Notes

• Board is an array of 9. Index 0–8; each cell is 'X', 'O', or null.
• Eight winning lines. 3 rows + 3 columns + 2 diagonals; a winner fills any one line.
• Turn is one boolean. xIsNext; flip it on each valid move.
• Guard moves. Ignore a click on a filled cell or once there's a winner.