@homie-rocks/studio 0.2.0

package/worker/index.mjs

@@ -0,0 +1,349 @@
+/**
+ * @homie-rocks/studio/worker — a studio's own site, on the studio's own Cloudflare.
+ *
+ * One Worker serves the studio's pages and its public rooms:
+ *
+ *   /                          the studio's home: every game, with a Play button
+ *   /<game>/                   the game's page
+ *   /<game>/play               the play shell: asks the Lobby for a public room and
+ *                              boots the game in a sandboxed frame, seated at once
+ *   /<game>/__game/...         the game's own files (index.html gets HOMIE_NET)
+ *   /<game>/__net?room=        the room's netplay socket (Table Durable Object)
+ *   /<game>/__watch?room=      the room's facts, for the shell
+ *   /<game>/api/lobby          which public room to join (Lobby Durable Object)
+ *   /api/games                 the catalogue plus live counts (D1 + Lobby)
+ *   /.well-known/homie-studio.json   what the homie.rocks directory reads
+ *   /media/<key>               the studio's large media, from R2 (when bound)
+ *
+ * Bindings (site/wrangler.jsonc, written by `homie-studio new`): ASSETS (the
+ * built site), TABLE and LOBBY (SQLite-backed Durable Objects, free plan
+ * friendly), DB (D1: plays, finished rounds, the directory claim) and, when
+ * the account has R2, MEDIA.
+ *
+ * The relay is the netplay contract's own room.mjs (NETPLAY.md v1 rev 2), run
+ * unchanged inside the Table, so a game that plays in `homie-studio dev`
+ * plays the same way here.
+ */
+import { NetRoom } from './room.mjs';
+import { gamePage, homePage, notFoundPage, playPage } from './pages.mjs';
+
+const GAME_ID = /^[a-z0-9][a-z0-9-]{0,39}$/;
+const ROOM_ID = /^[A-Za-z0-9_-]{1,32}$/;
+const json = (body, status = 200, extra = {}) => new Response(`${JSON.stringify(body)}\n`, {
+  status, headers: { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store', ...extra },
+});
+
+/** The catalogue `homie-studio build` writes into the site (games.json). */
+async function catalogue(env, origin) {
+  try {
+    const res = await env.ASSETS.fetch(new Request(`${origin}/games.json`));
+    if (!res.ok) return { studio: { name: env.STUDIO_NAME || 'Studio' }, games: [] };
+    return await res.json();
+  } catch { return { studio: { name: env.STUDIO_NAME || 'Studio' }, games: [] }; }
+}
+
+async function claimOf(env) {
+  if (!env.DB) return null;
+  try { return (await env.DB.prepare('SELECT value FROM meta WHERE key = ?').bind('homie_claim').first())?.value ?? null; } catch { return null; }
+}
+
+async function liveCounts(env, games) {
+  const out = {};
+  await Promise.all(games.map(async (g) => {
+    try {
+      const res = await env.LOBBY.get(env.LOBBY.idFromName(g.id)).fetch('https://lobby/rooms');
+      const rooms = (await res.json()).rooms ?? [];
+      out[g.id] = rooms.reduce((n, r) => n + (r.players || 0), 0);
+    } catch { out[g.id] = 0; }
+  }));
+  return out;
+}
+
+/** The game's index.html with HOMIE_NET ahead of its modules, in the site's sandbox (an opaque origin). */
+async function gameDocument(request, env, url, game, meta) {
+  const res = await env.ASSETS.fetch(new Request(`${url.origin}/games/${game}/index.html`));
+  if (!res.ok) return notFoundPage(`No build of "${game}" on this site yet.`);
+  const room = ROOM_ID.test(url.searchParams.get('room') || '') ? url.searchParams.get('room') : 'main';
+  const want = url.searchParams.get('want') === 'screen' ? 'screen' : 'play';
+  const device = ['phone', 'desk', 'tv'].includes(url.searchParams.get('device')) ? url.searchParams.get('device') : undefined;
+  const wsBase = `${url.protocol === 'https:' ? 'wss' : 'ws'}://${url.host}`;
+  const cfg = {
+    v: 1,
+    url: `${wsBase}/${game}/__net?room=${encodeURIComponent(room)}`,
+    room,
+    ...(url.searchParams.get('k') ? { token: url.searchParams.get('k').slice(0, 128) } : {}),
+    ...(url.searchParams.get('name') ? { name: url.searchParams.get('name').slice(0, 24) } : {}),
+    ...(device ? { device } : {}),
+    want,
+    debug: url.searchParams.get('debug') === '1',
+    ...(meta?.movement ? { movement: meta.movement } : {}),
+  };
+  let html = await res.text();
+  const head = `<script>window.HOMIE_NET=${JSON.stringify(cfg).replace(/</g, '\\u003c')}</script>`;
+  html = /<head[^>]*>/i.test(html) ? html.replace(/<head([^>]*)>/i, `<head$1>${head}`) : head + html;
+  return new Response(html, {
+    headers: {
+      'content-type': 'text/html; charset=utf-8',
+      'cache-control': 'no-store',
+      'access-control-allow-origin': '*',
+      // The game runs in an opaque origin: it cannot read this site's storage or cookies.
+      'content-security-policy': "sandbox allow-scripts allow-pointer-lock allow-forms allow-modals allow-popups; frame-ancestors 'self'",
+    },
+  });
+}
+
+async function gameAsset(env, url, game, rest) {
+  if (rest.includes('..')) return new Response('not found', { status: 404 });
+  const res = await env.ASSETS.fetch(new Request(`${url.origin}/games/${game}/${rest}`));
+  const out = new Response(res.body, res);
+  // Module scripts from the opaque-origin frame are CORS requests.
+  out.headers.set('access-control-allow-origin', '*');
+  return out;
+}
+
+export default {
+  async fetch(request, env) {
+    const url = new URL(request.url);
+    const path = url.pathname;
+    const parts = path.split('/').filter(Boolean);
+
+    if (path === '/.well-known/homie-studio.json') {
+      const cat = await catalogue(env, url.origin);
+      return json({
+        v: 1,
+        kind: 'homie-studio',
+        name: cat.studio?.name ?? env.STUDIO_NAME ?? 'Studio',
+        slug: cat.studio?.slug ?? null,
+        site: url.origin,
+        studio: cat.studio?.version ?? null,
+        claim: await claimOf(env),
+        games: (cat.games ?? []).map((g) => ({
+          id: g.id, name: g.name, blurb: g.blurb ?? '', players: g.players ?? null, roundSeconds: g.roundSeconds ?? null,
+          page: `${url.origin}/${g.id}/`, play: `${url.origin}/${g.id}/play`, cover: g.cover ? `${url.origin}/games/${g.id}/${g.cover}` : null,
+        })),
+      }, 200, { 'access-control-allow-origin': '*' });
+    }
+    if (path === '/api/games') {
+      const cat = await catalogue(env, url.origin);
+      return json({ studio: cat.studio, games: cat.games, live: await liveCounts(env, cat.games ?? []) });
+    }
+    if (path.startsWith('/media/')) {
+      if (!env.MEDIA) return new Response('this studio keeps no media in R2 yet', { status: 404 });
+      const key = decodeURIComponent(path.slice('/media/'.length));
+      const obj = await env.MEDIA.get(key);
+      if (!obj) return new Response('not found', { status: 404 });
+      const headers = new Headers();
+      obj.writeHttpMetadata(headers);
+      headers.set('etag', obj.httpEtag);
+      headers.set('cache-control', 'public, max-age=3600');
+      return new Response(obj.body, { headers });
+    }
+    if (path === '/' || path === '/index.html') {
+      const cat = await catalogue(env, url.origin);
+      return homePage(cat, await liveCounts(env, cat.games ?? []));
+    }
+
+    const game = parts[0];
+    if (game && GAME_ID.test(game)) {
+      const cat = await catalogue(env, url.origin);
+      const meta = (cat.games ?? []).find((g) => g.id === game);
+      if (!meta) return env.ASSETS.fetch(request);
+      if (parts.length === 1 && !path.endsWith('/')) return Response.redirect(`${url.origin}/${game}/`, 301);
+      const sub = parts.slice(1).join('/');
+      if (sub === '') return gamePage(cat, meta, (await liveCounts(env, [meta]))[game] ?? 0);
+      if (sub === 'play') return playPage(cat, meta);
+      if (sub === 'api/lobby') {
+        const max = Math.max(1, Math.min(16, Number(meta.players?.max) || 8));
+        return env.LOBBY.get(env.LOBBY.idFromName(game)).fetch(`https://lobby/join?max=${max}`, { method: 'POST' });
+      }
+      if (sub === '__net' || sub === '__watch') {
+        if (request.headers.get('upgrade') !== 'websocket') return new Response('websocket only', { status: 426 });
+        const room = url.searchParams.get('room') || 'main';
+        if (!ROOM_ID.test(room)) return new Response('bad room', { status: 400 });
+        const stub = env.TABLE.get(env.TABLE.idFromName(`${game}/${room}`));
+        const max = Math.max(1, Math.min(16, Number(meta.players?.max) || 8));
+        const target = `https://table/${sub}?game=${encodeURIComponent(game)}&room=${encodeURIComponent(room)}&max=${max}`;
+        return stub.fetch(new Request(target, request));
+      }
+      if (sub.startsWith('__homie/')) {
+        // A game made with Homie's arcade controls asks here for a Homie host; "not-a-homie" makes it stop asking (the same answer homie.rocks gives).
+        return json({ ok: false, error: 'not-a-homie' }, 200, { 'access-control-allow-origin': '*' });
+      }
+      if (sub === '__game' || sub === '__game/' || sub === '__game/index.html') return gameDocument(request, env, url, game, meta);
+      if (sub.startsWith('__game/')) return gameAsset(env, url, game, sub.slice('__game/'.length));
+    }
+    const asset = await env.ASSETS.fetch(request);
+    if (asset.status === 404) return notFoundPage('Nothing here.');
+    return asset;
+  },
+};
+
+/**
+ * TABLE — one public room: the netplay relay (room.mjs) for every browser in it.
+ * It keeps nothing per frame; seats and a checkpoint go to storage (a deploy
+ * keeps the room), and each finished round is one D1 row.
+ */
+export class Table {
+  constructor(ctx, env) {
+    this.ctx = ctx;
+    this.env = env;
+    this.room = null;
+    this.timer = null;
+    this.saved = null;
+    this.game = null;
+    this.code = null;
+    this.recorded = 0;
+    this.lastReport = -1;
+    ctx.blockConcurrencyWhile(async () => {
+      this.saved = (await ctx.storage.get('net')) ?? null;
+      this.recorded = (await ctx.storage.get('recorded')) ?? 0;
+    });
+  }
+
+  roomFor(game, code, max) {
+    if (this.room) return this.room;
+    const storage = this.ctx.storage;
+    this.game = game;
+    this.code = code;
+    this.room = new NetRoom({
+      code,
+      maxPlayers: max,
+      store: {
+        save: (o) => { storage.put('net', o).catch(() => {}); },
+        clear: () => { storage.delete('net').catch(() => {}); },
+      },
+    });
+    if (this.saved) this.room.restore(this.saved);
+    return this.room;
+  }
+
+  async fetch(request) {
+    const url = new URL(request.url);
+    const game = url.searchParams.get('game');
+    const code = url.searchParams.get('room');
+    const max = Math.max(1, Math.min(16, Number(url.searchParams.get('max')) || 8));
+    const room = this.roomFor(game, code, max);
+    const [client, server] = Object.values(new WebSocketPair());
+    server.accept();
+    const conn = {
+      ip: request.headers.get('cf-connecting-ip'),
+      send: (text) => { try { server.send(text); } catch { /* closed */ } },
+      close: (c, r) => { try { server.close(c, r); } catch { /* closed */ } },
+      buffered: () => 0,
+    };
+    if (url.pathname === '/__watch') {
+      const w = room.watch(conn);
+      server.addEventListener('close', () => w.onClose());
+      server.addEventListener('error', () => w.onClose());
+    } else {
+      const h = room.attach(conn);
+      server.addEventListener('message', (e) => { h.onMessage(typeof e.data === 'string' ? e.data : ''); });
+      server.addEventListener('close', () => { h.onClose(); this.report(); });
+      server.addEventListener('error', () => { h.onClose(); this.report(); });
+    }
+    this.start();
+    return new Response(null, { status: 101, webSocket: client });
+  }
+
+  start() {
+    if (this.timer) return;
+    let n = 0;
+    this.timer = setInterval(() => {
+      const room = this.room;
+      if (!room) return;
+      room.tick();
+      n += 1;
+      if (n % 4 === 0) { room.tellWatchers(); this.report(); this.recordRound(); }
+      if (room.clients.size === 0 && room.watchers.size === 0) { clearInterval(this.timer); this.timer = null; this.report(); }
+    }, 250);
+  }
+
+  /** Tell the Lobby how many players this room has, when it changes. */
+  report() {
+    const room = this.room;
+    if (!room || !this.game) return;
+    const players = room.facts().counts.players;
+    if (players === this.lastReport) return;
+    this.lastReport = players;
+    const lobby = this.env.LOBBY.get(this.env.LOBBY.idFromName(this.game));
+    this.ctx.waitUntil(lobby.fetch('https://lobby/report', { method: 'POST', body: JSON.stringify({ room: this.code, players }) }).catch(() => {}));
+  }
+
+  /** A round the host called over becomes one D1 row (once per round number). */
+  recordRound() {
+    const r = this.room?.lastRound;
+    if (!r || r.phase !== 'over' || !Number.isFinite(r.n) || r.n <= this.recorded || !this.env.DB) return;
+    this.recorded = r.n;
+    this.ctx.storage.put('recorded', r.n).catch(() => {});
+    const results = Array.isArray(r.results) ? r.results.slice(0, 16) : [];
+    const humans = results.filter((row) => row && !row.bot).length;
+    this.ctx.waitUntil(this.env.DB.prepare(
+      'INSERT OR IGNORE INTO rounds (game, room, n, humans, bots, results, at) VALUES (?, ?, ?, ?, ?, ?, ?)',
+    ).bind(this.game, this.code, r.n, humans, results.length - humans, JSON.stringify(results), new Date().toISOString()).run().catch(() => {}));
+  }
+}
+
+/**
+ * LOBBY — one per game: which public room a new visitor joins. Strangers meet:
+ * the fullest room that still has a seat wins, counting visitors it just sent
+ * there who have not connected yet, so two people pressing Play together land
+ * in the same room.
+ */
+export class Lobby {
+  constructor(ctx) {
+    this.ctx = ctx;
+    this.rooms = new Map();
+    this.next = 1;
+    ctx.blockConcurrencyWhile(async () => {
+      const saved = await ctx.storage.get('lobby');
+      if (saved) { this.next = saved.next ?? 1; for (const r of saved.rooms ?? []) this.rooms.set(r.name, { ...r, pending: [] }); }
+    });
+  }
+
+  save() { this.ctx.storage.put('lobby', { next: this.next, rooms: [...this.rooms.values()].map(({ name, players, at }) => ({ name, players, at })) }).catch(() => {}); }
+
+  prune(now) {
+    for (const [name, r] of this.rooms) {
+      r.pending = r.pending.filter((t) => now - t < 20_000);
+      if (r.players === 0 && !r.pending.length && now - r.at > 120_000) this.rooms.delete(name);
+    }
+  }
+
+  async fetch(request) {
+    const url = new URL(request.url);
+    const now = Date.now();
+    this.prune(now);
+    if (url.pathname === '/join') {
+      const max = Math.max(1, Math.min(16, Number(url.searchParams.get('max')) || 8));
+      let best = null;
+      for (const r of this.rooms.values()) {
+        const fill = r.players + r.pending.length;
+        if (fill >= max) continue;
+        if (!best || fill > best.fill || (fill === best.fill && r.name < best.r.name)) best = { r, fill };
+      }
+      let room = best?.r;
+      if (!room) {
+        room = { name: `pub-${this.next}`, players: 0, at: now, pending: [] };
+        this.next += 1;
+        this.rooms.set(room.name, room);
+      }
+      room.pending.push(now);
+      this.save();
+      return json({ room: room.name, players: room.players, max });
+    }
+    if (url.pathname === '/report' && request.method === 'POST') {
+      const body = await request.json().catch(() => ({}));
+      if (typeof body.room !== 'string' || !ROOM_ID.test(body.room)) return json({ ok: false }, 400);
+      const r = this.rooms.get(body.room) ?? { name: body.room, players: 0, at: now, pending: [] };
+      const grew = Math.max(0, (Number(body.players) || 0) - r.players);
+      r.pending.splice(0, grew);
+      r.players = Math.max(0, Number(body.players) || 0);
+      r.at = now;
+      this.rooms.set(r.name, r);
+      this.save();
+      return json({ ok: true });
+    }
+    if (url.pathname === '/rooms') return json({ rooms: [...this.rooms.values()].map(({ name, players, at }) => ({ name, players, at })) });
+    return json({ error: 'not found' }, 404);
+  }
+}

package/worker/pages.mjs

@@ -0,0 +1,205 @@
+/**
+ * The studio site's pages: home, a game's page, the play shell. Plain HTML
+ * from the Worker, no framework; every name a player typed is escaped.
+ */
+
+const esc = (value) => String(value ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+
+const BASE_CSS = `
+:root { color-scheme: dark; --bg: #07080d; --panel: #10131c; --ink: #eef1f8; --dim: #9aa3b7; --line: rgba(255,255,255,.10); --accent: #ffcf5a; --accent-ink: #1a1405; }
+* { box-sizing: border-box; }
+html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
+a { color: inherit; }
+.wrap { max-width: 1080px; margin: 0 auto; padding: 32px 20px 64px; }
+header.top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
+.brand { font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 5vw, 44px); text-decoration: none; }
+.tag { color: var(--dim); font-size: 14px; }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 28px; }
+.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 190px; }
+.card h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
+.card p { margin: 0; color: var(--dim); flex: 1; }
+.meta { color: var(--dim); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; }
+.live { color: #7dffb0; }
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 800; text-decoration: none; font-size: 17px; }
+.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
+.hero { padding: 48px 0 24px; }
+.hero h1 { font-size: clamp(40px, 9vw, 88px); line-height: .95; margin: 0 0 16px; letter-spacing: -.03em; }
+.hero p { color: var(--dim); max-width: 60ch; font-size: 18px; margin: 0 0 28px; }
+.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
+footer { margin-top: 48px; color: var(--dim); font-size: 13px; }
+@media (max-width: 540px) { .wrap { padding: 20px 16px 48px; } .btn { width: 100%; } }
+`;
+
+function page(title, body, { extraHead = '' } = {}) {
+  return new Response(`<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>${esc(title)}</title><link rel="icon" href="data:,"><style>${BASE_CSS}</style>${extraHead}</head>
+<body>${body}</body></html>`, { headers: { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' } });
+}
+
+export function homePage(cat, live = {}) {
+  const name = cat.studio?.name ?? 'Studio';
+  const games = cat.games ?? [];
+  const cards = games.map((g) => `
+    <article class="card">
+      <h2>${esc(g.name)}</h2>
+      <p>${esc(g.blurb)}</p>
+      <div class="meta"><span>${esc(g.players?.max ? `up to ${g.players.max} players` : 'multiplayer')}</span>${live[g.id] ? `<span class="live">● ${live[g.id]} playing now</span>` : ''}</div>
+      <div class="row"><a class="btn" href="/${esc(g.id)}/play">Play</a><a class="btn ghost" href="/${esc(g.id)}/">About</a></div>
+    </article>`).join('');
+  return page(name, `<div class="wrap">
+    <header class="top"><a class="brand" href="/">${esc(name)}</a><span class="tag">Press Play and you are in a live room.</span></header>
+    ${games.length ? `<section class="grid">${cards}</section>` : '<p class="tag" style="margin-top:28px">No games published yet.</p>'}
+    <footer>${esc(name)} runs on its own Cloudflare. Made with Homie.</footer>
+  </div>`);
+}
+
+export function gamePage(cat, g, playing = 0) {
+  const name = cat.studio?.name ?? 'Studio';
+  return page(`${g.name} · ${name}`, `<div class="wrap">
+    <header class="top"><a class="brand" href="/" style="font-size:22px">${esc(name)}</a><span class="tag">${playing ? `<span class="live">● ${playing} playing now</span>` : 'Anyone who presses Play joins the same room.'}</span></header>
+    <section class="hero">
+      <h1>${esc(g.name)}</h1>
+      <p>${esc(g.blurb)}</p>
+      <div class="row"><a class="btn" href="/${esc(g.id)}/play">Play now</a><a class="btn ghost" href="/${esc(g.id)}/play?screen=1">Big screen</a></div>
+      <div class="meta" style="margin-top:18px"><span>${esc(g.players?.max ? `1–${g.players.max} players` : 'multiplayer')}</span>${g.roundSeconds ? `<span>${esc(g.roundSeconds)} s rounds</span>` : ''}<span>phone or computer</span></div>
+    </section>
+  </div>`);
+}
+
+export function notFoundPage(why) {
+  const res = page('Not found', `<div class="wrap"><h1>Not found</h1><p class="tag">${esc(why)}</p><p><a class="btn ghost" href="/">Home</a></p></div>`);
+  return new Response(res.body, { status: 404, headers: res.headers });
+}
+
+/**
+ * The play shell. It asks the Lobby for a public room, boots the game frame at
+ * once (seated, no waiting), keeps the seat token for a reload, and keeps the
+ * room's facts in `window.__shell` (what a test or a big screen reads).
+ */
+export function playPage(cat, g) {
+  const css = `html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: #04060c; }
+iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #04060c; touch-action: none; }
+.chip { position: fixed; left: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 5; transition: opacity .6s; }
+.chip.quiet { opacity: 0; }
+.chip { padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #dfe6f5; font: 12px/1.2 ui-sans-serif, system-ui, sans-serif; pointer-events: none; backdrop-filter: blur(6px); }
+.chip a { pointer-events: auto; text-decoration: none; }
+.card { position: fixed; right: 12px; bottom: 12px; z-index: 4; max-width: 300px; padding: 10px 12px; border-radius: 12px; background: rgba(8,12,22,.82); border: 1px solid rgba(255,255,255,.14); color: #e8ecf5; font: 13px/1.35 ui-sans-serif, system-ui, sans-serif; }
+.card h2 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #ffcf5a; }
+.card ol { margin: 0; padding-left: 18px; }
+[hidden] { display: none !important; }`;
+  const boot = { game: g.id, name: g.name };
+  return page(`${g.name} · play`, `
+<iframe class="game" title="${esc(g.name)}" sandbox="allow-scripts allow-pointer-lock allow-forms allow-modals allow-popups" allow="fullscreen; autoplay; gamepad"></iframe>
+<div class="chip" data-chip><a href="/${esc(g.id)}/">← ${esc(g.name)}</a> · <span data-status>finding a room…</span></div>
+<div class="card" data-results hidden></div>
+<div class="card" data-screen hidden></div>
+<script>window.__HOMIE_PLAY=${JSON.stringify(boot).replace(/</g, '\\u003c')};</script>
+<script>${SHELL_JS}</script>`, { extraHead: `<style>${css}</style>` });
+}
+
+/* The shell script (runs on the site's own origin; the game runs in the sandboxed frame). */
+const SHELL_JS = String.raw`(function () {
+  'use strict';
+  var boot = window.__HOMIE_PLAY;
+  var params = new URLSearchParams(location.search);
+  var screenMode = params.get('screen') === '1';
+  var asked = params.get('hand');
+  var device = asked === 'phone' || asked === 'desk' || asked === 'tv' ? asked : Math.min(innerWidth, innerHeight) <= 540 ? 'phone' : 'desk';
+  var want = screenMode ? 'screen' : 'play';
+  var frame = document.querySelector('iframe.game');
+  var statusEl = document.querySelector('[data-status]');
+  var results = document.querySelector('[data-results]');
+  var screenCard = document.querySelector('[data-screen]');
+  var state = { game: boot.game, room: null, device: device, want: want, attached: false, stats: null, round: null, roster: null, facts: null, seat: null, results: [], closed: null };
+  window.__shell = state;
+
+  // The chip says who is here, then gets out of the game's way (games draw their own HUD at the top).
+  var chip = document.querySelector('[data-chip]');
+  var quietTimer = null;
+  function say(text) {
+    if (statusEl.textContent === text) return;
+    statusEl.textContent = text;
+    chip.classList.remove('quiet');
+    clearTimeout(quietTimer);
+    quietTimer = setTimeout(function () { chip.classList.add('quiet'); }, 5000);
+  }
+
+  function start(room) {
+    state.room = room;
+    var KEY = 'homie-net.' + boot.game + '.' + room + '.' + want;
+    var token = null;
+    try { token = sessionStorage.getItem(KEY); } catch (e) {}
+    var q = new URLSearchParams({ room: room, device: device, want: want });
+    if (token) q.set('k', token);
+    if (params.get('name')) q.set('name', params.get('name'));
+    if (params.get('debug') === '1') q.set('debug', '1');
+    frame.src = '/' + boot.game + '/__game/?' + q.toString();
+    frame.addEventListener('load', function () { try { frame.focus(); frame.contentWindow.focus(); } catch (e) {} });
+    window.addEventListener('pointerdown', function () { try { frame.focus(); } catch (e) {} }, { passive: true });
+    window.addEventListener('message', function (ev) {
+      if (ev.source !== frame.contentWindow) return;
+      var m = ev.data;
+      if (!m || typeof m !== 'object' || m.t !== 'homie-net') return;
+      if (m.what === 'attached') state.attached = true;
+      if (m.what === 'token' && typeof m.token === 'string') { state.seat = m.seat; try { sessionStorage.setItem(KEY, m.token); } catch (e) {} }
+      if (m.what === 'stats') state.stats = m.stats;
+      if (m.what === 'round') onRound(m.round);
+      if (m.what === 'roster') state.roster = m.slots;
+      if (m.what === 'closed') state.closed = m.why;
+      paint();
+    });
+    watch(room);
+    if (screenMode) {
+      var h2 = document.createElement('h2'); h2.textContent = 'Join on your phone';
+      var div = document.createElement('div'); div.textContent = location.origin + '/' + boot.game + '/play';
+      screenCard.append(h2, div); screenCard.hidden = false;
+    }
+  }
+
+  function onRound(r) {
+    if (!r) return;
+    state.round = r;
+    if (r.phase === 'over' && Array.isArray(r.results)) {
+      // One entry per finished round (a round is its number AND its end time: an emptied room starts again at 1).
+      var key = r.n + ':' + r.endsAt;
+      if (!state.results.some(function (x) { return x.key === key; })) state.results.push({ key: key, n: r.n, endsAt: r.endsAt, at: Date.now(), results: r.results });
+      results.textContent = '';
+      var h = document.createElement('h2'); h.textContent = 'Round ' + r.n;
+      var ol = document.createElement('ol');
+      r.results.slice(0, 6).forEach(function (row) {
+        var li = document.createElement('li');
+        li.textContent = row.name + (row.bot ? ' (bot)' : '') + ' — ' + row.score;
+        ol.append(li);
+      });
+      results.append(h, ol); results.hidden = params.get('debug') !== '1'; // the game draws its own results; the card is for ?debug=1
+    } else if (r.phase === 'live') results.hidden = true;
+  }
+
+  function watch(room) {
+    var ws;
+    try { ws = new WebSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/' + boot.game + '/__watch?room=' + encodeURIComponent(room)); }
+    catch (e) { setTimeout(function () { watch(room); }, 2000); return; }
+    ws.onmessage = function (ev) {
+      try { state.facts = JSON.parse(ev.data); } catch (e) { return; }
+      if (state.facts && state.facts.round) onRound(state.facts.round);
+      paint();
+    };
+    ws.onclose = function () { setTimeout(function () { watch(room); }, 1500); };
+  }
+
+  function paint() {
+    var f = state.facts;
+    var n = f && f.counts ? f.counts.players : null;
+    var bits = [];
+    if (n !== null) bits.push(n + (n === 1 ? ' player' : ' players') + ' here');
+    if (f && f.counts && f.counts.bots) bits.push(f.counts.bots + ' bots');
+    if (state.closed) bits.push(state.closed === 'replaced' ? 'opened in another tab' : 'reconnecting');
+    say(bits.join(' · ') || 'joining…');
+  }
+
+  fetch('/' + boot.game + '/api/lobby', { method: 'POST' })
+    .then(function (r) { return r.json(); })
+    .then(function (j) { start(j.room || 'main'); })
+    .catch(function () { start('main'); });
+}());`;