-
-
Your star collection
-
+
+
+
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.
+
+
+
+
+
Your star collection
+
+
+
+
+
+
+
+
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.
+
+
+
+
Explore next
+
More genres, whenever you want them — your wall is complete as it is.
+
-
+
diff --git a/plugins/career/screen.js b/plugins/career/screen.js
index 1d081cb..ff6641f 100644
--- a/plugins/career/screen.js
+++ b/plugins/career/screen.js
@@ -17,11 +17,24 @@
const PREV_VIZ_KEY = 'feedBack-career-prev-viz';
const POLL_MS = 2000;
+ // Passports (the badge-journey layer; see routes.py — badges are computed
+ // server-side, this file only renders and relays).
+ const PP_SEEN_KEY = 'feedBack-career-badges-seen';
+ const PP_INST_KEY = 'feedBack-career-instrument';
+ const PP_TAB_KEY = 'feedBack-career-tab';
+ const PP_LABELS = { guitar: 'Guitar', bass: 'Bass', keys: 'Keys', drums: 'Drums' };
+ const PP_BROCHURE_ART = ['🎸', '🎷', '🎹', '🥁', '🎺', '🎻', '🎤', '🪕'];
+
let _state = null;
let _pollTimer = 0;
let _appliedManifestVenue = null;
let _manifestReqGen = 0; // invalidates in-flight manifest fetches
let _prevUnlockedIds = null;
+ let _pp = null; // last /passports view
+ let _ppRelayTimer = 0;
+ let _ppBook = null; // {inst, gkey} of the open spread
+ let _ppBootstrapped = false;
+ let _ppNotified = {}; // badges chimed this session (slam still pending)
function $(id) { return document.getElementById(id); }
@@ -219,9 +232,386 @@
render(state);
schedulePoll(state);
pushCrowdManifest(state);
+ refreshPassports(); // independent fetch; failures don't touch venues
+ }
+
+ // ── Passports ─────────────────────────────────────────────────────────
+
+ function lsGet(k) { try { return localStorage.getItem(k); } catch (_) { return null; } }
+ function lsSet(k, v) { try { localStorage.setItem(k, v); } catch (_) { /* ok */ } }
+
+ function ppLabel(inst) {
+ return PP_LABELS[inst] || (inst.charAt(0).toUpperCase() + inst.slice(1));
+ }
+
+ function ppKey(genre) {
+ return String(genre || '').trim().replace(/\s+/g, ' ').toLowerCase();
+ }
+
+ function ppHash(seed) {
+ let h = 0;
+ for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) | 0;
+ return h;
+ }
+
+ // Deterministic per-key jitter (sin-hash): stamps and stubs land slightly
+ // askew, the same way on every visit.
+ function ppJitter(seed, range) {
+ return (Math.abs(Math.sin(ppHash(seed))) * 2 - 1) * range;
+ }
+
+ function sfx(name) {
+ try {
+ const a = new Audio(`${API}/assets/sfx/${name}.mp3`);
+ a.volume = 0.45;
+ a.play().catch(() => { /* autoplay policy — silent is fine */ });
+ } catch (_) { /* no Audio — fine */ }
+ }
+
+ function showCareerTab(tab) {
+ lsSet(PP_TAB_KEY, tab);
+ const venues = $('career-tab-venues');
+ const pp = $('career-tab-passports');
+ if (!venues || !pp) return;
+ venues.classList.toggle('hidden', tab !== 'venues');
+ pp.classList.toggle('hidden', tab !== 'passports');
+ document.querySelectorAll('#plugin-career .career-tab').forEach((b) => {
+ b.classList.toggle('active', b.dataset.careerTab === tab);
+ });
+ }
+
+ function activeInstrument() {
+ const list = (_pp && _pp.config && _pp.config.instruments) || [];
+ const saved = lsGet(PP_INST_KEY);
+ if (saved && list.includes(saved)) return saved;
+ const committed = list.find((i) => ((_pp.instruments || {})[i] || {}).committed_at);
+ return committed || list[0] || 'guitar';
+ }
+
+ function seenBadges() {
+ try { return JSON.parse(lsGet(PP_SEEN_KEY) || '{}'); } catch (_) { return {}; }
+ }
+
+ function badgeId(inst, gkey) { return inst + '/' + gkey; }
+
+ function markBadgeSeen(inst, gkey) {
+ const seen = seenBadges();
+ seen[badgeId(inst, gkey)] = 1;
+ lsSet(PP_SEEN_KEY, JSON.stringify(seen));
+ }
+
+ // New badge → chime + notification once per session; the stamp SLAM plays
+ // when the passport is next opened (and only then is the badge marked
+ // seen, so a pending slam survives a reload).
+ function detectNewBadges(view) {
+ const seen = seenBadges();
+ for (const inst of Object.keys(view.instruments || {})) {
+ for (const p of (view.instruments[inst].passports || [])) {
+ const id = badgeId(inst, p.genre_key);
+ if (p.badge !== 'earned' || seen[id] || _ppNotified[id]) continue;
+ _ppNotified[id] = true;
+ sfx('chime');
+ if (window.fbNotify && typeof window.fbNotify.show === 'function') {
+ window.fbNotify.show({
+ big: true, icon: '🛂', accent: '#b45309',
+ title: 'Badge earned!',
+ message: `${p.genre} — Bronze, ready to stamp into your ${ppLabel(inst)} passport.`,
+ });
+ }
+ }
+ }
+ }
+
+ // Relay the Virtuoso drill snapshot (localStorage doc, not the thin bus
+ // payload) to the server intake, debounced across event bursts.
+ function relayDrillState() {
+ clearTimeout(_ppRelayTimer);
+ _ppRelayTimer = setTimeout(() => {
+ let snap = null;
+ try { snap = JSON.parse(lsGet('virtuoso.progress') || 'null'); } catch (_) { /* corrupt */ }
+ if (!snap || typeof snap !== 'object' || !snap.byNode || typeof snap.byNode !== 'object') return;
+ fetch(`${API}/drill-state`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ mode: snap.mode, xp: snap.xp, byNode: snap.byNode }),
+ }).then(() => refreshPassports()).catch(() => { /* next event retries */ });
+ }, 1500);
+ }
+
+ async function refreshPassports() {
+ let view;
+ try {
+ const res = await fetch(`${API}/passports`);
+ if (!res.ok) return;
+ view = await res.json();
+ } catch (_) { return; }
+ _pp = view;
+ detectNewBadges(view);
+ renderPassports();
+ if (!_ppBootstrapped) {
+ _ppBootstrapped = true;
+ // First run on this browser: seed the server with the local drill
+ // snapshot if it has never received one.
+ if (!(view.drill_state || {}).received_at) relayDrillState();
+ }
+ }
+
+ function ppCoverHTML(inst, p) {
+ const rot = ppJitter(inst + p.genre_key, 1.6).toFixed(2);
+ const stamp = p.badge === 'earned'
+ ? `
BRONZE`
+ : '';
+ const stubs = p.qualifying_count === 1 ? '1 stub' : `${p.qualifying_count} stubs`;
+ return `
`;
+ }
+
+ function renderShelf(inst, data) {
+ const shelf = $('pp-shelf');
+ if (!shelf) return;
+ if (!data.committed_at) {
+ shelf.innerHTML = `
+
+ ${esc(ppLabel(inst).toUpperCase())}
+ passport
+
+
+
Pick up the ${esc(ppLabel(inst).toLowerCase())}.
+
Press your seal to commit — then choose a genre below and go deep.
+
+
+
`;
+ return;
+ }
+ const books = (data.passports || []).map((p) => ppCoverHTML(inst, p)).join('');
+ shelf.innerHTML = books ||
+ '
Your shelf is ready — open your first genre passport below.
';
+ }
+
+ function renderRack(inst, data) {
+ const rack = $('pp-rack');
+ if (!rack || !_pp) return;
+ const openedKeys = new Set((data.passports || []).map((p) => p.genre_key));
+ const genres = (_pp.genres || []).filter((g) => !openedKeys.has(g.genre_key));
+ if (!genres.length) {
+ rack.innerHTML = '
No further genres in your library yet — new songs bring new brochures.
';
+ return;
+ }
+ rack.innerHTML = genres.map((g) => {
+ const art = PP_BROCHURE_ART[Math.abs(ppHash(g.genre_key)) % PP_BROCHURE_ART.length];
+ return `
`;
+ }).join('');
+ }
+
+ function renderPassports() {
+ const host = $('pp-instruments');
+ if (!host || !_pp) return;
+ const inst = activeInstrument();
+ const data = (_pp.instruments || {})[inst] || { passports: [] };
+ host.innerHTML = ((_pp.config || {}).instruments || []).map((i) => {
+ const d = (_pp.instruments || {})[i] || {};
+ const earned = (d.passports || []).filter((p) => p.badge === 'earned').length;
+ const committed = !!d.committed_at;
+ return `
`;
+ }).join('');
+ renderShelf(inst, data);
+ renderRack(inst, data);
+ }
+
+ function ppStubHTML(s) {
+ const date = (s.last_played_at || '').slice(0, 10);
+ return `
+ ${'★'.repeat(s.stars)}
+ ${esc(s.title)}
+ ${s.artist ? `${esc(s.artist)}` : ''}
+ ${date ? `${esc(date)} · ` : ''}best ${(s.best_accuracy * 100).toFixed(0)}%
+
`;
+ }
+
+ function ppBookHTML(inst, p, pendingSlam) {
+ const req = p.requirement || {};
+ const need = Math.max(0, (req.songs || 0) - p.qualifying_count);
+ const starGl = '★'.repeat(req.min_stars || 0);
+ let badgeArea = '';
+ if (p.badge === 'shown_not_judged') {
+ badgeArea = `
Shown, not judged — your ${esc(ppLabel(inst).toLowerCase())} repertoire speaks for itself.
`;
+ } else if (p.badge === 'earned') {
+ badgeArea = `
+ ${esc(p.genre.toUpperCase())}
+ BRONZE
+
+
Gold rung coming — improvise it, verified.
`;
+ } else {
+ badgeArea = `
+ ${esc(p.genre.toUpperCase())}
+ BRONZE
+
+
${need === 1 ? `One more ${starGl} song mints this stamp.` : `${need} more ${starGl} songs mint this stamp.`}
`;
+ }
+ let drills = '';
+ const reqNodes = (p.drills || {}).required || [];
+ if (reqNodes.length) {
+ const cleared = new Set((p.drills || {}).cleared || []);
+ drills = `
${reqNodes.map((n) =>
+ `
${cleared.has(n) ? '✓' : '○'} ${esc(n)}
`).join('')}
`;
+ }
+ // Graded instruments collect stubs at the badge bar; shown-not-judged
+ // instruments have no bar — every played genre song is repertoire.
+ const stubs = p.badge === 'shown_not_judged'
+ ? (p.songs || [])
+ : (p.songs || []).filter((s) => s.qualifies);
+ const emptyLine = p.badge === 'shown_not_judged'
+ ? `Play ${esc(p.genre)} songs to fill this page.`
+ : `Play ${esc(p.genre)} songs at ${starGl} to collect ticket stubs.`;
+ const stubsHTML = stubs.length ? stubs.map(ppStubHTML).join('')
+ : `
${emptyLine}
`;
+ return `
+
+
+
${esc(p.genre)} — ${esc(ppLabel(inst))}
+ ${badgeArea}${drills}
+
+
+
Ticket stubs
+
${stubsHTML}
+
+
+ ${esc(p.genre.toUpperCase())}
+ ${esc(ppLabel(inst))} passport
+
+
+
+
`;
+ }
+
+ function openBook(inst, gkey) {
+ if (!_pp) return;
+ const p = (((_pp.instruments || {})[inst] || {}).passports || [])
+ .find((x) => x.genre_key === gkey);
+ const overlay = $('pp-overlay');
+ if (!p || !overlay) return;
+ _ppBook = { inst, gkey };
+ const pending = p.badge === 'earned' && !seenBadges()[badgeId(inst, gkey)];
+ overlay.innerHTML = ppBookHTML(inst, p, pending);
+ overlay.classList.remove('hidden');
+ sfx('page');
+ // Double rAF so the cover's closed state paints before the transition.
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ const book = overlay.querySelector('.pp-book');
+ if (book) book.classList.add('open');
+ }));
+ if (pending) {
+ setTimeout(() => {
+ if (!_ppBook || _ppBook.gkey !== gkey || _ppBook.inst !== inst) return;
+ const stamp = overlay.querySelector('.pp-stamp-page');
+ const book = overlay.querySelector('.pp-book');
+ if (!stamp) return;
+ stamp.classList.remove('pp-stamp-hidden');
+ stamp.classList.add('pp-slam');
+ if (book) book.classList.add('pp-shake');
+ sfx('stamp');
+ markBadgeSeen(inst, gkey);
+ renderPassports(); // the shelf cover gains its mini-stamp
+ }, 950);
+ }
+ }
+
+ function closeBook() {
+ _ppBook = null;
+ const overlay = $('pp-overlay');
+ if (overlay) { overlay.classList.add('hidden'); overlay.innerHTML = ''; }
+ }
+
+ function commitInstrument(inst, after) {
+ fetch(`${API}/passports/commit`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ instrument: inst }),
+ }).then(() => refreshPassports())
+ .then(() => { if (after) after(); })
+ .catch(() => { /* server restarting; user retries */ });
+ }
+
+ // Stage 0 — the wax seal. Purely theatrical: the overlay plays the press,
+ // the POST commits, the shelf re-renders committed.
+ function sealCeremony(inst, after) {
+ const overlay = $('pp-overlay');
+ if (!overlay) { commitInstrument(inst, after); return; }
+ overlay.innerHTML = `
+
+ ${esc(ppLabel(inst).toUpperCase())}
+ passport
+ ${esc(ppLabel(inst).charAt(0))}
+
+
`;
+ overlay.classList.remove('hidden');
+ setTimeout(() => sfx('seal'), 450);
+ setTimeout(() => {
+ overlay.classList.add('hidden');
+ overlay.innerHTML = '';
+ commitInstrument(inst, after);
+ }, 1500);
+ }
+
+ function openGenre(inst, genre) {
+ fetch(`${API}/passports/open`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ instrument: inst, genre }),
+ }).then((res) => { if (!res.ok) throw new Error('open ' + res.status); })
+ .then(() => refreshPassports())
+ .then(() => openBook(inst, ppKey(genre)))
+ .catch(() => { /* validation/restart; rack stays */ });
}
function onClick(e) {
+ const tabBtn = e.target.closest('[data-career-tab]');
+ const instBtn = e.target.closest('[data-pp-inst]');
+ const commitBtn = e.target.closest('[data-pp-commit]');
+ const coverBtn = e.target.closest('[data-pp-open]');
+ const brochureBtn = e.target.closest('[data-pp-genre]');
+ if (tabBtn) {
+ showCareerTab(tabBtn.dataset.careerTab);
+ return;
+ }
+ if (instBtn) {
+ lsSet(PP_INST_KEY, instBtn.dataset.ppInst);
+ renderPassports();
+ return;
+ }
+ if (commitBtn) {
+ sealCeremony(commitBtn.dataset.ppCommit);
+ return;
+ }
+ if (coverBtn) {
+ openBook(activeInstrument(), coverBtn.dataset.ppOpen);
+ return;
+ }
+ if (brochureBtn) {
+ const inst = activeInstrument();
+ const genre = brochureBtn.dataset.ppGenre;
+ const committed = _pp && ((_pp.instruments || {})[inst] || {}).committed_at;
+ // Opening your first passport on an instrument IS the commitment —
+ // the seal ceremony runs first, then the passport opens.
+ if (committed) openGenre(inst, genre);
+ else sealCeremony(inst, () => openGenre(inst, genre));
+ return;
+ }
+ if (e.target.closest('[data-pp-close]') ||
+ (e.target.dataset && e.target.dataset.ppCloseBg)) {
+ closeBook();
+ return;
+ }
const dlBtn = e.target.closest('[data-career-download]');
const delBtn = e.target.closest('[data-career-delete]');
const playBtn = e.target.closest('[data-career-play]');
@@ -268,10 +658,24 @@
if (sm && typeof sm.on === 'function') {
// New song stats can add stars → thresholds may cross mid-session.
sm.on('stats:recorded', () => refresh());
+ // Virtuoso's progress emits are the drill-state relay trigger; the
+ // payload is a thin delta, so the relay reads the full localStorage
+ // snapshot instead (see relayDrillState).
+ sm.on('virtuoso:progress', relayDrillState);
}
+ showCareerTab(lsGet(PP_TAB_KEY) === 'passports' ? 'passports' : 'venues');
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && _ppBook) closeBook();
+ });
refresh();
}
+ // Test seam (bare-vm harness, see plugins/career/tests/): pure helpers +
+ // the badge-diff logic; nothing here touches the DOM.
+ window.__careerPassportTest = {
+ ppKey, ppJitter, ppLabel, detectNewBadges, seenBadges, markBadgeSeen,
+ };
+
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', boot);
} else {
diff --git a/plugins/career/tests/passports.test.js b/plugins/career/tests/passports.test.js
new file mode 100644
index 0000000..7ed4cfe
--- /dev/null
+++ b/plugins/career/tests/passports.test.js
@@ -0,0 +1,83 @@
+// Passport UI pure-logic tests: load screen.js in a bare vm window and
+// exercise the __careerPassportTest seam (no DOM beyond stubs, no network).
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const vm = require('node:vm');
+
+function load() {
+ const store = {};
+ const window = {
+ console,
+ localStorage: {
+ getItem: (k) => (k in store ? store[k] : null),
+ setItem: (k, v) => { store[k] = String(v); },
+ },
+ document: {
+ readyState: 'complete',
+ getElementById: () => null,
+ querySelectorAll: () => [],
+ addEventListener: () => {},
+ },
+ notifications: [],
+ };
+ window.window = window;
+ window.globalThis = window;
+ window.fbNotify = { show: (n) => window.notifications.push(n) };
+ const context = vm.createContext(window);
+ // `document` and `localStorage` resolve as bare names inside the IIFE.
+ context.document = window.document;
+ context.localStorage = window.localStorage;
+ const src = fs.readFileSync(path.join(__dirname, '..', 'screen.js'), 'utf8');
+ vm.runInContext(src, context, { filename: 'career/screen.js' });
+ return window;
+}
+
+test('module loads (and boots) in a bare vm window', () => {
+ const w = load();
+ assert.equal(typeof w.__careerPassportTest.ppKey, 'function');
+});
+
+test('ppKey normalizes case and whitespace', () => {
+ const { ppKey } = load().__careerPassportTest;
+ assert.equal(ppKey(' Blues Rock '), 'blues rock');
+ assert.equal(ppKey('FUNK'), 'funk');
+ assert.equal(ppKey(''), '');
+ assert.equal(ppKey(null), '');
+});
+
+test('ppJitter is deterministic and bounded', () => {
+ const { ppJitter } = load().__careerPassportTest;
+ assert.equal(ppJitter('blues', 8), ppJitter('blues', 8));
+ for (const seed of ['blues', 'funk', 'jazz', 'metal']) {
+ const j = ppJitter(seed, 8);
+ assert.ok(j >= -8 && j <= 8, `${seed} → ${j}`);
+ }
+ assert.notEqual(ppJitter('blues', 8), ppJitter('funk', 8));
+});
+
+test('detectNewBadges notifies once per badge, never after it is seen', () => {
+ const w = load();
+ const t = w.__careerPassportTest;
+ const view = {
+ instruments: {
+ guitar: {
+ passports: [
+ { genre_key: 'blues', genre: 'Blues', badge: 'earned' },
+ { genre_key: 'funk', genre: 'Funk', badge: 'in_progress' },
+ ],
+ },
+ },
+ };
+ t.detectNewBadges(view);
+ assert.equal(w.notifications.length, 1);
+ assert.match(w.notifications[0].message, /Blues/);
+ // Same view again in the same session: no duplicate notification.
+ t.detectNewBadges(view);
+ assert.equal(w.notifications.length, 1);
+ // Seen (slam played) → a fresh session stays quiet too.
+ t.markBadgeSeen('guitar', 'blues');
+ // JSON-compare: vm objects carry a foreign Object prototype.
+ assert.equal(JSON.stringify(t.seenBadges()), '{"guitar/blues":1}');
+});