# Connect Four > Build a Connect Four game where players take turns dropping discs into a 6x7 grid until one achieves four in a row. - Difficulty: advanced - Tags: useState, customHook, game - Estimated time: 60 minutes - Tests: 11 - Requires subscription: yes ## Overview Build a Connect Four game where players take turns dropping discs into a 6x7 grid until one achieves four in a row. ## Requirements - 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. ## Notes - 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 `