@netforge/template-party 0.0.0-stage → 0.2.0

package/client/stage.ts

@@ -0,0 +1,266 @@
+/**
+ * The playroom as drawn: a checkered dance floor on the room's floor
+ * (game.ts field.floors), striped party wallpaper on every wall box
+ * (field.walls) and a ring of coloured party lights along the walls. One
+ * merged mesh for all the walls and one for each floor, so the room is a
+ * handful of draws.
+ *
+ * The whole room is lit from the start (a party has no fog of war). An
+ * x-ray cut keeps a wall from hiding your player.
+ *
+ * An art style that paints surfaces (ps1's textures) paints these too
+ * (surface roles "floor", "wall"); the toon, pixel, voxel and hand-drawn
+ * styles reshade them in post like everything else.
+ */
+import { BufferAttribute, BufferGeometry, CanvasTexture, Color, CylinderGeometry, Group, Mesh, MeshBasicMaterial, MeshStandardMaterial, MeshStandardNodeMaterial, PlaneGeometry, RepeatWrapping, SphereGeometry, SRGBColorSpace, Vector3 } from "three/webgpu";
+import { clamp, dot, float, length, positionWorld, select, uniform } from "three/tsl";
+import type { Texture } from "three/webgpu";
+import type { WallBox } from "@netforge/engine-sim";
+
+/** Walls are drawn this tall (the sim's are 3 m): low enough that a wall south of you hides less of the room. */
+export const WALL_DRAW_HEIGHT = 2.2;
+/** Party lights hang this high along the walls, under the wall tops. */
+const SCONCE_HEIGHT = 1.75;
+/** Brightness of a floor nobody has walked into yet, and of one a wickbearer has. */
+const UNSEEN = 0.2;
+const LIT = 0.85;
+
+function hash01(n: number): number {
+  let t = (n + 0x6d2b79f5) >>> 0;
+  t = Math.imul(t ^ (t >>> 15), t | 1);
+  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+}
+
+/** A checkered dance floor, drawn on a canvas (one repeat covers 4 m: 4 x 4 checks of 1 m). */
+function danceFloor(): CanvasTexture {
+  const c = document.createElement("canvas");
+  c.width = c.height = 256;
+  const g = c.getContext("2d");
+  if (g) {
+    // Soft checks (dark plum and dusty pink, light lilac and blush): busy enough to read as a dance floor, quiet enough for the HUD over it.
+    const tones = ["#4a3670", "#b9a3d9", "#5a3463", "#d3a3c4"];
+    for (let j = 0; j < 4; j++) {
+      for (let i = 0; i < 4; i++) {
+        const dark = (i + j) % 2 === 0;
+        g.fillStyle = tones[(dark ? 0 : 1) + (hash01(j * 4 + i) < 0.5 ? 0 : 2)] ?? "#3a2a5c";
+        g.fillRect(i * 64, j * 64, 64, 64);
+        g.strokeStyle = "rgba(0, 0, 0, 0.18)";
+        g.strokeRect(i * 64 + 1, j * 64 + 1, 62, 62);
+      }
+    }
+    g.fillStyle = "rgba(255, 255, 255, 0.06)";
+    for (let n = 0; n < 200; n++) g.fillRect(hash01(n * 3) * 256, hash01(n * 3 + 1) * 256, 2, 2);
+  }
+  const t = new CanvasTexture(c);
+  t.wrapS = t.wrapT = RepeatWrapping;
+  t.colorSpace = SRGBColorSpace;
+  t.userData = { tile: 4 };
+  return t;
+}
+
+/** Party wallpaper: candy stripes (one repeat covers 2 m). */
+function wallpaper(): CanvasTexture {
+  const c = document.createElement("canvas");
+  c.width = c.height = 128;
+  const g = c.getContext("2d");
+  if (g) {
+    for (let i = 0; i < 8; i++) {
+      g.fillStyle = i % 2 === 0 ? "#ffb3d6" : "#fff2c9";
+      g.fillRect(i * 16, 0, 16, 128);
+    }
+    g.fillStyle = "rgba(122, 215, 255, 0.55)";
+    g.fillRect(0, 96, 128, 10);
+  }
+  const t = new CanvasTexture(c);
+  t.wrapS = t.wrapT = RepeatWrapping;
+  t.colorSpace = SRGBColorSpace;
+  t.userData = { tile: 2 };
+  return t;
+}
+
+/**
+ * Boxes as one geometry with world-space UVs (so a texture tiles at the
+ * same scale on a 1 m stub and a 40 m run). `h` is the height; the floor
+ * is y = 0.
+ */
+function boxesGeometry(boxes: readonly WallBox[], h: number, tile: number): BufferGeometry {
+  const pos: number[] = [];
+  const nor: number[] = [];
+  const uv: number[] = [];
+  const idx: number[] = [];
+  const quad = (a: number[], b: number[], c: number[], d: number[], n: number[], uvOf: (p: number[]) => [number, number]) => {
+    const base = pos.length / 3;
+    for (const p of [a, b, c, d]) {
+      pos.push(p[0] ?? 0, p[1] ?? 0, p[2] ?? 0);
+      nor.push(n[0] ?? 0, n[1] ?? 0, n[2] ?? 0);
+      const [u, v] = uvOf(p);
+      uv.push(u / tile, v / tile);
+    }
+    idx.push(base, base + 1, base + 2, base, base + 2, base + 3);
+  };
+  for (const b of boxes) {
+    const x0 = b.x - b.hx;
+    const x1 = b.x + b.hx;
+    const z0 = b.z - b.hz;
+    const z1 = b.z + b.hz;
+    const xz = (p: number[]): [number, number] => [p[0] ?? 0, p[2] ?? 0];
+    const xy = (p: number[]): [number, number] => [p[0] ?? 0, p[1] ?? 0];
+    const zy = (p: number[]): [number, number] => [p[2] ?? 0, p[1] ?? 0];
+    quad([x0, h, z1], [x1, h, z1], [x1, h, z0], [x0, h, z0], [0, 1, 0], xz);
+    quad([x0, 0, z1], [x1, 0, z1], [x1, h, z1], [x0, h, z1], [0, 0, 1], xy);
+    quad([x1, 0, z0], [x0, 0, z0], [x0, h, z0], [x1, h, z0], [0, 0, -1], xy);
+    quad([x1, 0, z1], [x1, 0, z0], [x1, h, z0], [x1, h, z1], [1, 0, 0], zy);
+    quad([x0, 0, z0], [x0, 0, z1], [x0, h, z1], [x0, h, z0], [-1, 0, 0], zy);
+  }
+  const g = new BufferGeometry();
+  g.setAttribute("position", new BufferAttribute(new Float32Array(pos), 3));
+  g.setAttribute("normal", new BufferAttribute(new Float32Array(nor), 3));
+  g.setAttribute("uv", new BufferAttribute(new Float32Array(uv), 2));
+  g.setIndex(idx);
+  g.computeBoundingSphere();
+  return g;
+}
+
+/**
+ * The x-ray cut: wall fragments near the line from the camera to your
+ * wickbearer (and in front of them) are not drawn, so a wall south of you
+ * never hides you. Works on the node material every backend draws, and the
+ * art styles carry it over (they copy opacity nodes and the alpha test).
+ */
+export class WallCut {
+  readonly camera = uniform(new Vector3(0, 20, 20));
+  readonly hero = uniform(new Vector3(0, 1, 0));
+  /** Radius of the cut, m. */
+  readonly radius = uniform(1.6);
+
+  /** A wall material with the cut in it. */
+  material(color: number, map: Texture | null, roughness: number): MeshStandardNodeMaterial {
+    const m = new MeshStandardNodeMaterial({ color, roughness, flatShading: true });
+    if (map) m.map = map;
+    const c = this.camera;
+    const seg = this.hero.sub(c);
+    const p = positionWorld;
+    const t = clamp(dot(p.sub(c), seg).div(dot(seg, seg)), 0, 1);
+    const d = length(p.sub(c.add(seg.mul(t))));
+    // Cut: close to the sight line, before the hero, and above the wall's foot (the base still outlines the room).
+    const cut = d.lessThan(this.radius).and(t.lessThan(0.97)).and(p.y.greaterThan(0.12));
+    m.opacityNode = select(cut, float(0), float(1));
+    m.alphaTest = 0.5;
+    return m;
+  }
+
+  update(camera: Vector3, hero: Vector3): void {
+    this.camera.value.copy(camera);
+    this.hero.value.set(hero.x, hero.y + 0.9, hero.z);
+  }
+}
+
+interface FloorPiece {
+  readonly box: WallBox;
+  readonly material: MeshStandardMaterial;
+  lit: number;
+  seen: boolean;
+}
+
+export class PartyStage {
+  readonly group = new Group();
+  /** Where the party lights hang ([x, y, z]): the scene drifts sparkles off the near ones. */
+  readonly flames: [number, number, number][] = [];
+  private readonly floors: FloorPiece[] = [];
+  readonly cut = new WallCut();
+
+  constructor(
+    walls: readonly WallBox[],
+    floors: readonly WallBox[],
+    half: number,
+    surface: ((kind: "floor" | "wall" | "stone" | "ground") => Texture | null) | null,
+  ) {
+    // A deep plum carpet under everything: what the camera sees past the walls.
+    const rock = new Mesh(new PlaneGeometry(half * 2 + 60, half * 2 + 60), new MeshStandardMaterial({ color: 0x241534, roughness: 1 }));
+    rock.rotation.x = -Math.PI / 2;
+    rock.position.y = -0.02;
+    rock.userData.surface = "rock";
+    this.group.add(rock);
+
+    // Floors: one mesh per room or corridor, so each can lift out of the dark on its own.
+    const floorMap = surface?.("floor") ?? danceFloor();
+    const ftile = (floorMap.userData as { tile?: number }).tile ?? 4;
+    for (const f of floors) {
+      const map = floorMap.clone();
+      map.needsUpdate = true;
+      map.repeat.set((f.hx * 2) / ftile, (f.hz * 2) / ftile);
+      map.offset.set(((f.x - f.hx) / ftile) % 1, ((f.z - f.hz) / ftile) % 1);
+      const material = new MeshStandardMaterial({ map, roughness: 0.95, color: new Color(UNSEEN, UNSEEN, UNSEEN) });
+      const m = new Mesh(new PlaneGeometry(f.hx * 2, f.hz * 2), material);
+      m.rotation.x = -Math.PI / 2;
+      m.position.set(f.x, 0.005, f.z);
+      m.receiveShadow = true;
+      m.userData.surface = "floor";
+      this.group.add(m);
+      // A party has no fog of war: every floor is lit from the start.
+      material.color.setScalar(LIT);
+      this.floors.push({ box: f, material, lit: LIT, seen: true });
+    }
+
+    // Walls: one merged mesh with a darker cap, so the plan reads from above.
+    const wallMap = surface?.("wall") ?? wallpaper();
+    wallMap.wrapS = wallMap.wrapT = RepeatWrapping;
+    const wtile = (wallMap.userData as { tile?: number }).tile ?? 2;
+    const wall = new Mesh(boxesGeometry(walls, WALL_DRAW_HEIGHT, wtile), this.cut.material(0xffffff, wallMap, 0.85));
+    wall.castShadow = true;
+    wall.receiveShadow = true;
+    wall.userData.surface = "wall";
+    this.group.add(wall);
+    const capMat = this.cut.material(0x7a2f62, null, 0.7);
+    const cap = new Mesh(boxesGeometry(walls.map((b) => ({ x: b.x, z: b.z, hx: b.hx + 0.04, hz: b.hz + 0.04 })), 0.08, 1), capMat);
+    cap.position.y = WALL_DRAW_HEIGHT;
+    this.group.add(cap);
+
+    // Candles: a sconce flame at each room's inner corners (rooms are the floors big enough to be rooms).
+    const flameMat = new MeshBasicMaterial({ color: new Color(0xffb04a).multiplyScalar(5) });
+    const flameGeo = new SphereGeometry(0.16, 8, 6);
+    const sconceGeo = new CylinderGeometry(0.22, 0.12, 0.24, 6);
+    const sconceMat = new MeshStandardMaterial({ color: 0x2a2420, roughness: 0.6, metalness: 0.4 });
+    const bulbColors = [0xff5ab4, 0xffe066, 0x7ad7ff, 0x7affd4, 0xc9a7ff];
+    const bulbMats = bulbColors.map((c) => new MeshBasicMaterial({ color: new Color(c).multiplyScalar(4) }));
+    for (const f of floors) {
+      if (f.hx < 4 || f.hz < 4) continue;
+      // A ring of party lights along the walls, one every 4 m, in turn through the colours.
+      let k = 0;
+      const ring: [number, number][] = [];
+      for (let x = -f.hx + 1; x <= f.hx - 1; x += 4) ring.push([f.x + x, f.z - f.hz + 0.3], [f.x + x, f.z + f.hz - 0.3]);
+      for (let z = -f.hz + 3; z <= f.hz - 3; z += 4) ring.push([f.x - f.hx + 0.3, f.z + z], [f.x + f.hx - 0.3, f.z + z]);
+      for (const [x, z] of ring) {
+        const sconce = new Mesh(sconceGeo, sconceMat);
+        sconce.position.set(x, SCONCE_HEIGHT - 0.12, z);
+        this.group.add(sconce);
+        const bulb = new Mesh(flameGeo, bulbMats[k++ % bulbMats.length] ?? flameMat);
+        bulb.position.set(x, SCONCE_HEIGHT + 0.1, z);
+        this.group.add(bulb);
+        if (k % 3 === 0) this.flames.push([x, SCONCE_HEIGHT + 0.15, z]);
+      }
+    }
+  }
+
+  /** Lift the dark off every floor a wickbearer stands on (or within 2 m of). */
+  update(dt: number, players: readonly (readonly [number, number])[]): void {
+    for (const f of this.floors) {
+      if (!f.seen) {
+        for (const [x, z] of players) {
+          if (Math.abs(x - f.box.x) <= f.box.hx + 2 && Math.abs(z - f.box.z) <= f.box.hz + 2) f.seen = true;
+        }
+      }
+      const goal = f.seen ? LIT : UNSEEN;
+      if (Math.abs(goal - f.lit) < 0.002) continue;
+      f.lit += (goal - f.lit) * Math.min(1, dt * 2.5);
+      // Candle-warm: a touch less blue than red.
+      f.material.color.setRGB(f.lit, f.lit * 0.93, f.lit * 0.84);
+    }
+  }
+
+  /** A fresh descent: every room goes back into the dark. */
+  reset(): void {
+    for (const f of this.floors) f.seen = false;
+  }
+}

package/client/stake.ts

@@ -0,0 +1,101 @@
+/**
+ * The buy-in run in the store panel (earn.stake, the mandatory sink loop).
+ * The player picks an amount inside the game's terms and stakes it: the Kit
+ * spends it under the reason "stake" (earned coins first, then the wallet),
+ * then the room is told. The room fixes the stake from its own ledger when
+ * the next run starts (or this one, if it only just began) and says so.
+ */
+import type { StakeMessage, StakeTermsView } from "@netforge/engine/net";
+import type { KitStoreBridge } from "../src/store.js";
+
+export interface StakeConn {
+  readonly welcome: { readonly stake?: StakeTermsView };
+  stake(amount?: number): void;
+  onStake(cb: (m: StakeMessage) => void): void;
+}
+
+const fmt = (n: number) => (Math.round(n * 100) / 100).toLocaleString("en-US");
+
+/** Wires #stake-amount, #stake-go and #stake-line; hides #stake-row when the game takes no stakes. */
+export function wireStake(conn: StakeConn, kit: KitStoreBridge, toast: (t: string) => void): void {
+  const row = document.getElementById("stake-row");
+  const input = document.getElementById("stake-amount") as HTMLInputElement | null;
+  const go = document.getElementById("stake-go") as HTMLButtonElement | null;
+  const line = document.getElementById("stake-line");
+  const terms = conn.welcome.stake;
+  if (!row || !input || !go || !line) return;
+  if (!terms) {
+    row.style.display = "none";
+    return;
+  }
+  const sym = kit.coins.symbol();
+  input.min = String(terms.min);
+  input.max = String(terms.max);
+  input.step = "any";
+  input.value = String(terms.min);
+  const idle = () => {
+    const a = Number(input.value) || terms.min;
+    line.textContent = `Up to ${fmt(a * terms.multiple)} ${sym} back`;
+  };
+  idle();
+  input.addEventListener("input", idle);
+  go.addEventListener("click", async () => {
+    const a = Number(input.value);
+    if (!(a >= terms.min && a <= terms.max)) return toast(`Stake ${fmt(terms.min)} to ${fmt(terms.max)} ${sym}`);
+    go.disabled = true;
+    try {
+      await kit.coins.spend(a, "stake");
+      conn.stake(a);
+    } catch {
+      toast(`Not enough ${sym}`);
+    } finally {
+      go.disabled = false;
+    }
+  });
+  conn.onStake((m) => {
+    if (m.state === "live") line.textContent = `Staked ${fmt(m.stake)}, up to ${fmt(m.ceiling ?? 0)} ${sym} this run`;
+    else if (m.state === "waiting") line.textContent = m.stake > 0 ? `Next run: ${fmt(m.stake)} ${sym}` : "Stake waits for tomorrow's cap";
+    else if (m.state === "closed") {
+      toast(`Stake ${fmt(m.stake)} ${sym}  ${fmt(m.paid ?? 0)} back${m.lost && m.lost.length > 0 ? `  ·  gear lost` : ""}`);
+      idle();
+    } else toast(m.reason === "sign in to stake" ? "Sign in to stake" : "Stake not taken");
+  });
+}
+
+/** One losable gear SKU (store.sku grants { gear, loseBelow }): a buy button and its loss line. Hides #gear-row without one. */
+export function wireGear(gear: { id: string; name: string; coins: number; loseBelow: number } | null, kit: KitStoreBridge, toast: (t: string) => void): void {
+  const row = document.getElementById("gear-row");
+  const name = document.getElementById("gear-name");
+  const line = document.getElementById("gear-line");
+  const buy = document.getElementById("gear-buy") as HTMLButtonElement | null;
+  if (!row || !name || !line || !buy) return;
+  if (!gear) {
+    row.style.display = "none";
+    return;
+  }
+  const sym = kit.coins.symbol();
+  name.textContent = gear.name;
+  line.textContent = `Staked runs only. Lost under ${Math.round(gear.loseBelow * 100)}% of a run's earn`;
+  const show = () => {
+    buy.textContent = kit.store.owns(gear.id) ? "Owned" : `${gear.coins} ${sym}`;
+    buy.disabled = kit.store.owns(gear.id);
+  };
+  show();
+  buy.addEventListener("click", async () => {
+    try {
+      await kit.store.buy(gear.id, { pay: "coins" });
+    } catch {
+      toast(`Not enough ${sym}`);
+    }
+    show();
+  });
+}
+
+/** The game's first gear SKU from its manifest, with its label. */
+export function gearOf(skus: ReadonlyMap<string, { coins?: number; grants?: unknown }>, names: Readonly<Record<string, string>>): { id: string; name: string; coins: number; loseBelow: number } | null {
+  for (const [id, s] of skus) {
+    const g = s.grants as { gear?: string; loseBelow?: number } | undefined;
+    if (g?.gear && typeof g.loseBelow === "number" && s.coins !== undefined) return { id, name: names[id] ?? id, coins: s.coins, loseBelow: g.loseBelow };
+  }
+  return null;
+}

package/client/threats.ts

@@ -0,0 +1,157 @@
+/**
+ * Telegraphs and hostile shots (GAME-DESIGN.md "telegraph every big hit").
+ * Every warning is a pooled ground decal that fills as the attack winds
+ * up: a ring outline plus a filling disc for circles, an outlined lane
+ * with a fill that grows along it for charges and aim lines, and a soft
+ * dashed pulse for support auras. Shapes and fill carry the meaning, not
+ * colour alone, so it reads for colour-blind players too. The data is the
+ * snapshot's telegraph word (engine/game/threats.ts), so nothing extra is
+ * sent.
+ */
+import {
+  NormalBlending,
+  CircleGeometry,
+  Color,
+  DoubleSide,
+  Group,
+  Mesh,
+  MeshBasicMaterial,
+  PlaneGeometry,
+  RingGeometry,
+  SphereGeometry,
+} from "three/webgpu";
+import type { Scene } from "three/webgpu";
+import type { ThreatShape } from "@netforge/engine/game";
+
+/** Danger reads warm and bright on the night palette; support reads cool. */
+const DANGER = new Color(0xff5a3c);
+const DANGER_EDGE = new Color(0xffe2b0);
+const SUPPORT = new Color(0x6fd3ff);
+/** A keeper's own meteor about to land. */
+const FRIENDLY = new Color(0xffd36b);
+const MAX_DECALS = 64;
+const MAX_SHOTS = 160;
+
+interface Decal {
+  group: Group;
+  fill: Mesh;
+  edge: Mesh;
+  laneFill: Mesh;
+  laneEdge: Mesh;
+}
+
+const basic = (color: Color, opacity: number) =>
+  // Normal blending: under the render stack's bloom, stacked additive warnings would wash the screen out.
+  new MeshBasicMaterial({ color, transparent: true, opacity, depthWrite: false, side: DoubleSide, blending: NormalBlending, fog: false });
+
+export class ThreatLayer {
+  private readonly decals: Decal[] = [];
+  private used = 0;
+  private readonly shots: Mesh[] = [];
+  private shotUsed = 0;
+  private time = 0;
+
+  constructor(scene: Scene) {
+    const disc = new CircleGeometry(1, 40);
+    disc.rotateX(-Math.PI / 2);
+    const ring = new RingGeometry(0.94, 1, 48);
+    ring.rotateX(-Math.PI / 2);
+    // Lanes are unit squares starting at the origin and running along +x.
+    const lane = new PlaneGeometry(1, 1);
+    lane.rotateX(-Math.PI / 2);
+    lane.translate(0.5, 0, 0);
+    for (let i = 0; i < MAX_DECALS; i++) {
+      const group = new Group();
+      const fill = new Mesh(disc, basic(DANGER, 0.35));
+      const edge = new Mesh(ring, basic(DANGER_EDGE, 0.9));
+      const laneFill = new Mesh(lane, basic(DANGER, 0.4));
+      const laneEdge = new Mesh(lane, basic(DANGER_EDGE, 0.16));
+      group.add(fill, edge, laneFill, laneEdge);
+      group.visible = false;
+      scene.add(group);
+      this.decals.push({ group, fill, edge, laneFill, laneEdge });
+    }
+    const orb = new SphereGeometry(0.28, 10, 8);
+    const orbMat = new MeshBasicMaterial({ color: 0xff7a4a });
+    for (let i = 0; i < MAX_SHOTS; i++) {
+      const m = new Mesh(orb, orbMat);
+      m.visible = false;
+      scene.add(m);
+      this.shots.push(m);
+    }
+  }
+
+  /** Call before drawing a frame's threats. */
+  begin(dt: number): void {
+    this.time += dt;
+    this.used = 0;
+    this.shotUsed = 0;
+  }
+
+  /** Draw one warning (from engine/game threatOf). `friendly`: a keeper's own meteor, drawn gold. */
+  draw(t: ThreatShape, friendly = false): void {
+    if (t.shot) {
+      const m = this.shots[this.shotUsed++];
+      if (!m) return;
+      m.position.set(t.x, 0.8, t.z);
+      m.visible = true;
+      return;
+    }
+    const d = this.decals[this.used++];
+    if (!d) return;
+    const g = d.group;
+    g.visible = true;
+    g.position.set(t.x, 0.07, t.z);
+    g.rotation.set(0, 0, 0);
+    const support = t.kind === "aura";
+    const fillMat = d.fill.material as MeshBasicMaterial;
+    const edgeMat = d.edge.material as MeshBasicMaterial;
+    fillMat.color.copy(friendly ? FRIENDLY : support ? SUPPORT : DANGER);
+    edgeMat.color.copy(friendly ? FRIENDLY : support ? SUPPORT : DANGER_EDGE);
+    if (t.kind === "lane") {
+      d.fill.visible = d.edge.visible = false;
+      d.laneFill.visible = d.laneEdge.visible = true;
+      const len = t.len ?? 6;
+      const w = t.r * 2;
+      g.rotation.y = -Math.atan2(t.dz ?? 0, t.dx ?? 1);
+      // The fill grows down the lane: when it reaches the end, the charge goes.
+      d.laneEdge.scale.set(len, 1, w);
+      d.laneFill.scale.set(Math.max(0.05, len * t.progress), 1, w * 0.9);
+      return;
+    }
+    d.laneFill.visible = d.laneEdge.visible = false;
+    d.fill.visible = d.edge.visible = true;
+    d.edge.scale.setScalar(t.r);
+    // The disc fills from the centre out; a support pulse is a faint breathing ring (it warns, it does not hurt).
+    const p = support ? 0.85 + 0.15 * Math.sin(this.time * 8) : t.progress;
+    d.fill.scale.setScalar(Math.max(0.05, t.r * p));
+    fillMat.opacity = support ? 0.05 : 0.18 + 0.22 * t.progress;
+    edgeMat.opacity = support ? 0.25 : 0.9;
+  }
+
+  /** A plain ring under an entity: gold for elites, blue for a shield. */
+  mark(x: number, z: number, r: number, color: number): void {
+    const d = this.decals[this.used++];
+    if (!d) return;
+    d.group.visible = true;
+    d.group.position.set(x, 0.06, z);
+    d.group.rotation.set(0, 0, 0);
+    d.laneFill.visible = d.laneEdge.visible = d.fill.visible = false;
+    d.edge.visible = true;
+    d.edge.scale.setScalar(r);
+    (d.edge.material as MeshBasicMaterial).color.setHex(color);
+    (d.edge.material as MeshBasicMaterial).opacity = 0.9;
+  }
+
+  /** Hide what this frame did not draw. */
+  end(): void {
+    for (let i = this.used; i < this.decals.length; i++) {
+      const d = this.decals[i];
+      if (d && d.group.visible) d.group.visible = false;
+    }
+    for (let i = this.shotUsed; i < this.shots.length; i++) {
+      const m = this.shots[i];
+      if (m && m.visible) m.visible = false;
+    }
+  }
+}