React Challenge #33 - Connect Four

Overview

Build a Connect Four game where players take turns dropping discs into a 6x7 grid until one achieves four in a row.

Implement the useApp hook to manage the game state.
Allow players to take turns dropping discs into the columns of the 6x7 grid.
Ensure discs "fall" to the lowest available row in the chosen column.
Implement the checkForWin function to detect 4 discs of the same color in a row (horizontally, vertically, or diagonally).
Update the "Turn" indicator after each move.
Update the "Winner" indicator when a player wins and stop further moves.
Implement the "Reset Game" button to clear the board and reset the turn to red.
Maintain the Cell type and createEmptyBoard function signature as provided.
The only valid disc colors are "white", "red", and "yellow". Tests will check these exact color values.
All game logic should be tested using the provided data-testid attributes.

The challenge is split across multiple files (App.tsx, useApp.ts, lib.ts) to simulate a real project structure.
App.tsx contains the main UI structure and placeholders for the game board, turn indicator, and winner indicator.
useApp.ts is where the game logic (state management, handling moves, and resetting the board) should be implemented.
lib.ts contains utility functions and types (Cell, createEmptyBoard, checkForWin) that must be respected and can be used in your implementation.
Each cell in the board is a <button> with a data-testid in the format cell-{row}-{col} to facilitate testing.
The "Turn" indicator uses data-testid="turn-indicator" and the winner display uses data-testid="winner-indicator".
Make sure the discs "fall" to the lowest available row in the chosen column.
After a win, no further moves should be allowed until the board is reset.
All styling and layout use Tailwind CSS classes; focus on the game logic rather than UI enhancements.

Build a Connect Four game where players take turns dropping discs into a 6x7 grid until one achieves four in a row.

Implement the useApp hook to manage the game state.
Allow players to take turns dropping discs into the columns of the 6x7 grid.
Ensure discs "fall" to the lowest available row in the chosen column.
Implement the checkForWin function to detect 4 discs of the same color in a row (horizontally, vertically, or diagonally).
Update the "Turn" indicator after each move.
Update the "Winner" indicator when a player wins and stop further moves.
Implement the "Reset Game" button to clear the board and reset the turn to red.
Maintain the Cell type and createEmptyBoard function signature as provided.
The only valid disc colors are "white", "red", and "yellow". Tests will check these exact color values.
All game logic should be tested using the provided data-testid attributes.

The challenge is split across multiple files (App.tsx, useApp.ts, lib.ts) to simulate a real project structure.
App.tsx contains the main UI structure and placeholders for the game board, turn indicator, and winner indicator.
useApp.ts is where the game logic (state management, handling moves, and resetting the board) should be implemented.
lib.ts contains utility functions and types (Cell, createEmptyBoard, checkForWin) that must be respected and can be used in your implementation.
Each cell in the board is a <button> with a data-testid in the format cell-{row}-{col} to facilitate testing.
The "Turn" indicator uses data-testid="turn-indicator" and the winner display uses data-testid="winner-indicator".
Make sure the discs "fall" to the lowest available row in the chosen column.
After a win, no further moves should be allowed until the board is reset.
All styling and layout use Tailwind CSS classes; focus on the game logic rather than UI enhancements.