@homie-rocks/studio 0.6.0 → 0.7.0

package/worker/pages.mjs

@@ -1,221 +1,55 @@
 /**
- * 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.
+ * The play shell: the page around a game's sandboxed frame at /<game>/play and /<game>/tv. Every other page is
+ * worker/site.mjs. Every name a player typed is escaped.
  */
+import { esc, layout } from './site.mjs';
 
-const esc = (value) => String(value ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+export { homePage, mediaIndexPage, notFoundPage, songPage, videoPage } from './site.mjs';
 
-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; }
-h2.section { margin: 44px 0 0; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
-h2.section a { text-decoration: none; }
-.card .kind { color: var(--accent); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
-.thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #000; display: block; }
-.thumb.square { aspect-ratio: 1; }
-.player { margin: 8px 0 20px; }
-.player audio { width: 100%; }
-.player video { width: 100%; max-height: 78vh; border-radius: 14px; background: #000; display: block; }
-.player video.vertical { max-width: 420px; margin: 0 auto; }
-.facts { color: var(--dim); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
-.rights { color: var(--dim); font-size: 13px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 24px; max-width: 70ch; }
-.lyrics { white-space: pre-wrap; font-size: 17px; line-height: 1.6; max-width: 60ch; }
-.files { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-width: 560px; }
-.files a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
-.files span { color: var(--dim); font-size: 13px; }
-.cover { width: min(320px, 100%); aspect-ratio: 1; object-fit: cover; border-radius: 16px; float: right; margin: 0 0 16px 24px; }
-@media (max-width: 540px) { .wrap { padding: 20px 16px 48px; } .btn { width: 100%; } .cover { float: none; margin: 0 0 16px; width: 100%; } }
-`;
-
-function page(title, body, { extraHead = '', viewport = 'width=device-width, initial-scale=1, viewport-fit=cover' } = {}) {
-  return new Response(`<!doctype html>
-<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="${viewport}">
-<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' } });
-}
-
-const fmtTime = (s) => (Number.isFinite(s) ? `${Math.floor(s / 60)}:${String(Math.round(s % 60)).padStart(2, '0')}` : '');
-const fileOf = (e, role) => (e.files ?? []).find((f) => f.role === role) ?? null;
-const KIND_WORD = { song: 'Song', score: 'Score', loop: 'Loop', stem: 'Stem', sfx: 'Sound', trailer: 'Trailer', 'music-video': 'Music video', cutscene: 'Cutscene', clip: 'Clip' };
-
-function songCard(e) {
-  const cover = fileOf(e, 'cover');
-  return `
-    <article class="card">
-      ${cover ? `<img class="thumb square" src="${esc(cover.url)}" alt="" loading="lazy">` : ''}
-      <span class="kind">${esc(KIND_WORD[e.kind] ?? 'Music')}${e.duration ? ` · ${esc(fmtTime(e.duration))}` : ''}</span>
-      <h2>${esc(e.title)}</h2>
-      <p>${esc(e.blurb)}</p>
-      <div class="row"><a class="btn" href="/music/${esc(e.slug)}/">Listen</a></div>
-    </article>`;
-}
-
-function videoCard(e) {
-  const poster = fileOf(e, 'poster');
-  return `
-    <article class="card">
-      ${poster ? `<img class="thumb" src="${esc(poster.url)}" alt="" loading="lazy">` : ''}
-      <span class="kind">${esc(KIND_WORD[e.kind] ?? 'Video')}${e.duration ? ` · ${esc(fmtTime(e.duration))}` : ''}</span>
-      <h2>${esc(e.title)}</h2>
-      <p>${esc(e.blurb)}</p>
-      <div class="row"><a class="btn" href="/videos/${esc(e.slug)}/">Watch</a></div>
-    </article>`;
-}
-
-export function homePage(cat, live = {}) {
-  const name = cat.studio?.name ?? 'Studio';
-  const games = cat.games ?? [];
-  const songs = cat.songs ?? [];
-  const videos = cat.videos ?? [];
-  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">${games.length ? 'Press Play and you are in a live room.' : 'Games, music and videos.'}</span></header>
-    ${games.length ? `${songs.length || videos.length ? '<h2 class="section">Games</h2>' : ''}<section class="grid">${cards}</section>` : (songs.length || videos.length ? '' : '<p class="tag" style="margin-top:28px">Nothing published yet.</p>')}
-    ${videos.length ? `<h2 class="section"><a href="/videos/">Videos</a></h2><section class="grid">${videos.map(videoCard).join('')}</section>` : ''}
-    ${songs.length ? `<h2 class="section"><a href="/music/">Music</a></h2><section class="grid">${songs.map(songCard).join('')}</section>` : ''}
-    <footer>${esc(name)} runs on its own Cloudflare. Made with Homie.</footer>
-  </div>`);
-}
-
-/** /music/ and /videos/: every published entry of one kind. */
-export function mediaIndexPage(cat, kind) {
-  const name = cat.studio?.name ?? 'Studio';
-  const list = (kind === 'music' ? cat.songs : cat.videos) ?? [];
-  const title = kind === 'music' ? 'Music' : 'Videos';
-  return page(`${title} · ${name}`, `<div class="wrap">
-    <header class="top"><a class="brand" href="/" style="font-size:22px">${esc(name)}</a><span class="tag">${esc(title)}</span></header>
-    ${list.length ? `<section class="grid">${list.map(kind === 'music' ? songCard : videoCard).join('')}</section>` : `<p class="tag" style="margin-top:28px">No ${kind === 'music' ? 'music' : 'videos'} published yet.</p>`}
-  </div>`);
-}
-
-function rightsLine(e) {
-  const bits = [];
-  if (e.credits) bits.push(esc(e.credits));
-  const r = e.rights;
-  if (r && typeof r === 'object') {
-    if (r.commercial === true) bits.push(`Licensed for commercial use${r.plan ? ` (made on the provider's ${esc(r.plan)} plan)` : ''}.`);
-    else if (r.commercial === false) bits.push(`Not licensed for commercial use${r.plan ? ` (made on the provider's ${esc(r.plan)} plan)` : ''}.`);
-    if (r.attribution) bits.push(esc(r.attribution));
-  }
-  if (e.honesty) bits.push(esc(e.honesty));
-  return bits.length ? `<p class="rights">${bits.join(' ')}</p>` : '';
-}
+/** A room code: 1 to 32 letters, digits, - or _. */
+export const ROOM_ID = /^[A-Za-z0-9_-]{1,32}$/;
 
 /**
- * The page's one stats beacon: when its player first starts, one POST to /api/stats/beat (a counter, nothing about
- * the listener). worker/stats.mjs says what is counted.
+ * Who may put the play page (and so the game) inside a frame: this site, plus the https origins studio.json
+ * `site.frameAncestors` names (for example a hub that embeds the game). Anything else is refused by the browser.
  */
-const playedBeacon = (kind, slug) => `<script>(function(){var m=document.querySelector(${JSON.stringify(kind === 'song' ? 'audio' : 'video[data-main]')});if(!m||!navigator.sendBeacon)return;m.addEventListener('play',function(){try{navigator.sendBeacon('/api/stats/beat',${JSON.stringify(JSON.stringify({ k: kind, s: slug })).replace(/</g, '\\u003c')});}catch(e){}},{once:true});}());</script>`;
-
-const ogTags = (props) => Object.entries(props).filter(([, v]) => v).map(([k, v]) => `<meta property="${esc(k)}" content="${esc(v)}">`).join('');
-
-/** /music/<slug>/: the player, the facts, the words, the loops and stems another game may use. */
-export function songPage(cat, e, origin = '') {
-  const name = cat.studio?.name ?? 'Studio';
-  const audio = fileOf(e, 'audio');
-  const cover = fileOf(e, 'cover');
-  const extras = (e.files ?? []).filter((f) => f.role === 'loop' || f.role === 'stem');
-  const game = e.for?.game && (cat.games ?? []).find((g) => g.id === e.for.game);
-  const abs = (u) => (u && u.startsWith('/') ? `${origin}${u}` : u);
-  return page(`${e.title} · ${name}`, `<div class="wrap">
-    <header class="top"><a class="brand" href="/" style="font-size:22px">${esc(name)}</a><a class="tag" href="/music/">Music</a></header>
-    <section class="hero">
-      ${cover ? `<img class="cover" src="${esc(cover.url)}" alt="">` : ''}
-      <h1>${esc(e.title)}</h1>
-      ${e.blurb ? `<p>${esc(e.blurb)}</p>` : ''}
-      <div class="player"><audio controls preload="metadata" src="${esc(audio.url)}"></audio></div>
-      <div class="facts">${[KIND_WORD[e.kind], e.duration ? fmtTime(e.duration) : null, e.bpm ? `${e.bpm} BPM` : null, e.key].filter(Boolean).map((x) => `<span>${esc(x)}</span>`).join('')}${game ? `<a href="/${esc(game.id)}/">${esc(game.name)}</a>` : ''}</div>
-    </section>
-    ${e.lyrics ? `<h2 class="section">Words</h2><div class="lyrics">${esc(e.lyrics)}</div>` : ''}
-    ${extras.length ? `<h2 class="section">Loops and stems</h2><ul class="files">${extras.map((f) => `<li><a href="${esc(f.url)}" download><b>${esc(f.name ?? (f.role === 'loop' ? 'Loop' : 'Stem'))}</b><span>${esc([f.role, f.bars ? `${f.bars} bars` : null, f.bytes ? `${Math.max(1, Math.round(f.bytes / 1024))} KB` : null].filter(Boolean).join(' · '))}</span></a></li>`).join('')}</ul>` : ''}
-    ${rightsLine(e)}
-  </div>${playedBeacon('song', e.slug)}`, { extraHead: ogTags({ 'og:type': 'music.song', 'og:title': e.title, 'og:description': e.blurb, 'og:audio': abs(audio.url), 'og:image': abs(cover?.url) }) });
-}
-
-/** /videos/<slug>/: the player (16:9, or the 9:16 cut on a portrait phone), captions, credits. */
-export function videoPage(cat, e, origin = '') {
-  const name = cat.studio?.name ?? 'Studio';
-  const video = fileOf(e, 'video');
-  const vertical = fileOf(e, 'vertical');
-  const poster = fileOf(e, 'poster');
-  const captions = fileOf(e, 'captions');
-  const game = e.for?.game && (cat.games ?? []).find((g) => g.id === e.for.game);
-  const song = e.for?.song && (cat.songs ?? []).find((m) => m.slug === e.for.song);
-  const abs = (u) => (u && u.startsWith('/') ? `${origin}${u}` : u);
-  // A portrait phone gets the 9:16 cut when there is one; everything else the 16:9 cut.
-  const pick = vertical ? `<script>(function(){var v=document.querySelector('video[data-main]');if(!v)return;if(matchMedia('(orientation: portrait) and (max-width: 700px)').matches){v.src=${JSON.stringify(vertical.url).replace(/</g, '\u003c')};v.classList.add('vertical');}}());</script>` : '';
-  return page(`${e.title} · ${name}`, `<div class="wrap">
-    <header class="top"><a class="brand" href="/" style="font-size:22px">${esc(name)}</a><a class="tag" href="/videos/">Videos</a></header>
-    <section style="padding-top:28px">
-      <div class="player"><video data-main controls playsinline preload="metadata" src="${esc(video.url)}"${poster ? ` poster="${esc(poster.url)}"` : ''}>${captions ? `<track kind="captions" src="${esc(captions.url)}" srclang="en" label="English">` : ''}</video></div>
-      <h1 style="font-size:clamp(30px,6vw,56px);margin:0 0 10px;letter-spacing:-.02em">${esc(e.title)}</h1>
-      ${e.blurb ? `<p class="tag" style="font-size:17px;max-width:62ch">${esc(e.blurb)}</p>` : ''}
-      <div class="facts">${[KIND_WORD[e.kind], e.duration ? fmtTime(e.duration) : null].filter(Boolean).map((x) => `<span>${esc(x)}</span>`).join('')}${song ? `<a href="/music/${esc(song.slug)}/">${esc(song.title)}</a>` : ''}</div>
-      ${game ? `<div class="row"><a class="btn" href="/${esc(game.id)}/play">Play ${esc(game.name)}</a>${vertical ? `<a class="btn ghost" href="${esc(vertical.url)}">Vertical cut</a>` : ''}</div>` : (vertical ? `<div class="row"><a class="btn ghost" href="${esc(vertical.url)}">Vertical cut</a></div>` : '')}
-    </section>
-    ${rightsLine(e)}
-  </div>${pick}${playedBeacon('video', e.slug)}`, { extraHead: ogTags({ 'og:type': 'video.other', 'og:title': e.title, 'og:description': e.blurb, 'og:video': abs(video.url), 'og:image': abs(poster?.url) }) });
-}
-
-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)}/tv">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 frameAncestors(cat) {
+  const extra = (Array.isArray(cat?.studio?.site?.frameAncestors) ? cat.studio.site.frameAncestors : [])
+    .map((o) => { try { const u = new URL(String(o)); return u.protocol === 'https:' && u.origin === String(o).replace(/\/+$/, '') ? u.origin : null; } catch { return null; } })
+    .filter(Boolean).slice(0, 8);
+  return ["'self'", ...extra].join(' ');
 }
 
-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 });
+/** What a play or big-screen page answers to a room code it cannot use: said on the page, never a silent public room. */
+export function badRoomPage(cat, g, raw, { screen = false } = {}) {
+  const shown = String(raw ?? '').slice(0, 64);
+  return layout(cat, {
+    title: `That room link does not work · ${g.name}`, page: 'bad-room', status: 400,
+    main: `<header class="head"><p class="kicker">${esc(g.name)}</p><h1>That room link does not work</h1>
+<p class="lead">The room code in this link${shown ? ` (<span class="addr">${esc(shown)}${String(raw).length > 64 ? '…' : ''}</span>)` : ''} is not one a room can have: a code is 1 to 32 letters, digits, hyphens or underscores. Ask whoever sent it for the link again, or play in a public room.</p>
+<div class="keys"><a class="btn" href="/${esc(g.id)}/${screen ? 'tv' : 'play'}" data-play>Join a public room</a><a class="ghost" href="/${esc(g.id)}/">Back to ${esc(g.name)}</a></div></header>`,
+  });
 }
 
 /**
- * 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).
+ * 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, writes the room into the address (so a reload or a copied address comes back to
+ * it), and keeps the room's facts in `window.__shell` (what a test or a big screen reads). A small room button at
+ * the edge (game.json `screen.share` picks the corner) opens Invite, Big screen and the room code; nothing covers
+ * the middle of the screen or a thumb.
  */
 export function playPage(cat, g, { screen = false, joinUrl = null, qr = null, room = null } = {}) {
+  const accent = cat?.studio?.theme?.accent ?? '#ffcf5a';
+  const corner = (name, fallback) => (['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(g.screen?.[name]) ? g.screen[name] : fallback);
   // The phone's glass belongs to the game: no page pan, pinch-zoom, text selection or callout under a thumb
   // (a pinch between a stick thumb and a button thumb made the browser cancel both touches).
-  const css = `html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: #04060c; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
+  const css = `:root{--hot:${/^#[0-9a-f]{3,8}$/i.test(accent) ? accent : '#ffcf5a'}}
+html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #04060c; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
 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 { position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 5; 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); -webkit-backdrop-filter: blur(6px); 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 h2 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--hot); }
 .card ol { margin: 0; padding-left: 18px; }
 .join { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 6; display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(8,12,22,.78); border: 1px solid rgba(255,255,255,.14); color: #eef1f8; font: 600 clamp(14px, 1.6vmin, 22px)/1.3 ui-sans-serif, system-ui, sans-serif; pointer-events: none; }
 .join.join-top-left { top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); right: auto; bottom: auto; }
@@ -223,21 +57,77 @@ iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; d
 .join.join-bottom-left { left: max(16px, env(safe-area-inset-left)); right: auto; }
 .join .qr { width: clamp(96px, 15vmin, 220px); height: clamp(96px, 15vmin, 220px); border-radius: 8px; overflow: hidden; }
 .join .qr svg { width: 100%; height: 100%; display: block; }
-.join b { display: block; color: #ffcf5a; font-size: 1.15em; margin-bottom: 4px; }
+.join b { display: block; color: var(--hot); font-size: 1.15em; margin-bottom: 4px; }
 .join span { opacity: .85; word-break: break-all; }
+.room { position: fixed; z-index: 7; display: flex; flex-direction: column; gap: 8px; font: 600 13px/1.2 ui-sans-serif, system-ui, -apple-system, sans-serif; color: #eef1f8; }
+.room.at-top-right { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); align-items: flex-end; }
+.room.at-top-left { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); align-items: flex-start; }
+.room.at-bottom-right { bottom: max(8px, env(safe-area-inset-bottom)); right: max(8px, env(safe-area-inset-right)); align-items: flex-end; flex-direction: column-reverse; }
+.room.at-bottom-left { bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); align-items: flex-start; flex-direction: column-reverse; }
+.pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(6,9,16,.62); color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .5s; }
+.pill svg { width: 15px; height: 15px; flex: none; }
+.pill.dim { opacity: .38; width: 34px; padding: 0; justify-content: center; }
+.pill.dim span { display: none; }
+.pill:hover, .pill:focus-visible, .pill[aria-expanded="true"] { opacity: 1; width: auto; padding: 0 11px 0 9px; }
+.pill:hover span, .pill:focus-visible span, .pill[aria-expanded="true"] span { display: inline; }
+.sheet { box-sizing: border-box; width: min(300px, calc(100vw - 16px)); padding: 12px; border-radius: 16px; background: rgba(8,12,22,.94); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 50px rgba(0,0,0,.5); -webkit-user-select: text; user-select: text; touch-action: manipulation; }
+.sheet .code { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 2px 2px 10px; }
+.sheet .code b { font: 800 20px/1.1 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; }
+.sheet .code span { color: #aab3c7; font-weight: 500; font-size: 12px; }
+.sheet .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.sheet .acts > * { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 10px; border-radius: 11px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
+.sheet .acts .primary { background: var(--hot); color: #0b0b10; border-color: transparent; font-weight: 800; }
+.sheet .acts svg { width: 16px; height: 16px; flex: none; }
+.sheet .link { display: block; margin: 10px 2px 2px; color: #aab3c7; font: 500 11.5px/1.35 ui-monospace, Menlo, monospace; word-break: break-all; }
+.sheet .foot { display: flex; justify-content: space-between; margin-top: 10px; font-weight: 500; }
+.sheet .foot a, .sheet .foot button { color: #aab3c7; background: none; border: 0; padding: 6px 2px; font: inherit; text-decoration: none; cursor: pointer; }
+.sheet .foot a:hover, .sheet .foot button:hover { color: #fff; }
+.toast { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); z-index: 8; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(8,12,22,.9); color: #fff; font: 600 13px/1.2 ui-sans-serif, system-ui, sans-serif; pointer-events: none; }
 [hidden] { display: none !important; }`;
   const boot = { game: g.id, name: g.name, screen: Boolean(screen), ...(room ? { room } : {}) };
   // game.json "screen": { "join": "top-left" | "top-right" | "bottom-left" | "bottom-right" } keeps the card off the game's own HUD.
-  const corner = ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(g.screen?.join) ? g.screen.join : 'bottom-right';
-  const joinCard = screen && joinUrl ? `<div class="join join-${corner}" data-join>${qr ? `<div class="qr">${qr}</div>` : ''}<div><b>Scan to play</b><span>${esc(joinUrl.replace(/^https?:\/\//, ''))}</span></div></div>` : '';
-  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>
+  const joinCorner = corner('join', 'bottom-right');
+  const shareCorner = corner('share', 'top-right');
+  const joinCard = screen && joinUrl ? `<div class="join join-${joinCorner}" data-join>${qr ? `<div class="qr">${qr}</div>` : ''}<div><b>Scan to play</b><span>${esc(joinUrl.replace(/^https?:\/\//, ''))}</span></div></div>` : '';
+  const share = screen ? '' : `<div class="room at-${shareCorner}" data-room-ui>
+  <button class="pill" type="button" data-share-toggle aria-expanded="false" aria-controls="share-sheet" aria-label="Room, invite and big screen"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5.5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="18.5" r="2.5"/><path d="m8.2 10.8 7.6-4.1M8.2 13.2l7.6 4.1"/></svg><span data-room-code>Room</span></button>
+  <div class="sheet" id="share-sheet" role="dialog" aria-label="This room" data-share-sheet hidden>
+    <div class="code"><b data-room-label>This room</b><span data-room-count></span></div>
+    <div class="acts">
+      <button type="button" class="primary" data-invite><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3M7.5 7.5 12 3l4.5 4.5M5 12v7a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 19v-7"/></svg><span data-invite-word>Invite</span></button>
+      <a data-bigscreen target="_blank" rel="noopener" href="/${esc(g.id)}/tv"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4" width="19" height="13" rx="2"/><path d="M8 20.5h8"/></svg><span>Big screen</span></a>
+    </div>
+    <span class="link" data-room-link></span>
+    <div class="foot"><a href="/${esc(g.id)}/">← ${esc(g.name)}</a><button type="button" data-copy-link>Copy link</button></div>
+  </div>
+</div>
+<div class="toast" data-toast role="status" hidden></div>`;
+  return layoutless(`${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><span data-status>finding a room…</span></div>
 <div class="card" data-results hidden></div>
 <div class="card" data-screen hidden></div>
-${joinCard}
+${joinCard}${share}
 <script>window.__HOMIE_PLAY=${JSON.stringify(boot).replace(/</g, '\\u003c')};</script>
-<script>${SHELL_JS}</script>`, { extraHead: `<style>${css}</style>`, viewport: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover' });
+<script>${SHELL_JS}</script>`, css, frameAncestors(cat));
+}
+
+/** The play page's own document (no site chrome: the game owns the whole screen). */
+function layoutless(title, body, css, ancestors = "'self'") {
+  return new Response(`<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
+<title>${esc(title)}</title><link rel="icon" href="data:,"><style>${css}</style></head>
+<body>${body}</body></html>`, {
+    headers: {
+      'content-type': 'text/html; charset=utf-8',
+      'cache-control': 'no-store, no-transform',
+      // Framed only by this site and the origins studio.json names (a browser that reads CSP ignores the older header).
+      'x-frame-options': 'SAMEORIGIN',
+      'content-security-policy': `frame-ancestors ${ancestors}`,
+      'x-content-type-options': 'nosniff',
+      'referrer-policy': 'strict-origin-when-cross-origin',
+    },
+  });
 }
 
 /* The shell script (runs on the site's own origin; the game runs in the sandboxed frame). */
@@ -253,10 +143,10 @@ const SHELL_JS = String.raw`(function () {
   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 };
+  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, link: 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).
+  // The chip says who is here, then gets out of the game's way (games draw their own HUD at the top). It never takes a touch.
   var chip = document.querySelector('[data-chip]');
   var quietTimer = null;
   function say(text) {
@@ -267,8 +157,50 @@ const SHELL_JS = String.raw`(function () {
     quietTimer = setTimeout(function () { chip.classList.add('quiet'); }, 5000);
   }
 
+  // This room, shared: the code, Invite (the phone's share sheet, or the link copied), Big screen (the TV view of this room).
+  var ui = document.querySelector('[data-room-ui]');
+  var toggle = ui && ui.querySelector('[data-share-toggle]');
+  var sheet = ui && ui.querySelector('[data-share-sheet]');
+  var toast = document.querySelector('[data-toast]');
+  var dimTimer = null;
+  function labelOf(room) { var m = /^pub-(\d+)$/.exec(room); return m ? 'Room ' + m[1] : room; }
+  function flash(text) { if (!toast) return; toast.textContent = text; toast.hidden = false; clearTimeout(flash.t); flash.t = setTimeout(function () { toast.hidden = true; }, 1800); }
+  function wake() { if (!toggle) return; toggle.classList.remove('dim'); clearTimeout(dimTimer); dimTimer = setTimeout(function () { if (sheet.hidden) toggle.classList.add('dim'); }, 6000); }
+  function open(on) { if (!sheet) return; sheet.hidden = !on; toggle.setAttribute('aria-expanded', on ? 'true' : 'false'); if (on) wake(); else { wake(); try { frame.focus(); } catch (e) {} } }
+  function copy(text, done) {
+    var ok = function () { flash(done || 'Link copied'); };
+    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(ok, function () { flash(text); });
+    else flash(text);
+  }
+  function shareReady(room) {
+    if (!ui) return;
+    var link = location.origin + '/' + boot.game + '/play?room=' + encodeURIComponent(room);
+    state.link = link;
+    ui.querySelector('[data-room-code]').textContent = labelOf(room);
+    ui.querySelector('[data-room-label]').textContent = labelOf(room);
+    ui.querySelector('[data-room-link]').textContent = link.replace(/^https?:\/\//, '');
+    ui.querySelector('[data-bigscreen]').href = '/' + boot.game + '/tv?room=' + encodeURIComponent(room);
+    toggle.addEventListener('click', function (e) { e.stopPropagation(); open(sheet.hidden); });
+    ui.querySelector('[data-invite]').addEventListener('click', function () {
+      var data = { title: boot.name, text: 'Play ' + boot.name + ' with me: join my room.', url: link };
+      if (navigator.share && (!navigator.canShare || navigator.canShare(data))) navigator.share(data).catch(function () {});
+      else copy(link, 'Invite link copied');
+    });
+    ui.querySelector('[data-copy-link]').addEventListener('click', function () { copy(link); });
+    document.addEventListener('pointerdown', function (e) { if (!sheet.hidden && !ui.contains(e.target)) open(false); }, true);
+    document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !sheet.hidden) open(false); });
+    wake();
+  }
+
   function start(room) {
     state.room = room;
+    // The room goes into the address: a reload comes back to it, and a copied address brings a friend into it.
+    try {
+      if (params.get('room') !== room) {
+        params.set('room', room);
+        history.replaceState(history.state, '', location.pathname + '?' + params.toString() + location.hash);
+      }
+    } catch (e) {}
     var KEY = 'homie-net.' + boot.game + '.' + room + '.' + want;
     var token = null;
     try { token = sessionStorage.getItem(KEY); } catch (e) {}
@@ -280,7 +212,7 @@ const SHELL_JS = String.raw`(function () {
     ['touchdebug', 'cam', 'view'].forEach(function (k) { var v = params.get(k); if (v && /^[A-Za-z0-9_-]{1,16}$/.test(v)) q.set(k, v); });
     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('pointerdown', function (e) { if (ui && ui.contains(e.target)) return; try { frame.focus(); } catch (e2) {} }, { passive: true });
     window.addEventListener('message', function (ev) {
       if (ev.source !== frame.contentWindow) return;
       var m = ev.data;
@@ -294,9 +226,10 @@ const SHELL_JS = String.raw`(function () {
       paint();
     });
     watch(room);
+    shareReady(room);
     if (screenMode && !document.querySelector('[data-join]')) {
       var h2 = document.createElement('h2'); h2.textContent = 'Join on your phone';
-      var div = document.createElement('div'); div.textContent = location.origin + '/' + boot.game + '/play';
+      var div = document.createElement('div'); div.textContent = location.origin + '/' + boot.game + '/play?room=' + encodeURIComponent(room);
       screenCard.append(h2, div); screenCard.hidden = false;
     }
   }
@@ -340,12 +273,16 @@ const SHELL_JS = String.raw`(function () {
     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…');
+    var count = ui && ui.querySelector('[data-room-count]');
+    if (count && n !== null) count.textContent = n + (n === 1 ? ' player here' : ' players here');
   }
 
   // A named room (?room=, a friend's link, a test, the big screen's QR) skips the lobby; everyone else meets strangers.
+  // The page refuses a code it cannot use before it gets here, so an asked room is never swapped for a public one.
   var askedRoom = params.get('room');
   if (boot.room) start(boot.room);
-  else if (askedRoom && /^[A-Za-z0-9_-]{1,32}$/.test(askedRoom)) start(askedRoom);
+  else if (askedRoom !== null && /^[A-Za-z0-9_-]{1,32}$/.test(askedRoom)) start(askedRoom);
+  else if (askedRoom !== null) { say('that room link does not work'); }
   else fetch('/' + boot.game + '/api/lobby', { method: 'POST' })
     .then(function (r) { return r.json(); })
     .then(function (j) { start(j.room || 'main'); })

package/worker/room.mjs

@@ -41,6 +41,33 @@ export const EV_RATES = Object.freeze({ host: 30, replica: 10, screen: 2 });
 /** The keyed state channel: at most this many keys and bytes per room. */
 export const STATE_CAPS = Object.freeze({ keys: 64, bytes: 65536 });
 
+/**
+ * A seat's handle when its player typed no name: two words, varied per seat and per room ("Velvet Comet"), never
+ * "Player 1" (a game that falls back to a list by seat number made every room's first player the same name).
+ * At most 16 characters, so a game that trims names at 18 keeps all of it.
+ */
+export const HANDLE_WORDS = Object.freeze({
+  first: ['Neon', 'Velvet', 'Static', 'Amber', 'Cobalt', 'Lucky', 'Rapid', 'Silent', 'Solar', 'Lunar', 'Crimson', 'Golden',
+    'Frosty', 'Wild', 'Quiet', 'Swift', 'Brave', 'Clever', 'Cosmic', 'Mellow', 'Rusty', 'Shiny', 'Sunny', 'Stormy', 'Turbo',
+    'Pixel', 'Retro', 'Jolly', 'Nimble', 'Bold', 'Misty', 'Copper'],
+  second: ['Comet', 'Otter', 'Falcon', 'Fox', 'Panda', 'Rocket', 'Tiger', 'Raven', 'Pilot', 'Ranger', 'Rider', 'Moth', 'Koi',
+    'Lynx', 'Heron', 'Badger', 'Yeti', 'Wolf', 'Bison', 'Gecko', 'Orca', 'Puma', 'Sparrow', 'Beacon', 'Meteor', 'Nova',
+    'Ember', 'Drift', 'Spark', 'Echo', 'Kite', 'Mantis'],
+});
+/** The handle for a seat token (random per seat), skipping any handle another seat in the room already has. */
+export function handleFor(token, taken = new Set()) {
+  let h = 2166136261;
+  for (const ch of String(token ?? '')) h = Math.imul(h ^ ch.charCodeAt(0), 16777619) >>> 0;
+  const { first, second } = HANDLE_WORDS;
+  const all = first.length * second.length;
+  for (let i = 0; i < all; i += 1) {
+    const n = (h + i * 7919) % all;
+    const name = `${first[n % first.length]} ${second[Math.floor(n / first.length) % second.length]}`;
+    if (!taken.has(name)) return name;
+  }
+  return `${first[h % first.length]} ${second[h % second.length]}`;
+}
+
 /** Random bytes as base64url, with no Node Buffer (runs in workerd too). */
 function randomId(n) {
   const raw = new Uint8Array(n);
@@ -427,7 +454,7 @@ export class NetRoom {
     c.token = s.token;
     c.waiting = false;
     s.present = true;
-    const name = c.typed || s.name || `Player ${seat + 1}`;
+    const name = c.typed || s.name || handleFor(s.token, new Set([...this.seats.values()].map((x) => x.name).filter(Boolean)));
     if (name !== s.name) { s.name = name; this.seatsDirty = true; }
     c.name = name;
     c.colour = seat % PALETTE_SIZE;