board

Summary

Play in progress: the mode card, the turn pills, the board, Undo and Reset.

Raw wireframe

• .context/designs/mobile/game/board.html

Why it is drawn this way

The board sizes itself from both axes, not width alone. w-full aspect-square produced a square taller than the space it had on a short screen, and the bottom row was clipped by the action buttons.

Geometry comes from src/constants/styles.ts — 3 columns, 6px gap, 12px padding, 2px border — not from eyeballing. React Native boxes are border-box, so the border eats the width the cells share; leaving it out of the maths once made the row 4pt too wide and wrapped the third column.

Empty cells carry their index. The digit is 0.3 of the cell size rather than a fixed point size, which is why it neither crowds a 40pt cell on a small phone nor disappears in a 130pt cell on a tablet.

Blue is X, rose is O, and both are the launcher icon's own hues. The board used to draw indigo and orange, so the game you opened shared no colour with the icon you tapped.

Undo is disabled, not hidden, when there is nothing to undo. It was previously a live button that did nothing.

Reset becomes New Game once the game is over — the same button, relabelled, because the intent genuinely changes.

Related

• reserved-colour
• hard-is-unbeatable
• board-loading

Sources

• .context/designs/mobile/game/board.html