Screenplays: authored scenes the engine performs and the reel films

?fpv&script=<name> plays a screenplay — a seeded deal, cards slipped
into hands as props, then a command list run through applyCommand, so
every event on screen is a legal move under the real rules. Ten scenes
ship in the catalog: wormhole heists, a fireball threaded through a
warp, an ambush that watches its corridor through a mouth, the leap
over a conjured pit, and the wall between two homes coming down.

The server grows a public gallery to hang them in: /clips lists the
catalog, /clips/<name> pages each scene in two takes — through the
wizard's eyes and from the board — with og:video unfurls and
Range-served mp4s (Safari refuses video without it). Files live in
the clip vault beside the rooms, shipped by deploy/clips-publish.sh;
the name gate is the security.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015RCWSTnb1KYTPyL4GmhGnF

packages/server/src/index.ts

@@ -33,7 +33,7 @@
 import * as Sentry from "@sentry/node";
 import { createServer } from "node:http";
 import { randomBytes } from "node:crypto";
-import { readFileSync, existsSync, realpathSync } from "node:fs";
+import { readFileSync, existsSync, realpathSync, statSync, createReadStream } from "node:fs";
 import { extname, join, normalize, sep } from "node:path";
 import { WebSocketServer, WebSocket } from "ws";
 import type { Command, PlayerId } from "@wizwar/engine";
@@ -65,7 +65,8 @@ import {
   abandonRoom,
 } from "./rooms";
 import { engagementStats, recordHotseat } from "./stats";
-import { appendFeedback, readFeedback } from "./store";
+import { appendFeedback, readFeedback, readClips, clipAssetPath } from "./store";
+import { clipsIndexHtml, clipPageHtml } from "./clips";
 import { getShare, loadShares, mintShare } from "./shares";
 import { renderSharePng } from "./ogimage";
 import { BOT_LINES, type BanterTrigger } from "./banter";
@@ -302,6 +303,60 @@ const httpServer = createServer((req, res) => {
       res.end(shareHtml(watch[1]!, data, hostname, proto));
       return;
     }
+    // The clip gallery: standalone pages and their media. Video ships
+    // with Range support — Safari refuses an mp4 whose server can't
+    // serve bytes 0-1 on demand.
+    if (url === "/clips" || url === "/clips/") {
+      const proto = String(req.headers["x-forwarded-proto"] ?? "http").split(",")[0]!.trim();
+      const base = safeBase(String(req.headers.host ?? `localhost:${port}`), proto);
+      res.writeHead(200, { "content-type": "text/html", "cache-control": "no-cache" });
+      res.end(clipsIndexHtml(readClips(), base));
+      return;
+    }
+    const clipAsset = url.match(/^\/clips\/([a-z0-9-]{1,70}\.(?:mp4|jpg))$/);
+    if (clipAsset) {
+      const path = clipAssetPath(clipAsset[1]!);
+      if (!path) { res.writeHead(404).end("no such clip"); return; }
+      const size = statSync(path).size;
+      const type = path.endsWith(".mp4") ? "video/mp4" : "image/jpeg";
+      const range = /^bytes=(\d*)-(\d*)$/.exec(String(req.headers.range ?? ""));
+      const head: Record<string, string> = {
+        "content-type": type,
+        "accept-ranges": "bytes",
+        "cache-control": "public, max-age=3600",
+      };
+      if (range && (range[1] || range[2])) {
+        const start = range[1] ? Number(range[1]) : Math.max(0, size - Number(range[2]));
+        const end = range[1] && range[2] ? Math.min(Number(range[2]), size - 1) : size - 1;
+        if (start > end || start >= size) {
+          res.writeHead(416, { "content-range": `bytes */${size}` }).end();
+          return;
+        }
+        res.writeHead(206, { ...head,
+          "content-range": `bytes ${start}-${end}/${size}`,
+          "content-length": String(end - start + 1) });
+        if (req.method === "HEAD") { res.end(); return; }
+        createReadStream(path, { start, end }).pipe(res);
+        return;
+      }
+      res.writeHead(200, { ...head, "content-length": String(size) });
+      if (req.method === "HEAD") { res.end(); return; }
+      createReadStream(path).pipe(res);
+      return;
+    }
+    const clipPage = url.match(/^\/clips\/([a-z0-9-]{1,60})$/);
+    if (clipPage) {
+      const clip = readClips().find((c) => c.name === clipPage[1]);
+      if (clip) {
+        const proto = String(req.headers["x-forwarded-proto"] ?? "http").split(",")[0]!.trim();
+        const base = safeBase(String(req.headers.host ?? `localhost:${port}`), proto);
+        res.writeHead(200, { "content-type": "text/html", "cache-control": "no-cache" });
+        res.end(clipPageHtml(clip, base));
+        return;
+      }
+      res.writeHead(404, { "content-type": "text/html" }).end("no such clip — see /clips");
+      return;
+    }
     // Room invitations: a living room gets its recruiting card; a dead
     // code falls through to the app, which reports it in the lobby.
     const invite = url.match(/^\/join\/([A-Za-z0-9]{4})$/);