Implement Two-Player Connect Four on a 6x7 Board with Win and Draw Detection

In the first technical round of a frontend engineer loop, the task was to implement Connect Four on a 6 x 7 board (6 rows, 7 columns) for two players. AI tools were not allowed in the coding rounds. Players alternate turns. On each turn the current player drops a disc into a column, and the disc falls to the lowest empty cell of that column. The first player with four of their discs in a row (horizontally, vertically or diagonally) wins. If the board fills up with no winner, the game is a draw. Implement the game state and moves, win and draw detection, and a playable interface if one is expected. ```hint Only the last move matters After a drop, any newly completed line must pass through the cell that was just filled. ``` ### Constraints and Clarifications - The board is fixed at 6 rows and 7 columns, and four in a row wins. - Assume two human players share one screen; there is no computer opponent. ### Clarifying Questions - Is a UI expected in this round, and in which framework, or only the game logic? - What should happen on a click in a full column, or after the game has ended? - Should the four winning discs be highlighted? - Is a restart or undo control required? ### What a Strong Answer Covers - A board representation that makes a drop cheap and keeps game logic separate from rendering - Correct win detection in all four line directions, including a disc that lands in the middle of a line - Draw detection, and handling of invalid moves (a full column, a finished game) - Immutable state updates when rendering with React, and accessible controls - Tests for the tricky cases: diagonals in both directions, board edges, the last empty cell ### Follow-up Questions - How would you generalize to an `R x C` board with `K` in a row? - How would you add an undo button? - How would two players on different machines play the same game?