Connect Four

Build two-player Connect Four: click a column and a disc drops to the lowest empty slot; four in a row (any direction) wins. Two ideas carry it — gravity (find the lowest empty row in the clicked column) and win detection (scan from each filled cell along four directions for four matching discs).

Signature

type Disc = 'R' | 'Y' | null;

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

A 6×7 board, a status line, and a reset button.

Examples

click column 3 → disc lands on the bottom row (row 5) of column 3
click column 3 again → next disc stacks on top (row 4)

four R's vertically, horizontally, or diagonally → "Red wins!"
a full column ignores further clicks on it

Notes

• Gravity. Dropping in a column means scanning rows bottom-up for the first empty slot.
• Win = 4 in a line. From each filled cell, check right, down, down-right, down-left for four equal.
• Immutable board. Copy the rows before writing the dropped disc.
• Derive the winner. Compute it on render from the board; don't store a separate flag.