clone

a browser grid puzzle game where you push words around to rewrite the rules of each level

main
miau-is-true / openspec / changes / archive / 2026-09-24-add-world-index-presentation / design.md
design.md 5.0K source

Source contract

This change follows the accepted D20 material in docs/design.md and the designer's D20 header and world-card reviews in docs/design-inbox.md, dated 2026-09-24. openspec/changes/add-world-index-navigation/ owns the world view model, request origins, world transition events, and navigation behavior. This change consumes those values and does not recreate them from level data.

INDEX header

The desktop and mobile header uses this hierarchy, with 8px between lines:

  1. An 11px tracked eyebrow in --muted: INDEX | WORLD NN.
  2. The world name in --fg, weight 800, at 28px on desktop.
  3. The world tagline in --muted, falling back to walk the path, pick a proof.

The large standalone INDEX heading and colliding stacked world-number heading are removed from this presentation. World completion is shown as ★ n / N, counted only for the active world. The header must fit its owning region at the supported desktop and 390px mobile sizes without overlapping the board or footer.

On mobile, the world name may use the existing measured fitting helper and a smaller scene-approved size when needed. This change does not alter authored world names or the D20 world model.

World strip

The desktop strip is drawn as [Q] ◀ ● • • ▶ [E]: keycaps flank the arrows, arrows are 14px, dots are 10px, and the current dot uses the normalized world's accent when one is present. Non-current dots use the neutral dot role. The strip is a visible control and its hit geometry follows the drawn control.

On mobile, keycaps are omitted. The arrows remain visible 44px tap targets, with no change to the one-world-per-gesture behavior owned by D20.

When the D20 seam reports a world switch, the sheet/camera transition uses the existing 280ms world ease and the current dot slides between its old and new positions over 110ms with the accepted back-ease. The dot and sheet use the same transition start, while each keeps its own duration. Reduced motion shows the settled dot and sheet immediately.

First-entry world card

When the stage receives the D20 world-card request, INDEX renders the card over the stage with the existing iris entry choreography. Its centered content uses a 16px vertical rhythm in this order:

  1. the normalized world glyph at 96px;
  2. WORLD NN eyebrow;
  3. world name at 32px;
  4. tagline at 15px muted, when present;
  5. <N> proofs | ★ <completed> / <total> | by <author>; and
  6. the action.

If author is absent, the byline segment is omitted; the card never prints by Unknown author. The desktop action is [ENTER] enter world. On mobile or a coarse pointer, it is a full-width 48px ENTER WORLD button in the world accent with no keycap.

The card is centered on the ink-and-signal surface and preserves the existing hard-edged card lip and Recursive font. The 2px stroke and mobile action use the world's accent while retaining neutral card surfaces. Card text is fitted and wrapped within the card; it must not clip at the supported desktop or mobile sizes.

ENTER (or the equivalent confirmed card action) dismisses the card and returns to the settled INDEX sheet. Dismissing the card does not select or enter a proof. The card is shown at most once per world per session, and a Workshop PLAY request uses the same composition with its D20 workshop origin. The mobile action's visible 48px button is its touch target. Reduced motion presents the settled card immediately.

Core declares a first-party world identity: 🐈, Where the rules first bend., you, and author Miau Is True. This keeps the opening card out of the fallback state used for older imported packs.

The designer accepted the finished Core and Crossword cards on 2026-09-24 in docs/design-inbox.md, including desktop and 390px Crossword captures. The world-index browser fixture passed first entry, Workshop PLAY, four-world navigation, touch confirmation, and reduced motion with no page errors. The full Node suite passed 373/373, the production build passed, and the sequential world solver gate solved all 30 proofs.

Below 760px or on a coarse pointer, INDEX does not show keyboard keycap instructions. Under the active proof banner it shows tap the cat to play, and the bottom thumb row exposes the menu affordance (☰ menu). Workshop is reached through that menu. Desktop retains the scene's drawn keycap and verb pairs.

The canvas accessible label includes the active world number and name, its completed and total proof count, and the Q/E world-switch action on keyboard layouts. While the card is open, narration names the world, tagline, author, and the ENTER action. Pointer/touch targets and narration must refer to the same visible controls.

Non-goals

  • Changing the D20 world model, ordering, progress keys, or navigation.
  • Changing rule evaluation, actor movement, grid coordinates, or simulation snapshots.
  • Adding a new world identity validator or changing pack share data.
  • Changing the board's map geometry or proof solving behavior.