@homie-rocks/studio 0.7.0 → 0.9.0

package/worker/index.mjs

@@ -20,7 +20,10 @@
  *   /<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, /api/rooms     the catalogue plus live counts; every public room playing now
+ *   /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
+ *                              knocks for a Homie box, so it stops knocking (a studio site is not a box)
  *   /.well-known/homie-studio.json   what the homie.rocks directory reads
  *   /media/<key>               the studio's large media, from R2 (once `storage add` bound it), with byte ranges
  *   /api/stats                 the studio's numbers, for its owner only (a read key, or the owner's page session)
@@ -49,10 +52,10 @@ import { ROOM_ID, badRoomPage, frameAncestors, playPage } from './pages.mjs';
 import { qrSvg } from './qr.mjs';
 import { SEAT_MAX, perAddress, seatsOf } from './seats.mjs';
 import {
-  SITE_JS, atomFeed, creditsPage, customPage, gameLanding, gamesPage, homePage, jsonFeed, mediaIndexPage, notFoundPage,
-  postPage, postsPage, roomView, roomsPage, sectionsOf, songPage, videoPage,
+  SITE_JS, atomFeed, creditsPage, customPage, gameCover, gameLanding, gamesPage, homePage, jsonFeed, mediaArt, mediaIndexPage,
+  notFoundPage, postPage, postsPage, roomView, roomsPage, sectionsOf, songPage, videoPage,
 } from './site.mjs';
-import { count, countVisit, counter, isQa, onlyOf, ownerAllowed, playedThisWeek, rangeOf, readStats, today } from './stats.mjs';
+import { count, countVisit, counter, isQa, onlyOf, ownerAllowed, playedByGame, playedThisWeek, rangeOf, readStats, today } from './stats.mjs';
 import { ownerRoutes } from './stats-page.mjs';
 import { STUDIO_VERSION_TAG } from './version.mjs';
 
@@ -163,18 +166,34 @@ async function mediaObject(request, env, key) {
   return new Response(obj.body, { headers });
 }
 
-/** A catalogue media row as the directory reads it (absolute addresses). */
-function mediaRow(e, origin, kind) {
+/**
+ * A catalogue media row as the directory reads it (absolute addresses). A song's cover (a video's poster) is its
+ * own, else the manifest's default, else the landing still of the game it was made for (site.mjs mediaArt).
+ */
+function mediaRow(e, origin, kind, cat) {
   const abs = (u) => (u && u.startsWith('/') ? `${origin}${u}` : u ?? null);
   const main = (e.files ?? []).find((f) => f.role === (kind === 'music' ? 'audio' : 'video'));
-  const art = (e.files ?? []).find((f) => f.role === (kind === 'music' ? 'cover' : 'poster'));
   return {
     slug: e.slug, kind: e.kind, title: e.title, blurb: e.blurb ?? '', duration: e.duration ?? null,
-    page: `${origin}/${kind}/${e.slug}/`, [kind === 'music' ? 'audio' : 'video']: abs(main?.url), [kind === 'music' ? 'cover' : 'poster']: abs(art?.url),
+    page: `${origin}/${kind}/${e.slug}/`, [kind === 'music' ? 'audio' : 'video']: abs(main?.url), [kind === 'music' ? 'cover' : 'poster']: abs(mediaArt(e, kind, cat)),
     credits: e.credits ?? null, rights: e.rights ?? null, for: e.for ?? null,
   };
 }
 
+/**
+ * THE ARCADE KNOCK, ANSWERED AT THE ROOT. A game made with Homie's arcade controls (@homie-rocks/arcade, and the
+ * older builds of it that Homie's own games carry) asks its page's own origin for a Homie box with a GET on
+ * /__homie/call, and a score goes there as a POST. The game's frame is /<game>/__game/, so that absolute path lands
+ * on the site's ROOT, not under the game. `not-a-homie` (JSON, CORS-open, because the frame is an opaque origin) makes the knock stop for
+ * good and refuses a call in words; it answers 200, so no browser logs a failed load for it, and a studio needs no
+ * wrapper Worker of its own for this. A preflight (a POST's content-type) is answered too.
+ */
+const KNOCK_CORS = { 'access-control-allow-origin': '*', 'access-control-allow-methods': 'GET, POST', 'access-control-allow-headers': 'content-type', 'access-control-max-age': '86400' };
+function notAHomie(request) {
+  if (request.method === 'OPTIONS') return new Response(null, { status: 204, headers: { ...KNOCK_CORS, 'cache-control': 'no-store' } });
+  return json({ ok: false, error: 'not-a-homie', message: 'this is a studio site, not a Homie box; a game here plays on its own' }, 200, KNOCK_CORS);
+}
+
 /** 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, cat) {
   const asked = url.searchParams.get('room');
@@ -287,6 +306,7 @@ async function route(request, env, ctx) {
   const getCat = () => (catP ??= catalogue(env, url.origin));
 
   if (path.startsWith('/_studio/')) return ownerRoutes(request, env, url, { catalogueOf: getCat });
+  if (path === '/__homie' || path.startsWith('/__homie/')) return notAHomie(request);
   if (path === '/_homie/site.js') return new Response(SITE_JS, { headers: { 'content-type': 'text/javascript; charset=utf-8', 'cache-control': url.searchParams.get('v') === STUDIO_VERSION_TAG ? 'public, max-age=31536000, immutable' : 'public, max-age=300', 'x-content-type-options': 'nosniff' } });
   if (path === '/api/stats/beat' && request.method === 'POST') return mediaBeat(request, env, ctx, url);
   if (path === '/api/stats') {
@@ -304,7 +324,10 @@ async function route(request, env, ctx) {
   }
   if (path === '/.well-known/homie-studio.json') {
     const cat = await getCat();
-    const played = cat.studio?.stats?.share ? await playedThisWeek(env) : null;
+    const sharing = Boolean(cat.studio?.stats?.share);
+    const [played, byGame] = sharing ? await Promise.all([playedThisWeek(env), playedByGame(env)]) : [null, null];
+    // studio.json `"rooms": { "share": false }` keeps the rooms off the hub: a manifest that names no `rooms` shares none.
+    const shareRooms = cat.studio?.rooms?.share !== false;
     return json({
       v: 1,
       kind: 'homie-studio',
@@ -314,15 +337,21 @@ async function route(request, env, ctx) {
       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,
-      })),
-      songs: (cat.songs ?? []).map((e) => mediaRow(e, url.origin, 'music')),
-      videos: (cat.videos ?? []).map((e) => mediaRow(e, url.origin, 'videos')),
+      games: (cat.games ?? []).map((g) => {
+        // The card picture is the landing's hero still (what the landing leads with), else the game's cover.
+        const cover = gameCover(g);
+        return {
+          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: cover ? (cover.startsWith('/') ? `${url.origin}${cover}` : cover) : null,
+          // Shared only with `stats.share`: this game's own Play presses and rounds with people, this week.
+          ...(byGame ? { played: byGame[g.id] ?? { days: 7, plays: 0, rounds: 0 } } : {}),
+        };
+      }),
+      songs: (cat.songs ?? []).map((e) => mediaRow(e, url.origin, 'music', cat)),
+      videos: (cat.videos ?? []).map((e) => mediaRow(e, url.origin, 'videos', cat)),
       // The studio's posts, for the hub (the full text is in /posts/feed.json).
       posts: (cat.posts ?? []).slice(0, 20).map((p) => ({ slug: p.slug, title: p.title, date: p.date, summary: p.summary, page: `${url.origin}/posts/${p.slug}/`, image: p.image ? (p.image.startsWith('/') ? `${url.origin}${p.image}` : p.image) : null, links: p.links ?? {} })),
-      rooms: `${url.origin}/api/rooms`,
+      ...(shareRooms ? { rooms: `${url.origin}/api/rooms` } : {}),
       // Shared only when studio.json says `stats.share`: two numbers for the whole studio, for the hub.
       ...(played ? { played } : {}),
     }, 200, { 'access-control-allow-origin': '*' });
@@ -334,7 +363,9 @@ async function route(request, env, ctx) {
   if (path === '/api/rooms') {
     const cat = await getCat();
     const { rooms } = await roomsOf(env, cat.games ?? []);
-    return json({ ok: true, playing: rooms.reduce((n, r) => n + r.players, 0), rooms }, 200, { 'access-control-allow-origin': '*' });
+    // Short-lived and cacheable: the hub reads every studio's rooms at most every 45 s, and a room's count is a
+    // few seconds stale at worst. (The site's own pages ask with cache: 'no-store'.)
+    return json({ ok: true, playing: rooms.reduce((n, r) => n + r.players, 0), rooms }, 200, { 'access-control-allow-origin': '*', 'cache-control': 'public, max-age=15' });
   }
   if (path.startsWith('/media/')) {
     if (!env.MEDIA) return new Response('this studio keeps no media in R2 yet', { status: 404 });
@@ -473,10 +504,8 @@ async function route(request, env, ctx) {
       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': '*' });
-    }
+    // The same knock, relative to the game's own page: the same answer (see notAHomie).
+    if (sub === '__homie' || sub.startsWith('__homie/')) return notAHomie(request);
     if (sub === '__game' || sub === '__game/' || sub === '__game/index.html') return gameDocument(request, env, url, game, meta, cat);
     if (sub.startsWith('__game/')) return gameAsset(request, env, url, game, sub.slice('__game/'.length));
   }

package/worker/pages.mjs

@@ -31,16 +31,49 @@ export function badRoomPage(cat, g, raw, { screen = false } = {}) {
   });
 }
 
+/** Where the room button may sit: a corner, or the middle of the top edge. */
+export const SHARE_PLACES = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-right'];
+
+/**
+ * Where the room button sits on each device, from game.json `screen.share`, so it never covers the game's own
+ * HUD (a scoreboard in the top right, a fuel bar across a phone's top):
+ *
+ *   "share": "top-left"                                     every device (a place from SHARE_PLACES)
+ *   "share": { "at": "top-right", "y": 64 }                 moved 64 px in from its edge (x: from its side)
+ *   "share": { "desk": "bottom-left", "phone": { "at": "top-left", "y": 56 }, "sideways": "top-center" }
+ *   "share": { "at": "top-right", "label": false }          the button stays a small round icon (the room code is
+ *                                                           in its sheet), for a corner with little room
+ *
+ * `desk` is a computer, `phone` a phone held upright, `sideways` a phone turned sideways (else as `phone`). For a
+ * corner, `x` and `y` move the button in from its side and its edge (0 to 600 px); for top-center, `x` moves it
+ * right (or left, negative) and `y` down. Anything else is the default: the top right, as before.
+ */
+export function sharePlaces(value) {
+  const one = (v) => {
+    const o = typeof v === 'string' ? { at: v } : v && typeof v === 'object' && !Array.isArray(v) ? v : null;
+    if (!o || !SHARE_PLACES.includes(o.at)) return null;
+    const num = (n, lo, hi) => (Number.isFinite(Number(n)) ? Math.max(lo, Math.min(hi, Math.round(Number(n)))) : 0);
+    return { at: o.at, x: num(o.x, o.at === 'top-center' ? -600 : 0, 600), y: num(o.y, 0, 600), label: o.label !== false };
+  };
+  // A place for every device (a string, or an object with `at`), then any device's own over it.
+  const all = one(value) ?? { at: 'top-right', x: 0, y: 0, label: true };
+  const per = value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+  const desk = one(per.desk) ?? all;
+  const phone = one(per.phone) ?? all;
+  return { desk, phone, sideways: one(per.sideways) ?? phone };
+}
+
 /**
  * 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.
+ * the edge (game.json `screen.share`, per device: sharePlaces) 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);
+  const places = sharePlaces(g.screen?.share);
   // 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 = `:root{--hot:${/^#[0-9a-f]{3,8}$/i.test(accent) ? accent : '#ffcf5a'}}
@@ -59,17 +92,22 @@ iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; d
 .join .qr svg { width: 100%; height: 100%; display: block; }
 .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; }
+.room { --dx: 0px; --dy: 0px; 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: calc(max(8px, env(safe-area-inset-top)) + var(--dy)); right: calc(max(8px, env(safe-area-inset-right)) + var(--dx)); align-items: flex-end; }
+.room.at-top-left { top: calc(max(8px, env(safe-area-inset-top)) + var(--dy)); left: calc(max(8px, env(safe-area-inset-left)) + var(--dx)); align-items: flex-start; }
+.room.at-top-center { top: calc(max(8px, env(safe-area-inset-top)) + var(--dy)); left: calc(50% + var(--dx)); transform: translateX(-50%); align-items: center; }
+.room.at-bottom-right { bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--dy)); right: calc(max(8px, env(safe-area-inset-right)) + var(--dx)); align-items: flex-end; flex-direction: column-reverse; }
+.room.at-bottom-left { bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--dy)); left: calc(max(8px, env(safe-area-inset-left)) + var(--dx)); align-items: flex-start; flex-direction: column-reverse; }
+.chip.chip-right { left: auto; right: max(10px, env(safe-area-inset-right)); }
 .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; }
+/* game.json screen.share "label": false: always the small round icon, even while it is open (the code is in the sheet). */
+.pill.icon, .pill.icon:hover, .pill.icon:focus-visible, .pill.icon[aria-expanded="true"] { width: 34px; padding: 0; justify-content: center; }
+.pill.icon span, .pill.icon:hover span, .pill.icon:focus-visible span, .pill.icon[aria-expanded="true"] span { display: none; }
 .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; }
@@ -84,13 +122,14 @@ iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; d
 .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 } : {}) };
+  // The room button's place on each device (sharePlaces); the shell moves it to this browser's once it knows the device.
+  const boot = { game: g.id, name: g.name, screen: Boolean(screen), share: places, ...(room ? { room } : {}) };
   // game.json "screen": { "join": "top-left" | "top-right" | "bottom-left" | "bottom-right" } keeps the card off the game's own HUD.
   const joinCorner = corner('join', 'bottom-right');
-  const shareCorner = corner('share', 'top-right');
+  const first = places.desk;
   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>
+  const share = screen ? '' : `<div class="room at-${first.at}" style="--dx:${first.x}px;--dy:${first.y}px" data-room-ui>
+  <button class="pill${first.label ? '' : ' icon'}" 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">
@@ -163,6 +202,23 @@ const SHELL_JS = String.raw`(function () {
   var sheet = ui && ui.querySelector('[data-share-sheet]');
   var toast = document.querySelector('[data-toast]');
   var dimTimer = null;
+  // Where the button sits on THIS device (game.json screen.share, per computer, phone and phone turned sideways: a
+  // corner or the top's middle, moved in by x / y), so it never sits on the game's own scoreboard or fuel bar.
+  function place() {
+    if (!ui || !boot.share) return;
+    var key = device === 'phone' ? (innerWidth > innerHeight ? 'sideways' : 'phone') : 'desk';
+    var p = boot.share[key] || boot.share.desk;
+    if (!p) return;
+    ui.className = 'room at-' + p.at;
+    ui.style.setProperty('--dx', (p.x || 0) + 'px');
+    ui.style.setProperty('--dy', (p.y || 0) + 'px');
+    if (toggle) { if (p.label === false) toggle.classList.add('icon'); else toggle.classList.remove('icon'); }
+    // The status chip lives at the bottom left: a button there sends it to the bottom right.
+    if (p.at === 'bottom-left') chip.classList.add('chip-right'); else chip.classList.remove('chip-right');
+    state.share = { device: key, at: p.at, x: p.x || 0, y: p.y || 0, label: p.label !== false };
+  }
+  place();
+  addEventListener('resize', place);
   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); }

package/worker/site.mjs

@@ -69,7 +69,7 @@ img,video{display:block;max-width:100%}
 .ico{width:18px;height:18px;flex:none}
 .skip{position:absolute;left:-9999px;top:12px;z-index:40;padding:10px 14px;border-radius:10px;background:var(--fg);color:var(--bg)}
 .skip:focus{left:12px}
-.kicker{margin:0 0 12px;font:600 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--glow)}
+.kicker{margin:0 0 12px;font:600 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--glow-ink)}
 :focus-visible{outline:3px solid var(--fg);outline-offset:3px}
 @media (max-width:559px){.k-opt{display:none}}
 
@@ -255,7 +255,7 @@ img,video{display:block;max-width:100%}
 .credits{display:grid;gap:18px;margin-top:30px}
 @media (min-width:760px){.credits{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
 .credit{overflow-wrap:anywhere;padding:20px 22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);color:var(--soft);font-size:15px}
-.credit h3{margin:0 0 10px;font:600 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
+.credit h3{margin:0 0 10px;font:600 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--glow-ink)}
 .credit p{margin:0 0 8px}
 .credit ul{margin:0;padding-left:18px}
 .credit li{margin:4px 0}
@@ -310,7 +310,7 @@ img,video{display:block;max-width:100%}
 .plist{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
 .pitem>a{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:20px 22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
 .pitem>a:hover{border-color:color-mix(in srgb,var(--hot) 45%,transparent);transform:translateY(-2px)}
-.pitem time,.post-meta{font:600 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
+.pitem time,.post-meta{font:600 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--glow-ink)}
 .pitem h3{margin:6px 0 6px;font:800 clamp(22px,2.6vw,30px)/1.1 var(--display);letter-spacing:-.02em}
 .pitem p{margin:0;color:var(--soft)}
 .pitem img{width:168px;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
@@ -444,21 +444,45 @@ if(src){
 /* ------------------------------------------------------------------ the shell */
 
 const TOKEN_DEFAULTS = { bg: '#0b0c12', fg: '#f1f3f9', accent: '#ffcf5a', glow: '#7dffb0' };
+/**
+ * A game landing's own scheme (game.json `landing.scheme`), for a game whose picture is the other way round from
+ * the studio's look: a white or cream arena (a light hero) under a dark studio's tint turns grey, so a light
+ * landing draws the whole page light, its hero tinted and shaded with the light background and its words dark.
+ * `landing.theme` colours still win over these.
+ */
+export const SCHEME_TOKENS = {
+  light: { bg: '#f7f6f1', fg: '#15161d', panel: 'color-mix(in srgb,var(--fg) 5%,var(--bg))' },
+  dark: { bg: '#0b0c12', fg: '#f1f3f9', panel: 'color-mix(in srgb,var(--fg) 5%,var(--bg))' },
+};
 
-/** The studio's tokens as CSS custom properties (site/theme.json, checked at build), plus its fonts. */
+/**
+ * The studio's tokens as CSS custom properties (site/theme.json, checked at build), plus its fonts. `over` is a
+ * page's own (a game landing's `landing.theme`, and its `scheme`). `--glow-ink` is the glow as small text: the
+ * glow itself on a dark page, and a darker mix of it on a light one (a pale glow on white cannot be read).
+ */
 function tokensCss(theme = {}, over = null) {
   const t = { ...TOKEN_DEFAULTS, ...theme, ...(over ?? {}) };
+  const scheme = (over?.scheme ?? theme.scheme) === 'light' ? 'light' : 'dark';
   const fonts = (theme.fonts ?? []).map((f) => `@font-face{font-family:"${f.family}";src:url("${f.src}");font-weight:${f.weight};font-style:${f.style};font-display:swap}`).join('');
   const display = theme.display ?? 'ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif';
   const text = theme.text ?? 'ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif';
   const mono = theme.mono ?? 'ui-monospace,"SF Mono",Menlo,Consolas,monospace';
   return `${fonts}:root{--bg:${t.bg};--fg:${t.fg};--hot:${t.accent};--glow:${t.glow};--hot-ink:${t.accentInk ?? t.bg};
+--glow-ink:${scheme === 'light' ? 'color-mix(in srgb,var(--glow) 45%,var(--fg))' : 'var(--glow)'};
 --soft:color-mix(in srgb,var(--fg) 80%,transparent);--dim:color-mix(in srgb,var(--fg) 62%,transparent);--line:color-mix(in srgb,var(--fg) 14%,transparent);
 --panel:${t.panel ?? 'color-mix(in srgb,var(--fg) 5%,var(--bg))'};--display:${display};--text:${text};--mono:${mono};--r:${Number.isFinite(t.radius) ? t.radius : 18}px;
---gutter:clamp(18px,5vw,72px);--top-h:72px;color-scheme:${theme.scheme === 'light' ? 'light' : 'dark'}${theme.uppercase === false ? ';--mark-case:none;--mark-track:.02em' : ''}}
+--gutter:clamp(18px,5vw,72px);--top-h:72px;color-scheme:${scheme}${theme.uppercase === false ? ';--mark-case:none;--mark-track:.02em' : ''}}
 @media (max-width:719px){:root{--top-h:112px}}`;
 }
 
+/** A landing's `over` tokens: its scheme's (light or dark, when it differs from the studio's), then its own colours. */
+function landingTokens(cat, L) {
+  const studio = cat.studio?.theme?.scheme === 'light' ? 'light' : 'dark';
+  const want = L.scheme === 'light' || L.scheme === 'dark' ? L.scheme : null;
+  if (!want || want === studio) return L.theme ?? null;
+  return { ...SCHEME_TOKENS[want], ...(L.theme ?? {}), scheme: want };
+}
+
 const studioName = (cat) => cat.studio?.name ?? 'Studio';
 
 /** Which sections this studio has: a section with nothing in it has no tab (and its page answers 404). */
@@ -533,7 +557,7 @@ ${icon}${feeds}${head}
 <style>${tokensCss(theme, over)}${BASE_CSS}${cat.site?.css ?? ''}</style>
 ${partial(cat, 'head') ?? ''}
 </head>
-<body class="${hero ? 'has-hero' : ''}" data-page="${esc(page)}">
+<body class="${hero ? 'has-hero' : ''}" data-page="${esc(page)}" data-scheme="${(over?.scheme ?? theme.scheme) === 'light' ? 'light' : 'dark'}">
 <a class="skip" href="#main">Skip to content</a>
 ${header(cat, active)}
 <main id="main">
@@ -566,7 +590,13 @@ export function customPage(cat, html, { active = null } = {}) {
 const minutes = (s) => (Number.isFinite(s) && s > 0 ? (s % 60 ? `${s}\u00a0s rounds` : `${s / 60}\u2011minute rounds`) : null);
 const playersText = (g) => (g.players?.max ? (g.players.max === 1 ? 'one player' : `1–${g.players.max} players`) : 'multiplayer');
 const titleClass = (name) => { const n = String(name ?? '').length; return n > 22 ? 't-xlong' : n > 12 ? 't-long' : ''; };
-const coverOf = (g) => g.landing?.cover ?? (g.cover ? `/games/${g.id}/${g.cover}` : null);
+/**
+ * A game's picture on every card (Home, Games, Rooms, a post), a room's row and the directory's manifest: the
+ * landing's hero still (hero/wide.jpg or game.json landing.hero.image, the picture the landing leads with), else
+ * a trailer's poster, else the game's cover. An old game.json cover never outranks the landing's own still.
+ */
+export const gameCover = (g) => g.landing?.hero?.wideImage ?? g.landing?.hero?.tallImage ?? g.landing?.cover ?? (g.cover ? `/games/${g.id}/${g.cover}` : null);
+const coverOf = gameCover;
 
 /** Hero media: the game's footage (wide and tall, AV1 first), else its art with slow motion, else the studio's colours. */
 function heroMedia(h = {}, { alt = '', word = '' } = {}) {
@@ -626,9 +656,22 @@ const KIND_WORD = { song: 'Song', score: 'Score', loop: 'Loop', stem: 'Stem', sf
 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;
 
-function mediaCard(e, kind) {
-  const art = fileOf(e, kind === 'music' ? 'cover' : 'poster');
-  return `<a class="media-card reveal" href="/${kind}/${esc(e.slug)}/"><span class="art">${art ? `<img src="${esc(art.url)}" alt="" loading="lazy" decoding="async">` : ''}<span class="big">${PLAY_ICON}</span></span><span class="cap"><b>${esc(e.title)}</b><span>${esc(KIND_WORD[e.kind] ?? (kind === 'music' ? 'Music' : 'Video'))}${e.duration ? ` · ${esc(fmtTime(e.duration))}` : ''}</span></span></a>`;
+/**
+ * A song's cover (a video's poster), wherever it is drawn (its page, a card, the directory's manifest): its own
+ * file, else the manifest's default (music/manifest.json `cover`, videos/manifest.json `poster`, which the build
+ * gives every entry without one), else the landing still of the game it was made for (`for.game`), else the
+ * studio's share picture (site/theme.json `social`). Null when there is none of these.
+ */
+export function mediaArt(e, kind, cat = null) {
+  const own = fileOf(e, kind === 'music' ? 'cover' : 'poster');
+  if (own?.url) return own.url;
+  const game = e.for?.game ? (cat?.games ?? []).find((g) => g.id === e.for.game) : null;
+  return (game ? gameCover(game) : null) ?? cat?.studio?.theme?.social ?? null;
+}
+
+function mediaCard(e, kind, cat = null) {
+  const art = mediaArt(e, kind, cat);
+  return `<a class="media-card reveal" href="/${kind}/${esc(e.slug)}/"><span class="art">${art ? `<img src="${esc(art)}" alt="" loading="lazy" decoding="async">` : ''}<span class="big">${PLAY_ICON}</span></span><span class="cap"><b>${esc(e.title)}</b><span>${esc(KIND_WORD[e.kind] ?? (kind === 'music' ? 'Music' : 'Video'))}${e.duration ? ` · ${esc(fmtTime(e.duration))}` : ''}</span></span></a>`;
 }
 
 /* ------------------------------------------------------------------ Home */
@@ -663,7 +706,7 @@ export function homePage(cat, { origin = '', rooms = [], live = {} } = {}) {
 </section>`;
   } else {
     const lead = videos[0] ?? songs[0] ?? null;
-    const art = lead ? fileOf(lead, videos[0] ? 'poster' : 'cover')?.url : null;
+    const art = lead ? mediaArt(lead, videos[0] ? 'videos' : 'music', cat) : null;
     hero = `<section class="hero home" aria-labelledby="hero-title">
   ${heroMedia(art ? { wideImage: art } : {}, { word: name })}
   <div class="hero-copy">
@@ -688,7 +731,7 @@ export function homePage(cat, { origin = '', rooms = [], live = {} } = {}) {
 </div></section>` : '';
   const mediaBand = (list, kind, title) => (list.length ? `<section class="band" aria-labelledby="${kind}-title"><div class="band-in">
   <div class="head-row reveal"><div><p class="kicker">${kind === 'music' ? 'Music' : 'Videos'}</p><h2 id="${kind}-title">${esc(title)}</h2></div><a class="more" href="/${kind}/">All ${kind === 'music' ? 'music' : 'videos'} ${icon('arrow')}</a></div>
-  <div class="cards">${list.slice(0, 3).map((e) => mediaCard(e, kind)).join('')}</div>
+  <div class="cards">${list.slice(0, 3).map((e) => mediaCard(e, kind, cat)).join('')}</div>
 </div></section>` : '');
   const extra = partial(cat, 'home');
   return layout(cat, {
@@ -751,7 +794,7 @@ export function postPage(cat, p, { origin = '' } = {}) {
   const video = p.links?.video ? (cat.videos ?? []).find((x) => x.slug === p.links.video) : null;
   const others = (cat.posts ?? []).filter((x) => x.slug !== p.slug).slice(0, 2);
   const extra = partial(cat, 'post', { 'post.title': p.title, 'post.slug': p.slug });
-  const linked = [g ? gameCard(g) : '', video ? mediaCard(video, 'videos') : '', song ? mediaCard(song, 'music') : ''].filter(Boolean).join('');
+  const linked = [g ? gameCard(g) : '', video ? mediaCard(video, 'videos', cat) : '', song ? mediaCard(song, 'music', cat) : ''].filter(Boolean).join('');
   return layout(cat, {
     title: `${p.title} · ${name}`, description: p.summary, origin, path: `/posts/${p.slug}/`, image: p.image ?? (g ? coverOf(g) : null), type: 'article', page: 'post', active: 'posts',
     head: `<meta property="article:published_time" content="${esc(p.date)}">${p.updated ? `<meta property="article:modified_time" content="${esc(p.updated)}">` : ''}`,
@@ -898,7 +941,7 @@ export function gameLanding(cat, g, { origin = '', rooms = [], playing = 0, week
 </div></section>`;
 
   const facts = ['free, in the browser', 'bots fill empty seats', 'join any time: take a bot’s place', 'rounds restart on their own', ...(tvOn ? ['phones as controllers on a TV'] : [])];
-  const side = trailer ? mediaCard(trailer, 'videos') : song ? mediaCard(song, 'music') : (L.cover ? `<figure class="media-card reveal" style="margin:0"><span class="art"><img src="${esc(L.cover)}" alt="${esc(g.name)}, a moment of play" loading="lazy"></span><figcaption class="cap"><b>${esc(g.name)}</b><span>${esc(playersText(g))}${minutes(g.roundSeconds) ? ` · ${esc(minutes(g.roundSeconds))}` : ''}</span></figcaption></figure>` : '');
+  const side = trailer ? mediaCard(trailer, 'videos', cat) : song ? mediaCard(song, 'music', cat) : (L.cover ? `<figure class="media-card reveal" style="margin:0"><span class="art"><img src="${esc(L.cover)}" alt="${esc(g.name)}, a moment of play" loading="lazy"></span><figcaption class="cap"><b>${esc(g.name)}</b><span>${esc(playersText(g))}${minutes(g.roundSeconds) ? ` · ${esc(minutes(g.roundSeconds))}` : ''}</span></figcaption></figure>` : '');
   const howBand = `<section class="band hotband" aria-labelledby="how-title"><div class="band-in split">
   <div class="reveal">
     <p class="kicker">How to play</p>
@@ -907,7 +950,7 @@ export function gameLanding(cat, g, { origin = '', rooms = [], playing = 0, week
     ${(L.how ?? []).length ? `<ul class="howto">${L.how.map((s) => `<li>${esc(s)}</li>`).join('')}</ul>` : ''}
     <ul class="facts">${facts.map((x) => `<li>${esc(x)}</li>`).join('')}</ul>
   </div>
-  ${side ? `<div>${side}${trailer && song ? `<div style="margin-top:14px">${mediaCard(song, 'music')}</div>` : ''}</div>` : ''}
+  ${side ? `<div>${side}${trailer && song ? `<div style="margin-top:14px">${mediaCard(song, 'music', cat)}</div>` : ''}</div>` : ''}
 </div></section>`;
 
   const C = L.credits ?? {};
@@ -944,7 +987,7 @@ export function gameLanding(cat, g, { origin = '', rooms = [], playing = 0, week
   return layout(cat, {
     title: `${g.name} — play free in your browser`,
     description: `${g.name}: ${L.pitch ?? g.blurb ?? ''} Free in your browser, nothing to download; a TV or laptop browser can be the big screen, with phones as controllers.`.replace(/\s+/g, ' ').trim(),
-    origin, path: `/${g.id}/`, image: h.wideImage ?? L.cover ?? null, page: 'landing', hero: true, active: 'games', over: L.theme ?? null,
+    origin, path: `/${g.id}/`, image: h.wideImage ?? L.cover ?? null, page: 'landing', hero: true, active: 'games', over: landingTokens(cat, L),
     head: `${h.tallImage || h.wideImage ? `<link rel="preload" as="image" href="${esc(h.tallImage ?? h.wideImage)}"${h.tallImage && h.wideImage ? ' media="(max-aspect-ratio: 3/4)"' : ''}>${h.tallImage && h.wideImage ? `<link rel="preload" as="image" href="${esc(h.wideImage)}" media="(min-aspect-ratio: 3/4)">` : ''}` : ''}<script type="application/ld+json">${jsonScript(ld)}</script>`,
     main: `${hero}${ways}${liveBand}${howBand}${band(partial(cat, 'game', vars))}${band(partial(cat, `game-${g.id}`, vars))}${creditsBand}${makeBand}`,
   });
@@ -986,14 +1029,15 @@ export function mediaIndexPage(cat, kind, { origin = '' } = {}) {
   return layout(cat, {
     title: `${title} · ${name}`, description: `${title} from ${name}.`, origin, path: `/${kind}/`, page: kind, active: kind,
     main: `${pageHead(name, title, kind === 'music' ? 'Songs, scores and loops from the studio.' : 'Trailers, music videos and clips from the studio.')}
-<div class="wrap"><div class="cards">${list.map((e) => mediaCard(e, kind)).join('')}</div></div>`,
+<div class="wrap"><div class="cards">${list.map((e) => mediaCard(e, kind, cat)).join('')}</div></div>`,
   });
 }
 
 export function songPage(cat, e, origin = '') {
   const name = studioName(cat);
   const audio = fileOf(e, 'audio');
-  const cover = fileOf(e, 'cover');
+  const coverUrl = mediaArt(e, 'music', cat);
+  const cover = coverUrl ? { url: coverUrl } : null;
   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);
@@ -1023,7 +1067,8 @@ export function videoPage(cat, e, origin = '') {
   const name = studioName(cat);
   const video = fileOf(e, 'video');
   const vertical = fileOf(e, 'vertical');
-  const poster = fileOf(e, 'poster');
+  const posterUrl = mediaArt(e, 'videos', cat);
+  const poster = posterUrl ? { url: posterUrl } : null;
   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);

package/worker/stats.mjs

@@ -304,6 +304,23 @@ export async function playedThisWeek(env, game = null) {
   } catch { return null; }
 }
 
+/**
+ * "Played this week" for every game at once (one query, grouped by game), for the manifest's `games[].played`
+ * when the studio shares its numbers: `{ [game]: { days: 7, plays, rounds } }`, or null when the counters cannot be
+ * read (before migration 0002, or no D1). A game nobody played this week is absent: its numbers are 0.
+ */
+export async function playedByGame(env) {
+  if (!env?.DB) return null;
+  const to = today();
+  try {
+    const { results } = await env.DB.prepare(`SELECT subject, SUM(CASE WHEN metric = 'play' THEN n ELSE 0 END) AS plays, SUM(CASE WHEN metric = 'round' AND source = 'people' THEN n ELSE 0 END) AS rounds FROM stats_daily WHERE day >= ?1 AND day <= ?2 AND metric IN ('play', 'round') GROUP BY subject`)
+      .bind(dayOffset(to, -6), to).all();
+    const out = {};
+    for (const row of results ?? []) if (SLUG.test(String(row.subject ?? ''))) out[row.subject] = { days: 7, plays: Number(row.plays) || 0, rounds: Number(row.rounds) || 0 };
+    return out;
+  } catch { return null; }
+}
+
 /** Parse ?game= / ?song= / ?video= into one narrowing, or null. */
 export function onlyOf(params) {
   for (const kind of ['game', 'song', 'video']) {

package/worker/version.mjs

@@ -1,2 +1,2 @@
 /** The @homie-rocks/studio version this Worker code is (package.json's; a test keeps them equal). Cache-busts /_homie/site.js. */
-export const STUDIO_VERSION_TAG = '0.7.0';
+export const STUDIO_VERSION_TAG = '0.9.0';