## Scenario Build a React component for two-player tic-tac-toe on a configurable square board. The prop `size` is an integer from 3 through 20. Players `X` and `O` alternate placing marks in empty cells. A player wins by filling an entire row, column, main diagonal, or anti-diagonal. Once a player wins or the board is full, further clicks do nothing. Include a reset control, an accessible status message, stable test selectors, and tests for alternating turns, invalid clicks, wins, draws, resets, and a change to `size`. ### Constraints & Assumptions - Keep the board state as one authoritative value; do not derive turn from a second counter that can drift. - A prop-size change starts a fresh game. - Keyboard users must be able to reach and activate every cell. - Winner detection should remain clear and testable for size 20. ### Clarifying Questions to Ask - Does a win require `size` marks rather than a smaller configurable run? Yes. - Should clicking an occupied cell consume a turn? No. - Should reset preserve the current size? Yes. - Is move history required? No. ```hint Derive game status from state Store cells and the current player. Compute winner and fullness from cells; gate the click handler on those derived results and the selected cell. ``` ### What a Strong Answer Covers - Immutable React state updates and correct reset behavior on both button and prop changes. - Winner and draw detection without stale state or double moves. - Semantic buttons, labels, focus behavior, and a live status region. - Focused tests that assert behavior rather than implementation details. ### Follow-up Questions 1. How would you add an arbitrary win length smaller than the board size? 2. How would undo and redo change the state model? 3. What rendering optimization matters if the board becomes much larger?