Skip to content

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

Closed

Description

@QuinnsCode

Score: 5.5/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 #3567)

Round 1 (#3566): BEFORE 1.5, NOW 6 from its judge. Round 2 (#3580): a fresh judge scored round 1's shots 4.5 and round 2's 5.5, a harder scale, so 5.5 is the score carried here. The menu is a dub radio fascia in src/fascia.ts. The shots are in apps/delayed-reaction/docs/shots-2026-11-04/ (before/, now/ = round 1, round2/), retaken with bun apps/delayed-reaction/scripts/menu-shots.ts <dir> --url <dev server>. The round comments with every shot are on #3556 and #3567.

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.

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 3, PR #3588 (CI green). A fresh judge scored round 2's shots (BEFORE) 5/10 and round 3's (NOW) 5.5/10, a rise, so the round stays. The judges keep drifting: each new one scores the previous round half a point to a point below the last judge.

    What changed: one gap, results, phone first. A finished run is now the station display's own screen: the title drops to a small station name, the verdict, a big glowing score, Perfect / Best combo / Hits / Misses, and the hits VU beside it, with the tuning scale below. delayedReaction.result({...}) shows the results screen for given numbers, so the shot is a finished run (BEFORE's read zero).

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

    Retake them with bun apps/delayed-reaction/scripts/menu-shots.ts <dir> --url <dev server>.

    Next: (1) Settings at every size, now the biggest gap: hooks in packages/game-controls (tokens or classes for a fader track and thumb, and a toggle switch) so this game draws radio faders and switches without a fork. Fix "Toggle instead of hold" wrapping onto three lines, and let a game hide rows that mean nothing to it (Look X/Y sensitivity in a rhythm game). (2) Results: make the run an event. A grade stamped on the display (a tape-label rating), a "Level 3 clear" that reads bigger, Replay and Next buttons on the readout, and the stats filling the display's width on the side and desktop. (3) Levels, phone: keep a clear strip under the cog so it never sits over preset 6. Give the tapes cassette art: a shell or reels, the best score on the label, and a lane-colour spine. (4) Once #3540 (eqosys skin hook) is on main, skin the sign-in chip, report form and toast through it.

  2. QuinnsCode commented on Nov 5, 2026

    @QuinnsCode
    OwnerAuthor

    Moved up to #3589

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