Credibility pass: the session seams sanded from the clips-and-camera batch

Two blind reviews of everything since the last pass (afa0e17), every
finding checked against the code, no behavior changed: all thirty
scene goldens match without a re-bless and the engine suite is
untouched.

Reel and renderer: the camera's look-down rule is stated once, beside
LOOK_DOWN, instead of twice in the effect; the empty aim branch that
stood where a cutaway used to be is gone (the guard it implied is now
explicit); the pit events and the punch are handled by their own
types, not through "in" casts; smoothstep is one export used by every
tween instead of eleven inline copies; the two floor rings share one
painter; project() takes a Billboard instead of a third hand-typed
copy of its fields; the strides-left figure and the web rim no longer
shadow the reel's steps and the pane's fx; the die card's verdict is
built from events, not by matching an emoji; the workshop asks for the
hover cue by name instead of passing an empty click handler.

Server and engine: one requestBase() for the origin, one slug pattern
in store.ts gating both the clip page and its files, one 404 for both;
LOOPBACK sits above its only caller; doCounteract names what a counter
is played against once; fearCells sits beside its own docblock rather
than between sightedCellsFor and its.

Deploy: chromiumExe, the private server, ffmpeg, and the reel rewind
live in deploy/lib/harness.mjs, shared by the gate, the recorder, and
the card cutter instead of pasted three times; the recorder drops its
duplicate frame counters and names its poster settle; the card uses the
gallery's exact gold; the one-time Sentry URL bootstrap leaves
deploy.sh; the backup comment states the rule rather than the incident.

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

packages/engine/src/game.ts

@@ -5743,6 +5743,8 @@ function doCounteract(
 ): CommandResult {
   const state = clone(prev);
   const stack = state.stack!;
+  /** What the counter is played against, as the chronicle names it. */
+  const against = stack.attackCard?.cardId ?? stack.sourceName ?? "punch";
   const player = state.players.find((p) => p.id === playerId)!;
   const card = player.hand.find((c) => c.instanceId === instanceId);
   if (!card) return err("card not in hand");
@@ -5779,7 +5781,7 @@ function doCounteract(
       }
       player.hand.push(attackCard);
       const events: GameEvent[] = [
-        { type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against: stack.attackCard?.cardId ?? stack.sourceName ?? "punch" },
+        { type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against },
         { type: "attackAbsorbedIntoHand", player: playerId, attackCard },
         { type: "attackResolved", attacker: stack.attackerId, defender: stack.defenderId, attackCardId: attackCard.cardId, damageDealt: 0, reflectedDamage: 0, fullyStopped: true, redirected: false },
       ];
@@ -5809,7 +5811,7 @@ function doCounteract(
       return {
         ok: true,
         state,
-        events: [{ type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against: stack.attackCard?.cardId ?? stack.sourceName ?? "punch" }],
+        events: [{ type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against }],
       };
     }
 
@@ -5821,7 +5823,7 @@ function doCounteract(
       takeFromHand(player, instanceId);
       state.discard.push(card);
       const events: GameEvent[] = [
-        { type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against: stack.attackCard?.cardId ?? stack.sourceName ?? "punch" },
+        { type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against },
       ];
       attachSustained(state, events, "invisible", playerId, playerId, duration);
       stack.counters.push({ player: playerId, card, nullified: false });
@@ -5838,7 +5840,7 @@ function doCounteract(
       takeFromHand(player, instanceId);
       state.discard.push(card);
       const events: GameEvent[] = [
-        { type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against: stack.attackCard?.cardId ?? stack.sourceName ?? "punch" },
+        { type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against },
       ];
       attachSustained(state, events, "empathy", playerId, playerId, duration);
       stack.counters.push({ player: playerId, card, nullified: false });
@@ -5877,7 +5879,7 @@ function doCounteract(
       return {
         ok: true,
         state,
-        events: [{ type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against: stack.attackCard?.cardId ?? stack.sourceName ?? "punch" }],
+        events: [{ type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against }],
       };
     }
 
@@ -5897,7 +5899,7 @@ function doCounteract(
     return {
       ok: true,
       state,
-      events: [{ type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against: stack.attackCard?.cardId ?? stack.sourceName ?? "punch" }],
+      events: [{ type: "counteractionPlayed", player: playerId, card, cardId: card.cardId, against }],
     };
   }
 

packages/engine/src/view.ts

@@ -191,12 +191,6 @@ export function viewFor(state: GameState, playerId: PlayerId): GameView {
   };
 }
 
-/**
- * Every cell the viewing player can see from where they stand, by the same
- * line-of-sight rules the engine enforces — computed from the VIEW, so it
- * reflects what this player knows (illusion walls they believe in block it).
- * The basis for the client's "dim the ineligible squares" targeting aid.
- */
 /** Every square inside a living FEAR-bearer's aura — dreadDistance walks
  * through warps, the engine's own yardstick, so the painted aura and the
  * movement refusal can never disagree. */
@@ -213,6 +207,12 @@ export function fearCells(view: GameView): Set<string> {
   return out;
 }
 
+/**
+ * Every cell the viewing player can see from where they stand, by the same
+ * line-of-sight rules the engine enforces — computed from the VIEW, so it
+ * reflects what this player knows (illusion walls they believe in block it).
+ * The basis for the client's "dim the ineligible squares" targeting aid.
+ */
 export function sightedCellsFor(view: GameView): Set<string> {
   const out = new Set<string>();
   const me = view.players.find((p) => p.id === view.you);

packages/server/src/clips.ts

@@ -17,6 +17,7 @@ const PAGE_CSS = `
   .mast a { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.18em;
             font-size: 0.95rem; color: #e9e1cb; text-decoration: none; }
   .mast .crumb { color: #8d8672; font-size: 0.85rem; letter-spacing: 0.06em; }
+  .mast .crumb a { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
   .mast .deal { margin-left: auto; font-size: 0.8rem; letter-spacing: 0.12em; color: #e0b34a; }
   h1 { font-family: "Oswald", sans-serif; font-weight: 500; font-size: 1.7rem; letter-spacing: 0.06em;
        text-transform: uppercase; margin: 0 0 0.3rem; color: #e9e1cb; }
@@ -137,7 +138,7 @@ export function clipPageHtml(clip: ClipMeta, base: string): string {
     `<meta name="twitter:card" content="summary_large_image"/>`,
   ];
   const body = `
-    <nav class="mast"><a href="/">Wiz-War</a><span class="crumb"><a href="/clips" style="font:inherit;letter-spacing:inherit;text-transform:none;color:inherit">clips</a> / ${esc(clip.title)}</span><a class="deal" href="/">deal yourself in →</a></nav>
+    <nav class="mast"><a href="/">Wiz-War</a><span class="crumb"><a href="/clips">clips</a> / ${esc(clip.title)}</span><a class="deal" href="/">deal yourself in →</a></nav>
     <h1><a href="/clips">${esc(clip.title)}</a></h1>
     <p class="sub">${esc(clip.blurb)}</p>
     <button class="share" type="button" data-title="${esc(clip.title)}" data-text="${esc(clip.blurb)}">Share this clip</button>

packages/server/src/index.ts

@@ -31,7 +31,7 @@
 //     {type:"error", message}
 
 import * as Sentry from "@sentry/node";
-import { createServer } from "node:http";
+import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
 import { randomBytes } from "node:crypto";
 import { readFileSync, existsSync, realpathSync, statSync, createReadStream } from "node:fs";
 import { extname, join, normalize, sep } from "node:path";
@@ -65,7 +65,7 @@ import {
   abandonRoom,
 } from "./rooms";
 import { engagementStats, recordHotseat } from "./stats";
-import { appendFeedback, readFeedback, readClips, clipAssetPath } from "./store";
+import { appendFeedback, readFeedback, readClips, clipAssetPath, CLIP_SLUG } from "./store";
 import { clipsIndexHtml, clipPageHtml } from "./clips";
 import { SlidingLimit, clientAddress } from "./ratelimit";
 import { getShare, loadShares, mintShare } from "./shares";
@@ -184,6 +184,15 @@ function ogPage(metas: string[]): string {
 
 /** Host and proto arrive from request headers — attacker-writable text
  * that must never reach an HTML attribute raw. */
+const noSuchClip = (res: ServerResponse) =>
+  res.writeHead(404, { "content-type": "text/plain" }).end("no such clip — see /clips");
+
+/** The absolute origin a request came in on, as the proxy saw it. */
+function requestBase(req: IncomingMessage): string {
+  const proto = String(req.headers["x-forwarded-proto"] ?? "http").split(",")[0]!.trim();
+  return safeBase(String(req.headers.host ?? `localhost:${port}`), proto);
+}
+
 function safeBase(rawHost: string, rawProto: string): string {
   const proto = /^https?$/.test(rawProto) ? rawProto : "https";
   return `${proto}://${escapeHtml(rawHost)}`;
@@ -312,16 +321,15 @@ const httpServer = createServer((req, res) => {
     // 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);
+      const base = requestBase(req);
       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))$/);
+    const clipAsset = url.match(/^\/clips\/([^/]+\.(?:mp4|jpg))$/);
     if (clipAsset) {
       const path = clipAssetPath(clipAsset[1]!);
-      if (!path) { res.writeHead(404).end("no such clip"); return; }
+      if (!path) { noSuchClip(res); 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 ?? ""));
@@ -349,17 +357,16 @@ const httpServer = createServer((req, res) => {
       createReadStream(path).pipe(res);
       return;
     }
-    const clipPage = url.match(/^\/clips\/([a-z0-9-]{1,60})$/);
-    if (clipPage) {
+    const clipPage = url.match(/^\/clips\/([^/]+)$/);
+    if (clipPage && CLIP_SLUG.test(clipPage[1]!)) {
       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);
+        const base = requestBase(req);
         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");
+      noSuchClip(res);
       return;
     }
     // Room invitations: a living room gets its recruiting card; a dead

packages/server/src/ratelimit.ts

@@ -31,6 +31,8 @@ export class SlidingLimit {
   }
 }
 
+const LOOPBACK = new Set(["127.0.0.1", "::1", "::ffff:127.0.0.1"]);
+
 /** The client's address as Caddy reports it. The proxy APPENDS the true
  * peer to X-Forwarded-For, so the last entry is the trustworthy one; a
  * client can write anything into the first. And the header is believed
@@ -43,5 +45,3 @@ export function clientAddress(headers: Record<string, string | string[] | undefi
   const parts = (Array.isArray(fwd) ? fwd.join(",") : fwd ?? "").split(",").map((s) => s.trim()).filter(Boolean);
   return parts[parts.length - 1] || peer;
 }
-
-const LOOPBACK = new Set(["127.0.0.1", "::1", "::ffff:127.0.0.1"]);

packages/server/src/store.ts

@@ -235,24 +235,28 @@ export interface ClipMeta {
 
 const clipsDir = () => join(DATA_DIR, "..", "clips");
 
+/** A clip's name, which is also its file stem: no separators, no dots,
+ * so a name can never name a path. */
+const SLUG = "[a-z0-9-]{1,60}";
+export const CLIP_SLUG = new RegExp(`^${SLUG}$`);
+const CLIP_FILE = new RegExp(`^${SLUG}(?:(?:-fpv|-board)\\.mp4|(?:-card)?\\.jpg)$`);
+
 export function readClips(): ClipMeta[] {
   const file = join(clipsDir(), "clips.json");
   if (!existsSync(file)) return [];
   try {
     const parsed = JSON.parse(readFileSync(file, "utf8")) as ClipMeta[];
-    return parsed.filter((c) => /^[a-z0-9-]{1,60}$/.test(c.name));
+    return parsed.filter((c) => CLIP_SLUG.test(c.name));
   } catch {
     return [];
   }
 }
 
 /** Resolve a clip asset request to its path — or null for any name that
- * is not exactly a published clip file shape. The gate IS the security:
- * nothing outside <slug>(-fpv|-board).mp4 / <slug>(-card)?.jpg can be named. */
+ * is not exactly a published clip file: <slug>-fpv.mp4, <slug>-board.mp4,
+ * <slug>.jpg, <slug>-card.jpg. The pattern is the only path guard. */
 export function clipAssetPath(file: string): string | null {
-  if (!/^[a-z0-9-]{1,60}(-fpv|-board)\.mp4$/.test(file) && !/^[a-z0-9-]{1,60}(-card)?\.jpg$/.test(file)) {
-    return null;
-  }
+  if (!CLIP_FILE.test(file)) return null;
   const path = join(clipsDir(), file);
   return existsSync(path) ? path : null;
 }

packages/web/src/LiveFirstPerson.svelte

@@ -10,7 +10,7 @@
   import FirstPerson from "./fpv/FirstPerson.svelte";
   import type { FpvTarget } from "./fpv/raycast";
   import { objectArt, tokenArt } from "./art";
-  import { fpFxForEvents, type FpFx } from "./fpv/fx3d";
+  import { fpFxForEvents, smoothstep, type FpFx } from "./fpv/fx3d";
   import { castRay, SIDE_ANGLE, OPPOSITE } from "./fpv/raycast";
   import { cutawayStand, deepestFacing } from "./fpv/director";
   import { aimOfEvents, gatherGlides, hurledIn, shortestArc } from "./fpv/director";
@@ -176,7 +176,7 @@
     const t0 = performance.now();
     const tick = (now: number) => {
       const w = Math.min(1, (now - t0) / 180);
-      cam.facing = from + (to - from) * (w * w * (3 - 2 * w));
+      cam.facing = from + (to - from) * (smoothstep(w));
       if (w < 1) requestAnimationFrame(tick);
       else turning = false;
     };
@@ -267,7 +267,7 @@
     let raf = 0;
     const tick = (now: number) => {
       const w = Math.min(1, Math.max(0, (now - t0) / dur));
-      const ease = w * w * (3 - 2 * w);
+      const ease = smoothstep(w);
       const next: Record<string, { x: number; y: number }> = {};
       for (const m of moves) {
         next[m.id] = { x: m.fx + (m.tx - m.fx) * ease, y: m.fy + (m.ty - m.fy) * ease };
@@ -403,7 +403,7 @@
       } else if (walkMs > 0 && t < turnMs + walkMs) {
         cam.facing = fromF + arc;
         const w = (t - turnMs) / walkMs;
-        const ease = w * w * (3 - 2 * w);
+        const ease = smoothstep(w);
         cam.x = fromX + (tx - fromX) * ease;
         cam.y = fromY + (ty - fromY) * ease;
       } else {

packages/web/src/Replay.svelte

@@ -5,9 +5,9 @@
   import { humanize, spellName } from "./net.svelte";
   import { tokenArt } from "./art";
   import { scheduleFx, type BoardFx } from "./fx";
-  import { fpFxForEvents, type FpFx } from "./fpv/fx3d";
+  import { fpFxForEvents, smoothstep, type FpFx } from "./fpv/fx3d";
   import { castRay, edgeMid } from "./fpv/raycast";
-  import { cutawayStand, deepestFacing, aimOfEvents, gatherGlides, hurledIn, shortestArc, sightline } from "./fpv/director";
+  import { cutawayStand, aimOfEvents, gatherGlides, hurledIn, shortestArc, sightline } from "./fpv/director";
   import { prefs } from "./prefs.svelte";
   import { cardDef, isPermanentDuration, stackSightTrace } from "@wizwar/engine";
   import type { GameEvent, GameView } from "@wizwar/engine";
@@ -99,7 +99,9 @@
     const t0 = performance.now();
     const dur = DIE_MS / speed;
     const who = d.player ?? "The maze";
-    die = { idx: i, player: who, roll: d.roll, purpose: d.purpose, face: 1, landed: false };
+    const show = (face: number, landed: boolean) =>
+      (die = { idx: i, player: who, roll: d.roll, purpose: d.purpose, face, landed });
+    show(1, false);
     let raf = 0;
     const tick = (now: number) => {
       const p = Math.max(0, now - t0) / dur;
@@ -108,9 +110,9 @@
         // The tumble: faces flick past, slowing as the die settles. A
         // fixed sequence, so the harness films the same roll every time.
         const n = Math.floor(p * 26 - p * p * 18);
-        die = { idx: i, player: who, roll: d.roll, purpose: d.purpose, face: ((n * 3 + 1) % 4) + 1, landed: false };
+        show(((n * 3 + 1) % 4) + 1, false);
       } else if (!die?.landed) {
-        die = { idx: i, player: who, roll: d.roll, purpose: d.purpose, face: d.roll, landed: true };
+        show(d.roll, true);
       }
       raf = requestAnimationFrame(tick);
     };
@@ -122,15 +124,14 @@
   /** What you drew belongs in the chronicle, not on a reel that may be
    * recorded and passed around — captions keep the count, not the cards. */
   const CAPTION_SILENT = new Set(["cardsDrawnPrivate", "cardsDealtPrivate", "cardsStolenPrivate"]);
-  const lines = $derived(
-    step.events
-      .filter((e) => !CAPTION_SILENT.has(e.type))
-      .map(humanize)
-      .filter((l): l is string => l !== null),
-  );
+  const captionLines = (events: GameEvent[], silent: Set<string>) =>
+    events.filter((e) => !silent.has(e.type)).map(humanize).filter((l): l is string => l !== null);
+  const lines = $derived(captionLines(step.events, CAPTION_SILENT));
   const atEnd = $derived(idx >= steps.length - 1);
-  /** What the roll brought about, in the caption's own words. */
-  const dieVerdict = $derived(lines.filter((l) => !l.startsWith("\u{1F3B2}")).slice(0, 2).join(" "));
+  /** What the roll brought about, in the caption's own words — the roll
+   * itself is on the die card, so its line is left out. */
+  const VERDICT_SILENT = new Set([...CAPTION_SILENT, "dieRolled"]);
+  const dieVerdict = $derived(captionLines(step.events, VERDICT_SILENT).slice(0, 2).join(" "));
 
   /** The acting wizard's standee, shown beside their words. */
   const actorArt = $derived.by(() => {
@@ -147,7 +148,7 @@
     const p = v.players.find((x) => x.id === step.actor);
     if (!p) return null;
     const acting = v.activePlayerId === p.id;
-    const steps = acting ? Math.max(0, v.turn.movementAllowance - v.turn.movementUsed) : null;
+    const strides = acting ? Math.max(0, v.turn.movementAllowance - v.turn.movementUsed) : null;
     const chips: string[] = [`♥ ${p.life}`];
     if (p.carriedTreasureId) chips.push("carrying a treasure");
     for (const c of p.displayed) chips.push(cardDef(c.cardId).name.toLowerCase());
@@ -158,7 +159,7 @@
     if (p.lostTurns > 0) chips.push(`loses ${p.lostTurns} turn${p.lostTurns === 1 ? "" : "s"}`);
     if (p.passWallCharges > 0) chips.push(`pass wall × ${p.passWallCharges}`);
     if (acting && v.turn.attackUsed) chips.push("attack spent");
-    return { steps, chips };
+    return { strides, chips };
   });
 
   /** A change of eyes wipes a slate across the pane: the cut to another
@@ -257,8 +258,8 @@
   $effect(() => {
     if (!playing) return;
     // Each step gets the reel's beat, plus the die's interlude when
-    // one decided it. Read the step here so every advance re-arms the
-    // timer — a derived that stays 0 across steps would not.
+    // one decided it. Reading idx here is what re-arms the timer on
+    // every advance.
     const from = idx;
     const t = setTimeout(() => {
       if (idx !== from) return;
@@ -287,7 +288,7 @@
     let raf = 0;
     const tick = (now: number) => {
       const w = Math.min(1, Math.max(0, (now - t0) / dur));
-      const ease = w * w * (3 - 2 * w);
+      const ease = smoothstep(w);
       const next: Record<string, { x: number; y: number }> = {};
       for (const m of moves) {
         next[m.id] = { x: m.fx + (m.tx - m.fx) * ease, y: m.fy + (m.ty - m.fy) * ease };
@@ -308,6 +309,11 @@
   /** How far the eyes drop to watch their own feet: the horizon rises
    * to the pane's top third and the ground underfoot fills the rest. */
   const LOOK_DOWN = 0.36;
+  /** Deeds on the ground of your own square, watched by looking down.
+   * A punch traded with a square-mate is not one: they stand in front
+   * of the eyes wherever those point. */
+  const GROUNDWORK = new Set(["spellCast", "squareFilled", "creatureCreated",
+    "treasurePickedUp", "treasureDropped", "objectDropped"]);
   let camReady = false;
   $effect(() => {
     if (!fp) { camReady = false; return; }
@@ -364,18 +370,11 @@
     };
     let targetFacing = camF;
     let aimed = false;
-    // Something at your own feet — a conjuration on your square, a
-    // treasure taken up, the pit you just fell down — is watched by
-    // looking down; the eyes come back level with the next step.
+    // The pit you fell down, or climbed from, is at your feet too; the
+    // eyes come back level with the next step.
     const underfoot = step.events.some((e) =>
-      (e.type === "fellInPit" || e.type === "climbedFromPit") && "player" in e && (e as { player: string }).player === povId);
+      (e.type === "fellInPit" || e.type === "climbedFromPit") && e.player === povId);
     let targetPitch = 0;
-    // Only GROUND deeds earn the look-down: a conjuration on this
-    // square, a treasure taken up or set down. A punch traded with
-    // someone sharing the square aims at nobody's feet — they stand
-    // right in front of the eyes, wherever those point.
-    const GROUNDWORK = new Set(["spellCast", "squareFilled", "creatureCreated",
-      "treasurePickedUp", "treasureDropped", "objectDropped"]);
     const groundwork = aim?.self && step.events.some((e) => GROUNDWORK.has(e.type));
     /** A stride that ends with something to watch — an ambush that
      * fired as the step landed — turns once more after the walk. */
@@ -392,10 +391,7 @@
       targetPitch = LOOK_DOWN;
       aimed = true;
     }
-    else if (aim?.self) {
-      // Nothing to turn toward: keep the view, unless it is a wall.
-    }
-    else if (aim) {
+    else if (aim && !aim.self) {
       const ax = aim.x + 0.5, ay = aim.y + 0.5;
       // The eyes watch their own magic land wherever they can see it —
       // straight down a corridor or through a warp mouth. Only a target
@@ -523,20 +519,20 @@
       const t = Math.max(0, now - t0);
       if (tiltMs > 0) {
         const w = Math.min(1, t / tiltMs);
-        cam.pitch = fromP + (targetPitch - fromP) * (w * w * (3 - 2 * w));
+        cam.pitch = fromP + (targetPitch - fromP) * (smoothstep(w));
       }
       if (turnMs > 0 && t < turnMs) {
         cam.facing = fromF + arc * (t / turnMs);
       } else if (walkMs > 0 && t < turnMs + walkMs) {
         cam.facing = fromF + arc;
         const w = (t - turnMs) / walkMs;
-        const ease = w * w * (3 - 2 * w);
+        const ease = smoothstep(w);
         cam.x = fromX + (tx - fromX) * ease;
         cam.y = fromY + (ty - fromY) * ease;
       } else if (closingArc !== 0 && t < turnMs + walkMs + closingMs) {
         cam.x = tx; cam.y = ty;
         const w = (t - turnMs - walkMs) / closingMs;
-        cam.facing = fromF + arc + closingArc * w * w * (3 - 2 * w);
+        cam.facing = fromF + arc + closingArc * smoothstep(w);
       } else if (tiltMs > 0 && t < tiltMs) {
         cam.facing = fromF + arc + closingArc;
         cam.x = tx; cam.y = ty;
@@ -606,13 +602,13 @@
       said.forEach((line, i) => g.fillText(line, textX, 720 - 32 + i * 26, 760));
       if (status) {
         g.textAlign = "right";
-        if (status.steps !== null) {
+        if (status.strides !== null) {
           g.fillStyle = "#efe8d4";
           g.font = "600 34px Oswald, sans-serif";
-          g.fillText(String(status.steps), 1280 - 28, 720 - 52);
+          g.fillText(String(status.strides), 1280 - 28, 720 - 52);
           g.fillStyle = "#a49c86";
           g.font = "600 14px Oswald, sans-serif";
-          g.fillText(status.steps === 1 ? "STEP LEFT" : "STEPS LEFT", 1280 - 28, 720 - 34);
+          g.fillText(status.strides === 1 ? "STEP LEFT" : "STEPS LEFT", 1280 - 28, 720 - 34);
         }
         g.fillStyle = "#d8d2c0";
         g.font = "16px 'Courier Prime', monospace";
@@ -720,8 +716,8 @@
       </div>
       {#if status}
         <div class="caption-status">
-          {#if status.steps !== null}
-            <div class="caption-steps"><b>{status.steps}</b><span>{status.steps === 1 ? "step" : "steps"} left</span></div>
+          {#if status.strides !== null}
+            <div class="caption-steps"><b>{status.strides}</b><span>{status.strides === 1 ? "step" : "steps"} left</span></div>
           {/if}
           <div class="caption-chips">
             {#each status.chips as chip, i (i)}<span class="chip">{chip}</span>{/each}

packages/web/src/fpv/FirstPerson.svelte

@@ -3,9 +3,9 @@
   // GameView. Columns of wall shaded by distance and facing; token art
   // billboarded for whatever stands in the corridors, occluded per column
   // by the same depth buffer the walls wrote.
-  import { billboards, castRay, warpMotion, type FpvTarget } from "./raycast";
+  import { billboards, castRay, warpMotion, type Billboard, type FpvTarget } from "./raycast";
   import { materialTextures } from "./textures";
-  import { doorOpenness, fxFallback, growProgress, slateBand, surgeIntensity, type FpFx } from "./fx3d";
+  import { doorOpenness, fxFallback, growProgress, slateBand, smoothstep, surgeIntensity, type FpFx } from "./fx3d";
   import { terrainFallback, TERRAIN3D } from "./terrain3d";
   import { tokenArt } from "../art";
   import { PLAYER_COLORS } from "../colors";
@@ -25,6 +25,7 @@
     posOverride,
     rubble = [],
     ontarget,
+    hover = false,
     litCells = null,
     aimBeings = false,
     edgeSelect = false,
@@ -51,6 +52,8 @@
     rubble?: { x: number; y: number }[];
     /** Present = the pane is an instrument: clicks resolve to targets. */
     ontarget?: (t: FpvTarget) => void;
+    /** Show the crosshair's hover cue without a click handler (the workshop's poses). */
+    hover?: boolean;
     /** Squares a selected cell-target card may aim at: the pane dims the
      * ineligible ground exactly as the board dims its squares. */
     litCells?: Set<string> | null;
@@ -137,8 +140,8 @@
     if (cells.size > 0) {
       grid = new Uint8Array(v.board.width * v.board.height);
       for (const k of cells) {
-        const [fx, fy] = k.split(",").map(Number) as [number, number];
-        if (fx >= 0 && fy >= 0 && fx < v.board.width && fy < v.board.height) grid[fy * v.board.width + fx] = 1;
+        const [px, py] = k.split(",").map(Number) as [number, number];
+        if (px >= 0 && py >= 0 && px < v.board.width && py < v.board.height) grid[py * v.board.width + px] = 1;
       }
     }
     dreadCache.set(v, grid);
@@ -233,7 +236,6 @@
       }
     }
 
-
     // Walls, one ray per column; remember each column's depth for
     // sprites, and whether its ray bent through a warp — a sprite's warp
     // side must MATCH its column's, or bodies near a far mouth would
@@ -539,34 +541,16 @@
         if (spriteVisibleInCol(s, col, zbuf, warpIdCol, warpDistCol)) { seen = true; break; }
       }
       const ringY = Math.min(H - 2, s.bottom);
+      const w = s.right - s.left;
       if (seen && s.dread && s.hit) {
-        const w = s.right - s.left;
-        const pulse = 0.45 + 0.25 * Math.sin(time / 300);
-        ctx.save();
-        ctx.strokeStyle = `rgba(160,30,30,${pulse})`;
-        ctx.fillStyle = "rgba(160,30,30,0.12)";
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        ctx.ellipse((s.left + s.right) / 2, ringY, Math.max(9, w * 0.5), Math.max(3, w * 0.155), 0, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.stroke();
-        ctx.restore();
+        floorRing(ctx, (s.left + s.right) / 2, ringY, Math.max(9, w * 0.5), Math.max(3, w * 0.155),
+          "160,30,30", 0.45 + 0.25 * Math.sin(time / 300), 0.12);
       }
       if (seen && ontarget && aimBeings && litCells && s.hit && s.cell &&
           litCells.has(`${s.cell.x},${s.cell.y}`) &&
           !(s.hit.kind === "player" && s.hit.id === view.you)) {
-        const w = s.right - s.left;
-        const cx = (s.left + s.right) / 2;
-        const pulse = 0.55 + 0.25 * Math.sin(time / 220);
-        ctx.save();
-        ctx.strokeStyle = `rgba(232,160,60,${pulse})`;
-        ctx.fillStyle = "rgba(232,160,60,0.16)";
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        ctx.ellipse(cx, ringY, Math.max(7, w * 0.42), Math.max(3, w * 0.13), 0, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.stroke();
-        ctx.restore();
+        floorRing(ctx, (s.left + s.right) / 2, ringY, Math.max(7, w * 0.42), Math.max(3, w * 0.13),
+          "232,160,60", 0.55 + 0.25 * Math.sin(time / 220), 0.16);
       }
       // Painted art composites normally (inks stay true); light glows
       // additively. Either way translucency applies.
@@ -610,10 +594,11 @@
       if (s.webbed && s.hit && seen) {
         const w = s.right - s.left, h = s.bottom - s.top;
         const hubX = s.left + w * 0.5, hubY = s.top + h * 0.45;
-        const rim: [number, number][] = [
+        const rimU: [number, number][] = [
           [0.02, 0.06], [0.5, 0.0], [0.98, 0.08], [1.0, 0.5],
           [0.96, 0.94], [0.5, 1.0], [0.04, 0.92], [0.0, 0.5],
-        ].map(([fx, fy]) => [s.left + fx * w, s.top + fy * h]);
+        ];
+        const rim: [number, number][] = rimU.map(([u, v]) => [s.left + u * w, s.top + v * h]);
         const web = () => {
           ctx.beginPath();
           for (const [rx, ry] of rim) {
@@ -757,7 +742,7 @@
       if (f.kind !== "fist") continue;
       const p = (time - f.t0) / f.dur;
       if (p < 0 || p >= 1) continue;
-      const ease = (w: number) => w * w * (3 - 2 * w);
+      const ease = smoothstep;
       const out = f.swing === "out";
       // Travel: out 0→0.42 lunge, 0.42→1 retract; in 0→0.45 approach, then hold and fade.
       const a = out ? (p < 0.42 ? ease(p / 0.42) : ease(1 - (p - 0.42) / 0.58)) : Math.min(1, ease(p / 0.45));
@@ -854,7 +839,22 @@
 
     // The crosshair's answer, before the click commits: what the pane
     // would target here, outlined in the table's gold with its name.
-    if (ontarget && mouse) drawHover(ctx, W, H, half);
+    if ((ontarget || hover) && mouse) drawHover(ctx, W, H, half);
+  }
+
+  /** An ellipse of light on the floor at a body's feet: `rgb` as "r,g,b",
+   * the stroke at `alpha`, the fill fainter. */
+  function floorRing(ctx: CanvasRenderingContext2D, cx: number, cy: number, rx: number, ry: number,
+                     rgb: string, alpha: number, fill: number) {
+    ctx.save();
+    ctx.strokeStyle = `rgba(${rgb},${alpha})`;
+    ctx.fillStyle = `rgba(${rgb},${fill})`;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.stroke();
+    ctx.restore();
   }
 
   /** Paint the hover cue for whatever stands under the crosshair. */
@@ -956,13 +956,7 @@
     sort: number;
   }
   function project(
-    b: { x: number; y: number; src: string; scale: number; rise: number;
-         aspect?: number; alpha?: number; glow?: boolean; bias?: number;
-         fallback?: string; warped?: boolean; warpId?: number;
-         clip?: { x: number; y: number };
-         hit?: { kind: "player" | "creature"; id: string };
-         cell?: { x: number; y: number };
-         webbed?: boolean; gaze?: boolean; dread?: boolean; sink?: boolean },
+    b: Pick<Billboard, "x" | "y" | "src" | "scale" | "rise"> & Partial<Billboard>,
     ex: number, ey: number,
   ): Projected | null {
     const relX = b.x - ex, relY = b.y - ey;

packages/web/src/fpv/FpvWorkshop.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { smoothstep } from "./fx3d";
   // The first-person workshop (/?fpv): a real dealt game, one wizard's
   // eyes, free-fly controls. No rules run here — the camera walks where
   // walls allow and the maze is exactly what viewFor would send that
@@ -97,7 +98,7 @@
         turned: boolean; t0: number; dur: number }
     | null;
   let anim: Anim = null;
-  const ease = (w: number) => w * w * (3 - 2 * w);
+  const ease = (w: number) => smoothstep(w);
   function startNext(now: number) {
     const turn = (held.has("arrowleft") || held.has("a") ? -1 : 0) +
                  (held.has("arrowright") || held.has("d") ? 1 : 0);
@@ -256,7 +257,7 @@
   </p>
   <div class="stage">
     <FirstPerson {view} {povId} {x} {y} {facing} litCells={aimCells} aimBeings={!!aimCells}
-      ontarget={aimCells ? () => {} : undefined} />
+      hover={!!aimCells} />
     <svg class="minimap" viewBox="0 0 {view.board.width * MM} {view.board.height * MM}">
       {#each cells as c (cellKey({ x: c.cx, y: c.cy }))}
         <rect x={c.cx * MM} y={c.cy * MM} width={MM} height={MM} class="mm-cell" />

packages/web/src/fpv/director.ts

@@ -3,10 +3,9 @@
 // between one view and the next. One ladder, so the replay and the
 // table never learn different instincts.
 
-import { edgeMid, warpMotion } from "./raycast";
+import { castRay, edgeMid, warpMotion } from "./raycast";
 import { fpFxForEvents } from "./fx3d";
 import type { GameEvent, GameView } from "@wizwar/engine";
-import { castRay } from "./raycast";
 
 export function shortestArc(from: number, to: number): number {
   let d = (to - from) % (2 * Math.PI);

packages/web/src/fpv/fx3d.ts

@@ -48,18 +48,20 @@ export function surgeIntensity(p: number): number {
  * p, as [left, right] fractions — sweeping in from the left, holding,
  * then sweeping off to the right. */
 export function slateBand(p: number): [number, number] {
-  const ease = (w: number) => w * w * (3 - 2 * w);
   if (p < 0 || p >= 1) return [0, 0];
-  if (p < 0.28) return [0, ease(p / 0.28)];
+  if (p < 0.28) return [0, smoothstep(p / 0.28)];
   if (p < 0.68) return [0, 1];
-  return [ease((p - 0.68) / 0.32), 1];
+  return [smoothstep((p - 0.68) / 0.32), 1];
 }
 
+/** The one easing every tween here shares. */
+export const smoothstep = (w: number): number => w * w * (3 - 2 * w);
+
 /** Eased growth 0..1 for a conjuration's rise. */
 export function growProgress(p: number): number {
   if (p <= 0) return 0.01;
   if (p >= 1) return 1;
-  return Math.max(0.01, p * p * (3 - 2 * p));
+  return Math.max(0.01, smoothstep(p));
 }
 
 /** How far open an animated door stands at progress p: swings open,
@@ -143,11 +145,6 @@ export function fpFxForEvents(
           delay,
         });
       }
-    } else if (fx.kind === "portal") {
-      // The board ripples a mouth on every crossing. In here a warp is
-      // a doorway like any other — the veil already marks it, and a
-      // body walks through as it would a door. A mouth just OPENED is
-      // staged from the raw event below.
     } else if ("at" in fx && IMPACT_ART[fx.kind]) {
       out.push({
         fx: { id: nextId++, kind: "impact", art: IMPACT_ART[fx.kind]!, at: { x: fx.at.x + 0.5, y: fx.at.y + 0.5 }, t0: 0, dur: 550 },
@@ -157,14 +154,15 @@ export function fpFxForEvents(
   }
   // The maze itself performs: doors swing for whoever steps through,
   // walls die into rubble, walking THROUGH stone shimmers, and a
-  // wormhole just cast surges through both its new mouths.
+  // wormhole just cast surges through both its new mouths. A crossing
+  // through an existing mouth is silent: a warp is a doorway here, and
+  // the veil already marks it (the board's "portal" ripple is not staged).
   const warpIndex = (m: { cell: { x: number; y: number }; side: string }) =>
     view.board.warps.findIndex((w) => w.from.cell.x === m.cell.x && w.from.cell.y === m.cell.y && w.from.side === m.side);
   for (const e of events) {
-    if (e.type === "punched" && "attacker" in e) {
-      const pe = e as { attacker: string; target: string };
-      if (pe.attacker === povId) out.push({ fx: { id: nextId++, kind: "fist", swing: "out", t0: 0, dur: 620 }, delay: 0 });
-      else if (pe.target === povId) out.push({ fx: { id: nextId++, kind: "fist", swing: "in", t0: 0, dur: 620 }, delay: 0 });
+    if (e.type === "punched") {
+      if (e.attacker === povId) out.push({ fx: { id: nextId++, kind: "fist", swing: "out", t0: 0, dur: 620 }, delay: 0 });
+      else if (e.target === povId) out.push({ fx: { id: nextId++, kind: "fist", swing: "in", t0: 0, dur: 620 }, delay: 0 });
     }
     if (e.type === "warpOpened") {
       for (const [m, delay] of [[e.a, 0], [e.b, 200]] as const) {