chess: pick a promotion on the board, lichess-style

[aaylward]

Promotion used to put the pawn back on its starting square and show a row of buttons under the board. Now it works like lichess:

• the pawn moves onto the promotion square, and its old square shows empty
• Q/R/B/N stack down the promotion file from the far rank, over a dimmed board
• tapping off the pieces (the scrim, labeled "Cancel"), or pressing Esc, puts the pawn back and returns focus to it
• Black's flipped board puts the picker on the right file

Tests: pawn shown on the last rank and put back on cancel; picker inside the board at the right column for White (50%) and Black (37.5%); options in Q/R/B/N order. I broke the code by hand to check both tests fail when they should. typecheck, lint, the full suite (1285 tests) and the build all pass. I checked desktop (1280×900) and mobile (390×844) screenshots by eye.

🤖 Generated with Claude Code

https://claude.ai/code/session_01KLwM4Z2DvpU7UvZj6mkVsx

---

Generated by Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	muchq	22e4af1	Commit Preview URL Branch Preview URL	Oct 01 2026, 02:40 AM

[cursor]

Blocking

None. Pawn is previewed on the promotion square (shown), picker column uses squares order so White and Black both line up on the far-rank file (50% / 37.5% pinned), Q→N stack from the top, scrim / Esc cancel restores the from-square and focus. Play path and drag→promote tests still apply. CI was green on the Workers build; suite in progress at review time.

Nits

• While the picker is up, the 64 square buttons stay in the tab order under the scrim (pointer is blocked; keyboard is not). A Shift+Tab off Queen lands on the board again. inert on the square grid for the duration — or role="dialog" / aria-modal the way castle and rummy do — would match the dimmed “modal” look.
• The cancel control is a full-board <button> behind the file (z-index keeps the pieces above). It works; a short comment that the scrim must stay under .promotionFile would save the next reader from “fixing” the DOM order.

Fine

Lichess-shaped promotion without a hub change: preview on the last rank, file-aligned stack, dimmed dismiss, Esc and focus restore kept from the old row. Tests cover preview/cancel, column for both sides, and option order. Merge when ready.

---

Review of #400

[aaylward]

Both nits stay as-is for this PR: neither blocks, and the keyboard-modal one (inert on the squares while the picker is up) wants its own test. Will pick it up if the owner wants it here.

---

Generated by Claude Code