' +
surfaceOpen +
art + playOverlay +
surfaceClose +
'
' + esc(title) + '
' +
(tagline ? '
' + esc(tagline) + '
' : '') +
'
' +
'Runs ' + runs + '' +
'Best ' + best + '' +
'
' +
'
🎮
' +
'
No minigames installed
' +
'
Install a minigame plugin to start playing.
' +
'
' +
'
' +
'Some minigames score your playing and need the Note Detector plugin. They still run without it.' +
'
';
}
function render() {
const root = document.getElementById(SCREEN_ID);
if (!root) return;
root.innerHTML =
'' +
headerHTML() +
noteDetectHintHTML() +
gridHTML() +
unlocksHTML() +
'
';
wire(root);
}
// ── Wiring ────────────────────────────────────────────────────────────────
function wire(scope) {
scope.querySelector('[data-fb-plugins]')?.addEventListener('click', () => {
if (typeof window.showScreen === 'function') window.showScreen('v3-plugins');
});
scope.querySelectorAll('[data-mg-game]').forEach((card) => {
const id = card.getAttribute('data-mg-game');
card.querySelector('[data-mg-play]')?.addEventListener('click', () => launch(id));
});
}
// The minigames plugin defines its run overlays (#mg-stage / #mg-picker /
// #mg-summary) INSIDE its hub screen container (#plugin-minigames). When a
// game is launched from this v3 screen, that hub screen is the inactive
// `.screen` (display:none), so the fixed overlays — though their own
// `hidden` class is cleared by the SDK — sit under a display:none ancestor
// and never paint. Relocate them to : they're `position:fixed` and
// the SDK only ever reaches them via getElementById, so this is safe and
// idempotent, and a run is now visible no matter which screen is active.
// (The legacy hub still works — fixed overlays render the same at .)
function portalOverlays() {
['mg-stage', 'mg-picker', 'mg-summary'].forEach((id) => {
const el = document.getElementById(id);
if (el && el.parentElement !== document.body) document.body.appendChild(el);
});
}
async function launch(id) {
const s = sdk();
if (!s || typeof s.start !== 'function') { toast('Minigames are still loading — try again in a moment.'); return; }
if (!registeredList().some((g) => g.id === id)) { toast('This minigame is not ready yet. Reload the page if it persists.'); return; }
if (!document.getElementById('mg-stage')) { toast('Minigame stage not ready yet.'); return; }
portalOverlays();
try { await s.start(id); } catch (e) { console.warn('[feedbarcade] launch failed:', e); }
}
// ── Refresh-after-run ──────────────────────────────────────────────────────
// The SDK emits no public run-complete event, but both end() and
// teardownActiveSession() re-add `hidden` to #mg-stage. Observe that and
// refresh on the visible→hidden edge so the header XP and per-game bests
// update in place after a run. refresh() is idempotent + cheap.
const refresh = async function () { await load(); render(); };
function stageVisible(stage) { return !!stage && !stage.classList.contains('hidden'); }
function ensureStageObserver() {
if (_observer) return;
const stage = document.getElementById('mg-stage');
if (!stage) return; // plugin not mounted yet; retry on ready/screen-change
portalOverlays(); // hoist overlays out of the (hidden) hub screen
_stageWasVisible = stageVisible(stage);
_observer = new MutationObserver(() => {
const vis = stageVisible(stage);
if (_stageWasVisible && !vis) {
clearTimeout(_refreshTimer);
_refreshTimer = setTimeout(refresh, 150); // coalesce end() + summary close
}
_stageWasVisible = vis;
});
_observer.observe(stage, { attributes: true, attributeFilter: ['class'] });
}
// ── Public API + boot ──────────────────────────────────────────────────────
window.v3Feedbarcade = { refresh };
async function boot() {
// Refresh progression state before the first render so headerHTML() shows
// the correct rank/dB instead of the Rank 0 / 0 dB cold-load fallback.
if (window.v3Progression && typeof window.v3Progression.refresh === 'function') {
try { await window.v3Progression.refresh(); } catch (e) { /* proceed with cached state */ }
}
await load();
render();
ensureStageObserver();
if (sm && typeof sm.on === 'function') {
sm.on('screen:changed', (e) => {
if (e && e.detail && e.detail.id === SCREEN_ID) { ensureStageObserver(); refresh(); }
});
}
// The minigames plugin publishes its SDK + injects #mg-stage at boot and
// fires this once ready; re-render so late-registered specs appear and
// the stage observer attaches.
window.addEventListener('feedBack-minigames-ready', () => { ensureStageObserver(); refresh(); });
}
// `defer` runs this at readyState 'interactive' — later scripts have not
// evaluated yet, so wait for DOMContentLoaded (see static/v3/index.html).
if (document.readyState !== 'complete') {
document.addEventListener('DOMContentLoaded', boot, { once: true });
} else {
boot();
}
})();