@netforge/template-arena 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 NetNet Capital Management
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,34 @@
+@netforge/template-arena (VOLTYARD)
+Copyright (c) 2026 NetNet Capital Management
+
+An original game. No names, characters, maps, models, sounds or code from
+any other game or franchise.
+
+Art and sound
+- Models come from the per-style asset library
+  (@netforge/asset-library): CC0 1.0 models by Kenney (Mini
+  Characters, Blaster Kit, Space Kit, Car Kit), each pack listed with its
+  source URL and licence verification in that package's NOTICE and
+  manifest/packs.json. The files are fetched and built, never committed
+  here; the build copies only the models this game uses.
+- Fallback shapes (client/library.ts) are generated from three.js
+  primitives; all textures are drawn on a canvas at load; all sounds are
+  synthesized with WebAudio oscillators (client/audio.ts).
+
+Dependencies (unmodified, via npm)
+- three.js 0.186.1 (https://github.com/mrdoob/three.js), MIT.
+- nipplejs 1.0.4 (https://github.com/yoannmoinet/nipplejs), MIT.
+- @netforge/engine and @netforge/engine-sim (this repository);
+  see their NOTICE files (bitECS MPL-2.0, Rapier Apache-2.0, Colyseus MIT,
+  zod MIT).
+
+Patterns (ideas only)
+- The arena shooter genre's general mechanics (twin-stick aim, weapon
+  loadouts, respawns, frag limits, health drops, a scoreboard). Mechanics,
+  not expression; no level, weapon, character or text was copied from any
+  game.
+- Lag compensation for hitscan as described in Valve's public Source
+  multiplayer networking write-up (ideas only; implemented in the Net Forge
+  room server and engine-sim's arena seam).
+- Hit-stop, screen shake and damage numbers as described in common
+  game-feel talks and articles (e.g. "Juice it or lose it", GDC 2012).

package/README.md

@@ -1,3 +1,64 @@
-# Temporary Holding Version
+# VOLTYARD (Template 2: arena shooter)
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Wirejacks duel at night in a yard of humming transformers. Twin-stick: move
+with one hand, aim with the other, hold fire. Swap between an arc rifle, a
+scatter coil and a rail lance. Every kill drops a heal cell. Rounds last
+three minutes or end at 25 kills; the top of the board takes the round.
+Bots fill empty seats, so one player alone still gets a fight.
+
+| Path | What |
+|---|---|
+| `src/game.ts` | The game, as the model writes it (declarations only). |
+| `src/manifest.ts` | Loads and compiles it; `arenaAdapter()` for the room server and client. Room template `shooter`. |
+| `src/store.ts` | Store hooks on the Kit's API names (`kit.coins.*`, `kit.store.*`): three round upgrades (40, 40, 60 coins) and two finishes (300, 500 coins), shown under the token's own symbol and logo; mock until the token is live. |
+| `client/` | The browser client: three.js scene, HUD, twin-stick input (keys and mouse, gamepad, touch), game feel. |
+| `test/` | Playtest bots through `engine.test.run`, and the store. |
+| `llms.txt` | How to change the game (for agents). |
+
+## How it plays on the server
+
+- Server-authoritative at 60 Hz. Your own wirejack is predicted (move, aim,
+  weapon, cooldowns); everyone else is drawn ~100 ms in the past.
+- The rail lance is a hitscan resolved with lag compensation: the server
+  rewinds the other players to what you saw (capped at 200 ms). Rifle and
+  scatter shots are server projectiles.
+- Seat bots (`players.bots`) join while at least one person is in the
+  room and leave as people join. Against a person they react late, aim
+  loose and fire in bursts by that person's record this round, sharpening
+  as the person wins. A bot level with or ahead of the best person eases
+  off (looser aim, slower reactions, and it would rather fight other bots),
+  but bots never stop shooting and never earn. Killing a bot scores and
+  shows in the feed but pays no earn rule. Only a person reaches the frag
+  limit.
+- Spawns: out of every opponent's sight (physics raycasts) and 12 m clear,
+  with 2 s of protection on joining, respawning and each new round.
+- `test/newcomer.test.ts` plays a deliberately weak new player alone with
+  the seat bots over 10 rounds: first kill within about 20 s, no deaths
+  within 3 s of spawning, top half in most rounds without winning every
+  one, no bot reaching the frag limit. It also reports what the newcomer
+  earns per round, which alone with bots is nothing.
+- Earn: kills of people (3 and 12 in a round), a five-kill streak, and
+  topping the board with another person in the round. Bot kills and a board
+  of bots pay nothing, enforced by the engine's
+  `GameRunner` for every arena game. The room server is the referee; before graduation earn is credited
+  as points, after it the game's own coins under its own name.
+
+## Run it
+
+This template runs on your own computer with play money through
+`kit play` (`@netforge/kit-play`). From the repository root:
+
+```sh
+pnpm install --frozen-lockfile && pnpm build
+mkdir -p play-arena/src && cp packages/template-arena/src/game.ts play-arena/src/
+echo '{"template":"arena"}' > play-arena/netnet.json
+node packages/kit-play/dist/cli.js play-arena       # opens http://127.0.0.1:4663
+```
+
+Edit `play-arena/src/game.ts` and run it again to try a change. Real-token
+earning, stakes and claims run only on the hosted Net Forge server.
+
+Open the Invite link in another tab or on a phone on the same network to
+play together (`?room=<id>`). Keys: WASD, mouse aim, click fire, 1 2 3 or Q
+weapon, Space dash, Tab board. Touch: left stick moves, right stick aims and
+fires, SWAP and DASH buttons. ` shows stats.

package/client/audio.ts

@@ -0,0 +1,43 @@
+/**
+ * VOLTYARD's sound cues on the engine's FeelAudio (FeelKit). Shots, downs
+ * and heals play real CC0 samples from the asset library's audio section
+ * (ARENA_SAMPLES, loaded by the engine's SoundPlayer with a music loop);
+ * the FeelKit's own cues (impact, bigKill, hurt) take the library's samples
+ * by name. Two cues stay synthesized on purpose so you can tell them apart
+ * without looking: the hit tick and the two-note kill confirm. Every cue
+ * keeps a synth recipe as the fallback when a sample cannot load. Others'
+ * cues ("-o") are played quieter. Starts on the first user gesture.
+ */
+import type { FeelAudio } from "@netforge/engine/runtime";
+
+/** Arena cue name -> library sound id (soundBank's `cues` overrides). */
+export const ARENA_SAMPLES: Readonly<Record<string, string>> = {
+  zap: "audio.sfx.shoot",
+  "zap-o": "audio.sfx.shoot",
+  wide: "audio.sfx.shoot",
+  "wide-o": "audio.sfx.shoot",
+  down: "audio.sfx.downed",
+  "down-o": "audio.sfx.kill",
+  heal: "audio.sfx.revive",
+};
+
+export function defineArenaCues(a: FeelAudio): void {
+  a.define("zap", { wave: "square", f0: 1300, f1: 500, ms: 50, gain: 0.35 }, { minGapMs: 40, voices: 3 });
+  a.define("zap-o", { wave: "square", f0: 1300, f1: 500, ms: 50, gain: 0.35 }, { minGapMs: 40, voices: 3 });
+  a.define("wide", { wave: "square", f0: 260, f1: 60, ms: 140, gain: 0.6 }, { minGapMs: 60, voices: 2 });
+  a.define("wide-o", { wave: "square", f0: 260, f1: 60, ms: 140, gain: 0.6 }, { minGapMs: 60, voices: 2 });
+  a.define("beam", { wave: "sawtooth", f0: 1800, f1: 120, ms: 220, gain: 0.7 }, { minGapMs: 60, voices: 2 });
+  a.define("beam-o", { wave: "sawtooth", f0: 1800, f1: 120, ms: 220, gain: 0.7 }, { minGapMs: 60, voices: 2 });
+  a.define("hitmark", { wave: "triangle", f0: 2600, f1: 1900, ms: 40, gain: 0.55 }, { minGapMs: 35, voices: 2, pitchVar: 0.03 });
+  a.define("confirm", { wave: "triangle", f0: 660, f1: 990, ms: 120, gain: 0.8 }, { minGapMs: 80, voices: 2, pitchVar: 0 });
+  a.define("confirm2", { wave: "triangle", f0: 990, f1: 1980, ms: 200, gain: 0.8 }, { minGapMs: 80, voices: 2, pitchVar: 0 });
+  a.define("down-o", { wave: "triangle", f0: 520, f1: 260, ms: 160, gain: 0.3 }, { minGapMs: 120, voices: 2 });
+  a.define("down", { wave: "sawtooth", f0: 300, f1: 40, ms: 600, gain: 0.8 }, { minGapMs: 300, voices: 1 });
+  a.define("heal", { wave: "sine", f0: 440, f1: 880, ms: 180, gain: 0.6 }, { minGapMs: 150, voices: 1 });
+}
+
+/** Our kill: two rising notes. */
+export function killConfirm(a: FeelAudio): void {
+  a.play("confirm");
+  setTimeout(() => a.play("confirm2"), 90);
+}

package/client/decor.ts

@@ -0,0 +1,22 @@
+/**
+ * Library models the VOLTYARD scene draws on its own (template machinery,
+ * not game content). The build copies these with the models game.ts uses.
+ */
+/** Seat bots: a different townsperson from the players' model. */
+export const BOT_MODEL = "style.lowpoly.mini_male_e";
+/** The blaster every wirejack holds. */
+export const HELD_MODEL = "style.lowpoly.blaster_h";
+/** Each transformer pillar: a generator machine. */
+export const PILLAR_MODEL = "style.lowpoly.generator";
+/** Wirejacks are drawn this tall, m. */
+export const PLAYER_HEIGHT = 1.9;
+
+/** [library id, height m, how many] parked outside the fence. */
+export const YARD_DECOR: readonly (readonly [string, number, number])[] = [
+  ["style.lowpoly.truck_flat", 2, 3],
+  ["style.lowpoly.van", 2, 3],
+  ["style.lowpoly.barrels", 1.3, 6],
+  ["style.lowpoly.satellite_dish", 3.2, 2],
+];
+
+export const SCENE_MODELS: readonly string[] = [BOT_MODEL, HELD_MODEL, PILLAR_MODEL, ...YARD_DECOR.map(([id]) => id)];

package/client/host.ts

@@ -0,0 +1,96 @@
+/**
+ * Net Forge as host. Framed by Net Forge, the page URL carries
+ * the Kit flags and the host posts one message; played on its own, none of
+ * this applies and the game behaves exactly as before.
+ *
+ *   ?host=netnet       the host draws Invite and sign-in; the game hides its own
+ *   ?coin=TICKER       the coin the HUD names (2 to 6 capitals or digits)
+ *   ?title=NAME        the game's own name for the wordmark and the tab title
+ *   ?player=guest      no wallet is connected: play pays nothing, and the HUD
+ *                      says "not earning" instead of a balance
+ *   ?player=play       the token has not launched: coins are play money
+ *
+ * The player flag changes while the game runs (a wallet connects), so the
+ * host also posts { kind: "netnet-kit", type: "player", mode }. Only the
+ * parent window is listened to, and only when the URL says it is the host.
+ */
+
+export type PlayerMode = "earning" | "guest" | "play";
+
+export interface HostFlags {
+  /** Framed by Net Forge. */
+  readonly framed: boolean;
+  /** The coin's ticker, when the host names one. */
+  readonly coin: string | null;
+  /** The game's own name, when the host names one. */
+  readonly title: string | null;
+  /** What play pays the person at the screen. Standalone play is "earning" (the game's own kit decides). */
+  readonly player: PlayerMode;
+}
+
+const TICKER_RE = /^[A-Z0-9]{2,6}$/;
+
+export function hostFlags(params: URLSearchParams): HostFlags {
+  const framed = params.get("host") === "netnet";
+  const coin = params.get("coin");
+  // eslint-disable-next-line no-control-regex
+  const title = (params.get("title") ?? "").replace(/[\u0000-\u001f\u007f]/g, " ").replace(/\s+/g, " ").trim().slice(0, 40);
+  const player = params.get("player");
+  return {
+    framed,
+    coin: coin && TICKER_RE.test(coin) ? coin : null,
+    title: title || null,
+    player: framed && (player === "guest" || player === "play") ? player : "earning",
+  };
+}
+
+/**
+ * The player mode the host named on the URL, or null when it named none (a
+ * connected player on a live game gets no flag, only the posted message) or
+ * the page is not framed by Net Forge.
+ */
+export function namedPlayer(params: URLSearchParams): PlayerMode | null {
+  if (params.get("host") !== "netnet") return null;
+  const player = params.get("player");
+  return player === "earning" || player === "guest" || player === "play" ? player : null;
+}
+
+/**
+ * The store's note under its prices, from one source of truth. Once the host
+ * has named the player mode (on the URL or in a message), that mode decides,
+ * exactly as it does for the coin box: a live game never calls its coins play
+ * money. Standalone play, or a host that names no mode (the studio's drafts),
+ * keeps the room's own word (`welcome.earnLive`).
+ */
+export function storeNote(hostMode: PlayerMode | null, earnLive: boolean, symbol: string): string {
+  if (hostMode === "play") return "Play money until launch";
+  if (hostMode === "guest") return `Connect a wallet to earn ${symbol}`;
+  if (hostMode === "earning") return "";
+  return earnLive ? "" : "Play money until launch";
+}
+
+/** A host message, checked: anything else is ignored. */
+export function playerFrom(data: unknown): PlayerMode | null {
+  if (typeof data !== "object" || data === null) return null;
+  const m = data as Record<string, unknown>;
+  if (m["kind"] !== "netnet-kit" || m["type"] !== "player") return null;
+  const mode = m["mode"];
+  return mode === "earning" || mode === "guest" || mode === "play" ? mode : null;
+}
+
+/** Calls `cb` with each player mode the host posts. Framed pages only. */
+export function onHostPlayer(flags: HostFlags, cb: (mode: PlayerMode) => void): void {
+  if (!flags.framed || window.parent === window) return;
+  window.addEventListener("message", (e: MessageEvent<unknown>) => {
+    if (e.source !== window.parent) return;
+    const mode = playerFrom(e.data);
+    if (mode) cb(mode);
+  });
+}
+
+/** Tells the host the game is up, so it can post the current player mode. */
+export function postReady(flags: HostFlags): void {
+  if (!flags.framed || window.parent === window) return;
+  // The host's origin is not known to an opaque-origin frame; the message is one public flag.
+  window.parent.postMessage({ kind: "netnet-kit", type: "ready" }, "*");
+}

package/client/hud.ts

@@ -0,0 +1,330 @@
+/**
+ * The HUD: plain DOM over the canvas. Text updates are
+ * throttled; bars move every frame with transforms. Copy is labels, not
+ * sentences.
+ */
+import { BOT_PLAYER_BASE, EntityFlag, maxHealthFor, selectedSlot, slotWeapon } from "@netforge/engine-sim";
+import type { ResolvedSimConfig } from "@netforge/engine-sim";
+import { F, PLAYER_UNITS } from "@netforge/engine/game";
+import type { CompiledGame, RunInfo } from "@netforge/engine/game";
+import type { SceneEntity } from "./scene.js";
+import { RULE_NAMES, TITLE, UPGRADE_NAMES, WEAPON_NAMES } from "./names.js";
+import { css, playerColor } from "./palette.js";
+
+const $ = <T extends HTMLElement = HTMLElement>(id: string): T => {
+  const e = document.getElementById(id);
+  if (!e) throw new Error(`#${id} missing`);
+  return e as T;
+};
+
+const mmss = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
+
+/** Seat bots go by first names (the full board still marks them as bots). */
+export const BOT_NAMES = ["Mara", "Dex", "Juno", "Rook", "Vega", "Nico", "Tamsin", "Ozzy", "Lark", "Remy", "Sable", "Bram", "Ivy", "Cass", "Wren", "Kit"];
+
+/** Short player labels: YOU, P2, or a seat bot's name. */
+export function playerLabel(id: number, self: number): string {
+  if (id === self) return "YOU";
+  return id >= BOT_PLAYER_BASE ? (BOT_NAMES[(id - BOT_PLAYER_BASE) % BOT_NAMES.length] ?? "Bot").toUpperCase() : `P${id}`;
+}
+
+/** Off-screen opponents within this many metres get an edge arrow. */
+const ARROW_RANGE = 45;
+
+export interface HudCallbacks {
+  pickWeapon(slot: number): void;
+  invite(): void;
+  toggleStore(): void;
+  toggleSound(): boolean;
+}
+
+export class Hud {
+  private lastText = 0;
+  private readonly earnedThisRun = new Map<string, number>();
+  private toastTimer = 0;
+  private lastRun = 0;
+  private symbol = "";
+  /** What play pays here (client/host.ts): a guest in Net Forge earns nothing, and the HUD says so. */
+  private mode: "earning" | "guest" | "play" = "earning";
+  private slotKey = "";
+  private boardOpen = false;
+  private readonly cdTicks: number[];
+
+  constructor(
+    private readonly game: CompiledGame,
+    private readonly config: ResolvedSimConfig,
+    private readonly selfPlayer: number,
+    private readonly cb: HudCallbacks,
+  ) {
+    $("invite").addEventListener("click", () => cb.invite());
+    $("store-btn").addEventListener("click", () => cb.toggleStore());
+    $("store-close").addEventListener("click", () => cb.toggleStore());
+    // The label names the current state. Sound starts on, so the first click mutes and reads "Sound off".
+    $("sound").textContent = "Sound on";
+    $("sound").addEventListener("click", () => {
+      $("sound").textContent = cb.toggleSound() ? "Sound off" : "Sound on";
+    });
+    $("title").textContent = TITLE.toUpperCase();
+    this.cdTicks = config.content.weapons.map((w) => w.cooldownTicks);
+    // Weapon slots: one card per loadout weapon.
+    const slots = $("slots");
+    slots.innerHTML = "";
+    game.loadout.forEach((wi, s) => {
+      const id = game.weaponIds[wi] ?? "";
+      const card = document.createElement("button");
+      card.className = "slot";
+      card.id = `slot${s}`;
+      card.innerHTML = `<kbd>${s + 1}</kbd><b></b><span></span><i class="cd"><i></i></i>`;
+      (card.querySelector("b") as HTMLElement).textContent = WEAPON_NAMES[id]?.name ?? id;
+      (card.querySelector("span") as HTMLElement).textContent = WEAPON_NAMES[id]?.line ?? "";
+      card.addEventListener("click", () => cb.pickWeapon(s));
+      slots.append(card);
+    });
+    // Tab holds the full board open; the corner keeps only the top three and your own row.
+    addEventListener("keydown", (e) => {
+      if (e.code === "Tab") {
+        e.preventDefault();
+        this.boardOpen = true;
+        $("board-full").classList.add("open");
+      }
+    });
+    addEventListener("keyup", (e) => {
+      if (e.code === "Tab") {
+        this.boardOpen = false;
+        $("board-full").classList.remove("open");
+      }
+    });
+  }
+
+  /** Names the coin everywhere the HUD shows it: the token's own name, symbol and logo. */
+  coin(name: string, symbol: string, logo: string | null): void {
+    this.symbol = symbol;
+    const img = $<HTMLImageElement>("coin-logo");
+    if (logo) {
+      img.src = logo;
+      img.alt = name;
+      img.hidden = false;
+    } else img.hidden = true;
+    $("coin-name").textContent = name;
+  }
+
+  get coinSymbol(): string {
+    return this.symbol;
+  }
+
+  /** The wordmark: the game's own name (Net Forge names it), else the template's. */
+  title(name: string): void {
+    $("title").textContent = name.toUpperCase();
+  }
+
+  /**
+   * What play pays the person at the screen. A guest (no wallet in
+   * Net Forge) sees "not earning" where the balance was, and earn toasts say
+   * how to get paid; play money says so.
+   */
+  player(mode: "earning" | "guest" | "play"): void {
+    this.mode = mode;
+    const box = $("coin-box");
+    box.classList.toggle("guest", mode === "guest");
+    box.classList.toggle("play", mode === "play");
+    box.title = mode === "guest" ? `Connect a wallet to earn ${this.symbol}` : mode === "play" ? `${this.symbol} has not launched: coins are play money` : "";
+    this.lastText = 0;
+  }
+
+  /** The coin box's text: the balance, or "VOLT · not earning" for a guest (play money gets a caption in CSS). */
+  private balanceText(balance: number): string {
+    if (this.mode === "guest") return `${this.symbol} · not earning`;
+    return `${Math.floor(balance).toLocaleString("en-US")} ${this.symbol}`;
+  }
+
+  earned(rule: string, units: number): void {
+    this.earnedThisRun.set(rule, (this.earnedThisRun.get(rule) ?? 0) + units);
+    const pay = this.game.manifest.earnRules.get(rule)?.pay ?? 0;
+    const name = RULE_NAMES[rule] ?? rule;
+    this.toast(this.mode === "guest" ? `${name}  Connect to earn ${pay * units} ${this.symbol}` : `${name}  +${pay * units} ${this.symbol}`);
+  }
+
+  toast(text: string): void {
+    const t = $("toast");
+    t.textContent = text;
+    t.classList.add("show");
+    clearTimeout(this.toastTimer);
+    this.toastTimer = window.setTimeout(() => t.classList.remove("show"), 2400);
+  }
+
+  /** Every frame. `self` is the predicted character; `players` every wirejack in view (others interpolated). */
+  update(
+    now: number,
+    self: SceneEntity | undefined,
+    players: readonly SceneEntity[],
+    run: RunInfo | null,
+    project: (x: number, y: number, z: number) => { x: number; y: number; onScreen: boolean },
+    balance: number,
+  ): void {
+    if (run && run.run !== this.lastRun) {
+      this.lastRun = run.run;
+      this.earnedThisRun.clear();
+    }
+    const text = now - this.lastText > 100;
+    if (self) {
+      const hp = self.values[F.health] ?? 0;
+      const max = maxHealthFor(this.config, self.values[F.stats] ?? 0);
+      $("hp-fill").style.transform = `scaleX(${Math.min(1, hp / Math.max(1, max))})`;
+      const dead = ((self.values[F.flags] ?? 0) & EntityFlag.Dead) !== 0;
+      $("down").classList.toggle("show", dead && run?.phase === "playing");
+      // Weapon slots: the selected one lit, cooldowns as bars.
+      const weapons = self.values[F.weapons] ?? 0;
+      const wcd = self.values[F.wcd] ?? 0;
+      const slot = selectedSlot(self.values[F.choices] ?? 0);
+      for (let s = 0; s < this.game.loadout.length; s++) {
+        const card = document.getElementById(`slot${s}`);
+        if (!card) continue;
+        const wi = slotWeapon(weapons, s);
+        const full = this.cdTicks[wi] ?? 1;
+        const cd = (wcd >>> (s * 8)) & 0xff;
+        (card.querySelector(".cd > i") as HTMLElement | null)?.style.setProperty("transform", `scaleX(${Math.min(1, cd / full)})`);
+      }
+      const key = String(slot);
+      if (key !== this.slotKey) {
+        this.slotKey = key;
+        for (let s = 0; s < this.game.loadout.length; s++) document.getElementById(`slot${s}`)?.classList.toggle("on", s === slot);
+      }
+      if (text) {
+        $("hp-text").textContent = `${hp}`;
+        if (dead) $("down-sub").textContent = `${Math.max(1, Math.ceil((self.values[F.cooldown] ?? 0) / this.config.tickRate))}s`;
+        // Store upgrades this round.
+        const stats = self.values[F.stats] ?? 0;
+        const active = this.game.upgradeIds.filter((_, i) => ((stats >>> (i * 4)) & 0x0f) > 0).map((id) => UPGRADE_NAMES[id]?.name ?? id);
+        $("buffs").textContent = active.join("  ");
+      }
+    }
+    if (text) $("coin-balance").textContent = this.balanceText(balance);
+
+    // Name tags and health over every other wirejack on screen; an edge arrow for each one nearby but off screen.
+    const tags = $("tags");
+    const arrows = $("arrows");
+    const sx = (self?.values[F.px] ?? 0) / PLAYER_UNITS;
+    const sz = (self?.values[F.pz] ?? 0) / PLAYER_UNITS;
+    const w = innerWidth;
+    const h = innerHeight;
+    let ti = 0;
+    let ai = 0;
+    for (const p of players) {
+      if (self && p.owner === self.owner) continue;
+      if (((p.values[F.flags] ?? 0) & EntityFlag.Dead) !== 0) continue;
+      const px = (p.values[F.px] ?? 0) / PLAYER_UNITS;
+      const pz = (p.values[F.pz] ?? 0) / PLAYER_UNITS;
+      const s = project(px, 2.4, pz);
+      if (!s.onScreen) {
+        const dist = Math.hypot(px - sx, pz - sz);
+        if (!self || dist > ARROW_RANGE) continue;
+        // From the screen centre toward the opponent, pinned inside the HUD margins (the weapon cards sit at the bottom).
+        const dx = s.x - w / 2;
+        const dy = s.y - h / 2;
+        const hx = w / 2 - 34;
+        const hy = dy < 0 ? h / 2 - 80 : h / 2 - 118;
+        const k = Math.min(hx / Math.max(1e-3, Math.abs(dx)), hy / Math.max(1e-3, Math.abs(dy)));
+        let a = arrows.children[ai] as HTMLElement | undefined;
+        if (!a) {
+          a = document.createElement("i");
+          arrows.append(a);
+        }
+        ai++;
+        const near = 1 - Math.min(1, Math.max(0, (dist - 12) / (ARROW_RANGE - 12)));
+        a.style.setProperty("--c", css(playerColor(p.owner)));
+        a.style.opacity = (0.45 + 0.55 * near).toFixed(2);
+        a.style.transform = `translate(${(w / 2 + dx * k).toFixed(1)}px, ${(h / 2 + dy * k).toFixed(1)}px) rotate(${Math.atan2(dy, dx).toFixed(3)}rad) scale(${(0.8 + 0.5 * near).toFixed(2)})`;
+        continue;
+      }
+      let t = tags.children[ti] as HTMLElement | undefined;
+      if (!t) {
+        t = document.createElement("div");
+        t.className = "tag";
+        t.innerHTML = "<span></span><i><i></i></i>";
+        tags.append(t);
+      }
+      ti++;
+      const max = maxHealthFor(this.config, p.values[F.stats] ?? 0);
+      t.style.transform = `translate(${s.x}px, ${s.y}px) translate(-50%, -100%)`;
+      t.style.setProperty("--c", css(playerColor(p.owner)));
+      const label = playerLabel(p.owner, this.selfPlayer);
+      const span = t.firstElementChild as HTMLElement;
+      if (span.textContent !== label) span.textContent = label;
+      ((t.lastElementChild as HTMLElement).firstElementChild as HTMLElement).style.transform = `scaleX(${Math.min(1, (p.values[F.health] ?? 0) / Math.max(1, max))})`;
+    }
+    while (tags.children.length > ti) tags.lastElementChild?.remove();
+    while (arrows.children.length > ai) arrows.lastElementChild?.remove();
+
+    if (text) {
+      this.lastText = now;
+      if (run) {
+        const left = run.round?.left ?? 0;
+        $("timer").textContent = mmss(left);
+        $("timer").classList.toggle("low", left <= 15 && run.phase === "playing");
+        $("goal").textContent = run.round?.frags ? `FIRST TO ${run.round.frags}` : "MOST KILLS";
+        this.board(run);
+        this.feed(run);
+        this.end(run);
+      }
+    }
+  }
+
+  /** Kills first; on a tie a person ranks above a seat bot (bots never take the round). */
+  private standings(run: RunInfo) {
+    return [...run.players].sort((a, b) => b.kills - a.kills || Number(a.bot) - Number(b.bot) || a.deaths - b.deaths || a.id - b.id);
+  }
+
+  private board(run: RunInfo): void {
+    const all = this.standings(run);
+    const rank = all.findIndex((p) => p.id === this.selfPlayer);
+    const row = (p: RunInfo["players"][number], i: number, full: boolean) => {
+      const me = p.id === this.selfPlayer ? ' class="me"' : "";
+      const tag = full && p.bot ? '<i class="bot">BOT</i>' : "";
+      return `<li${me} style="--c:${css(playerColor(p.id))}"><em>${i + 1}</em><span class="dot"></span>${playerLabel(p.id, this.selfPlayer)}${tag}<b>${p.kills}</b>${full ? `<small>${p.deaths}</small>` : ""}</li>`;
+    };
+    // The corner: the top three, and your own row when you are lower.
+    const mini = all
+      .map((p, i) => ({ p, i }))
+      .filter(({ i }) => i < 3 || i === rank)
+      .map(({ p, i }) => row(p, i, false))
+      .join("");
+    const list = $("board");
+    if (list.innerHTML !== mini) list.innerHTML = mini;
+    if (!this.boardOpen) return;
+    const html = `<li class="head"><em></em><span></span>PLAYER<b>K</b><small>D</small></li>${all.map((p, i) => row(p, i, true)).join("")}`;
+    const full = $("board-full");
+    if (full.innerHTML !== html) full.innerHTML = html;
+  }
+
+  private feed(run: RunInfo): void {
+    const items = run.feed
+      .filter((f) => f.ago < 6)
+      .slice(-4)
+      .map((f) => `<li><span style="color:${css(playerColor(f.by))}">${playerLabel(f.by, this.selfPlayer)}</span><i>&#x2715;</i><span style="color:${css(playerColor(f.victim))}">${playerLabel(f.victim, this.selfPlayer)}</span></li>`);
+    const html = items.join("");
+    const list = $("feed");
+    if (list.innerHTML !== html) list.innerHTML = html;
+  }
+
+  private end(run: RunInfo): void {
+    const el = $("end");
+    const show = run.phase !== "playing";
+    el.classList.toggle("show", show);
+    if (!show) return;
+    // The round goes to the best person in it; a seat bot never takes it.
+    const top = this.standings(run).find((p) => !p.bot);
+    $("end-title").textContent = top && top.kills > 0 ? (top.id === this.selfPlayer ? "TOP OF THE YARD" : `${playerLabel(top.id, this.selfPlayer)} TAKES IT`) : "ROUND OVER";
+    $("end-board").innerHTML = this.standings(run)
+      .slice(0, 8)
+      .map((p, i) => `<li${p.id === this.selfPlayer ? ' class="me"' : ""}><em>${i + 1}</em>${playerLabel(p.id, this.selfPlayer)}<b>${p.kills}</b><small>${p.deaths}</small></li>`)
+      .join("");
+    const earned = [...this.earnedThisRun].map(([r, u]) => `<li>${RULE_NAMES[r] ?? r}<b>+${(this.game.manifest.earnRules.get(r)?.pay ?? 0) * u} ${this.symbol}</b></li>`);
+    $("end-earned").innerHTML =
+      (earned.length > 0 ? earned.join("") : "<li>No earn this round</li>") + (this.mode === "guest" && earned.length > 0 ? `<li class="guest">Not paid: connect a wallet to earn ${this.symbol}</li>` : "");
+    $("end-next").textContent = run.nextRunIn !== null ? `Next round ${run.nextRunIn}s` : "";
+  }
+
+  stats(text: string): void {
+    $("stats").textContent = text;
+  }
+}