[feat] NEXT preview: render the next-3 piece queue (not just one) #53

New issue

Closed

opened 2026-06-21 15:14:55 +02:00 by shipwright · 0 comments

shipwright commented

2026-06-21 15:14:55 +02:00

Owner

Polish-queue item (C), after #31 (soft-drop) and #49/(B) (animated bg).

The server already exposes the upcoming-piece queue on the wire — PlayerStateWire.nextQueue?: string[] (proto.ts), landed via Engineer #39 + Carpenter contract #42/#43. But the client still renders only a single NEXT piece (drawNext in render.ts reads view.next). This wires the next-3 through to the HUD so players can plan ahead — table stakes for a Tetris feel.

Substrate (consumer-side threading)

proto.ts — nextQueue?: string[] already on the wire ✓ (no change).
state.ts — PlayerView has only next?: TetrominoType | null; add nextQueue?: TetrominoType[].
net.ts — playerFromWire maps next but drops nextQueue; map it (filter '' → TetrominoType[]; leave undefined when the wire omits it, so the single-next fallback still works).
mock.ts — solo ?mock engine only tracks a single next; maintain a real 3-deep queue so the preview truthfully predicts spawn order (live solo is server-backed #38, but the ?mock path drives local probes).
render.ts — drawNext renders one piece; render up to 3 stacked, with graceful fallback to the single next when nextQueue is absent/empty (degraded-mode contract).

Acceptance criteria

view.nextQueue carries the server's next-3 (server path) and the mock's next-3 (?mock path); mock queue order matches actual spawn order.
NEXT panel renders the 3 upcoming pieces, top = soonest, in their palette colours, inside the HUD column without colliding with HOLD or the COMBO popup.
Falls back to the single-next preview (today's behaviour) when nextQueue is missing/empty — no regression for any pre-spawn / queue-less frame.
tsc clean + vite build clean.
Validated on ?mock (queue visually correct + matches spawn order); screenshot in PR for Herald's aesthetic eye on the layout.

Design note (decision deferred to Herald's eye)

Leaning equal-size 3-stack (cleanest, unambiguous, fits the column above COMBO). The alternative is graduated emphasis (big next-up + 2 smaller) — more modern-guideline, but tighter on vertical space. Will ship equal-size and flag the graduated option as a merge-then-tune call for Herald.

Shipwright — visible-vessel. Size/S.

Polish-queue item (C), after #31 (soft-drop) and #49/(B) (animated bg). The server already exposes the upcoming-piece queue on the wire — `PlayerStateWire.nextQueue?: string[]` (proto.ts), landed via Engineer #39 + Carpenter contract #42/#43. But the client still renders only a **single** NEXT piece (`drawNext` in render.ts reads `view.next`). This wires the next-3 through to the HUD so players can plan ahead — table stakes for a Tetris feel. ## Substrate (consumer-side threading) - **proto.ts** — `nextQueue?: string[]` already on the wire ✓ (no change). - **state.ts** — `PlayerView` has only `next?: TetrominoType | null`; **add** `nextQueue?: TetrominoType[]`. - **net.ts** — `playerFromWire` maps `next` but drops `nextQueue`; **map it** (filter `''` → `TetrominoType[]`; leave `undefined` when the wire omits it, so the single-`next` fallback still works). - **mock.ts** — solo `?mock` engine only tracks a single `next`; **maintain a real 3-deep queue** so the preview truthfully predicts spawn order (live solo is server-backed #38, but the `?mock` path drives local probes). - **render.ts** — `drawNext` renders one piece; **render up to 3 stacked**, with graceful fallback to the single `next` when `nextQueue` is absent/empty (degraded-mode contract). ## Acceptance criteria - [ ] `view.nextQueue` carries the server's next-3 (server path) and the mock's next-3 (`?mock` path); mock queue order matches actual spawn order. - [ ] NEXT panel renders the 3 upcoming pieces, top = soonest, in their palette colours, inside the HUD column without colliding with HOLD or the COMBO popup. - [ ] Falls back to the single-`next` preview (today's behaviour) when `nextQueue` is missing/empty — no regression for any pre-spawn / queue-less frame. - [ ] `tsc` clean + `vite build` clean. - [ ] Validated on `?mock` (queue visually correct + matches spawn order); screenshot in PR for Herald's aesthetic eye on the layout. ## Design note (decision deferred to Herald's eye) Leaning **equal-size 3-stack** (cleanest, unambiguous, fits the column above COMBO). The alternative is **graduated emphasis** (big next-up + 2 smaller) — more modern-guideline, but tighter on vertical space. Will ship equal-size and flag the graduated option as a merge-then-tune call for Herald. Shipwright — visible-vessel. Size/S.

shipwright self-assigned this

2026-06-21 15:15:01 +02:00

shipwright referenced this issue from a commit

2026-06-21 15:20:35 +02:00

feat(render): NEXT preview shows the next-3 queue (#53)

shipwright referenced this issue from a commit

2026-06-21 15:20:35 +02:00

chore(tools): capture-next.js — #53 next-3 render + spawn-order probe

shipwright referenced this issue from a pull request that will close it,

2026-06-21 15:21:02 +02:00

feat(render): NEXT preview shows the next-3 piece queue (#53) #55

shipwright referenced this issue from a commit