@homie-rocks/studio 0.14.4 → 0.15.0

package/starters/ember-vale/src/main.ts

@@ -14,6 +14,10 @@
  * The host decides who killed what and sends the killer a `loot` event; only the hero's own browser changes the
  * hero and saves it. A hardcore hero who falls becomes a memorial in the Hall of the Fallen, and its save is wiped
  * in the same step (saves.fall). Canvas 2D on purpose: the point is the pattern, in a few hundred lines.
+ *
+ * A watcher (/<game>/watch, contract revision 5) has no hero and makes none: `room.viewSeat()` is the hero it
+ * follows, drawn in gold as a hero's own browser draws itself, with that hero's panel; nobody followed, the vale.
+ * The host says who slew what (`slain`), so a watcher on Auto cuts to the kill.
  */
 import { createControls, createRoom, createSaves, exposePort, q, type BodyBase, type NetEvent } from '@homie-rocks/studio/port';
 
@@ -40,6 +44,9 @@ interface Slime { id: number; x: number; y: number; hp: number; maxHp: number; s
 type SlimeRow = [id: number, x: number, y: number, hp: number, size: number];
 
 /* ------------------------------------------------------------------ the save */
+/** A spectator (a watcher, or a big screen) has no hero of its own: it never loads, makes or saves one. */
+const shellCfg = (globalThis as { HOMIE_NET?: { want?: string; watch?: boolean } }).HOMIE_NET;
+const lookOnly = shellCfg?.watch === true || shellCfg?.want === 'screen';
 const saves = createSaves({ game: 'ember-vale' });
 let hero: Hero | null = null;
 let heroLoaded = false;
@@ -50,6 +57,7 @@ function saveSoon(): void {
   saveTimer = setTimeout(() => { if (hero) void saves.set('hero', hero); }, 1000);
 }
 async function loadHero(): Promise<void> {
+  if (lookOnly) { heroLoaded = true; ui.paint(); return; }
   const h = await saves.get<Hero>('hero');
   hero = h && h.v === 1 ? h : null;
   heroLoaded = true;
@@ -140,6 +148,7 @@ net.on('event', (e: NetEvent) => {
   const d = (e.d ?? {}) as { xp?: number; gold?: number; cause?: string; to?: number };
   if (e.k === 'loot' && d.to === room.mySeat()) gain(Math.max(0, Number(d.xp) || 0), Math.max(0, Number(d.gold) || 0));
   if (e.k === 'down' && d.to === room.mySeat()) void fell(String(d.cause ?? 'a slime').slice(0, 40));
+  if (e.k === 'slain' && typeof (e.d as { seat?: unknown })?.seat === 'number') net.spotlight((e.d as { seat: number }).seat);
 });
 function tell(b: Body, k: 'loot' | 'down', d: Record<string, unknown>): void {
   if (b.bot || b.seat === null) return;
@@ -158,6 +167,8 @@ function strike(b: Body, now: number): void {
       const gold = s.size === 3 ? 50 : 2 + Math.floor(Math.random() * 4) * s.size;
       b.score += xp;
       tell(b, 'loot', { xp, gold });
+      // Everyone hears who slew it (a watcher on Auto cuts to them); the loot itself is the slayer's alone.
+      if (!b.bot && b.seat !== null) room.send('slain', { seat: b.seat });
     }
   }
   slimes = slimes.filter((s) => s.hp > 0);
@@ -299,10 +310,12 @@ function draw(t: number): void {
     ctx.fillStyle = 'rgba(0,0,0,.5)'; ctx.fillRect(x - r, y + r + 4, r * 2, 4);
     ctx.fillStyle = '#ff7a59'; ctx.fillRect(x - r, y + r + 4, (r * 2 * clamp(hp, 0, max)) / max, 4);
   }
-  const mySeat = room.mySeat();
+  // The hero whose view this is: my own, or the one a watcher follows (null: the vale, nobody in gold).
+  const viewS = room.viewSeat();
   for (const b of room.view()) {
-    const self = !b.bot && b.seat === mySeat;
-    const x = self && !room.hosting ? me.x : b.x; const y = self && !room.hosting ? me.y : b.y;
+    const self = !b.bot && b.seat === viewS;
+    const local = self && !room.hosting && !net.watching;
+    const x = local ? me.x : b.x; const y = local ? me.y : b.y;
     const isDown = Boolean(b.flags & DOWN);
     ctx.globalAlpha = isDown ? 0.35 : 1;
     if ((b.flags & STRIKING) || (self && performance.now() - me.flashAt < 160)) { ctx.strokeStyle = 'rgba(255,207,110,.7)'; ctx.lineWidth = 4; ctx.beginPath(); ctx.arc(x, y, STRIKE_RANGE * 0.8, 0, Math.PI * 2); ctx.stroke(); }
@@ -325,8 +338,23 @@ function hud(t: number): void {
   const x0 = 14; const y0 = 14;
   ctx.fillStyle = 'rgba(10,14,9,.62)'; ctx.fillRect(x0, y0, 240, 62);
   ctx.textAlign = 'left'; ctx.font = '700 16px ui-sans-serif, system-ui, sans-serif'; ctx.fillStyle = '#ffcf6e';
-  ctx.fillText(hero ? `${hero.name}${hero.hardcore ? ' ☠' : ''} · Lv ${hero.level}` : heroLoaded ? 'No hero yet' : 'Loading your hero…', x0 + 10, y0 + 22);
-  if (hero) {
+  if (lookOnly) {
+    // A watcher's panel is the followed hero's, as the room has them (their save stays in their own browser).
+    const v = room.viewBody();
+    if (v) {
+      ctx.fillText(`${v.name} · Lv ${v.level}`, x0 + 10, y0 + 22);
+      ctx.fillStyle = 'rgba(255,255,255,.12)'; ctx.fillRect(x0 + 10, y0 + 32, 140, 6);
+      ctx.fillStyle = '#7ad35a'; ctx.fillRect(x0 + 10, y0 + 32, (140 * clamp(v.hp, 0, v.maxHp)) / Math.max(1, v.maxHp), 6);
+      ctx.font = '600 13px ui-sans-serif, system-ui, sans-serif'; ctx.fillStyle = '#e7d9b4';
+      ctx.fillText(`${v.score} xp tonight${v.flags & DOWN ? ' · down' : ''}`, x0 + 10, y0 + 54);
+    } else {
+      const heroes = room.view().filter((b) => !b.bot).length;
+      ctx.fillText('Watching the vale', x0 + 10, y0 + 22);
+      ctx.font = '600 13px ui-sans-serif, system-ui, sans-serif'; ctx.fillStyle = '#e7d9b4';
+      ctx.fillText(`${heroes} ${heroes === 1 ? 'hero' : 'heroes'} · ${(room.fast() ?? []).length} slimes`, x0 + 10, y0 + 46);
+    }
+  } else ctx.fillText(hero ? `${hero.name}${hero.hardcore ? ' ☠' : ''} · Lv ${hero.level}` : heroLoaded ? 'No hero yet' : 'Loading your hero…', x0 + 10, y0 + 22);
+  if (hero && !lookOnly) {
     ctx.fillStyle = 'rgba(255,255,255,.12)'; ctx.fillRect(x0 + 10, y0 + 32, 140, 6);
     ctx.fillStyle = '#ffcf6e'; ctx.fillRect(x0 + 10, y0 + 32, (140 * hero.xp) / xpFor(hero.level), 6);
     ctx.font = '600 13px ui-sans-serif, system-ui, sans-serif'; ctx.fillStyle = '#e7d9b4';
@@ -359,6 +387,7 @@ const ui = {
   paint(): void {
     const p = saves.player;
     $('who').textContent = p.local ? 'Playing here only' : p.signedIn ? `${p.name}${p.owner ? ' · owner' : ''}` : 'Guest · keep my hero';
+    $('who').hidden = lookOnly;
   },
   make(): void {
     ($('hero-name') as HTMLInputElement).value = '';
@@ -416,6 +445,9 @@ function frame(t: number): void {
   requestAnimationFrame(frame);
 }
 
+// Tonight's experience per hero: the watch page's live scores, and who Auto follows when nobody is slaying.
+net.expose({ scores: () => room.view().map((b) => ({ slot: b.slot, seat: b.seat, bot: b.bot, score: b.score })) });
+
 exposePort(net, {
   view: 'top',
   self: () => (me.has && room.mySeat() !== null ? { x: me.x, y: me.y } : null),

package/starters/gem-rush/src/main.ts

@@ -16,9 +16,15 @@
  * zone (gems inside it score double) is slow state on the keyed state channel,
  * so a joiner has it in its welcome and a promoted host inherits it.
  *
+ * WATCH ANY PLAYER (contract revision 5): a watcher (/<game>/watch) never
+ * takes a seat. `net.viewSeat` says whose view to draw; the camera follows that
+ * player's body as their own browser does, the board marks their row, and with
+ * nobody followed the whole arena shows. Waves call `net.spotlight(seat)`, so a
+ * watcher on Auto cuts to whoever just bumped.
+ *
  * Canvas 2D on purpose: the point is the contract, in ~700 readable lines.
  */
-import { createNetplay, Roster, q, lerp, capMove, type RoleChange, type RoundInfo, type RoundResult, type Slot, type Snapshot } from '@homie-rocks/studio/netplay';
+import { createNetplay, Roster, q, lerp, capMove, PALETTE, type RoleChange, type RoundInfo, type RoundResult, type Slot, type Snapshot } from '@homie-rocks/studio/netplay';
 // The port toolkit's probe: what `homie-studio port check` reads for the owner tests (and sandbox + audio shims).
 import { exposePort } from '@homie-rocks/studio/port';
 
@@ -38,7 +44,8 @@ const KNOCK_RANGE = 110;
 const KNOCK_SPEED = 950;
 const KNOCK_MS = 420;
 const ZONE_MS = 12_000;
-const PALETTE = ['#8fe36a', '#ffd166', '#ef6f6c', '#6cb4ee', '#c792ea', '#f4a261', '#2ec4b6', '#ff8fab', '#a7c957', '#e9c46a', '#90e0ef', '#f28482'];
+/** The contract's 12 colours (PALETTE, NETPLAY.md section 3): a person wears their seat's, so the watch page's strip matches. */
+const colourOf = (slot: number, seat: number | null): string => PALETTE[(seat ?? slot) % PALETTE.length] as string;
 const BOT_NAMES = ['Rook', 'Vex', 'Moth', 'Kilo', 'Juno', 'Pike', 'Nyx', 'Ash'];
 const botName = (slot: number): string => BOT_NAMES[slot % BOT_NAMES.length] as string;
 const label = (name: string, bot: boolean): string => (bot ? `${name} · bot` : name);
@@ -85,6 +92,8 @@ let predictionError = 0;
 const me = { x: W / 2, y: H / 2, vx: 0, vy: 0, kvx: 0, kvy: 0, knockUntil: 0, has: false };
 /** Offline (no shell) plays as a local seat 0, with keys or touch. */
 const mySeat = (): number | null => (net.offline ? 0 : net.seat);
+/** Whose view to draw: my own seat, or for a watcher the player it follows (null: the whole arena). */
+const viewSeat = (): number | null => (net.offline ? 0 : net.viewSeat);
 
 /* ------------------------------------------------------- replica view */
 const drawn = new Map<number, { x: number; y: number; seat: number; score: number; slot: number }>();
@@ -342,6 +351,9 @@ function knock(b: Body, fx: number, fy: number): void {
 }
 function addWave(d: { slot: number }, isKnock = false): void {
   const pos = hosting ? bodies.get(d.slot) : [...drawn.values()].find((x) => x.slot === d.slot);
+  // The action, for a watcher on Auto: whoever waved (a person, never a bot).
+  const waver = pos && 'bot' in pos ? (pos.bot ? null : pos.seat) : pos && pos.seat >= 0 ? pos.seat : null;
+  if (!isKnock) net.spotlight(waver);
   const mineSlot = hosting ? [...bodies.values()].find((x) => x.seat !== null && x.seat === mySeat())?.slot : [...drawn.values()].find((x) => x.seat === net.seat)?.slot;
   const at = mineSlot === d.slot && me.has ? me : pos;
   if (!at) return;
@@ -527,7 +539,14 @@ function resize(): void {
 addEventListener('resize', resize);
 resize();
 
-const cam = { x: W / 2, y: H / 2 };
+const cam = { x: W / 2, y: H / 2, scale: 0 };
+/** Where a seat's body is drawn now (host: the real body; replica: interpolated), or null. */
+function seatPos(seat: number): { x: number; y: number } | null {
+  if (seat === mySeat() && me.has && !net.watching) return me;
+  if (hosting) { const b = [...bodies.values()].find((x) => !x.bot && x.seat === seat); return b ? { x: b.x, y: b.y } : null; }
+  const d = [...drawn.values()].find((x) => x.seat === seat);
+  return d ? { x: d.x, y: d.y } : null;
+}
 const gemGlow = (() => {
   const g = ctx.createRadialGradient(0, 0, 0, 0, 0, R_GEM * 2.8);
   g.addColorStop(0, 'rgba(255,209,102,0.55)'); g.addColorStop(0.4, 'rgba(255,170,60,0.18)'); g.addColorStop(1, 'rgba(255,150,40,0)');
@@ -536,9 +555,15 @@ const gemGlow = (() => {
 function draw(t: number): void {
   const cw = innerWidth; const ch = innerHeight;
   const phone = Math.min(cw, ch) <= 540;
-  const spectating = mySeat() === null;
-  const scale = spectating ? Math.min(cw / (W + 80), ch / (H + 80)) : Math.min(cw, ch) / (phone ? 560 : 820);
-  const target = spectating || !me.has ? { x: W / 2, y: H / 2 } : me;
+  // The view: my own body, or (a watcher) the followed player's, drawn exactly as their own browser frames it.
+  const view = viewSeat();
+  const followed = net.watching && view !== null ? seatPos(view) : null;
+  const overview = net.watching ? !followed : mySeat() === null;
+  const wantScale = overview ? Math.min(cw / (W + 80), ch / (H + 80)) : Math.min(cw, ch) / (phone ? 560 : 820);
+  // A watcher's switch glides: the zoom and the pan ease over a few frames, never a cut.
+  cam.scale = cam.scale ? cam.scale + (wantScale - cam.scale) * 0.12 : wantScale;
+  const scale = cam.scale;
+  const target = net.watching ? (followed ?? { x: W / 2, y: H / 2 }) : overview || !me.has ? { x: W / 2, y: H / 2 } : me;
   cam.x += (target.x - cam.x) * 0.2; cam.y += (target.y - cam.y) * 0.2;
   ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
   const bg = ctx.createRadialGradient(cw / 2, ch / 2, 0, cw / 2, ch / 2, Math.max(cw, ch) * 0.8);
@@ -588,18 +613,20 @@ function draw(t: number): void {
 
   // avatars
   const names = new Map<number, Slot>((net.slots ?? roster.slots).map((s) => [s.slot, s]));
+  // `mine`: the body whose view this is: my own, or the player a watcher follows (named, never "You").
   const list: { slot: number; seat: number | null; x: number; y: number; bot: boolean; name: string; mine: boolean }[] = [];
+  const isView = (seat: number | null, bot: boolean): boolean => !bot && seat !== null && seat === view;
   if (hosting) {
-    for (const b of bodies.values()) list.push({ slot: b.slot, seat: b.seat, x: b.x, y: b.y, bot: b.bot, name: b.name, mine: b.seat !== null && b.seat === mySeat() });
+    for (const b of bodies.values()) list.push({ slot: b.slot, seat: b.seat, x: b.x, y: b.y, bot: b.bot, name: b.name, mine: isView(b.seat, b.bot) });
   } else {
     for (const d of drawn.values()) {
-      const mine = d.seat >= 0 && d.seat === net.seat;
+      const own = !net.watching && d.seat >= 0 && d.seat === net.seat;
       const s = names.get(d.slot);
-      list.push({ slot: d.slot, seat: d.seat >= 0 ? d.seat : null, x: mine && me.has ? me.x : d.x, y: mine && me.has ? me.y : d.y, bot: d.seat < 0, name: s?.name ?? (d.seat >= 0 ? `Player ${d.seat + 1}` : botName(d.slot)), mine });
+      list.push({ slot: d.slot, seat: d.seat >= 0 ? d.seat : null, x: own && me.has ? me.x : d.x, y: own && me.has ? me.y : d.y, bot: d.seat < 0, name: s?.name ?? (d.seat >= 0 ? `Player ${d.seat + 1}` : botName(d.slot)), mine: isView(d.seat >= 0 ? d.seat : null, d.seat < 0) });
     }
   }
   for (const a of list) {
-    const colour = PALETTE[a.slot % PALETTE.length] as string;
+    const colour = colourOf(a.slot, a.bot ? null : a.seat);
     ctx.globalAlpha = a.bot ? 0.62 : 1;
     ctx.fillStyle = colour; ctx.beginPath(); ctx.arc(a.x, a.y, R_AV, 0, Math.PI * 2); ctx.fill();
     ctx.fillStyle = 'rgba(0,0,0,0.35)'; ctx.beginPath(); ctx.arc(a.x, a.y, R_AV * 0.45, 0, Math.PI * 2); ctx.fill();
@@ -607,7 +634,7 @@ function draw(t: number): void {
     ctx.globalAlpha = 1;
     ctx.font = `600 ${Math.round(15 / Math.max(0.6, scale))}px ui-sans-serif, system-ui, sans-serif`;
     ctx.textAlign = 'center'; ctx.fillStyle = a.mine ? '#ffffff' : 'rgba(232,236,245,0.8)';
-    ctx.fillText(a.mine ? 'You' : label(a.name, a.bot), a.x, a.y - R_AV - 12);
+    ctx.fillText(a.mine && !net.watching ? 'You' : label(a.name, a.bot), a.x, a.y - R_AV - 12);
   }
   ctx.restore();
 
@@ -640,11 +667,11 @@ function hud(cw: number, ch: number, phone: boolean, list: { slot: number; name:
   ctx.textAlign = 'right';
   rows.forEach((a, i) => {
     ctx.fillStyle = a.mine ? '#ffffff' : a.bot ? 'rgba(232,236,245,0.55)' : 'rgba(232,236,245,0.85)';
-    ctx.fillText(`${a.mine ? 'You' : label(a.name, a.bot)}  ${scores.get(a.slot) ?? 0}`, cw - pad, top + 18 + i * (phone ? 20 : 22));
+    ctx.fillText(`${a.mine && !net.watching ? 'You' : label(a.name, a.bot)}  ${scores.get(a.slot) ?? 0}`, cw - pad, top + 18 + i * (phone ? 20 : 22));
   });
   // role badge
   ctx.textAlign = 'left'; ctx.font = '600 11px ui-monospace, Menlo, monospace'; ctx.fillStyle = 'rgba(125,240,255,0.7)';
-  ctx.fillText(net.offline ? 'OFFLINE HOST' : net.role.toUpperCase(), pad, ch - pad);
+  ctx.fillText(net.offline ? 'OFFLINE HOST' : net.watching ? 'WATCHING' : net.role.toUpperCase(), pad, ch - pad);
   if (r && r.phase === 'over' && r.results) {
     const w = Math.min(360, cw - 40); const h = 44 + Math.min(6, r.results.length) * 26;
     const x = (cw - w) / 2; const y = (ch - h) / 2;
@@ -653,10 +680,11 @@ function hud(cw: number, ch: number, phone: boolean, list: { slot: number; name:
     ctx.textAlign = 'center'; ctx.fillStyle = '#7df0ff'; ctx.font = '700 18px ui-sans-serif, system-ui, sans-serif';
     ctx.fillText(`Round ${r.n} results`, cw / 2, y + 28);
     ctx.font = '600 16px ui-sans-serif, system-ui, sans-serif';
+    const view = viewSeat();
     r.results.slice(0, 6).forEach((row, i) => {
-      const mine = row.seat !== null && row.seat === mySeat();
+      const mine = !row.bot && row.seat !== null && row.seat === view;
       ctx.fillStyle = mine ? '#ffffff' : row.bot ? 'rgba(232,236,245,0.6)' : '#e8ecf5';
-      ctx.fillText(`${row.place}. ${mine ? 'You' : label(row.name, row.bot)} — ${row.score}`, cw / 2, y + 56 + i * 26);
+      ctx.fillText(`${row.place}. ${mine && !net.watching ? 'You' : label(row.name, row.bot)}${mine && net.watching ? ' ◂' : ''} — ${row.score}`, cw / 2, y + 56 + i * 26);
     });
   }
   if (!net.offline && !net.connected && net.role !== 'host') {
@@ -699,6 +727,8 @@ net.expose({
   movement: () => MOVEMENT,
   controlResets: () => controlResets,
   predictionError: () => predictionError,
+  /** Where the camera looks and whose view it is (a watcher following a player: their body, under the camera). */
+  camera: () => ({ x: cam.x, y: cam.y, scale: cam.scale, view: viewSeat() }),
   /** performance.now() of the first keyed-state value and the first live snapshot this browser received. */
   arrivals: () => ({ firstStateAt, firstSnapAt }),
   /** Harness hook (host only): knock the body of `seat` back, toward the middle of the arena. */

package/worker/index.mjs

@@ -16,10 +16,15 @@
  *                              room button shares it (Invite, Big screen, the room code)
  *   /<game>/tv                 the big screen: the same room as a spectator, with a QR code phones scan to join
  *                              (also /<game>/play?screen=1)
+ *   /<game>/watch?room=        watch a live room from any player's view: the game itself, rendered by this browser
+ *                              as a watcher that never takes a seat, with a strip of the players to switch between
+ *                              (keys 1-9, A for Auto, O for the overview); no room: the busiest public room
+ *                              (NETPLAY.md section 16; game.json "watch": "overview" or false narrows it)
  *   /<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)
+ *   /<game>/api/watch          which public room to watch: the busiest one now (nothing is reserved)
  *   /api/games, /api/rooms     the catalogue plus live counts; every public room playing now (/api/rooms may be
  *                              cached for 15 s)
  *   /__homie/..., /<game>/__homie/...   `not-a-homie`: the answer a game with Homie's arcade controls gets when it
@@ -51,17 +56,17 @@
  * after `homie-studio storage add` (R2 needs a payment method on the account),
  * MEDIA. Everything else runs on Cloudflare's free Workers plan.
  *
- * The relay is the netplay contract's own room.mjs (NETPLAY.md v1 rev 3), run
+ * The relay is the netplay contract's own room.mjs (NETPLAY.md v1 rev 5), 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 { ROOM_ID, badRoomPage, frameAncestors, playPage } from './pages.mjs';
+import { NetRoom, WATCH_POLICIES } from './room.mjs';
+import { ROOM_ID, badRoomPage, frameAncestors, noWatchPage, playPage, watchPage } from './pages.mjs';
 import { qrSvg } from './qr.mjs';
 import { SEAT_MAX, perAddress, seatsOf } from './seats.mjs';
 import {
   SITE_JS, atomFeed, creditsPage, customPage, gameCover, gameLanding, gamesPage, homePage, jsonFeed, mediaArt, mediaIndexPage,
-  notFoundPage, postPage, postsPage, roomView, roomsPage, sectionsOf, songPage, videoPage,
+  notFoundPage, postPage, postsPage, roomView, roomsPage, sectionsOf, songPage, videoPage, watchOf,
 } from './site.mjs';
 import { count, countVisit, counter, isQa, onlyOf, ownerAllowed, playedByGame, playedThisWeek, rangeOf, readStats, today } from './stats.mjs';
 import { ownerRoutes } from './stats-page.mjs';
@@ -307,7 +312,12 @@ async function gameDocument(request, env, url, game, meta, cat) {
   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.`, cat);
   const room = asked ?? 'main';
-  const want = url.searchParams.get('want') === 'screen' ? 'screen' : 'play';
+  // A watcher (section 16): a screen that never takes a seat, following the player the watch page asks for.
+  const policy = watchOf(meta);
+  const watching = url.searchParams.get('watch') === '1';
+  if (watching && policy === 'off') return new Response(`${meta?.name ?? game} cannot be watched; play it instead.\n`, { status: 403, headers: { 'content-type': 'text/plain; charset=utf-8', 'cache-control': 'no-store' } });
+  const follow = /^(?:auto|overview|\d{1,2})$/.test(url.searchParams.get('follow') ?? '') ? url.searchParams.get('follow') : 'auto';
+  const want = watching || 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}`;
   // The browser's room key (b: what a kick holds out) and the play page's ticket (t: a game that is not public) ride
@@ -316,12 +326,13 @@ async function gameDocument(request, env, url, game, meta, cat) {
   const t = TICKET_TEXT.test(url.searchParams.get('t') ?? '') ? url.searchParams.get('t') : null;
   const cfg = {
     v: 1,
-    url: `${wsBase}/${game}/__net?room=${encodeURIComponent(room)}${b ? `&b=${b}` : ''}${t ? `&t=${encodeURIComponent(t)}` : ''}`,
+    url: `${wsBase}/${game}/__net?room=${encodeURIComponent(room)}${b ? `&b=${b}` : ''}${t ? `&t=${encodeURIComponent(t)}` : ''}${watching ? '&w=1' : ''}`,
     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,
+    ...(watching ? { watch: true, follow: /^\d+$/.test(follow) ? Number(follow) : follow, watchPolicy: policy } : {}),
     debug: url.searchParams.get('debug') === '1',
     ...(meta?.movement ? { movement: meta.movement } : {}),
     // game.json "saves": the play shell around this frame answers @homie-rocks/studio/saves (saves/SAVES.md).
@@ -619,7 +630,7 @@ async function route(request, env, ctx) {
     const max = seatsFor(meta, settings);
     const lobby = () => env.LOBBY.get(env.LOBBY.idFromName(game));
     if (sub === 'invite') return redeemInvite(request, env, url, cat, meta, settings);
-    const door = launch !== 'public' && ['', 'live', 'credits', 'tv', 'play', 'api/lobby'].includes(sub) ? await accessOf(request, env, game, launch) : { ok: true, sub: null, owner: false };
+    const door = launch !== 'public' && ['', 'live', 'credits', 'tv', 'play', 'watch', 'api/lobby', 'api/watch'].includes(sub) ? await accessOf(request, env, game, launch) : { ok: true, sub: null, owner: false };
     const shut = () => gatePage(cat, meta, launch, { code: url.searchParams.get('invite') ?? '' });
     if (sub === '') {
       if (!door.ok) return shut();
@@ -672,6 +683,28 @@ async function route(request, env, ctx) {
       shareDaily(cat, url, ctx);
       return playPage(cat, meta, { ticket, owner, launch });
     }
+    if (sub === 'watch') {
+      // The same door as Play: a game that is private or an invite-only beta is watched only by whoever may play it.
+      const asked = url.searchParams.get('room');
+      if (asked !== null && !ROOM_ID.test(asked)) return badRoomPage(cat, meta, asked, { watch: true });
+      if (!door.ok) return shut();
+      const policy = watchOf(meta);
+      if (policy === 'off') return noWatchPage(cat, meta);
+      const owner = door.owner || (launch === 'public' && await isOwner(request, env));
+      const holder = joinHolders(door.sub ?? (owner ? 'o' : null), await accountSub(request, env));
+      const ticket = holder ? await ticketFor(env, game, holder) : null;
+      await countVisit(request, env, ctx, game, 'watch');
+      shareDaily(cat, url, ctx);
+      return watchPage(cat, meta, { room: asked, ticket, policy });
+    }
+    if (sub === 'api/watch') {
+      if (!door.ok || watchOf(meta) === 'off') return json({ ok: false, error: 'not-found' }, 404);
+      // The busiest public room now, to watch; nothing is reserved (a watcher takes no seat).
+      const not = String(url.searchParams.get('not') ?? '').split(',').filter((r) => ROOM_ID.test(r)).slice(0, 4).join(',');
+      let best = null;
+      try { best = await (await lobby().fetch(`https://lobby/busiest${not ? `?not=${encodeURIComponent(not)}` : ''}`)).json(); } catch { best = null; }
+      return json({ ok: true, game, room: best?.room ?? null, players: best?.players ?? 0, max }, 200, { 'cache-control': 'no-store' });
+    }
     if (sub === 'api/lobby') {
       if (!door.ok) return json({ ok: false, error: 'not-found' }, 404);
       // A browser held out of a room asks for any other (`not`), so the Lobby never sends it back there.
@@ -686,8 +719,13 @@ async function route(request, env, ctx) {
       const who = url.searchParams.get('t') ? await ticketSub(env, game, url.searchParams.get('t')) : null;
       if (launch !== 'public' && !(await ticketAllows(env, who, launch))) return new Response('this game is not open to you', { status: 403 });
       const b = BROWSER_KEY.test(url.searchParams.get('b') ?? '') ? url.searchParams.get('b') : '';
+      // A watcher's socket (section 16): what the game lets watchers see goes with every socket, so a helper that only
+      // says `watch` in its hello is held to it too; a game that cannot be watched refuses a watch door's socket here.
+      const policy = watchOf(meta);
+      const w = sub === '__net' && url.searchParams.get('w') === '1';
+      if (w && policy === 'off') return new Response('this game cannot be watched', { status: 403 });
       const stub = env.TABLE.get(env.TABLE.idFromName(`${game}/${room}`));
-      const target = `https://table/${sub}?game=${encodeURIComponent(game)}&room=${encodeURIComponent(room)}&max=${max}${b ? `&b=${b}` : ''}${who ? `&via=${encodeURIComponent(who)}` : ''}`;
+      const target = `https://table/${sub}?game=${encodeURIComponent(game)}&room=${encodeURIComponent(room)}&max=${max}${b ? `&b=${b}` : ''}${who ? `&via=${encodeURIComponent(who)}` : ''}${sub === '__net' ? `&wp=${policy}${w ? '&w=1' : ''}` : ''}`;
       return stub.fetch(new Request(target, request));
     }
     // The same knock, relative to the game's own page: the same answer (see notAHomie).
@@ -795,6 +833,9 @@ export class Table {
       browser: url.searchParams.get('b') || null,
       via: via || null,
       player: holders(via).find((p) => p.startsWith('p-'))?.slice(2) ?? null,
+      // A socket opened through the game's watch door, and what the game lets watchers see (section 16).
+      watch: url.searchParams.get('w') === '1',
+      watchPolicy: WATCH_POLICIES.includes(url.searchParams.get('wp')) ? url.searchParams.get('wp') : 'follow',
       // House QA and `homie-studio check` mark their browsers; their rooms, rounds and peaks are not the studio's numbers.
       qa: isQa(request),
       send: (text) => { try { server.send(text); } catch { /* closed */ } },
@@ -1018,6 +1059,17 @@ export class Lobby {
       return json({ ok: true });
     }
     if (url.pathname === '/rooms') return json({ rooms: [...this.rooms.values()].map(({ name, players, at }) => ({ name, players, at })) });
+    if (url.pathname === '/busiest') {
+      // The public room with the most players now, for a watcher (section 16): it reserves nothing, as a watcher takes
+      // no seat. A closed room, or one named in `not`, is never the answer.
+      const not = new Set(String(url.searchParams.get('not') ?? '').split(',').filter(Boolean));
+      let best = null;
+      for (const r of this.rooms.values()) {
+        if (r.players <= 0 || not.has(r.name) || (this.closed.get(r.name) ?? 0) > now) continue;
+        if (!best || r.players > best.players || (r.players === best.players && r.name < best.name)) best = r;
+      }
+      return json({ room: best?.name ?? null, players: best?.players ?? 0 });
+    }
     if (url.pathname === '/office') {
       // The owner's office: every room with somebody seated in the last 3 minutes, public or named, and closed ones.
       for (const [name, r] of this.seen) if (now - r.at > 180_000) this.seen.delete(name);