The playground

The playground is the game board: a grid of cells, a walking mouse, a cheese target, and the traps. It is rendered as a real <table> for the simple reason that a table is the correct semantic model of a labelled grid, and screen readers understand it for free.

Structure

• components/Playground/Playground.tsx renders the frame and the table: one header row of column letters (A, B, C...) plus a corner cell, then one row per map row, each prefixed by its row number. Letters come from lib/column.ts (columnLetter, throws outside 0..25).
• components/Playground/GridCell.tsx renders one cell. It receives the position, the block kind, the level's look, the player state and the target flag, and lays out the cell's layers: terrain background, the checkerboard tint, the trap art (lava pool or hole), the target cheese, and the player figure when the mouse is on that cell.
• Every cell is a <td> with an explicit width and height, so cells are exactly square whatever the map shape.

The sizing math (why cells are square)

Tables want to size themselves from content, which would make a 5x7 map's cells slightly tall. The app refuses that: all geometry is computed from two custom properties and applied explicitly.

1. .playground-box caps the board at --playground-limit (the largest square that fits the viewport, with a sane cap on huge screens).
2. .playground-frame is an inline-size query container.
3. .playground-grid gets --playground-columns and --playground-rows (the map size) and derives:
   • --playground-label-size - the label track, clamp(1.5rem, 6% of the limit, min(2.25rem, half a tile)), so digits fit but never eat the board;
   • --playground-tile-size - the smaller of (frame width minus label) per column and (limit minus label) per row.
4. Each track type gets explicit sizes: the corner and the two label tracks take the label size on one axis, and every data cell takes --playground-tile-size for both width and height.

Because one value drives both axes of every data cell, cells are square by construction, on any map shape and any viewport. The historical aspect-ratio on the table was removed for exactly this reason: it ignored the label row and column and drifted to 1:1.05 on non-square maps.

Terrain and textures

Each cell's background comes from its terrain identifier (data-terrain

• data-kind attributes, derived from the level's looks), mapped in src/terrain.css to a colour token and a procedural texture:

• Textures are asset-free, tileable inline SVG data URIs: feTurbulence noise with stitchTiles for rock/sand/grass/frost/gravel, a jittered upright evergreen canopy for the forest wall, stripes for ice, polygons for the purple boss theme.
• Every cell paints the same seamless texture from the same origin, with no per-tile transforms or background shifts, so every tile is identical in size and shape and the grid is perfectly respected. (An earlier per-tile variation experiment rotated and phase-shifted tiles; on fractional cell sizes the rotations bled a pixel or two past the cell and the shifted phases broke the pattern at tile seams, so it was removed.)
• Traps draw their marker on top of the level's ground look; ice always uses the ice terrain.

The full art direction is on the Design system page.

Entities

• The player - components/PlayerMouse.tsx: a flat mouse seen from above (oval body, round ears, dot eyes, a tapering curled tail), the same component used for the skin previews. It walks between cells (.player-step slides it in from the cell it came from), its accumulated rotation always takes the shortest way round a turn, it bobs while running and breathes while idle.
• The target - components/TargetCheese.tsx: a cheese wedge cut from the wheel, with holes rolled by cheeseHoles.ts (constrained to the wedge so they never clip or clump, lighter on top, darker on the cut face). It is hidden while the mouse stands on it.
• Lava - a clipped, jagged molten puddle with fixed .lava-glow patches that fade in and out on independent linear clocks. On death the mouse evaporates upward (player-burn), and it never grows back.
• Hole - a flat, uneven dark pit. On death the mouse spins and shrinks away (player-fall).

Only the player and the lava animate; everything else is deliberately still. prefers-reduced-motion disables the player and lava animations.

Accessibility of the board

Every cell is a real table cell with an accessible name: column and row headers announce the coordinates, and each cell carries a title and a screen-reader-only label for its contents (ground, wall, ice, lava, hole, target, player). Details on Accessibility.

Next: Design system.