code/yieldomega
Watch
4
0
Fork
You've already forked yieldomega
 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity

Frontend UX: restyle existing characters, art, motion, and audio for the new aesthetic #297

New issue
Closed
opened 2026-06-06 09:35:19 +00:00 by PlasticDigits · 8 comments
PlasticDigits commented 2026-06-06 09:35:19 +00:00 (Migrated from gitlab.com)

Summary

Restyle existing characters, scene art, motion, and audio to match the approved cyberminimalist glassmorphism PvP command-console aesthetic — without replacing the character cast.

Scope

  • Keep the same characters/cutouts; apply cyberminimalist glassmorphism lighting/treatment
  • Replace arcade scene backdrops with dark neon/glass-appropriate environments
  • Tune motion (subtle drift, radar, ambient) to match command-console feel
  • Review SFX and audio chrome for compatibility with the new UI (less arcade, more tactical)
  • Update art README consumer links

Key files

  • frontend/public/art/README.md
  • frontend/public/art/cutouts/
  • frontend/public/art/scenes/
  • docs/frontend/missing-art-assets.md
  • docs/frontend/sound-effects-recommendations.md
  • frontend/src/pages/arena/useArenaSimplePageSfx.ts

Constraints

  • Characters are not swapped out for a new cast — they must remain identifiable across routes
  • Approved palette direction: Shadow WarBow Ops acid/amber on dark glass
  • Characters support gameplay-first PvP tone, not worldbuilding exposition
  • Run bash scripts/check-art-readme-consumers.sh after asset path changes

Acceptance criteria

  • Same character cast appears across routes with new styling treatment
  • Scene backdrops match cyberminimalist glass aesthetic (no arcade JPG neobrutalism)
  • Motion is subtle and tactical, not playful/arcade
  • Art README consumer map is current
  • INV-FRONTEND-286-ART-README invariant preserved
## Summary Restyle existing characters, scene art, motion, and audio to match the approved cyberminimalist glassmorphism PvP command-console aesthetic — **without replacing the character cast**. ## Scope - Keep the same characters/cutouts; apply cyberminimalist glassmorphism lighting/treatment - Replace arcade scene backdrops with dark neon/glass-appropriate environments - Tune motion (subtle drift, radar, ambient) to match command-console feel - Review SFX and audio chrome for compatibility with the new UI (less arcade, more tactical) - Update art README consumer links ## Key files - `frontend/public/art/README.md` - `frontend/public/art/cutouts/` - `frontend/public/art/scenes/` - `docs/frontend/missing-art-assets.md` - `docs/frontend/sound-effects-recommendations.md` - `frontend/src/pages/arena/useArenaSimplePageSfx.ts` ## Constraints - **Characters are not swapped out for a new cast** — they must remain identifiable across routes - Approved palette direction: Shadow WarBow Ops acid/amber on dark glass - Characters support gameplay-first PvP tone, not worldbuilding exposition - Run `bash scripts/check-art-readme-consumers.sh` after asset path changes ## Acceptance criteria - [ ] Same character cast appears across routes with new styling treatment - [ ] Scene backdrops match cyberminimalist glass aesthetic (no arcade JPG neobrutalism) - [ ] Motion is subtle and tactical, not playful/arcade - [ ] Art README consumer map is current - [ ] `INV-FRONTEND-286-ART-README` invariant preserved
PlasticDigits commented 2026-06-07 09:39:53 +00:00 (Migrated from gitlab.com)

mentioned in merge request !437

mentioned in merge request !437
PlasticDigits commented 2026-06-07 09:40:18 +00:00 (Migrated from gitlab.com)

Implemented #297 in MR !437: https://gitlab.com/PlasticDigits/yieldomega/-/merge_requests/67

What I design-reviewed:

  • Issue title/body/labels/comments via glab issue view 297 -R PlasticDigits/yieldomega --comments (no comments were present).
  • Product and frontend docs for TimeArena/Arena v2, cyberminimalist design, Arena views, art assets, audio guidance, invariants, and nearby Home/countdown/Arena/Protocol/Referrals/audio code.
  • User goals and time-sensitive actions: route quickly to PLAY/BUY or AUDIT, keep Last Buy and Buy CHARM dominant, make referral CRED mechanics scannable, and avoid stale sale/redeem/TimeCurve assumptions.

What changed:

  • Added dark command-console SVG backplates for Home, countdown, Arena, Protocol, and Referrals card consumers while keeping existing bunny/sniper-shark cast recognizable.
  • Tuned motion and visual treatment toward subtle drift/pulse, including a refined countdown mascot treatment after browser smoke.
  • Reduced and sparsified Arena SFX cues so active feeds do not become arcade bell loops.
  • Updated agent snippets/docs/comments to use current TimeArena mechanics (paused() / settlement framing), not stale ended() / sale lifecycle assumptions.
  • Added/updated static tests, art README mapping, frontend design docs, Arena view docs, invariants, sound guidance, missing-art notes, and manual QA checklist for future verification.

Acceptance / verification:

  • PASS - Issue fetch and design review completed with glab issue view 297 -R PlasticDigits/yieldomega --comments.
  • PASS - Art consumers verified with bash scripts/check-art-readme-consumers.sh.
  • PASS - Frontend typecheck: cd frontend && npm run typecheck.
  • PASS - Frontend lint: cd frontend && npm run lint (0 errors, 9 pre-existing warnings in unrelated fast-refresh/hook-dependency areas).
  • PASS - Full frontend tests: cd frontend && npm test (108 files, 555 tests).
  • PASS - Focused post-refine tests: cd frontend && npm test -- arenaCommandConsoleStatic.test.ts timeArenaResponsiveLayoutCss.test.ts LaunchCountdownPage.test.tsx.
  • PASS - Commit hook: gitleaks scanned the commit with no leaks; frontend typecheck passed.
  • PASS - Browser MCP visual smoke: Home, countdown with future VITE_LAUNCH_TIMESTAMP, /arena, /arena/protocol, and /referrals; mobile 390x844 countdown had no horizontal overflow and hid large cutouts.

Visual/design checklist for reviewers:

  • Home should show home-command-console.svg, subdued bunny branding, and immediate PLAY TIME ARENA / AUDIT actions.
  • Countdown should show launch-countdown-command-console.svg, current TimeArena copy, subdued or hidden mascot accents, and clock-first hierarchy.
  • /arena should keep Last Buy and BUY CHARM primary with arena-simple-command-console.svg and low-emphasis mascot/sniper-shark accents.
  • /arena/protocol should use the dark AUDIT console scene with compact VERIFY / TRACE / WATCH framing and unchanged address/blockie treatment.
  • /referrals should keep first-party dark glass treatment and flat 5 + 5 CRED mechanics.
  • Audio should feel sparse: peer-buy and timer cues are throttled and quieter, with user controls respected.

No blockers found; leaving the issue open for maintainer review per request.

Implemented #297 in MR !437: https://gitlab.com/PlasticDigits/yieldomega/-/merge_requests/67 What I design-reviewed: - Issue title/body/labels/comments via `glab issue view 297 -R PlasticDigits/yieldomega --comments` (no comments were present). - Product and frontend docs for TimeArena/Arena v2, cyberminimalist design, Arena views, art assets, audio guidance, invariants, and nearby Home/countdown/Arena/Protocol/Referrals/audio code. - User goals and time-sensitive actions: route quickly to PLAY/BUY or AUDIT, keep Last Buy and Buy CHARM dominant, make referral CRED mechanics scannable, and avoid stale sale/redeem/TimeCurve assumptions. What changed: - Added dark command-console SVG backplates for Home, countdown, Arena, Protocol, and Referrals card consumers while keeping existing bunny/sniper-shark cast recognizable. - Tuned motion and visual treatment toward subtle drift/pulse, including a refined countdown mascot treatment after browser smoke. - Reduced and sparsified Arena SFX cues so active feeds do not become arcade bell loops. - Updated agent snippets/docs/comments to use current TimeArena mechanics (`paused()` / settlement framing), not stale `ended()` / sale lifecycle assumptions. - Added/updated static tests, art README mapping, frontend design docs, Arena view docs, invariants, sound guidance, missing-art notes, and manual QA checklist for future verification. Acceptance / verification: - PASS - Issue fetch and design review completed with `glab issue view 297 -R PlasticDigits/yieldomega --comments`. - PASS - Art consumers verified with `bash scripts/check-art-readme-consumers.sh`. - PASS - Frontend typecheck: `cd frontend && npm run typecheck`. - PASS - Frontend lint: `cd frontend && npm run lint` (0 errors, 9 pre-existing warnings in unrelated fast-refresh/hook-dependency areas). - PASS - Full frontend tests: `cd frontend && npm test` (108 files, 555 tests). - PASS - Focused post-refine tests: `cd frontend && npm test -- arenaCommandConsoleStatic.test.ts timeArenaResponsiveLayoutCss.test.ts LaunchCountdownPage.test.tsx`. - PASS - Commit hook: gitleaks scanned the commit with no leaks; frontend typecheck passed. - PASS - Browser MCP visual smoke: Home, countdown with future `VITE_LAUNCH_TIMESTAMP`, `/arena`, `/arena/protocol`, and `/referrals`; mobile 390x844 countdown had no horizontal overflow and hid large cutouts. Visual/design checklist for reviewers: - Home should show `home-command-console.svg`, subdued bunny branding, and immediate PLAY TIME ARENA / AUDIT actions. - Countdown should show `launch-countdown-command-console.svg`, current TimeArena copy, subdued or hidden mascot accents, and clock-first hierarchy. - `/arena` should keep Last Buy and BUY CHARM primary with `arena-simple-command-console.svg` and low-emphasis mascot/sniper-shark accents. - `/arena/protocol` should use the dark AUDIT console scene with compact VERIFY / TRACE / WATCH framing and unchanged address/blockie treatment. - `/referrals` should keep first-party dark glass treatment and flat `5 + 5 CRED` mechanics. - Audio should feel sparse: peer-buy and timer cues are throttled and quieter, with user controls respected. No blockers found; leaving the issue open for maintainer review per request.
ghost1 commented 2026-06-07 09:46:54 +00:00 (Migrated from gitlab.com)

mentioned in merge request !438

mentioned in merge request !438
ghost1 commented 2026-06-07 11:50:15 +00:00 (Migrated from gitlab.com)

mentioned in commit 383b979406

mentioned in commit 383b9794067e8326064ceeca264b6a5fadc5bd30
PlasticDigits commented 2026-06-07 11:50:25 +00:00 (Migrated from gitlab.com)

mentioned in merge request !439

mentioned in merge request !439
PlasticDigits commented 2026-06-07 11:52:51 +00:00 (Migrated from gitlab.com)

mentioned in issue #290

mentioned in issue #290
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-06-07 12:07:57 +00:00
PlasticDigits commented 2026-06-07 12:08:01 +00:00 (Migrated from gitlab.com)

Verification complete — GitLab #297

Issue: https://gitlab.com/PlasticDigits/yieldomega/-/work_items/297
Implementation: MR !437 (merged)
Verifier: Cloud Agent agent:verify automation

Acceptance criteria

Criterion Result How verified
Same character cast across routes with new styling treatment PASS rg confirms bunny + sniper-shark cutouts on Home, countdown, /arena, referrals; arenaCommandConsoleStatic.test.ts; browser smoke on /home, /arena, /referrals
Scene backdrops match cyberminimalist glass aesthetic (no arcade JPG neobrutalism) PASS Production consumers use *-command-console.svg only (rg '/art/scenes/.*\.jpg' frontend/src → no matches); 6 SVG backplates in frontend/public/art/scenes/; static test asserts no bright JPG scene consumers
Motion is subtle and tactical, not playful/arcade PASS arenaCommandConsoleStatic.test.ts (no arcade timer/vending CSS); WebAudioMixer sparse SFX gates; arena-concept-drift ambient animation on command console; browser smoke — no exaggerated bounce
Art README consumer map is current PASS bash scripts/check-art-readme-consumers.sh → OK (31 consumers, no stale TimeCurve links)
INV-FRONTEND-286-ART-README invariant preserved PASS Same script; docs/invariants cross-links intact

Additional invariant

Invariant Result How verified
INV-FRONTEND-297-ART-MOTION-AUDIO PASS arenaCommandConsoleStatic.test.ts (5 tests); art README check; frontend CI suite

Automated checks

Command Result
bash scripts/check-art-readme-consumers.sh PASS
cd frontend && npm run typecheck PASS
cd frontend && npm run lint PASS (0 errors, 9 pre-existing warnings)
cd frontend && npm test PASS (110 files, 564 tests)
cd frontend && npm test -- arenaCommandConsoleStatic.test.ts timeArenaResponsiveLayoutCss.test.ts LaunchCountdownPage.test.tsx PASS (19 tests)
CI=1 npx playwright test home.spec.ts arena.spec.ts referrals-surface.spec.ts launch-countdown.spec.ts navigation.spec.ts --workers=5 PASS (16 passed, 2 skipped — countdown gate scenarios require future VITE_LAUNCH_TIMESTAMP build)

Manual / visual QA (manual checklist §297)

Route Result Notes
Home PASS home-command-console.svg backdrop; subdued bunny cutouts; PLAY / AUDIT CTAs
/arena PASS arena-command-console surface; Last Buy + BUY CHARM primary; low-opacity character accents
/arena/protocol PASS Dark AUDIT console; VERIFY / TRACE / WATCH framing
/referrals PASS Dark glass treatment; flat 5 + 5 CRED mechanics
Launch countdown SKIP Build has no future VITE_LAUNCH_TIMESTAMP (E2E countdown scenarios skipped); code uses launch-countdown-command-console.svg and LaunchCountdownPage.test.tsx PASS
Audio sparsity PASS PEER_BUY_MIN_GAP_MS=5000, TIMER_CALM_MIN_GAP_MS=75000, TIMER_URGENT_MIN_GAP_MS=40000 in WebAudioMixer.ts; useArenaSimplePageSfx respects reduceMotion

All acceptance criteria met. Closing issue.

## Verification complete — GitLab #297 **Issue:** https://gitlab.com/PlasticDigits/yieldomega/-/work_items/297 **Implementation:** MR !437 (merged) **Verifier:** Cloud Agent `agent:verify` automation ### Acceptance criteria | Criterion | Result | How verified | |-----------|--------|--------------| | Same character cast across routes with new styling treatment | **PASS** | `rg` confirms bunny + sniper-shark cutouts on Home, countdown, `/arena`, referrals; `arenaCommandConsoleStatic.test.ts`; browser smoke on `/home`, `/arena`, `/referrals` | | Scene backdrops match cyberminimalist glass aesthetic (no arcade JPG neobrutalism) | **PASS** | Production consumers use `*-command-console.svg` only (`rg '/art/scenes/.*\.jpg' frontend/src` → no matches); 6 SVG backplates in `frontend/public/art/scenes/`; static test asserts no bright JPG scene consumers | | Motion is subtle and tactical, not playful/arcade | **PASS** | `arenaCommandConsoleStatic.test.ts` (no arcade timer/vending CSS); `WebAudioMixer` sparse SFX gates; `arena-concept-drift` ambient animation on command console; browser smoke — no exaggerated bounce | | Art README consumer map is current | **PASS** | `bash scripts/check-art-readme-consumers.sh` → OK (31 consumers, no stale TimeCurve links) | | `INV-FRONTEND-286-ART-README` invariant preserved | **PASS** | Same script; docs/invariants cross-links intact | ### Additional invariant | Invariant | Result | How verified | |-----------|--------|--------------| | `INV-FRONTEND-297-ART-MOTION-AUDIO` | **PASS** | `arenaCommandConsoleStatic.test.ts` (5 tests); art README check; frontend CI suite | ### Automated checks | Command | Result | |---------|--------| | `bash scripts/check-art-readme-consumers.sh` | **PASS** | | `cd frontend && npm run typecheck` | **PASS** | | `cd frontend && npm run lint` | **PASS** (0 errors, 9 pre-existing warnings) | | `cd frontend && npm test` | **PASS** (110 files, 564 tests) | | `cd frontend && npm test -- arenaCommandConsoleStatic.test.ts timeArenaResponsiveLayoutCss.test.ts LaunchCountdownPage.test.tsx` | **PASS** (19 tests) | | `CI=1 npx playwright test home.spec.ts arena.spec.ts referrals-surface.spec.ts launch-countdown.spec.ts navigation.spec.ts --workers=5` | **PASS** (16 passed, 2 skipped — countdown gate scenarios require future `VITE_LAUNCH_TIMESTAMP` build) | ### Manual / visual QA (manual checklist §297) | Route | Result | Notes | |-------|--------|-------| | Home | **PASS** | `home-command-console.svg` backdrop; subdued bunny cutouts; PLAY / AUDIT CTAs | | `/arena` | **PASS** | `arena-command-console` surface; Last Buy + BUY CHARM primary; low-opacity character accents | | `/arena/protocol` | **PASS** | Dark AUDIT console; VERIFY / TRACE / WATCH framing | | `/referrals` | **PASS** | Dark glass treatment; flat **5 + 5 CRED** mechanics | | Launch countdown | **SKIP** | Build has no future `VITE_LAUNCH_TIMESTAMP` (E2E countdown scenarios skipped); code uses `launch-countdown-command-console.svg` and `LaunchCountdownPage.test.tsx` **PASS** | | Audio sparsity | **PASS** | `PEER_BUY_MIN_GAP_MS=5000`, `TIMER_CALM_MIN_GAP_MS=75000`, `TIMER_URGENT_MIN_GAP_MS=40000` in `WebAudioMixer.ts`; `useArenaSimplePageSfx` respects `reduceMotion` | All acceptance criteria met. Closing issue.
PlasticDigits commented 2026-06-08 08:45:13 +00:00 (Migrated from gitlab.com)

mentioned in commit 0fb75d964c

mentioned in commit 0fb75d964ca0b055d73fc300e4e5053b4513b3f0
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
cac-design-issue-544
renovate/configure
No results found.
Labels
Clear labels   
agent:fix_bugfix

   
agent:fix_conflicts

   
agent:fix_security

   
agent:gap_analysis

   
agent:implement

   
agent:open_issues

   
agents

   
agent:security_audit

   
agent:verify
  
area
timecurve

  
arena

   
arena-v2

   
audit

   
block:feature_review

   
block:security

   
bug

   
contracts

   
design

   
devops

   
docs
Documentation

  
documentation

   
enhancement

   
epic
Epic / umbrella issue

  
feature

   
frontend

   
indexer

   
low priority
Low priority, investigate other issues first

  
megaeth

   
operations

   
ops
Deploy and operations

  
performance

   
QA

   
qa checklist

   
referrals

   
removal
Legacy removal

  
security

   
smart-contracts

   
tech-debt

   
testing

   
time-arena
TimeArena v2 revamp

  
timecurve

   
visual-qa
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:open_issues
agents
agent:security_audit
agent:verify
area
timecurve
arena
arena-v2
audit
block:feature_review
block:security
bug
contracts
design
devops
docs
documentation
enhancement
epic
feature
frontend
indexer
low priority
megaeth
operations
ops
performance
QA
qa checklist
referrals
removal
security
smart-contracts
tech-debt
testing
time-arena
timecurve
visual-qa
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
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#297
No description provided.