Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Tic-tac-toe II
hard45 min
Build a configurable N × N Tic-tac-toe game where either player wins by placing M consecutive marks horizontally, vertically, or diagonally.
Requirements
Default to N = 3 and M = 3. Accept integer board sizes from 2 to 8 and win lengths from 2 through N.
Editing settings changes only the input values. Start new game validates both values, clears the board, and starts with X. Invalid settings show the supplied error message and leave the current board intact.
Players alternate turns; reject occupied cells and terminal moves. A win requires at least M contiguous matching marks, including offset diagonals and anti-diagonals, without row wrapping.
Inspect only lines through the latest move rather than enumerating every possible winning board. Highlight the matching line and show Winner: X or Winner: O.
Show Draw only after a full board without a winner. Reset clears the current board and retains its applied N and M. Starting a new game may discard an existing round.
Use immutable game state and the separate game.js file. The dynamic grid, settings form, and complete CSS are supplied. No AI opponent, online multiplayer, or move undo is required.
Examples
Example 1
Input: X plays the first row while O plays elsewhere.
Output: Winner: X; the board is locked until reset.
The visible behavior is identical across React, Vue, and Angular.
What the tests check
Starts with a three by three game
Settings apply only when starting a new game
Wins with M horizontal marks before filling the row
