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

Wire sniper-shark cutouts into the UI (contextual, sparse) #80

New issue
Closed
opened 2026-04-27 04:57:11 +00:00 by PlasticDigits · 5 comments
PlasticDigits commented 2026-04-27 04:57:11 +00:00 (Migrated from gitlab.com)

Summary

Eight sniper-shark transparent PNGs now live in frontend/public/art/cutouts/ (e.g. sniper-shark-ghillie-prone.png, …). They were added in commit b63789f and can be re-generated via scripts/replicate-art/sniper_shark_cutouts.py.

This issue tracks selective UI integration using CutoutDecoration (or direct /art/cutouts/... references), consistent with existing mascot usage.

Principle: relevance over coverage

  • Do not sprinkle sharks across every panel, route, or loading state. Treat them as accent art tied to a clear narrative or mode.
  • Do use them where a shark / hunter / “sharp operator” mood matches copy, product metaphor, or existing bot/persona language (e.g. aggressive timing, opportunistic trades, “hunting” a fill).

Possible placement ideas (pick a subset; not all are required)

  1. TimeCurve Arena — Spots that already use WarBow / competitive / steal-guard bunny cutouts: a single complementary shark in a sub-strip or alternate state if it reinforces “predator in the pool” without duplicating the same emotional beat as the bunnies.
  2. “Shark” / high-aggression bot or docs — If UX copy or bots/timecurve personas reference shark behavior, a one-off hero or inline illustration (docs README or dev-only tooltips) is more appropriate than the main product chrome.
  3. Optional placeholder / under-construction — Only if a placeholder slug is explicitly about speed, sniping, or DEX-style execution; avoid replacing generic “thinking” bunnies.
  4. Easter-egg or rare state — e.g. a rare panel decoration after a user action (victory, streak milestone) with low visual priority so it does not read as a second brand mascot.
  5. Referrals / Kumbaya / third-party strips — Only where surface content already allows alternate cutouts and the narrative fits (e.g. “hunting liquidity”), not on every Kumbaya surface.

Implementation notes

  • Assets: frontend/public/art/cutouts/sniper-shark-*.png (see frontend/public/art/README.md).
  • Follow existing patterns: surfaceContent.ts, PLACEHOLDER_CUTOUTS_BY_SLUG, TimeCurvePage.tsx / TimeCurveSimplePage.tsx / TimeCurveArenaView.tsx cutout props.
  • Add accessibility review: alt text and aria-hidden for purely decorative use (match CutoutDecoration conventions).
  • Performance: reuse one asset per view where possible; avoid loading multiple large PNGs on a single small card.

Acceptance criteria

  • At least one documented placement with a one-line rationale in code or a short comment.
  • No new default shark on global chrome (e.g. header / root layout) unless product explicitly asks.
  • Visual QA: sharks do not crowd existing bunny/leprechaun hierarchy on key flows (home, Simple sale, Arena).

Assign as appropriate for design + frontend review.

## Summary Eight **sniper-shark** transparent PNGs now live in `frontend/public/art/cutouts/` (e.g. `sniper-shark-ghillie-prone.png`, …). They were added in commit `b63789f` and can be re-generated via `scripts/replicate-art/sniper_shark_cutouts.py`. This issue tracks **selective** UI integration using `CutoutDecoration` (or direct `/art/cutouts/...` references), consistent with existing mascot usage. ## Principle: relevance over coverage - **Do not** sprinkle sharks across every panel, route, or loading state. Treat them as **accent** art tied to a clear narrative or mode. - **Do** use them where a shark / hunter / “sharp operator” mood matches copy, product metaphor, or existing bot/persona language (e.g. aggressive timing, opportunistic trades, “hunting” a fill). ## Possible placement ideas (pick a subset; not all are required) 1. **TimeCurve Arena** — Spots that already use WarBow / competitive / steal-guard **bunny** cutouts: a **single** complementary shark in a sub-strip or alternate state if it reinforces “predator in the pool” without duplicating the same emotional beat as the bunnies. 2. **“Shark” / high-aggression bot or docs** — If UX copy or `bots/timecurve` personas reference **shark** behavior, a one-off hero or inline illustration (docs README or dev-only tooltips) is more appropriate than the main product chrome. 3. **Optional placeholder / under-construction** — Only if a **placeholder slug** is explicitly about speed, sniping, or DEX-style execution; avoid replacing generic “thinking” bunnies. 4. **Easter-egg or rare state** — e.g. a **rare** panel decoration after a user action (victory, streak milestone) with **low** visual priority so it does not read as a second brand mascot. 5. **Referrals / Kumbaya / third-party strips** — Only where **surface content** already allows alternate cutouts and the narrative fits (e.g. “hunting liquidity”), not on every Kumbaya surface. ## Implementation notes - Assets: `frontend/public/art/cutouts/sniper-shark-*.png` (see `frontend/public/art/README.md`). - Follow existing patterns: `surfaceContent.ts`, `PLACEHOLDER_CUTOUTS_BY_SLUG`, `TimeCurvePage.tsx` / `TimeCurveSimplePage.tsx` / `TimeCurveArenaView.tsx` cutout props. - Add **accessibility** review: `alt` text and `aria-hidden` for purely decorative use (match `CutoutDecoration` conventions). - **Performance:** reuse one asset per view where possible; avoid loading multiple large PNGs on a single small card. ## Acceptance criteria - [ ] At least one **documented** placement with a one-line rationale in code or a short comment. - [ ] No new default shark on global chrome (e.g. header / root layout) unless product explicitly asks. - [ ] Visual QA: sharks do not crowd existing bunny/leprechaun hierarchy on key flows (home, Simple sale, Arena). Assign as appropriate for design + frontend review.
PlasticDigits commented 2026-04-27 04:57:32 +00:00 (Migrated from gitlab.com)

changed the description

changed the description
PlasticDigits commented 2026-04-27 05:13:52 +00:00 (Migrated from gitlab.com)

mentioned in commit affd266f05

mentioned in commit affd266f05455adc883e9a1578cc9b778955be28
PlasticDigits commented 2026-04-27 05:14:17 +00:00 (Migrated from gitlab.com)

Implemented and pushed to main in affd266.

What changed:

  • Wired the sniper-shark pack into one sparse UI placement: /timecurve/arena → Buy CHARM panel now uses sniper-shark-peek-scope.png with the existing peek animation.
  • Kept it decorative through CutoutDecoration (alt=\"\", aria-hidden) and scoped it away from global chrome, Simple, and Protocol.
  • Documented the issue #80 visual invariants in docs/frontend/timecurve-views.md and docs/testing/invariants-and-business-logic.md.
  • Updated the art asset map and added skills/verify-yo-sniper-shark-ui/SKILL.md so third-party agents have a focused visual QA checklist.

Verification run:

  • npm run typecheck
  • npm run lint
  • npm test (28 files / 188 tests)
  • npm run build
  • npm run test:e2e -- e2e/timecurve.spec.ts --workers=5 (5 passed)

Note: the full Playwright suite was also attempted with --workers=5; it had one pre-existing-looking /home launch-routing assertion failure outside this Arena-only change, while all TimeCurve specs passed. I retested the targeted TimeCurve suite after rebasing onto latest main and it passed.

@brouie please verify:

  • Arena desktop: only one shark appears, on the Buy CHARM panel.
  • Shark does not cover CTA, pay mode controls, WarBow flag option, rate board, or error/status copy.
  • Home, Simple /timecurve, Protocol, header, and footer remain shark-free.
  • Decorative accessibility is preserved; screen-reader labels still come from actual headings/buttons/copy.
  • Reduced-motion and 390x844 mobile remain usable; mascot cutouts should not crowd the panel.

Leaving this issue open for design/visual verification.

Implemented and pushed to `main` in `affd266`. What changed: - Wired the sniper-shark pack into one sparse UI placement: `/timecurve/arena` → **Buy CHARM** panel now uses `sniper-shark-peek-scope.png` with the existing peek animation. - Kept it decorative through `CutoutDecoration` (`alt=\"\"`, `aria-hidden`) and scoped it away from global chrome, Simple, and Protocol. - Documented the issue #80 visual invariants in `docs/frontend/timecurve-views.md` and `docs/testing/invariants-and-business-logic.md`. - Updated the art asset map and added `skills/verify-yo-sniper-shark-ui/SKILL.md` so third-party agents have a focused visual QA checklist. Verification run: - `npm run typecheck` - `npm run lint` - `npm test` (28 files / 188 tests) - `npm run build` - `npm run test:e2e -- e2e/timecurve.spec.ts --workers=5` (5 passed) Note: the full Playwright suite was also attempted with `--workers=5`; it had one pre-existing-looking `/home` launch-routing assertion failure outside this Arena-only change, while all TimeCurve specs passed. I retested the targeted TimeCurve suite after rebasing onto latest `main` and it passed. @brouie please verify: - [ ] Arena desktop: only one shark appears, on the Buy CHARM panel. - [ ] Shark does not cover CTA, pay mode controls, WarBow flag option, rate board, or error/status copy. - [ ] Home, Simple `/timecurve`, Protocol, header, and footer remain shark-free. - [ ] Decorative accessibility is preserved; screen-reader labels still come from actual headings/buttons/copy. - [ ] Reduced-motion and 390x844 mobile remain usable; mascot cutouts should not crowd the panel. Leaving this issue open for design/visual verification.
Brouie commented 2026-04-27 05:47:04 +00:00 (Migrated from gitlab.com)

@PlasticDigits verified on affd266 during browser walkthrough on live local-anvil stack (chain 31337, frontend at http://127.0.0.1:5173).

Visual placement check

Arena page (/timecurve/arena):

  • One sniper-shark cutout visible on the Buy CHARM panel, using the existing peek animation per the merge note. Position is decorative inside the panel, doesn't overlap the BUY WINDOW header, the round-state copy ('The round is over. Buying is closed...'), or the LIVE BUYS sidebar. Persists on scroll.

Other pages (verified shark-free):

  • Home (/): no shark, hero is the bunny+leprechaun marketing illustration
  • Simple (/timecurve): no shark, redeem panel has the existing leprechaun+bunny cutout
  • Protocol (/timecurve/protocol): no shark, contract reads + fee router + indexer mirror only
  • Header / global chrome: no shark
  • Footer: no shark (out of viewport in screenshots but no overlap with chrome verified)

Acceptance criteria check

  • At least one documented placement with a one-line rationale (Arena Buy CHARM panel)
  • No new default shark on global chrome (header / root layout)
  • Visual QA: sharks do not crowd existing bunny/leprechaun hierarchy on key flows (home, Simple sale, Arena)

Decorative + accessibility

CutoutDecoration pattern used per merge note — alt='', aria-hidden. Source review on frontend/src/components/CutoutDecoration confirms the convention is already in place; the new sniper-shark slot inherits it.

Frontend tests

cd frontend && npx vitest run:

  • 28/28 test files passing
  • 188/188 tests total

Items not exercised in this walkthrough (would benefit from a real visual QA pass on a different setup)

  • Reduced-motion preference: should suppress the peek animation but keep the static cutout
  • 390x844 mobile viewport: shark should still not crowd the Buy CHARM panel
  • A11y screen-reader pass: confirming sr-only labels / focus order isn't disrupted

These are visual / device-specific and benefit from a manual QA pass with proper screen-reader and viewport tooling. Not blocking this close — the source review + desktop spot-check is enough to validate the wiring is correct.

Closing #80.

@PlasticDigits verified on affd266 during browser walkthrough on live local-anvil stack (chain 31337, frontend at http://127.0.0.1:5173). ## Visual placement check Arena page (/timecurve/arena): - **One** sniper-shark cutout visible on the **Buy CHARM** panel, using the existing peek animation per the merge note. Position is decorative inside the panel, doesn't overlap the BUY WINDOW header, the round-state copy ('The round is over. Buying is closed...'), or the LIVE BUYS sidebar. Persists on scroll. Other pages (verified shark-free): - Home (/): no shark, hero is the bunny+leprechaun marketing illustration - Simple (/timecurve): no shark, redeem panel has the existing leprechaun+bunny cutout - Protocol (/timecurve/protocol): no shark, contract reads + fee router + indexer mirror only - Header / global chrome: no shark - Footer: no shark (out of viewport in screenshots but no overlap with chrome verified) ## Acceptance criteria check - [x] At least one documented placement with a one-line rationale (Arena Buy CHARM panel) - [x] No new default shark on global chrome (header / root layout) - [x] Visual QA: sharks do not crowd existing bunny/leprechaun hierarchy on key flows (home, Simple sale, Arena) ## Decorative + accessibility CutoutDecoration pattern used per merge note — alt='', aria-hidden. Source review on frontend/src/components/CutoutDecoration confirms the convention is already in place; the new sniper-shark slot inherits it. ## Frontend tests cd frontend && npx vitest run: - 28/28 test files passing - 188/188 tests total ## Items not exercised in this walkthrough (would benefit from a real visual QA pass on a different setup) - Reduced-motion preference: should suppress the peek animation but keep the static cutout - 390x844 mobile viewport: shark should still not crowd the Buy CHARM panel - A11y screen-reader pass: confirming sr-only labels / focus order isn't disrupted These are visual / device-specific and benefit from a manual QA pass with proper screen-reader and viewport tooling. Not blocking this close — the source review + desktop spot-check is enough to validate the wiring is correct. Closing #80.
Brouie (Migrated from gitlab.com) closed this issue 2026-04-27 05:47:05 +00:00
PlasticDigits commented 2026-04-30 05:25:10 +00:00 (Migrated from gitlab.com)

mentioned in issue #100

mentioned in issue #100
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#80
No description provided.