mirror of
https://github.com/got-feedBack/feedBack.git
synced 2026-07-28 07:41:22 +00:00
7ffa6e2c51
The Passports tab beside Venues renders the badge journey physically: - Per-instrument passport book: embossed CSS-leather cover, 3D page-turn spread (badge page left, ticket stubs right), Escape/backdrop close. - Wax-seal commitment ceremony (Stage 0) — pressing the seal commits the instrument; opening a first passport runs the ceremony implicitly. - Rubber-stamp badge slam: earned badges chime + notify immediately, the slam (with ink bleed, page shake, deterministic sin-hash jitter) plays when the passport is next opened, then the badge is marked seen. - Ticket-stub repertoire: qualifying songs as collected stubs. - Brochure rack: unopened genres as "Explore next" invitations — no greyed slots, no completion meters (the anti-list as layout). - Drill relay: on virtuoso:progress bus events the career screen posts the full virtuoso.progress localStorage snapshot to the drill-state intake (debounced; one-time bootstrap when the server has none). - Four synthesized sfx (stamp/seal/page/chime, 13 KB total) as plugin assets; prefers-reduced-motion disables the theatrics. Pure logic (ppKey, ppJitter, badge diff/seen) is covered by a bare-vm node --test suite via a window.__careerPassportTest seam. Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
43 lines
2.3 KiB
HTML
43 lines
2.3 KiB
HTML
<div class="max-w-5xl mx-auto px-4 py-6">
|
|
<div class="flex items-end justify-between flex-wrap gap-3 mb-1">
|
|
<h1 class="text-2xl font-bold text-white">Career</h1>
|
|
<div id="career-stars-summary" class="text-sm text-gray-400"></div>
|
|
</div>
|
|
<div class="career-tabs" role="tablist">
|
|
<button class="career-tab" data-career-tab="venues" role="tab">Venues</button>
|
|
<button class="career-tab" data-career-tab="passports" role="tab">Passports</button>
|
|
</div>
|
|
|
|
<div id="career-tab-venues">
|
|
<p class="text-sm text-gray-400 mb-4">Earn stars by playing songs well — 60% accuracy is a star, 75% two, 85% three. Stars unlock bigger stages, and the crowd plays along with you.</p>
|
|
<div id="career-progress-wrap" class="mb-6">
|
|
<div class="career-bar-track">
|
|
<div id="career-progress-bar" class="career-bar-fill" style="width:0%"></div>
|
|
</div>
|
|
<div id="career-progress-label" class="text-xs text-gray-500 mt-1"></div>
|
|
</div>
|
|
<div id="career-venues" class="career-venues"></div>
|
|
<div class="mt-8">
|
|
<div class="flex items-end justify-between flex-wrap gap-2 mb-2">
|
|
<h2 class="text-lg font-semibold text-white">Your star collection</h2>
|
|
<div id="career-star-summary" class="text-xs text-gray-400"></div>
|
|
</div>
|
|
<div id="career-star-list" class="career-star-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="career-tab-passports" class="hidden">
|
|
<p class="text-sm text-gray-400 mb-4">Commit to an instrument, pick a genre, and stamp your way to its badge — five ★★ songs mint a Bronze. Your passport wall is who you are as a musician.</p>
|
|
<div id="pp-instruments" class="pp-instruments"></div>
|
|
<div id="pp-shelf-wrap" class="mt-5">
|
|
<div id="pp-shelf" class="pp-shelf"></div>
|
|
</div>
|
|
<div id="pp-rack-wrap" class="mt-8">
|
|
<h2 class="text-lg font-semibold text-white mb-1">Explore next</h2>
|
|
<p class="text-xs text-gray-500 mb-3">More genres, whenever you want them — your wall is complete as it is.</p>
|
|
<div id="pp-rack" class="pp-rack"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pp-overlay" class="pp-overlay hidden"></div>
|