MusicQuiz 🎵

Field	Value
Status	✅ Live (Practice + Arena relay)
Version	`1.0.0`
Path	`games/music-quiz/`
Type	`iframe-themeable`
Players	1–8
Live	funday.gg/play/music-quiz

A fast trivia quiz: 10 questions, beat-the-clock scoring, lifelines (“jokers”), streaks. Questions come from the free Open Trivia DB. It started life as a websim project and was ported to run cleanly on Funday.

How it works in 10 seconds

Funday play page  ──iframe──►  /games/assets/music-quiz/?embed=1
        ▲                              │
        │   postMessage (the bridge)   │
        └──────────────────────────────┘
   theme, pause/resume            ack, ready, HUD, score

It’s a folder of HTML/JS/CSS in games/music-quiz/.
Funday serves it at runtime from that folder — no game build step.
funday-bridge.js talks to the host via postMessage.
Arena multiplayer uses Funday’s platform lobby plus the generic_match Nakama relay through websim-multiplayer.js; Practice mode stays client-side.

The Recipe 🍳 (repeat this for ANY websim game)

A websim export is a self-contained web app. Turning it into a Funday game is usually 6 boring steps. If the game has multiplayer, replace websim rooms with the Funday bridge + Nakama relay instead of faking or disabling it.

Drop the files into games/<slug>/ (slug = lowercase-dashes, e.g. music-quiz).
Write funday-plugin.json — integrationType: "iframe-themeable", entryPoint: "index.html", nested metadata (title, description, genre, min/maxPlayers, thumbnail). See below.
Add a thumbnail (thumbnail.png) — the manifest validator requires the file to exist.
Rip out or replace websim. Anything using WebsimSocket, window.websim, websim rooms/AI must be removed or routed through Funday APIs — websim globals do not exist on Funday.
Vendor external CDNs into a local vendor/ folder (DaisyUI, fonts, icons). A Funday game should make zero off-platform network calls for its own assets.
Add funday-bridge.js and <script src="funday-bridge.js"> to index.html to talk to the host.

Then verify (2 commands) and it’s live. That’s it.

The Bridge 🌉 (`funday-bridge.js`)

The bridge is a small, self-contained script. It speaks FundayBridge v1 over postMessage and is the only allowed channel between a game and the platform. No platform imports, ever.

When	Message	Why
Host says hello	host → `funday:handshake`	platform announces itself
We answer	game → `funday:ack` + `game:ready`	stops the handshake, says “loaded”
Each question	game → `funday:nav:set`	top-bar HUD: `Question 3/10 · Score 1200`
On load	game → `funday:dock:set`	dock buttons: Restart / Settings / Fullscreen
Game over	game → `funday:score-submitted`	writes to the `music-quiz_high_score` leaderboard
Host theme	host → `funday:theme-inject`	we mirror it onto `data-theme` (light/dark)
Host pause	host → `funday:pause` / `funday:resume`	we pause/resume the question timer

ELI5: the game and the platform are in two different windows. They can’t call each other’s functions — they can only mail letters (postMessage). The bridge is the mailroom.

What we changed from the websim original

#	Change	Why
1	`game-core.js`: websim dependency removed from the Practice path	Practice boots immediately without a websim runtime
2	`websim-multiplayer.js`: replaced websim transport with a Funday Nakama-relay adapter	Arena mode can use platform lobby + `generic_match`
3	`funday-bridge.js`: injects platform match/session context into the iframe	Host shell owns lobby, match, theme, pause/resume, and score submission
4	DaisyUI + Google Fonts + Feather icons vendored into `vendor/`	self-contained, no external CDN at runtime
5	Added `data-theme=\"dark\"` to `<html>`	the game never set it → DaisyUI surfaces were invisible (transparent)
6	Added leaderboard metadata and `score-submitted` bridge event	high score writes to `music-quiz_high_score`

Everything else (scoring, timer, jokers, animations, themes, the OpenTDB question API) is the original game, untouched.

File map

File / dir	What it is
`index.html`	entry — importmap + vendored deps + bridge
`funday-bridge.js`	Funday-added — the bridge + game glue
`funday-plugin.json`	the manifest Funday reads
`thumbnail.png`	library card image
`vendor/`	local DaisyUI / fonts / Feather (no external calls)
`question-api.js`	OpenTDB fetch + offline fallback bank
`game-core.js`, `game-modes.js`, `game-ui.js`	engine / modes / DOM
`scoring-system.js`, `timer-system.js`, `joker-*.js`	scoring, timer, lifelines
`multiplayer*.js`, `websim-multiplayer.js`, `reactions.js`	Arena multiplayer UI + Funday Nakama relay adapter

Manifest essentials (`funday-plugin.json`)

{
  "id": "music-quiz",
  "integrationType": "iframe-themeable",
  "entryPoint": "index.html",
  "status": "available",
  "metadata": {
    "title": "MusicQuiz",
    "minPlayers": 1,
    "maxPlayers": 8,
    "thumbnail": "thumbnail.png"
  },
  "leaderboards": {
    "default": "music-quiz_high_score",
    "configs": {
      "music-quiz_high_score": { "type": "high_score", "sortOrder": "desc", "operator": "best" }
    }
  }
}

Run & verify ✅

# from funday/
node scripts/validate-game-manifest.mjs music-quiz   # → VALID
cd frontend && node ../scripts/check-game-boundaries.mjs   # → no violations for music-quiz

No build or restart needed: iframe-themeable games are served at runtime from GAME_PLUGINS_DIR and the plugin list is re-scanned on every request. Edit a file → reload the page.

Verified 2026-06-09: boots with 0 page errors, real OpenTDB questions load, answering scores and advances all 10 questions, bridge handshake + theme + score-submitted confirmed end-to-end.

Multiplayer Arena

The original websim version used websim rooms. The Funday version now uses:

Platform lobby/GameDrawer to create or join a match.
games/_platform/server/game_registry.ts mapping music-quiz → generic_match.
websim-multiplayer.js as a drop-in adapter that keeps the original game API but relays quiz state over Nakama opcode messages.
Practice mode as the instant solo/client-side path.

This is a relay model, not an authoritative quiz server: the host coordinates selected questions and room state, and generic_match rebroadcasts messages to participants.

Gotchas (learned the hard way) ⚠️

DaisyUI needs data-theme. With none set, every surface uses undefined color vars and renders transparent → the whole game looks blank. Always set <html data-theme="...">.
Headless screenshots can lie. The game’s background is position:fixed; z-index:-1. Real browsers render it fine; headless Chromium (SwiftShader) drops everything inside that layer, so captures look blank. To screenshot in headless, override it to position:relative; z-index:0 — for the capture only, never in the shipped file.
Third-party APIs are allowed; platform URLs are not. Calling opentdb.com is fine; hardcoding funday.gg / nakama.funday.gg fails the boundary check.

Credits

Original MusicQuiz by rebeljam (built on websim). Questions: Open Trivia DB (CC BY-SA 4.0). Feather icons (MIT), DaisyUI (MIT).

description	How a websim trivia game became a clean, self-contained Funday iframe game — the recipe, the bridge, the fixes, and how to verify it. Written to be repeatable for any websim import.
tags	games, iframe, websim, trivia, multiplayer, bridge, leaderboard

🍋 Funday SSOT

📚 Explorer

Graph View

MusicQuiz

MusicQuiz 🎵

How it works in 10 seconds

The Recipe 🍳 (repeat this for ANY websim game)

The Bridge 🌉 (`funday-bridge.js`)

What we changed from the websim original

File map

Manifest essentials (`funday-plugin.json`)

Run & verify ✅

Multiplayer Arena

Gotchas (learned the hard way) ⚠️

Credits

Table of Contents

Backlinks

🍋 Funday SSOT

📚 Explorer

Graph View

MusicQuiz

MusicQuiz 🎵

How it works in 10 seconds

The Recipe 🍳 (repeat this for ANY websim game)

The Bridge 🌉 (funday-bridge.js)

What we changed from the websim original

File map

Manifest essentials (funday-plugin.json)

Run & verify ✅

Multiplayer Arena

Gotchas (learned the hard way) ⚠️

Credits

Table of Contents

Backlinks

The Bridge 🌉 (`funday-bridge.js`)

Manifest essentials (`funday-plugin.json`)