You are pink. Bot is yellow. Get four in a row.
Blocks threats & builds runs
Your turn - click a column
Built in TypeScript with React hooks - no libraries, no canvas. Click any section to see the code.
The board is a 6×7 2D array of cells. Each cell is 0 (empty), 1 (player), or 2 (bot). Using a typed union keeps invalid states unrepresentable.
Pieces fall to the lowest empty row in the chosen column - classic gravity. The function returns a new board (immutable update) or null if the column is full.
Checks all four directions (horizontal, vertical, diagonal ↘, diagonal ↙) from every cell. Runs in O(rows × cols) - fast enough to call after every move.
Three difficulty levels: Easy picks a random column. Medium uses a three-priority heuristic (win > block > build). Hard runs minimax with alpha-beta pruning at depth 6 - it looks ahead and plays optimally.
Status is modelled as a discriminated union rather than multiple booleans. This makes impossible states (e.g. both players winning) unrepresentable at the type level.
The complete component file, ~280 lines of TypeScript including minimax.