Skip to content

Delayed Reaction: menus in the dub radio's own look (tape labels, dials, phone first), hill climb to 8/10, rounds 2+ (from #3556) #3567

Closed

Description

@QuinnsCode

Score: 6/10 (target 8)

Part of the owner's 2026-11-04 round of hill climbs on every game's UI: once the eqosys skin hook (#3549) lands, each game's menus get real, stylised artwork in the game's own look. This climb is Delayed Reaction, the dub rhythm game: the direction is in apps/delayed-reaction/VISION.md (the reference radio is pinned there) and IDEAS.md.

Where it stands (from #3556)

Round 1 (PR #3566): BEFORE 1.5/10, NOW 6/10 from a fresh judge. The menu is a dub radio fascia in src/fascia.ts; the shots are in apps/delayed-reaction/docs/shots-2026-11-04/, retaken with bun apps/delayed-reaction/scripts/menu-shots.ts <dir> --url <dev server>. The round comment with every shot is on #3556.

Next: (1) Settings at all sizes: the Controls dialog is still a flat sheet. Give packages/game-controls a backplate token (panel background and frame) so it can wear the fascia without a fork, and fix "Toggle instead of hold" wrapping onto three lines. (2) Cold, not warm: cooler, near-white tape, a faint neon glow and a grid echo of the tunnel, and lane colour that carries further than the tiny LEDs. (3) Phone on its side: a compact station header so the presets show above the fold, the needle no longer covering the "120" label, preset tapes on one line ("120 · 1 bar"), and the results readout slimmer on phone. (4) Once #3549 / PR #3540 merges, inject this game's skin into the sign-in chip, report form and toast through the hook.

Goalpost: 8/10 from the owner on the menus

  1. In the game's own look. Title, level select, settings and the results screen read as the same world as the run: the VISION's material, type and colour, phone first.
  2. Artwork, not only CSS. Backplates, dials, tape labels, frames as small SVG, procedural canvas or headless-Blender tiles; say what each weighs.
  3. Still readable, every screen size. Contrast at or above today, the four pads untouched, checked with bun run probe delayed-reaction --shot from phone to desktop.
  4. eqosys menus wear it. The sign-in chip, report form and achievement toast come through the skin hook from eqosys menus: a game injects its skin once and every shared surface wears it, hill climb to 8/10, rounds 3+ (from #3541) #3549, never a second stylesheet.
  5. House kit underneath. Components from packages/ui and packages/game-controls re-themed by tokens; a forked copy of one is a gap.

The loop

Each round is one PR against main that says "Part of #N" and commits before/after shots to apps/delayed-reaction/docs/shots-<date>/. A fresh judge scores BEFORE vs NOW (judges run about two points above the owner). End with a comment starting Score: x/10 (target 8) and ending Next: ..., open the "rounds N+" issue and close this one with "Moved up to #new". At the target, a MANUAL RUN: for the owner's own score.

Activity

  1. QuinnsCode commented on Nov 5, 2026

    @QuinnsCode
    OwnerAuthor

    Score: 5.5/10 (target 8)

    Round 2, PR #3580 (in CI). A fresh judge scored round 1's shots (BEFORE) 4.5/10 and round 2's (NOW) 5.5/10, so the round stays. This judge scores harder than round 1's, which gave the same BEFORE shots 6; the score above is this judge's.

    What changed: a backlit dial face with a faint echo of the tunnel's grid and scanlines on the glass. Worn knobs with smooth knurl, scuffs and a chipped dot. A live VU meter that swings on the menu's beat, and a results VU whose needle swings up to the share of calls answered. Cold, fibred tape, one-line preset tapes with a lane-colour stripe, and lane-colour lips on the preset keys. A compact header on a sideways phone. The Controls dialog has its borders back (round 1's --ui-border bug) and wears the screwed backplate through a new --ui-panel token.

    Phone 390x844 On its side 844x390 Desktop 1280x720
    Title shot shot shot
    Levels shot shot shot
    Settings shot shot shot
    Results shot shot shot

    BEFORE (round 1) is the same names under now/. Retake them with bun apps/delayed-reaction/scripts/menu-shots.ts <dir> --url <dev server>.

    Next: (1) Settings at every size: the Controls dialog's sliders and checkboxes are stock widgets. Give packages/game-controls skin hooks (tokens or classes) for a fader track and thumb and a toggle switch, so this game can draw them as radio faders and switches without a fork, and fix "Toggle instead of hold" wrapping onto three lines. (2) Results, phone and desktop: make a finished run an event. Put the readout at the top as the display's own screen, with big numbers, the label back to "Best combo", and the shot taken after a real run (menu-shots.ts leaves before the first call, so the needle reads 0). (3) Levels, phone: the cog covers preset 6 when the menu scrolls, so keep a clear strip under it. The tape metadata (10px) and the VU's "LIVE" label are too small. The 24 tapes are identical, so give each cassette a lane-colour spine or a drawn cassette shell. (4) Once #3540 (eqosys skin hook) is on main, put this game's skin on the sign-in chip, report form and toast through it.

  2. QuinnsCode commented on Nov 5, 2026

    @QuinnsCode
    OwnerAuthor

    Moved up to #3581

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions