board

Summary

The game in progress, on your move.

Raw wireframe

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

Why it is drawn this way

The board is 368 of the 390 points. Eight files of 46 leave 11 either side. The current app wraps the board in a padded, bordered container and loses a square's width to it.

Each player has a strip, and the strip nearest you is yours. Name, side, what they have captured, and their clock. The strip of the player to move is lit and its clock turns brass. A chess player looks at the clock and the captured pieces between every move, so they sit against the board and not in a header.

The last move is tinted on both squares. The square it left and the square it reached. After a computer move this is the only way to see what just happened. The current app does not mark it.

Coordinates are inside the squares. Rank numbers on the a-file, file letters on the first rank. Outside the board they would cost the board width.

Pause is the only way out. The top-left button opens pause, which stops both clocks and saves. The current app's Back arrow resets the game with no question asked.

Undo, Moves, Flip. Undo takes back your move and the computer's reply, as the app does today. Moves opens moves. Flip turns the board. Reset is gone from the action row: starting again is in the pause sheet, where it cannot be hit by a thumb reaching for Undo.

The thinking state is board-loading. The computer's strip is lit and shows three dots, and the board takes no input. It is the one board condition the closed state set can name.

The wireframe walks from two squares. The white queen opens selected and the pawn on b7 opens promotion. In the app every piece of yours can be picked up.

Related

• selected
• promotion
• pause
• moves
• in-check
• reserved-colour
• banner-ad

Sources

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