Restyle frontend art and motion for issue 297 #437

Merged
PlasticDigits merged 1 commit from cursor/issue-297-art-motion-audio into main 2026-06-07 09:42:11 +00:00
PlasticDigits commented 2026-06-07 09:39:49 +00:00 (Migrated from gitlab.com)

Summary

  • Replaces production scene consumers for Home, countdown, Arena, Protocol, and Home cards with dark command-console SVG backplates while keeping the existing bunny / sniper-shark cast recognizable.
  • Tunes Arena/launch motion and SFX toward the approved cyberminimalist glass direction: subtler cutouts, less bouncy animation, quieter buy cue, and sparse peer-buy/timer gates.
  • Updates static tests plus art/design/audio/invariant/manual-QA docs so future agents can verify #297 without reintroducing bright arcade JPG consumers or stale TimeCurve/sale assumptions.

Addresses #297. Issue should remain open until maintainer review.

Design Review Notes

  • Primary user goals: quickly identify the live TimeArena action, decide between PLAY/BUY and AUDIT verification, understand referral CRED at a glance, and avoid reading long explanatory copy during time-sensitive flows.
  • Surfaced decisions/actions: Home routes users to PLAY TIME ARENA and AUDIT; /arena keeps Last Buy and BUY CHARM dominant; /arena/protocol presents VERIFY / TRACE / WATCH; Referrals keeps register/share/CRED tracking compact.
  • Stale assumptions removed: bright arcade scene JPG production consumers, sale-ended/redeem audio guidance, TimeCurve/podium comments, and agent snippets that checked a non-existent ended() path instead of paused().
  • Visual direction preserved: dark tactical surfaces, crisp hierarchy, compact copy, standardized blockie/address treatment on audit surfaces, and recognizable mascots as subdued command-console accents.

Acceptance / Verification Checklist

  • PASS - Fetch issue title/body/labels/comments: glab issue view 297 -R PlasticDigits/yieldomega --comments; no issue comments were present.
  • PASS - Inspect relevant docs/code: reviewed product TimeArena/Arena v2 docs, frontend design/Arena views/art/audio docs, invariants, and nearby Home/countdown/Arena/Protocol/Referrals/audio code.
  • PASS - Keep existing characters/brand but match aesthetic: browser smoke verified Home, countdown, /arena, /arena/protocol, /referrals; countdown mascot opacity/scale refined after first smoke pass.
  • PASS - Replace bright backdrops with cyberminimalist command-console art: bash scripts/check-art-readme-consumers.sh and arenaCommandConsoleStatic.test.ts verify new scene paths and old JPG production consumers are absent.
  • PASS - Tune motion/audio away from arcade loops: CSS motion reduced; WebAudioMixer peer/timer gates are sparser; buy SFX gain reduced; sound guidance updated.
  • PASS - Current product mechanics/no stale copy: agent snippets now use paused(), docs/comments remove sale/redeem framing where touched, and browser smoke showed TimeArena/AUDIT/CRED copy.
  • PASS - Automated frontend verification: cd frontend && npm run typecheck; cd frontend && npm run lint (0 errors, 9 pre-existing warnings); cd frontend && npm test (108 files, 555 tests); focused post-refine npm test -- arenaCommandConsoleStatic.test.ts timeArenaResponsiveLayoutCss.test.ts LaunchCountdownPage.test.tsx.
  • PASS - Commit hook verification: gitleaks scanned 1 commit with no leaks; frontend typecheck passed in hook.

Visual / Design Verification Checklist

  • Home: confirm home-command-console.svg hero plus command-console Home cards, with PLAY TIME ARENA and AUDIT prominent.
  • Countdown: run with future VITE_LAUNCH_TIMESTAMP; confirm launch-countdown-command-console.svg, subdued/hidden mascots at desktop/mobile, and clock remains the largest element.
  • /arena: confirm arena-simple-command-console.svg, Last Buy/BUY CHARM remain primary, mascot/sniper-shark accents are low-emphasis, and motion feels like drift/pulse.
  • /arena/protocol: confirm arena-protocol-command-console.svg, compact VERIFY / TRACE / WATCH framing, and address/blockie treatment unchanged.
  • /referrals: confirm compact CRED mechanics (5 + 5 CRED) and dark glass treatment; indexer-offline warnings may appear in local smoke.
  • Audio: interact with Arena feed and timer states; peer-buy and timer cues should be sparse, with user audio controls still respected.

Accessibility / Responsive Notes

  • Browser MCP mobile check at 390x844 for the countdown route showed no horizontal overflow and both large mascot cutouts hidden by CSS.
  • Accessible labels remain source-of-truth for icon/mascot treatments; decorative images remain decorative or supplement existing labels.
  • Lint still reports 9 existing warnings in unrelated fast-refresh/hook dependency areas; no new errors.
## Summary - Replaces production scene consumers for Home, countdown, Arena, Protocol, and Home cards with dark command-console SVG backplates while keeping the existing bunny / sniper-shark cast recognizable. - Tunes Arena/launch motion and SFX toward the approved cyberminimalist glass direction: subtler cutouts, less bouncy animation, quieter buy cue, and sparse peer-buy/timer gates. - Updates static tests plus art/design/audio/invariant/manual-QA docs so future agents can verify #297 without reintroducing bright arcade JPG consumers or stale TimeCurve/sale assumptions. Addresses #297. Issue should remain open until maintainer review. ## Design Review Notes - Primary user goals: quickly identify the live TimeArena action, decide between PLAY/BUY and AUDIT verification, understand referral CRED at a glance, and avoid reading long explanatory copy during time-sensitive flows. - Surfaced decisions/actions: Home routes users to PLAY TIME ARENA and AUDIT; `/arena` keeps Last Buy and BUY CHARM dominant; `/arena/protocol` presents VERIFY / TRACE / WATCH; Referrals keeps register/share/CRED tracking compact. - Stale assumptions removed: bright arcade scene JPG production consumers, sale-ended/redeem audio guidance, TimeCurve/podium comments, and agent snippets that checked a non-existent `ended()` path instead of `paused()`. - Visual direction preserved: dark tactical surfaces, crisp hierarchy, compact copy, standardized blockie/address treatment on audit surfaces, and recognizable mascots as subdued command-console accents. ## Acceptance / Verification Checklist - PASS - Fetch issue title/body/labels/comments: `glab issue view 297 -R PlasticDigits/yieldomega --comments`; no issue comments were present. - PASS - Inspect relevant docs/code: reviewed product TimeArena/Arena v2 docs, frontend design/Arena views/art/audio docs, invariants, and nearby Home/countdown/Arena/Protocol/Referrals/audio code. - PASS - Keep existing characters/brand but match aesthetic: browser smoke verified Home, countdown, `/arena`, `/arena/protocol`, `/referrals`; countdown mascot opacity/scale refined after first smoke pass. - PASS - Replace bright backdrops with cyberminimalist command-console art: `bash scripts/check-art-readme-consumers.sh` and `arenaCommandConsoleStatic.test.ts` verify new scene paths and old JPG production consumers are absent. - PASS - Tune motion/audio away from arcade loops: CSS motion reduced; `WebAudioMixer` peer/timer gates are sparser; buy SFX gain reduced; sound guidance updated. - PASS - Current product mechanics/no stale copy: agent snippets now use `paused()`, docs/comments remove sale/redeem framing where touched, and browser smoke showed TimeArena/AUDIT/CRED copy. - PASS - Automated frontend verification: `cd frontend && npm run typecheck`; `cd frontend && npm run lint` (0 errors, 9 pre-existing warnings); `cd frontend && npm test` (108 files, 555 tests); focused post-refine `npm test -- arenaCommandConsoleStatic.test.ts timeArenaResponsiveLayoutCss.test.ts LaunchCountdownPage.test.tsx`. - PASS - Commit hook verification: gitleaks scanned 1 commit with no leaks; frontend typecheck passed in hook. ## Visual / Design Verification Checklist - Home: confirm `home-command-console.svg` hero plus command-console Home cards, with PLAY TIME ARENA and AUDIT prominent. - Countdown: run with future `VITE_LAUNCH_TIMESTAMP`; confirm `launch-countdown-command-console.svg`, subdued/hidden mascots at desktop/mobile, and clock remains the largest element. - `/arena`: confirm `arena-simple-command-console.svg`, Last Buy/BUY CHARM remain primary, mascot/sniper-shark accents are low-emphasis, and motion feels like drift/pulse. - `/arena/protocol`: confirm `arena-protocol-command-console.svg`, compact VERIFY / TRACE / WATCH framing, and address/blockie treatment unchanged. - `/referrals`: confirm compact CRED mechanics (`5 + 5 CRED`) and dark glass treatment; indexer-offline warnings may appear in local smoke. - Audio: interact with Arena feed and timer states; peer-buy and timer cues should be sparse, with user audio controls still respected. ## Accessibility / Responsive Notes - Browser MCP mobile check at 390x844 for the countdown route showed no horizontal overflow and both large mascot cutouts hidden by CSS. - Accessible labels remain source-of-truth for icon/mascot treatments; decorative images remain decorative or supplement existing labels. - Lint still reports 9 existing warnings in unrelated fast-refresh/hook dependency areas; no new errors.
PlasticDigits commented 2026-06-07 09:40:19 +00:00 (Migrated from gitlab.com)

mentioned in issue #297

mentioned in issue #297
PlasticDigits commented 2026-06-07 09:42:11 +00:00 (Migrated from gitlab.com)

mentioned in commit 6ce251c2e8

mentioned in commit 6ce251c2e81e2a945af5dd0d2c1508d9ff8edb03
PlasticDigits (Migrated from gitlab.com) merged commit 6ce251c2e8 into main 2026-06-07 09:42:11 +00:00
ghost1 commented 2026-06-07 09:42:16 +00:00 (Migrated from gitlab.com)

Security review

Commit reviewed: dc78b0b8b51c051e61aa66378962560f64b8e4f1
Scope: MR !437 — frontend art/motion/audio restyle for issue #297 (29 files: static SVG scene backplates, CSS motion tuning, WebAudioMixer gain/throttle constants, copy/docs/tests; no indexer/auth/API logic changes).

Outcome: FINDINGS: 0 medium+

Inline threads: none (no medium+ findings to anchor).

Review summary

Reviewed added/modified code paths for injection, XSS, SSRF, authz, secret leakage, unsafe deserialization, and supply-chain risk.

  • Static assets: New *-command-console.svg files are self-contained vector graphics (gradients/paths/text only). No <script>, event handlers, foreignObject, external xlink:href, or data: payloads.
  • Scene consumers: HomePage, LaunchCountdownPage, ArenaTimerHero, ArenaProtocolPage, and surfaceContent reference hardcoded /art/scenes/... paths; no attacker-controlled input reaches src/srcSet/background-image.
  • Audio (WebAudioMixer, playGameSfx, useArenaSimplePageSfx): Throttle intervals and gain multipliers only; playback still uses the existing allowlisted SFX_FILES map and fetch of bundled static URLs.
  • indexerApi.ts: Comment-only rename/clarification of legacy sale_ended; no request/response handling changes.
  • ArenaSimpleAgentCard Python snippets: Documentation copy updated (ended() → paused()); not executed by the frontend bundle.

No plausible medium+ attack path identified on this diff.

## Security review **Commit reviewed:** `dc78b0b8b51c051e61aa66378962560f64b8e4f1` **Scope:** MR !437 — frontend art/motion/audio restyle for issue #297 (29 files: static SVG scene backplates, CSS motion tuning, `WebAudioMixer` gain/throttle constants, copy/docs/tests; no indexer/auth/API logic changes). **Outcome:** `FINDINGS: 0` medium+ **Inline threads:** none (no medium+ findings to anchor). ### Review summary Reviewed added/modified code paths for injection, XSS, SSRF, authz, secret leakage, unsafe deserialization, and supply-chain risk. - **Static assets:** New `*-command-console.svg` files are self-contained vector graphics (gradients/paths/text only). No `<script>`, event handlers, `foreignObject`, external `xlink:href`, or `data:` payloads. - **Scene consumers:** `HomePage`, `LaunchCountdownPage`, `ArenaTimerHero`, `ArenaProtocolPage`, and `surfaceContent` reference hardcoded `/art/scenes/...` paths; no attacker-controlled input reaches `src`/`srcSet`/`background-image`. - **Audio (`WebAudioMixer`, `playGameSfx`, `useArenaSimplePageSfx`):** Throttle intervals and gain multipliers only; playback still uses the existing allowlisted `SFX_FILES` map and `fetch` of bundled static URLs. - **`indexerApi.ts`:** Comment-only rename/clarification of legacy `sale_ended`; no request/response handling changes. - **`ArenaSimpleAgentCard` Python snippets:** Documentation copy updated (`ended()` → `paused()`); not executed by the frontend bundle. No plausible medium+ attack path identified on this diff.
PlasticDigits commented 2026-06-08 08:45:13 +00:00 (Migrated from gitlab.com)

mentioned in commit 912c2ae220

mentioned in commit 912c2ae22009d84580307da116140fc0809a3fbf
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
code/yieldomega!437
No description provided.