607c661
@@ -2,11 +2,12 @@
Five attackers with the spike, five defenders, abilities on cooldown. First to 13.
A top-down 5v5 played in a browser. One match is always running on the
server: open the page and you are given a seat in the round that is
happening, taken from a bot where it stands. When a match ends it shows the
result for a few seconds and starts a new one, so nobody ever arrives at a
frozen board.
A 5v5 played in a browser, from inside the player's head — the map is a tile
grid and the view is a raycaster over it, so there is no 3D library and no
dependency at all. One match is always running on the server: open the page
and you are given a seat in the round that is happening, taken from a bot
where it stands. When a match ends it shows the result for a few seconds and
starts a new one, so nobody ever arrives at a frozen board.
## What is real
@@ -31,6 +32,10 @@
server:
- **Credits.** 800 to start, 9,000 cap, +200 a kill, +300 to the team on a
  plant, loss bonus 1,900 / 2,400 / 2,900. A buy you cannot afford is
  refused server-side.
- **Who is alive.** The roster under the view lists your five with their
  health from the snapshot's own team data, and the kill feed is derived in
  `src/arena.ts` by comparing the players either side of a tick — it carries
  names, the gun and an age, and never a position.
- **Bots** fill every empty seat and use their kit: smokes on the way in,
  flashes before the entry, a recon dart, a molly on the planted spike.
@@ -42,20 +47,30 @@
Guns: Classic, Ghost, Sheriff, Spectre, Phantom, Vandal, Operator.
## What is not
- The view is a raycaster: walls are one tile tall and flat-shaded, there is
  no looking up or down, and everything that is not a wall — bodies, the
  spike, ability zones — is a flat billboard scaled by distance and clipped
  against the walls.
- One map, one match at a time, ten seats. There is no matchmaking, no
  ranking and no account: your seat belongs to a session cookie.
- No overtime — first to 13 ends it at 12–12 too.
- Sight is a full circle rather than a view cone; top-down has no vertical,
  so the hit location comes from how precisely the shot passes the target.
- Sight is a full circle rather than a view cone — you are drawn what is in
  front of you, but the server reveals anything you have line of sight to,
  so a team mate behind you still appears on the minimap. The world has no
  vertical, so the hit location comes from how precisely the shot passes
  the target.
- Assists are counted as a field but never awarded.
- The live match lives in memory and is gone if the process restarts; only
  finished match results are written to SQLite under `FORGE_APP_DATA`.
## Playing
WASD move, the mouse aims, click fires, **R** reloads, **F** plants and
defuses (hold it), **C / Q / E / X** cast, **B** opens the buy. On a phone
the left thumb walks and the right thumb aims and fires.
Click the view to capture the mouse, then WASD move and the mouse looks;
**Esc** gives the pointer back. Click fires, **R** reloads, **F** plants and
defuses (hold it), **C / Q / E / X** cast, **B** opens the buy, **Tab**
holds the big map open, **V** swaps to the top-down view and **H** or **?**
brings back the how-to-play card. On a phone it stays top-down: the left
thumb walks and the right thumb aims and fires.
```sh
PORT=8080 FORGE_APP_DATA=./data bun run src/server.ts   # run it here
@@ -77,6 +92,9 @@
says how.
`src/economy.ts` credits · `src/abilities.ts` the agent kits ·
`src/match.ts` the round loop (`tick(state, dt)` is the whole game and takes
no clock) · `src/bots.ts` the seats nobody is in · `src/arena.ts` the one
live match and its sockets · `src/server.ts` the door · `static/val.js` the
browser. The rules are pure functions and the tests play whole matches
live match and its sockets · `src/server.ts` the door · `static/` the browser client —
`val.js` wires the socket, the keys and the HUD, `raycast.js` is the ray
maths, `scene.js` the first-person view, `topdown.js` the minimap,
`gun.js`, `beep.js`, `steer.js`, `roster.js` and `prompt.js` the rest; the server bundles
them into one content-named file at start-up. The rules are pure functions and the tests play whole matches
headlessly.
@@ -13,6 +13,7 @@
import { agentById, sightBlocked } from "./abilities.ts";
import { runBots } from "./bots.ts";
import { recordResult } from "./db.ts";
import { fallsBetween, marksOf, trimFeed, type Fall, type Mark } from "./killfeed.ts";
import type { Point } from "./map.ts";
import {
  buyAbility,
@@ -25,7 +26,7 @@
import {
  visible,
} from "./match.ts";
import type { MatchState, Player } from "./state.ts";
import { isWeaponId } from "./weapons.ts";
import { isWeaponId, WEAPONS } from "./weapons.ts";
export const TICK = 1 / 30;
const BROADCAST_EVERY = 2;
@@ -36,17 +37,40 @@
let state: MatchState = newMatch();
const seats = new Map<string, Seat>();
let ticks = 0;
let lastResult: string | null = null;
// The kill feed is read off the match a tick at a time; the rules keep no
// list of their own, and this is a view, not a rule.
let marks: Mark[] = marksOf(state.players);
let feed: Fall[] = [];
export const match = (): MatchState => state;
export const findPlayer = (id: string): Player | undefined => state.players.find((p) => p.id === id);
/**
 * A name nobody else in this match is using.
 *
 * The kill feed, the round log and the scoreboard all address people by
 * name: two players called Kit make a line that reads as a team kill this
 * game cannot have. The bots are dealt distinct names; a person who picks
 * one that is taken gets a number after it, inside the sixteen characters a
 * name is allowed.
 */
function freeName(want: string, exceptId: string): string {
  const taken = new Set(state.players.filter((p) => p.id !== exceptId).map((p) => p.name));
  if (!taken.has(want)) return want;
  for (let n = 2; n < 100; n++) {
    const tried = `${want.slice(0, 13)} ${n}`;
    if (!taken.has(tried)) return tried;
  }
  return want;
}
/** Sit somebody down in the emptiest team, replacing a bot where it stands. */
export function takeSeat(session: string, name: string): Player | null {
  const existing = seats.get(session);
  const held = existing ? findPlayer(existing.playerId) : undefined;
  if (held) {
    held.name = name;
    held.name = freeName(name, held.id);
    return held;
  }
  const humans = { red: 0, blue: 0 };
@@ -56,7 +80,7 @@
export function takeSeat(session: string, name: string): Player | null {
    state.players.find((p) => p.bot && p.team === wanted) ?? state.players.find((p) => p.bot);
  if (!seat) return null;
  seat.bot = false;
  seat.name = name;
  seat.name = freeName(name, seat.id);
  seat.think = 0;
  seat.input = { mx: 0, my: 0, angle: seat.angle, fire: false, use: false, reload: false, cast: null };
  return seat;
@@ -211,14 +235,47 @@
export function snapshot(viewerId: string): string {
      ultNeeds: agentById(p.agent).abilities.x.points,
    })),
    events: state.events.slice(0, 5).map((e) => e.text),
    // Names and a gun, never a position: the feed says what happened, not
    // where, so it can never be read as a call-out.
    feed: feed.map((f) => ({
      k: f.killer,
      v: f.victim,
      w: f.weapon ? WEAPONS[f.weapon].name : null,
      h: f.headshot,
      t: round2(Math.max(0, state.now - f.at)),
    })),
  });
}
/**
 * Who fell on this tick. A shot that landed this tick and started where the
 * killer stands is what tells a gun kill from an ability kill — the position
 * is used here and goes no further.
 */
function readFalls(): void {
  const after = marksOf(state.players);
  const shooters = new Set<string>();
  for (const shot of state.shots) {
    if (!shot.hit || shot.age > 0) continue;
    for (const player of state.players)
      if (Math.hypot(player.x - shot.x1, player.y - shot.y1) < 2) shooters.add(player.id);
  }
  const falls = fallsBetween(marks, after, {
    at: state.now,
    events: state.events.slice(0, 6).map((e) => e.text),
    shooters,
  });
  marks = after;
  if (falls.length) feed = [...feed, ...falls];
  feed = trimFeed(feed, state.now);
}
// ----------------------------------------------------------------- the loop
function step(): void {
  runBots(state, TICK);
  tick(state, TICK);
  readFalls();
  if (state.result && state.result !== lastResult) {
    lastResult = state.result;
    recordResult(state.result, state.score.red, state.score.blue, state.round);
@@ -0,0 +1,24 @@
import { expect, test } from "bun:test";
import { beepInterval, beepPitch, makeBeeper } from "../static/beep.js";
test("the spike beeps faster as the fuse burns down", () => {
  expect(beepInterval(45)).toBeGreaterThan(beepInterval(20));
  expect(beepInterval(20)).toBeGreaterThan(beepInterval(5));
  expect(beepInterval(1)).toBeGreaterThanOrEqual(0.12);
  expect(beepInterval(45)).toBeLessThanOrEqual(1);
});
test("a spent fuse does not beep at all", () => {
  expect(beepInterval(0)).toBe(0);
});
test("and it rises in pitch on the way", () => {
  expect(beepPitch(2)).toBeGreaterThan(beepPitch(40));
});
test("nothing is played before the browser has had a gesture", () => {
  const beeper = makeBeeper();
  // No AudioContext in this runtime: update must be a no-op, not a throw.
  expect(() => beeper.update(true, 30, 1)).not.toThrow();
  expect(() => beeper.wake()).not.toThrow();
});
@@ -0,0 +1,259 @@
/**
 * The client, played.
 *
 * The bundle the browser is served is loaded here against a stub document
 * and a canvas that only writes down what it was told to draw, and pointed
 * at the running server over a real socket. It is not a browser, but it is
 * the whole path a person takes: connect, take a snapshot, paint the HUD,
 * draw a frame, press a key, send an input back.
 */
import { expect, test } from "bun:test";
import { mkdtempSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
process.env.FORGE_APP_DATA ??= mkdtempSync(join(tmpdir(), "app-"));
process.env.PORT ??= "0";
const { server } = await import("./server.ts");
const base = `http://${server.hostname}:${server.port}`;
// ------------------------------------------------------------ the stub DOM
const drawn: string[] = [];
const listeners = new Map<string, ((event: unknown) => void)[]>();
const frames: ((now: number) => void)[] = [];
const noop = () => {};
const context = () =>
  new Proxy(
    {
      measureText: (text: string) => ({ width: text.length * 6 }),
      createLinearGradient: () => ({ addColorStop: noop }),
    } as Record<string, unknown>,
    {
      get(target, prop: string) {
        if (prop in target) return target[prop];
        if (prop === "fillStyle" || prop === "strokeStyle" || prop === "font" || prop === "textAlign") return "";
        if (prop === "globalAlpha" || prop === "lineWidth") return 1;
        return (...args: unknown[]) => drawn.push(`${prop}(${args.length})`);
      },
      set: () => true,
    },
  );
function element(id: string, attrs: Record<string, string> = {}) {
  const node: Record<string, unknown> = {
    id,
    dataset: { ...attrs },
    style: {},
    textContent: "",
    title: "",
    disabled: false,
    type: "",
    children: [] as unknown[],
    classList: {
      on: new Set<string>(),
      add(name: string) {
        (this.on as Set<string>).add(name);
      },
      remove(name: string) {
        (this.on as Set<string>).delete(name);
      },
      toggle(name: string, force?: boolean) {
        const on = force ?? !(this.on as Set<string>).has(name);
        if (on) (this.on as Set<string>).add(name);
        else (this.on as Set<string>).delete(name);
        return on;
      },
      contains(name: string) {
        return (this.on as Set<string>).has(name);
      },
    },
    events: new Map<string, ((event: unknown) => void)[]>(),
    addEventListener(kind: string, fn: (event: unknown) => void) {
      const map = node.events as Map<string, ((event: unknown) => void)[]>;
      map.set(kind, [...(map.get(kind) ?? []), fn]);
    },
    append(...kids: unknown[]) {
      (node.children as unknown[]).push(...kids);
    },
    replaceChildren(...kids: unknown[]) {
      node.children = kids;
    },
    getBoundingClientRect: () => ({ left: 0, top: 0, width: 900, height: 570 }),
    getContext: () => context(),
    requestPointerLock: noop,
    setPointerCapture: noop,
    width: 900,
    height: 570,
  };
  return node;
}
const click = (node: Record<string, unknown>) => {
  for (const fn of (node.events as Map<string, ((e: unknown) => void)[]>).get("click") ?? []) fn({});
};
const press = (code: string, key = "") => {
  for (const fn of listeners.get("keydown") ?? []) fn({ code, key, target: {}, preventDefault: noop });
};
const nodes = new Map<string, Record<string, unknown>>();
for (const id of [
  "view", "conn", "clock", "phase", "hp", "gun", "creds", "ultmeter", "kit", "buy", "buytoggle",
  "viewtoggle", "helptoggle", "helpclose", "help", "prompt", "flash", "dead", "aimhint", "stage",
  "log", "atkboard", "defboard", "helpagents", "roster", "feed",
])
  nodes.set(id, element(id));
const buys = [
  element("b1", { buy: "vandal", cost: "2900" }),
  element("b2", { buy: "c", cost: "0" }),
  element("b3", { buy: "q", cost: "0" }),
];
const agentButtons = [element("a1", { agent: "veil" })];
const scoreRed = element("red");
const scoreBlue = element("blue");
Object.assign(globalThis, {
  document: {
    getElementById: (id: string) => nodes.get(id) ?? null,
    querySelector: (sel: string) => (sel.includes("red") ? scoreRed : scoreBlue),
    querySelectorAll: (sel: string) => (sel.includes("data-buy") ? buys : agentButtons),
    createElement: (tag: string) => element(tag),
    addEventListener: noop,
    pointerLockElement: null,
    exitPointerLock: noop,
  },
  HTMLInputElement: class {},
  matchMedia: () => ({ matches: false }),
  devicePixelRatio: 1,
  localStorage: {
    store: new Map<string, string>(),
    getItem(key: string) {
      return this.store.get(key) ?? null;
    },
    setItem(key: string, value: string) {
      this.store.set(key, value);
    },
  },
  requestAnimationFrame: (fn: (now: number) => void) => frames.push(fn),
  addEventListener: (kind: string, fn: (event: unknown) => void) => {
    listeners.set(kind, [...(listeners.get(kind) ?? []), fn]);
  },
  location: new URL(base),
});
// Relative fetches, the way a page makes them.
const realFetch = globalThis.fetch;
globalThis.fetch = ((input: string, init?: RequestInit) =>
  realFetch(typeof input === "string" && input.startsWith("/") ? base + input : input, init)) as typeof fetch;
const runFrame = () => {
  const pending = frames.splice(0, frames.length);
  for (const fn of pending) fn(performance.now());
};
const until = async (what: () => boolean, ms = 4000) => {
  const stop = Date.now() + ms;
  while (Date.now() < stop) {
    runFrame();
    if (what()) return true;
    await Bun.sleep(20);
  }
  return false;
};
// ------------------------------------------------------------------ the run
test("the bundled client connects, paints the HUD and draws a frame", async () => {
  const page = await (await fetch(base + "/")).text();
  const src = /src="(\/static\/val\.[0-9a-f]+\.js)"/.exec(page)![1]!;
  const script = await (await fetch(base + src)).text();
  const path = join(process.env.FORGE_APP_DATA!, "client.mjs");
  await Bun.write(path, script);
  await import(path);
  expect(await until(() => nodes.get("conn")!.textContent === "live")).toBe(true);
  expect(await until(() => String(nodes.get("hp")!.textContent).includes("hp"))).toBe(true);
  // The HUD says what the match says.
  expect(String(nodes.get("phase")!.textContent)).toContain("round");
  expect(String(nodes.get("creds")!.textContent)).toContain("cr");
  // The kit is four buttons, each named after the ability it casts.
  expect((nodes.get("kit")!.children as unknown[]).length).toBe(4);
  // One prompt, in words, about the round that is running.
  expect(String(nodes.get("prompt")!.textContent).length).toBeGreaterThan(8);
  // And the buy panel prices itself off the agent's real kit.
  expect(String(buys[1]!.title)).toContain("charge");
  // The team is on screen whether anybody is in sight or not: five slots.
  const slots = nodes.get("roster")!.children as { className: string }[];
  expect(slots.length).toBe(5);
  expect(slots.filter((slot) => slot.className.includes("mine")).length).toBe(1);
  // Run the match on a few seconds: bots trade, and the feed fills with
  // names — and with nothing that says where anybody is.
  const arena = await import("./arena.ts");
  for (let i = 0; i < 40 && (nodes.get("feed")!.children as unknown[]).length === 0; i++) {
    arena.advance(5);
    await Bun.sleep(5);
  }
  const feedRows = nodes.get("feed")!.children as { children: { textContent: string }[] }[];
  expect(feedRows.length).toBeGreaterThan(0);
  // killer ▸ victim, and the gun or the ability it was: four spans, no numbers.
  const row = feedRows[0]!.children.map((span) => span.textContent).join("");
  expect(row).toContain(" ▸ ");
  expect(row).not.toMatch(/\d/);
  // A frame of the first-person view actually draws walls: a slice a column,
  // far more rectangles than the map has tiles.
  drawn.length = 0;
  runFrame();
  expect(drawn.filter((op) => op.startsWith("fillRect")).length).toBeGreaterThan(800);
  // Tab swaps that frame for the whole map — many fewer rectangles.
  for (const fn of listeners.get("keydown") ?? []) fn({ code: "Tab", key: "", target: {}, preventDefault: noop });
  drawn.length = 0;
  runFrame();
  expect(drawn.filter((op) => op.startsWith("fillRect")).length).toBeLessThan(800);
  for (const fn of listeners.get("keyup") ?? []) fn({ code: "Tab" });
  drawn.length = 0;
  runFrame();
  expect(drawn.filter((op) => op.startsWith("fillRect")).length).toBeGreaterThan(800);
  // Holding W reaches the server as a direction, and it is the way we face.
  const seat = (await import("./arena.ts")).match().players.find((p) => !p.bot)!;
  press("KeyW");
  await Bun.sleep(160);
  expect(Math.hypot(seat.input.mx, seat.input.my)).toBeGreaterThan(0.9);
  expect(Math.atan2(seat.input.my, seat.input.mx)).toBeCloseTo(seat.input.angle, 4);
  // V falls back to the top-down view, and it draws too.
  press("KeyV");
  drawn.length = 0;
  runFrame();
  expect(drawn.some((op) => op.startsWith("fillRect"))).toBe(true);
  expect(nodes.get("stage")!.dataset).toMatchObject({ mode: "top" });
  press("KeyV");
  expect(nodes.get("stage")!.dataset).toMatchObject({ mode: "fp" });
  // H toggles the card either way, and the button closes it for good.
  const help = nodes.get("help")!.style as Record<string, string>;
  const before = help.display;
  press("KeyH");
  expect(help.display).not.toBe(before);
  if (help.display !== "grid") press("KeyH");
  expect(help.display).toBe("grid");
  click(nodes.get("helpclose")!);
  expect((nodes.get("help")!.style as Record<string, string>).display).toBe("none");
  expect((globalThis as unknown as { localStorage: Storage }).localStorage.getItem("val.help.seen")).toBe("1");
  // B works the buy panel either way — it opens itself in the buy phase.
  const panel = nodes.get("buy")!.classList as { contains: (n: string) => boolean };
  const wasOpen = panel.contains("on");
  press("KeyB");
  expect(panel.contains("on")).toBe(!wasOpen);
  // And the socket really took a seat in the running match.
  expect(seat.bot).toBe(false);
}, 15000);
@@ -0,0 +1,49 @@
import { expect, test } from "bun:test";
import { fade, firedNow, gunSnapshot, gunTick, hitMarked, makeGun } from "../static/gun.js";
const snap = (over: Record<string, unknown> = {}, shots: unknown[] = []) => ({
  me: { x: 100, y: 100, ammo: 25, reloading: false, alive: true, ...over },
  shots,
});
test("the magazine going down is a shot; a reload is not", () => {
  expect(firedNow(25, 24, false)).toBe(true);
  expect(firedNow(25, 25, false)).toBe(false);
  expect(firedNow(1, 25, true)).toBe(false);
  expect(firedNow(null, 25, false)).toBe(false);
});
test("a hit marker comes from a shot of mine the server says landed", () => {
  const mine = [{ x1: 102, y1: 99, x2: 400, y2: 100, hit: true }];
  expect(hitMarked(mine, { x: 100, y: 100 })).toBe(true);
  const missed = [{ x1: 102, y1: 99, x2: 400, y2: 100, hit: false }];
  expect(hitMarked(missed, { x: 100, y: 100 })).toBe(false);
  const somebody_else = [{ x1: 900, y1: 900, x2: 400, y2: 100, hit: true }];
  expect(hitMarked(somebody_else, { x: 100, y: 100 })).toBe(false);
});
test("a snapshot with a shot in it kicks the gun, and the kick fades", () => {
  const gun = makeGun();
  gunSnapshot(gun, snap());
  expect(gun.kick).toBe(0);
  gunSnapshot(gun, snap({ ammo: 24 }));
  expect(gun.kick).toBe(1);
  gunTick(gun, 0.06);
  expect(gun.kick).toBeLessThan(1);
  gunTick(gun, 1);
  expect(gun.kick).toBe(0);
});
test("a landed shot marks, and the mark fades on its own clock", () => {
  const gun = makeGun();
  gunSnapshot(gun, snap({ ammo: 24 }, [{ x1: 100, y1: 100, x2: 300, y2: 100, hit: true }]));
  expect(gun.mark).toBe(1);
  gunTick(gun, 0.2);
  expect(gun.mark).toBeGreaterThan(0);
  gunTick(gun, 0.2);
  expect(gun.mark).toBe(0);
});
test("fade never goes below nothing", () => {
  expect(fade(0.1, 10, 0.2)).toBe(0);
});
@@ -0,0 +1,153 @@
import { describe, expect, test } from "bun:test";
import { mkdtempSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { fallsBetween, marksOf, trimFeed, type Mark } from "./killfeed.ts";
import { newMatch } from "./match.ts";
process.env.FORGE_APP_DATA ??= mkdtempSync(join(tmpdir(), "app-"));
const mark = (id: string, over: Partial<Mark> = {}): Mark => ({
  id,
  name: id,
  side: "atk",
  alive: true,
  kills: 0,
  weapon: "vandal",
  ...over,
});
const context = (events: string[] = [], shooters: string[] = [], at = 10) => ({
  at,
  events,
  shooters: new Set(shooters),
});
describe("reading falls out of two instants", () => {
  test("a shot kill names the killer, the victim and the gun", () => {
    const before = [mark("A", { side: "atk" }), mark("B", { side: "def" })];
    const after = [mark("A", { side: "atk", kills: 1 }), mark("B", { side: "def", alive: false })];
    const falls = fallsBetween(before, after, context(["A killed B"], ["A"]));
    expect(falls).toEqual([{ killer: "A", victim: "B", weapon: "vandal", headshot: false, at: 10 }]);
  });
  test("a head shot is marked as one", () => {
    const before = [mark("A", { side: "atk" }), mark("B", { side: "def" })];
    const after = [mark("A", { side: "atk", kills: 1 }), mark("B", { side: "def", alive: false })];
    expect(fallsBetween(before, after, context(["A headshot B"], ["A"]))[0]!.headshot).toBe(true);
  });
  test("a kill with no shot behind it names no gun — a molly is not a Vandal", () => {
    const before = [mark("A", { side: "atk" }), mark("B", { side: "def" })];
    const after = [mark("A", { side: "atk", kills: 1 }), mark("B", { side: "def", alive: false })];
    expect(fallsBetween(before, after, context(["A killed B"]))[0]!.weapon).toBe(null);
  });
  test("dying to nobody — a molly of your own, a fall — has no killer", () => {
    const before = [mark("A", { side: "atk" }), mark("B", { side: "def" })];
    const after = [mark("A", { side: "atk" }), mark("B", { side: "def", alive: false })];
    const falls = fallsBetween(before, after, context(["B died"]));
    expect(falls.length).toBe(1);
    expect(falls[0]!.killer).toBe(null);
    expect(falls[0]!.weapon).toBe(null);
  });
  test("two kills in one tick go to the right killers, by what the loop said", () => {
    const before = [
      mark("A", { side: "atk" }),
      mark("C", { side: "atk" }),
      mark("B", { side: "def" }),
      mark("D", { side: "def" }),
    ];
    const after = [
      mark("A", { side: "atk", kills: 1 }),
      mark("C", { side: "atk", kills: 1 }),
      mark("B", { side: "def", alive: false }),
      mark("D", { side: "def", alive: false }),
    ];
    const falls = fallsBetween(before, after, context(["C killed B", "A killed D"], ["A", "C"]));
    expect(falls.find((f) => f.victim === "B")!.killer).toBe("C");
    expect(falls.find((f) => f.victim === "D")!.killer).toBe("A");
  });
  test("a killer is never somebody on the victim's own side", () => {
    const before = [mark("A", { side: "atk" }), mark("B", { side: "atk" }), mark("E", { side: "def" })];
    const after = [
      mark("A", { side: "atk", kills: 1 }),
      mark("B", { side: "atk", alive: false }),
      mark("E", { side: "def" }),
    ];
    expect(fallsBetween(before, after, context([]))[0]!.killer).toBe(null);
  });
  test("a kill with two victims and one killer only credits the one kill", () => {
    const before = [mark("A", { side: "atk" }), mark("B", { side: "def" }), mark("C", { side: "def" })];
    const after = [
      mark("A", { side: "atk", kills: 1 }),
      mark("B", { side: "def", alive: false }),
      mark("C", { side: "def", alive: false }),
    ];
    const falls = fallsBetween(before, after, context(["A killed B"], ["A"]));
    expect(falls.filter((f) => f.killer === "A").length).toBe(1);
    expect(falls.filter((f) => f.killer === null).length).toBe(1);
  });
  test("nothing happening is no falls", () => {
    const players = [mark("A"), mark("B", { side: "def" })];
    expect(fallsBetween(players, players, context())).toEqual([]);
  });
  test("a body that was already dead does not fall twice", () => {
    const before = [mark("B", { side: "def", alive: false })];
    expect(fallsBetween(before, before, context())).toEqual([]);
  });
  test("a fall never carries a position", () => {
    const before = [mark("A", { side: "atk" }), mark("B", { side: "def" })];
    const after = [mark("A", { side: "atk", kills: 1 }), mark("B", { side: "def", alive: false })];
    const fall = fallsBetween(before, after, context(["A killed B"], ["A"]))[0]!;
    expect(Object.keys(fall).sort()).toEqual(["at", "headshot", "killer", "victim", "weapon"]);
  });
  test("marks come off the real players of a real match", () => {
    const marks = marksOf(newMatch().players);
    expect(marks.length).toBe(10);
    expect(marks.every((m) => m.alive && m.kills === 0 && typeof m.name === "string")).toBe(true);
    expect(JSON.stringify(marks)).not.toContain('"x"');
  });
});
describe("the feed as it is shown", () => {
  const fall = (victim: string, at: number) => ({ killer: "A", victim, weapon: null, headshot: false, at });
  test("keeps the last few and drops the stale", () => {
    const feed = [fall("a", 1), fall("b", 2), fall("c", 9), fall("d", 10)];
    expect(trimFeed(feed, 10, 5, 8).map((f) => f.victim)).toEqual(["b", "c", "d"]);
  });
  test("never grows past its slots", () => {
    const feed = [1, 2, 3, 4, 5, 6, 7].map((n) => fall(String(n), 10));
    expect(trimFeed(feed, 10, 5, 8).map((f) => f.victim)).toEqual(["3", "4", "5", "6", "7"]);
  });
});
describe("the feed the arena sends", () => {
  test("bots killing each other reach the snapshot as names, with no positions", async () => {
    const { advance, match, snapshot } = await import("./arena.ts");
    const viewer = match().players[0]!.id;
    let feed: { k: string | null; v: string; w: string | null; h: boolean; t: number }[] = [];
    for (let seconds = 0; seconds < 400 && feed.length === 0; seconds += 10) {
      advance(10);
      feed = JSON.parse(snapshot(viewer)).feed;
    }
    expect(feed.length).toBeGreaterThan(0);
    const names = match().players.map((p) => p.name);
    for (const line of feed) {
      expect(names).toContain(line.v);
      if (line.k !== null) expect(names).toContain(line.k);
      expect(line.t).toBeLessThanOrEqual(8);
      // Names, a gun, an age. Nothing that says where anybody is.
      expect(Object.keys(line).sort()).toEqual(["h", "k", "t", "v", "w"]);
    }
  }, 30000);
});
@@ -0,0 +1,84 @@
/**
 * Who killed whom, read off the match rather than written into it.
 *
 * The round loop counts kills and deaths on the players and says a line
 * about it; it keeps no list. Rather than change the rules to carry one,
 * the arena compares the players before and after a tick: somebody who was
 * alive and is not is a victim, somebody whose kill count went up is a
 * killer, and the line the loop said settles which of them did it when two
 * fall in the same thirtieth of a second.
 *
 * Pure functions over plain marks. Nothing here knows a position, and a fall
 * never carries one — the feed must not be a way to learn where anybody is.
 */
import type { Player, Side } from "./state.ts";
import type { WeaponId } from "./weapons.ts";
/** Everything about a player this module needs, taken at one instant. */
export type Mark = {
  id: string;
  name: string;
  side: Side;
  alive: boolean;
  kills: number;
  weapon: WeaponId;
};
export type Fall = {
  killer: string | null;
  victim: string;
  /** The killer's gun when the kill came from a shot; null when it did not. */
  weapon: WeaponId | null;
  headshot: boolean;
  /** The match clock when it happened. */
  at: number;
};
export const marksOf = (players: Player[]): Mark[] =>
  players.map((p) => ({ id: p.id, name: p.name, side: p.side, alive: p.alive, kills: p.kills, weapon: p.weapon }));
export type Context = {
  at: number;
  /** The lines the round loop said this tick, or the most recent few. */
  events: string[];
  /** Players whose shot landed on this tick, so a molly is not called a gun. */
  shooters: Set<string>;
};
/**
 * The falls between two instants. Killers are matched to victims by the line
 * the loop said, and by side and a spare kill when there is no line.
 */
export function fallsBetween(before: Mark[], after: Mark[], context: Context): Fall[] {
  const was = new Map(before.map((m) => [m.id, m]));
  const falls: Fall[] = [];
  const credit = new Map<string, number>();
  for (const mark of after) {
    const old = was.get(mark.id);
    if (old && mark.kills > old.kills) credit.set(mark.id, mark.kills - old.kills);
  }
  const named = (killer: Mark, victim: Mark): boolean =>
    context.events.includes(`${killer.name} killed ${victim.name}`) ||
    context.events.includes(`${killer.name} headshot ${victim.name}`);
  for (const mark of after) {
    const old = was.get(mark.id);
    if (!old || !old.alive || mark.alive) continue;
    const able = after.filter((m) => (credit.get(m.id) ?? 0) > 0 && m.side !== mark.side);
    const killer = able.find((m) => named(m, mark)) ?? able[0] ?? null;
    if (killer) credit.set(killer.id, (credit.get(killer.id) ?? 1) - 1);
    falls.push({
      killer: killer ? killer.name : null,
      victim: mark.name,
      weapon: killer && context.shooters.has(killer.id) ? killer.weapon : null,
      headshot: killer ? context.events.includes(`${killer.name} headshot ${mark.name}`) : false,
      at: context.at,
    });
  }
  return falls;
}
/** The feed as it is shown: the last few falls, and only the recent ones. */
export const trimFeed = (feed: Fall[], now: number, keep = 5, life = 8): Fall[] =>
  feed.filter((f) => now - f.at <= life).slice(-keep);
@@ -8,6 +8,7 @@
import {
  DEFUSE_CHECKPOINT,
  DEFUSE_TIME,
  FUSE_TIME,
  makePlayer,
  newMatch,
  PLANT_TIME,
  ROUND_TIME,
@@ -371,3 +372,28 @@
test("bots play the round: they buy, they take a site and they use their kit", (
  expect(state.players.some((p) => p.weapon !== "classic")).toBe(true);
  expect(aliveOn(state, "atk").length + aliveOn(state, "def").length).toBeGreaterThan(0);
});
test("no match ever has two players with the same name", () => {
  // The kill feed, the round log and the scoreboard all address people by
  // name; two Kits read as a team kill this game cannot have. A thousand
  // rosters, no collision.
  for (let seed = 0; seed < 1000; seed++) {
    const names = newMatch(seed).players.map((p) => p.name);
    expect(names.length).toBe(10);
    expect(new Set(names).size).toBe(10);
  }
});
test("a seat made on its own still gets a name of its own", () => {
  const state = newMatch(1234);
  const names = new Set<string>();
  for (const team of ["red", "blue"] as const)
    for (let i = 0; i < 5; i++) names.add(makePlayer(state, team, i).name);
  expect(names.size).toBe(10);
});
test("the deal is the seeded shuffle, so the same match replays the same", () => {
  expect(newMatch(77).players.map((p) => p.name)).toEqual(newMatch(77).players.map((p) => p.name));
  expect(newMatch(77).players.map((p) => p.name)).not.toEqual(newMatch(78).players.map((p) => p.name));
});
@@ -69,9 +69,39 @@
const BOT_NAMES = [
  "Kit", "Lux", "Mox", "Nell", "Orla", "Pike", "Quill", "Rio", "Sage", "Tove",
];
export function makePlayer(state: MatchState, team: Team, index: number): Player {
/**
 * Twenty names, shuffled, dealt to the ten seats — drawn without replacement.
 *
 * A name is how a person is addressed: in the kill feed, in the round log, on
 * the scoreboard. Two bots called Kit make "Kit killed Kit", which reads as a
 * team kill that this game cannot even have. Picking each name independently
 * collided in most matches — a uniform pick over twenty names for ten seats
 * is a birthday problem, and no arithmetic spacing survives adding a uniform
 * term to it. Shuffling once and dealing cannot collide at all.
 */
export function dealNames(state: MatchState, count = TEAMS.length * ROSTER): string[] {
  const bag = BOT_NAMES.slice();
  for (let i = bag.length - 1; i > 0; i--) {
    const j = Math.floor(random(state) * (i + 1));
    const swap = bag[i]!;
    bag[i] = bag[j]!;
    bag[j] = swap;
  }
  return bag.slice(0, Math.min(count, bag.length));
}
/**
 * One seat. The name is dealt by the caller so a whole roster is drawn
 * without replacement; on its own it falls back to the seat's own slot,
 * which is distinct for every seat in a match too.
 */
export function makePlayer(
  state: MatchState,
  team: Team,
  index: number,
  name = BOT_NAMES[(TEAMS.indexOf(team) * ROSTER + index) % BOT_NAMES.length]!,
): Player {
  const agent = ["ember", "veil", "sable", "mender", "rook"][index % 5]!;
  const name = BOT_NAMES[(TEAMS.indexOf(team) * 7 + index * 3 + Math.floor(random(state) * 20)) % BOT_NAMES.length]!;
  return {
    id: `bot-${team}-${index}`,
    name: `${name}`,
@@ -132,8 +162,10 @@
export function newMatch(seed = Date.now() % 100000): MatchState {
    seed,
    now: 0,
  };
  const names = dealNames(state);
  for (const team of TEAMS)
    for (let i = 0; i < ROSTER; i++) state.players.push(makePlayer(state, team, i));
    for (let i = 0; i < ROSTER; i++)
      state.players.push(makePlayer(state, team, i, names[state.players.length]));
  startRound(state, true);
  say(state, "Round 1 — buy phase");
  return state;
@@ -70,6 +70,41 @@
export function gamePage(opts: {
  #flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
  #dead { position: absolute; inset: 0; display: none; place-items: center; background: #0008;
          font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; }
  #prompt { position: absolute; left: 50%; transform: translateX(-50%); bottom: .6rem;
            max-width: 92%; padding: .35rem .7rem; border-radius: .4rem; background: #0b0d11cc;
            border: 1px solid #2f3541; font-size: .9rem; text-align: center; pointer-events: none; }
  #aimhint { position: absolute; inset: auto 0 45% 0; display: none; place-items: center;
             font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
             text-shadow: 0 1px 4px #000; pointer-events: none; }
  #help { position: fixed; inset: 0; z-index: 10; display: none; place-items: center;
          background: #080a0ef2; padding: .8rem; overflow: auto; }
  #help > div { max-width: 40rem; }
  #help h2 { font-size: 1rem; margin: 0 0 .4rem; letter-spacing: .1em; text-transform: uppercase; }
  #help p, #help ul { margin: .4rem 0; font-size: .88rem; }
  #help ul { padding-left: 1.1rem; }
  #help kbd { background: #222732; border: 1px solid #39404e; border-radius: .25rem;
              padding: 0 .3rem; font: inherit; font-size: .82rem; }
  #helpclose { min-height: 44px; padding: 0 1.1rem; margin-top: .5rem; background: #3a4356;
               color: var(--ink); border: 0; border-radius: .45rem; font: inherit; cursor: pointer; }
  #roster { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; margin: .5rem 0;
            min-height: 3.1rem; }
  .slot { background: #171a21; border: 1px solid #262b35; border-left: 3px solid #4a5162;
          border-radius: .35rem; padding: .2rem .35rem; font-size: .72rem; overflow: hidden; }
  .slot .who { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slot .agent { display: block; opacity: .6; font-size: .66rem; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
  .slot .hp { display: block; height: 5px; margin-top: .2rem; border-radius: 3px; background: #2a2f3a; }
  .slot .hp i { display: block; height: 100%; border-radius: 3px; background: #6fcf6f; }
  .slot.mine { border-color: #6f8ecf; background: #1b2130; }
  .slot.down { opacity: .42; filter: grayscale(1); }
  .slot.down .who { text-decoration: line-through; }
  .slot .spike { color: #f0d060; }
  #feed { position: absolute; top: .5rem; right: .5rem; width: min(17rem, 52%); display: grid;
          gap: .18rem; justify-items: end; pointer-events: none; font-size: .76rem; }
  #feed div { background: #0b0d11cc; border: 1px solid #2f3541; border-radius: .3rem;
              padding: .1rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
              max-width: 100%; }
  #feed .k { color: #8ef0c4; } #feed .v { color: #e39a95; } #feed .w { opacity: .65; }
  #hud { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0;
         font-variant-numeric: tabular-nums; }
  .chip { background: #1b1e25; border: 1px solid #2a2f3a; border-radius: .4rem; padding: .3rem .55rem;
@@ -118,9 +153,42 @@
export function gamePage(opts: {
<div id="stage">
  <canvas id="view" width="900" height="570"></canvas>
  <div id="flash"></div>
  <div id="aimhint">click to aim · esc releases</div>
  <div id="dead">waiting for the next round</div>
  <div id="feed"></div>
  <div id="prompt">Click the map to aim, then press <b>H</b> for how to play.</div>
  <div id="help" role="dialog" aria-label="How to play val"><div>
    <h2>How to play</h2>
    <p><strong>The round.</strong> Attackers carry the spike to site A or B and plant it;
       defenders stop them, or defuse it once it is down. Plant and it runs a 45s fuse.
       First team to 13 rounds wins, and the sides swap at 12.</p>
    <p><strong>The teams.</strong> You are <span class="red">red</span> or
       <span class="blue">blue</span>; each round one team attacks and the other defends.
       Team mates carry a name tag over their head, enemies never do.</p>
    <p><strong>Controls.</strong> <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> move ·
       click the view to capture the mouse and look, <kbd>Esc</kbd> releases ·
       click to fire · <kbd>R</kbd> reload · hold <kbd>F</kbd> to plant, defuse or pick up ·
       <kbd>Tab</kbd> holds the big map open · <kbd>V</kbd> swaps to the top-down view ·
       <kbd>B</kbd> opens the buy · <kbd>H</kbd> brings this card back.</p>
    <p><strong>Abilities.</strong> <kbd>C</kbd> and <kbd>Q</kbd> are bought in the buy phase and
       last the round, <kbd>E</kbd> is free and comes back on a cooldown, and <kbd>X</kbd> is
       the ultimate, paid for in ult points you earn by playing.</p>
    <p><strong>Telling people apart.</strong> Your five are always listed under the view with their
       health — struck through when they are down — and the last few kills scroll in the top right.
       In the world an enemy wears a red chevron over their head and a hard dark outline, a team mate
       wears their name and a health pip, and anybody lying flat on the floor is dead. On the map your
       team is always shown (crossed out when down) and enemies appear only while you can see them.</p>
    <p><strong>On a phone</strong> the view stays top-down: the left thumb walks, the right
       thumb aims and fires, and the buttons under the map buy and cast.</p>
    <ul id="helpagents"></ul>
    <button id="helpclose" type="button">Got it — play</button>
  </div></div>
</div>
<div id="roster" aria-label="your team">${["", "", "", "", ""]
  .map(() => `<div class="slot"><span class="who">—</span><span class="hp"><i style="width:0"></i></span></div>`)
  .join("")}</div>
<div id="hud">
  <span class="chip" id="hp">100 hp</span>
  <span class="chip" id="gun">Classic 12</span>
@@ -128,6 +196,8 @@
export function gamePage(opts: {
  <span class="chip" id="ultmeter">ult 0/6</span>
  <span class="kit" id="kit"></span>
  <button id="buytoggle" class="chip" type="button">buy (B)</button>
  <button id="viewtoggle" class="chip" type="button">view (V)</button>
  <button id="helptoggle" class="chip" type="button">how to play (H)</button>
</div>
<div id="buy">
@@ -136,13 +206,16 @@
export function gamePage(opts: {
    (a) => `<button type="button" data-agent="${escape(a.id)}" title="${escape(a.blurb)}">${escape(a.name)} <small>${escape(a.role)}</small></button>`,
  ).join("")}</div>
  <div class="buys" id="guns">${weaponIds()
    .map((id) => `<button type="button" data-buy="${id}">${escape(WEAPONS[id].name)} <b>${WEAPONS[id].cost}</b></button>`)
    .map(
      (id) =>
        `<button type="button" data-buy="${id}" data-cost="${WEAPONS[id].cost}" title="${escape(WEAPONS[id].name)} — ${WEAPONS[id].cost} credits, ${WEAPONS[id].magazine} rounds, ${WEAPONS[id].auto ? "automatic" : "semi-automatic"}">${escape(WEAPONS[id].name)} <b>${WEAPONS[id].cost}</b></button>`,
    )
    .join("")}</div>
  <div class="buys" id="gear">
    <button type="button" data-buy="light">Light shield <b>400</b></button>
    <button type="button" data-buy="heavy">Heavy shield <b>1000</b></button>
    <button type="button" data-buy="c">Ability C</button>
    <button type="button" data-buy="q">Ability Q</button>
    <button type="button" data-buy="light" data-cost="400" title="25 armour that soaks a quarter of what hits you">Light shield <b>400</b></button>
    <button type="button" data-buy="heavy" data-cost="1000" title="50 armour that soaks half of what hits you">Heavy shield <b>1000</b></button>
    <button type="button" data-buy="c" data-cost="0">C ability <b>—</b></button>
    <button type="button" data-buy="q" data-cost="0">Q ability <b>—</b></button>
  </div>
</div>
@@ -162,9 +235,11 @@
export function gamePage(opts: {
</div>
<footer>
  <p><strong>Controls.</strong> WASD move · mouse aims · click fires · R reloads ·
     <strong>F</strong> plants and defuses (hold it) · C / Q / E / X cast · B opens the buy.
     On a phone: left thumb walks, right thumb aims and fires, the buttons under the map do the rest.</p>
  <p><strong>Controls.</strong> WASD move · click the view to capture the mouse, move to look,
     Esc releases · click fires · R reloads · <strong>F</strong> plants and defuses (hold it) ·
     C / Q / E / X cast · Tab holds the map open · V swaps to the top-down view ·
     B opens the buy · H shows how to play.
     On a phone it stays top-down: left thumb walks, right thumb aims and fires.</p>
  <p>Five attackers carry the spike, five defenders stop them. 100s round, 4s plant, 45s fuse,
     7s defuse with a checkpoint at half. First to 13, sides swap at 12. Bots fill every seat
     nobody is in, and they use their kit.</p>
@@ -0,0 +1,84 @@
import { describe, expect, test } from "bun:test";
import { choosePrompt } from "../static/prompt.js";
type Snap = ReturnType<typeof snapshot>;
const snapshot = (over: Record<string, unknown> = {}, me: Record<string, unknown> = {}, spike: Record<string, unknown> = {}) => ({
  phase: "live",
  clock: 40,
  result: null,
  me: { side: "atk", alive: true, blind: 0, planting: 0, spike: false, ...me },
  spike: { planted: false, carried: false, fuse: 0, defuse: 0, x: 100, y: 100, ...spike },
  ...over,
});
describe("the one prompt on screen", () => {
  test("the buy phase says what to do and how long there is", () => {
    const text = choosePrompt(snapshot({ phase: "buy", clock: 14.2 }));
    expect(text).toBe("Buy phase — 15s left. Click a gun you can afford.");
  });
  test("the terminal is told about keys, not clicks", () => {
    const text = choosePrompt(snapshot({ phase: "buy", clock: 14.2 }), { input: "keys" });
    expect(text).toBe("Buy phase — 15s left. Press b and buy a gun you can afford.");
  });
  test("carrying the spike off a site sends you to one", () => {
    expect(choosePrompt(snapshot({}, { spike: true }), { onSite: false })).toBe(
      "You have the spike — get to site A or B",
    );
  });
  test("carrying it onto a site says how to plant", () => {
    expect(choosePrompt(snapshot({}, { spike: true }), { onSite: true })).toBe("Hold F to plant");
  });
  test("a defender near a planted spike is told to defuse, with the fuse", () => {
    const text = choosePrompt(snapshot({}, { side: "def" }, { planted: true, fuse: 31.4 }), { nearSpike: true });
    expect(text).toBe("Spike down, 32s — hold F to defuse");
  });
  test("a defender across the map is told to get to it", () => {
    const text = choosePrompt(snapshot({}, { side: "def" }, { planted: true, fuse: 31.4 }), { nearSpike: false });
    expect(text).toBe("Spike down, 32s — get to it and hold F");
  });
  test("an attacker with it planted is told to hold the site", () => {
    expect(choosePrompt(snapshot({}, {}, { planted: true, fuse: 10 }))).toBe(
      "Spike down, 10s — keep them off it",
    );
  });
  test("blind beats everything else on screen", () => {
    const text = choosePrompt(snapshot({}, { blind: 1.4, spike: true }), { onSite: true });
    expect(text).toBe("You are blind — back off until it clears");
  });
  test("dead in a live round says you are still in the match", () => {
    expect(choosePrompt(snapshot({}, { alive: false }))).toBe("Waiting for the next round — you're in it");
  });
  test("the end of a round shows the result and the countdown", () => {
    const text = choosePrompt(snapshot({ phase: "end", clock: 4.1, result: "Spike defused" }));
    expect(text).toBe("Spike defused — next round in 5s");
  });
  test("a live defender is told what defending is", () => {
    expect(choosePrompt(snapshot({}, { side: "def" }))).toBe("Defending — hold A and B, 40s");
  });
  test("an attacker beside a loose spike is told to walk onto it", () => {
    expect(choosePrompt(snapshot(), { nearSpike: true })).toBe("Walk onto the spike to pick it up");
  });
  test("defusing counts down the defuse, not the fuse", () => {
    const text = choosePrompt(snapshot({}, { side: "def" }, { planted: true, fuse: 20, defuse: 3.5 }), {
      nearSpike: true,
    });
    expect(text).toBe("Defusing — keep holding F, 4s");
  });
  test("no snapshot yet is no prompt", () => {
    expect(choosePrompt(null as unknown as Snap)).toBe("");
  });
});
@@ -0,0 +1,185 @@
import { describe, expect, test } from "bun:test";
import {
  angleColumn,
  bandLight,
  castRay,
  columnAngle,
  columnOffset,
  FOV,
  hitResult,
  project,
  projection,
  projectResult,
  sliceHeight,
  smokeAlong,
  spriteColumnVisible,
  wallLight,
} from "../static/raycast.js";
const W = 900;
describe("columns and angles", () => {
  test("the middle column looks straight ahead", () => {
    expect(columnOffset(W / 2 - 0.5, W)).toBeCloseTo(0, 6);
    expect(columnAngle(W / 2 - 0.5, W, 1.2)).toBeCloseTo(1.2, 6);
  });
  test("the outer columns sit at the edges of the field of view", () => {
    expect(columnOffset(0, W)).toBeCloseTo(-FOV / 2, 2);
    expect(columnOffset(W - 1, W)).toBeCloseTo(FOV / 2, 2);
  });
  test("a column maps to an angle and back again", () => {
    for (const col of [0, 123, 450, 899]) {
      expect(angleColumn(columnOffset(col, W), W)).toBeCloseTo(col + 0.5, 4);
    }
  });
  test("columns are not spread evenly — that is what keeps walls straight", () => {
    const middle = columnOffset(451, W) - columnOffset(450, W);
    const edge = columnOffset(1, W) - columnOffset(0, W);
    expect(edge).toBeLessThan(middle);
  });
});
describe("wall slices", () => {
  test("a wall twice as far is half as tall", () => {
    const proj = projection(W);
    expect(sliceHeight(160, proj, 80)).toBeCloseTo(sliceHeight(80, proj, 80) / 2, 6);
  });
  test("a north–south face is darker than an east–west one at the same range", () => {
    expect(wallLight(200, 1, 80)).toBeLessThan(wallLight(200, 0, 80));
  });
  test("further is dimmer, and never fully black", () => {
    expect(wallLight(900, 0, 80)).toBeLessThan(wallLight(120, 0, 80));
    expect(wallLight(5000, 1, 80)).toBeGreaterThan(0);
  });
  test("the floor is dimmest at the horizon", () => {
    expect(bandLight(2, 200)).toBeLessThan(bandLight(180, 200));
  });
});
// A four-by-four room: solid border, open inside.
const room = (col: number, row: number): boolean => col <= 0 || row <= 0 || col >= 3 || row >= 3;
describe("castRay", () => {
  const out = hitResult();
  test("finds the wall straight ahead and calls it an east–west face", () => {
    castRay(room, 120, 120, 0, 80, 2000, out);
    expect(out.wall).toBe(true);
    expect(out.dist).toBeCloseTo(120, 6); // from x=120 to the face at x=240
    expect(out.side).toBe(0);
    expect(out.col).toBe(3);
  });
  test("a ray upward strikes a north–south face", () => {
    castRay(room, 120, 120, -Math.PI / 2, 80, 2000, out);
    expect(out.wall).toBe(true);
    expect(out.dist).toBeCloseTo(40, 6);
    expect(out.side).toBe(1);
    expect(out.row).toBe(0);
  });
  test("a ray that runs out of range reports no wall", () => {
    castRay(room, 120, 120, 0, 80, 50, out);
    expect(out.wall).toBe(false);
    expect(out.dist).toBe(50);
  });
  test("standing inside a wall is zero distance, not an infinite loop", () => {
    castRay(room, 10, 10, 0.3, 80, 2000, out);
    expect(out.dist).toBe(0);
    expect(out.wall).toBe(true);
  });
  test("a diagonal ray agrees with walking the same line by hand", () => {
    castRay(room, 120, 120, Math.PI / 4, 80, 2000, out);
    let step = 0;
    while (step < 2000 && !room(Math.floor((120 + Math.cos(Math.PI / 4) * step) / 80), Math.floor((120 + Math.sin(Math.PI / 4) * step) / 80)))
      step += 0.25;
    expect(out.dist).toBeCloseTo(step, 0);
  });
  test("it fills the caller's object and allocates nothing", () => {
    const same = castRay(room, 120, 120, 0, 80, 2000, out);
    expect(same).toBe(out);
  });
});
describe("projecting a body onto the screen", () => {
  const proj = projection(W);
  const out = projectResult();
  test("something dead ahead lands in the middle of the screen", () => {
    project(100, 100, 0, 500, 100, W, proj, 80, out);
    expect(out.behind).toBe(false);
    expect(out.column).toBeCloseTo(W / 2, 4);
    expect(out.perp).toBeCloseTo(400, 6);
  });
  test("something to the right lands right of centre", () => {
    project(100, 100, 0, 500, 260, W, proj, 80, out);
    expect(out.column).toBeGreaterThan(W / 2);
  });
  test("something behind the camera is not drawn at all", () => {
    project(100, 100, 0, -400, 100, W, proj, 80, out);
    expect(out.behind).toBe(true);
    expect(out.size).toBe(0);
  });
  test("the further body is the smaller one", () => {
    project(100, 100, 0, 300, 100, W, proj, 80, out);
    const near = out.size;
    project(100, 100, 0, 900, 100, W, proj, 80, out);
    expect(out.size).toBeLessThan(near);
  });
  test("perpendicular depth, not straight-line distance, so the edges do not bulge", () => {
    project(100, 100, 0, 500, 300, W, proj, 80, out);
    expect(out.perp).toBeLessThan(out.dist);
  });
});
describe("z-clip", () => {
  test("a body nearer than the wall behind it is drawn", () => {
    expect(spriteColumnVisible(300, 900)).toBe(true);
  });
  test("a body behind the corner is hidden", () => {
    expect(spriteColumnVisible(900, 300)).toBe(false);
  });
  test("a body flush against the wall does not bleed through it", () => {
    expect(spriteColumnVisible(299, 300)).toBe(false);
  });
});
describe("smoke as a volume", () => {
  test("a ray through the middle of a smoke is fully fogged", () => {
    expect(smokeAlong(0, 0, 1, 0, 400, 0, 110, 1000)).toBe(1);
  });
  test("a ray that misses it is not fogged at all", () => {
    expect(smokeAlong(0, 0, 1, 0, 400, 400, 110, 1000)).toBe(0);
  });
  test("a wall in front of the smoke is not fogged by it", () => {
    expect(smokeAlong(0, 0, 1, 0, 400, 0, 110, 200)).toBe(0);
  });
  test("clipping the edge fogs less than going through the middle", () => {
    const edge = smokeAlong(0, 0, 1, 0, 400, 100, 110, 1000);
    expect(edge).toBeGreaterThan(0);
    expect(edge).toBeLessThan(1);
  });
  test("standing in the middle of one is nearly opaque in every direction", () => {
    expect(smokeAlong(400, 0, 1, 0, 400, 0, 110, 1000)).toBeGreaterThan(0.9);
    expect(smokeAlong(400, 0, 0, -1, 400, 0, 110, 1000)).toBeGreaterThan(0.9);
  });
});
@@ -0,0 +1,64 @@
import { describe, expect, test } from "bun:test";
import { roster, rosterKey } from "../static/roster.js";
const snapshot = (players: unknown[]) => ({
  me: { id: "p3" },
  players,
});
const mate = (id: string, over: Record<string, unknown> = {}) => ({
  id,
  name: id.toUpperCase(),
  agent: "veil",
  hp: 100,
  alive: true,
  mate: true,
  spike: false,
  ...over,
});
describe("the team roster", () => {
  test("is your own side, everybody, seen or not", () => {
    const rows = roster(
      snapshot([mate("p1"), mate("p2"), mate("p3"), mate("p4"), mate("p5"), mate("e1", { mate: false })]),
    );
    expect(rows.length).toBe(5);
    expect(rows.some((r) => r.id === "e1")).toBe(false);
  });
  test("keeps one order whatever order the snapshot arrives in", () => {
    const one = roster(snapshot([mate("p3"), mate("p1"), mate("p2")]));
    const two = roster(snapshot([mate("p2"), mate("p3"), mate("p1")]));
    expect(one.map((r) => r.id)).toEqual(two.map((r) => r.id));
    expect(one.map((r) => r.id)).toEqual(["p1", "p2", "p3"]);
  });
  test("marks the dead and gives them no health", () => {
    const rows = roster(snapshot([mate("p1", { alive: false, hp: 37 })]));
    expect(rows[0]!.alive).toBe(false);
    expect(rows[0]!.hp).toBe(0);
  });
  test("clamps a health the server rounded past the ends", () => {
    expect(roster(snapshot([mate("p1", { hp: 140 })]))[0]!.hp).toBe(100);
    expect(roster(snapshot([mate("p1", { hp: -5 })]))[0]!.hp).toBe(0);
  });
  test("knows which row is you, and who has the spike", () => {
    const rows = roster(snapshot([mate("p1"), mate("p3", { spike: true })]));
    expect(rows.find((r) => r.id === "p3")!.mine).toBe(true);
    expect(rows.find((r) => r.id === "p3")!.spike).toBe(true);
    expect(rows.find((r) => r.id === "p1")!.mine).toBe(false);
  });
  test("no snapshot is no rows, not a crash", () => {
    expect(roster(null)).toEqual([]);
  });
  test("the key changes when anything on the panel changes, and not otherwise", () => {
    const before = roster(snapshot([mate("p1", { hp: 80 })]));
    expect(rosterKey(before)).toBe(rosterKey(roster(snapshot([mate("p1", { hp: 80 })]))));
    expect(rosterKey(before)).not.toBe(rosterKey(roster(snapshot([mate("p1", { hp: 40 })]))));
    expect(rosterKey(before)).not.toBe(rosterKey(roster(snapshot([mate("p1", { hp: 80, alive: false })]))));
  });
});
@@ -0,0 +1,231 @@
/**
 * The renderer, run for real against a canvas that writes down what it was
 * asked to draw. No browser, but every line of the draw path is executed —
 * which is what catches a typo in a frame nobody can see from a unit test.
 */
import { expect, test } from "bun:test";
import { drawGun, makeGun } from "../static/gun.js";
import { drawScene, makeScene } from "../static/scene.js";
import { drawTopdown } from "../static/topdown.js";
import { gridRows, TILE } from "./map.ts";
type Op = { op: string; args: unknown[] };
/** A canvas that records. Every call the renderer makes has to exist here. */
function fakeContext() {
  const ops: Op[] = [];
  const note =
    (op: string) =>
    (...args: unknown[]) => {
      ops.push({ op, args });
    };
  const ctx = {
    ops,
    fillStyle: "",
    strokeStyle: "",
    lineWidth: 1,
    font: "",
    textAlign: "left",
    globalAlpha: 1,
    clearRect: note("clearRect"),
    fillRect: note("fillRect"),
    strokeRect: note("strokeRect"),
    beginPath: note("beginPath"),
    closePath: note("closePath"),
    moveTo: note("moveTo"),
    lineTo: note("lineTo"),
    arc: note("arc"),
    ellipse: note("ellipse"),
    fill: note("fill"),
    stroke: note("stroke"),
    clip: note("clip"),
    rect: note("rect"),
    save: note("save"),
    restore: note("restore"),
    translate: note("translate"),
    rotate: note("rotate"),
    fillText: note("fillText"),
    measureText: (text: string) => ({ width: text.length * 6 }),
    createLinearGradient: () => ({ addColorStop() {} }),
  };
  return ctx;
}
// A room three tiles deep running east, with a pillar standing in it at
// column 5 — enough geometry for a body to hide behind.
const room = (col: number, row: number): boolean =>
  col < 1 || col > 12 || row < 1 || row > 3 || col === 5;
const world = { solid: room, tile: TILE };
const snapshot = (players: unknown[], zones: unknown[] = []) => ({
  phase: "live",
  clock: 40,
  result: null,
  me: { id: "me", x: 120, y: 200, angle: 0, alive: true, side: "atk", hp: 100, blind: 0, ammo: 25, reloading: false, planting: 0, spike: false, agent: "ember" },
  players,
  zones,
  orbs: [],
  shots: [],
  spike: { planted: false, carried: false, fuse: 0, defuse: 0, x: null, y: null },
});
const body = (over: Record<string, unknown> = {}) => ({
  id: "them",
  name: "Sable",
  agent: "sable",
  x: 280,
  y: 200,
  angle: 3.1,
  hp: 100,
  alive: true,
  mate: false,
  spike: false,
  blind: false,
  ...over,
});
const view = { width: 900, height: 570, look: (p: { x: number; y: number; angle: number }) => p };
const eye = { x: 120, y: 200, angle: 0 };
test("a frame draws walls: one filled column per screen column, and the horizon", () => {
  const ctx = fakeContext();
  drawScene(ctx as never, makeScene(), world, eye, snapshot([]), view);
  const rects = ctx.ops.filter((o) => o.op === "fillRect");
  // The two bands and the horizon, then a slice for every column of the wall.
  expect(rects.length).toBeGreaterThan(800);
});
test("a body in the open is drawn; the same body behind the pillar is not", () => {
  const open = fakeContext();
  drawScene(open as never, makeScene(), world, eye, snapshot([body()]), view);
  // The head is the only arc in this scene, so it stands for the body.
  expect(open.ops.some((o) => o.op === "arc")).toBe(true);
  const hidden = fakeContext();
  drawScene(hidden as never, makeScene(), world, eye, snapshot([body({ x: 700 })]), view);
  expect(hidden.ops.some((o) => o.op === "arc")).toBe(false);
});
test("a team mate gets a name tag and an enemy never does", () => {
  const mate = fakeContext();
  drawScene(mate as never, makeScene(), world, eye, snapshot([body({ mate: true })]), view);
  expect(mate.ops.some((o) => o.op === "fillText" && o.args[0] === "Sable")).toBe(true);
  const enemy = fakeContext();
  drawScene(enemy as never, makeScene(), world, eye, snapshot([body()]), view);
  expect(enemy.ops.some((o) => o.op === "fillText")).toBe(false);
});
test("the dead lie on the floor and wear no markers at all", () => {
  const ctx = fakeContext();
  drawScene(ctx as never, makeScene(), world, eye, snapshot([body({ mate: true, alive: false, hp: 0 })]), view);
  // Flat on the ground: an ellipse, not an upright body with a head.
  expect(ctx.ops.some((o) => o.op === "ellipse")).toBe(true);
  // No name tag, and no chevron — the chevron is the only closed path here.
  expect(ctx.ops.some((o) => o.op === "fillText")).toBe(false);
  expect(ctx.ops.some((o) => o.op === "closePath")).toBe(false);
});
test("an enemy wears a chevron and a team mate does not", () => {
  const enemy = fakeContext();
  drawScene(enemy as never, makeScene(), world, eye, snapshot([body()]), view);
  expect(enemy.ops.some((o) => o.op === "closePath")).toBe(true);
  const mate = fakeContext();
  drawScene(mate as never, makeScene(), world, eye, snapshot([body({ mate: true })]), view);
  expect(mate.ops.some((o) => o.op === "closePath")).toBe(false);
  expect(mate.ops.some((o) => o.op === "fillText")).toBe(true);
});
test("a body has a hard dark edge, whichever side it is on", () => {
  const ctx = fakeContext();
  drawScene(ctx as never, makeScene(), world, eye, snapshot([body()]), view);
  expect(ctx.ops.some((o) => o.op === "strokeRect")).toBe(true);
});
test("a smoke between the eye and a body hides it", () => {
  const smoke = [{ k: "smoke", x: 200, y: 200, r: 90, f: 0, l: 8 }];
  const ctx = fakeContext();
  drawScene(ctx as never, makeScene(), world, eye, snapshot([body()], smoke), view);
  expect(ctx.ops.some((o) => o.op === "arc")).toBe(false);
  // A smoke that is not on the line does not hide anything.
  const aside = [{ k: "smoke", x: 200, y: 900, r: 90, f: 0, l: 8 }];
  const clear = fakeContext();
  drawScene(clear as never, makeScene(), world, eye, snapshot([body()], aside), view);
  expect(clear.ops.some((o) => o.op === "arc")).toBe(true);
});
test("every kind of zone, the spike and a tracer draw without falling over", () => {
  const zones = ["smoke", "molly", "wall", "trip", "dart", "flash", "heal"].map((k, i) => ({
    k,
    x: 300 + i * 20,
    y: 200,
    r: 90,
    f: k === "flash" ? 0.3 : 0,
    l: 5,
  }));
  const snap = snapshot([body(), body({ id: "mate", mate: true, alive: false, hp: 0 })], zones);
  snap.orbs = [{ x: 360, y: 200 }] as never;
  snap.shots = [{ x1: 130, y1: 200, x2: 380, y2: 200, hit: true, age: 0 }] as never;
  snap.spike = { planted: true, carried: false, fuse: 12, defuse: 0, x: 330, y: 200 } as never;
  const ctx = fakeContext();
  drawScene(ctx as never, makeScene(), world, eye, snap, view);
  expect(ctx.ops.length).toBeGreaterThan(100);
  expect(ctx.globalAlpha).toBe(1);
});
test("the top-down view draws the real map, small or large", () => {
  const map = { rows: gridRows(), tile: TILE };
  const snap = snapshot([body({ mate: true })]);
  const big = fakeContext();
  drawTopdown(big as never, map, snap, (p: never) => p, { x: 0, y: 0, w: 900, h: 570 });
  const small = fakeContext();
  drawTopdown(small as never, map, snap, (p: never) => p, { x: 8, y: 8, w: 260, h: 165 }, { labels: false });
  expect(big.ops.some((o) => o.op === "fillText")).toBe(true);
  expect(small.ops.some((o) => o.op === "fillText")).toBe(false);
  expect(small.ops.some((o) => o.op === "translate")).toBe(true);
});
test("on the map a dead team mate is crossed out and a dead enemy is not there", () => {
  const map = { rows: gridRows(), tile: TILE };
  const box = { x: 0, y: 0, w: 900, h: 570 };
  const look = (p: never) => p;
  const mate = fakeContext();
  drawTopdown(mate as never, map, snapshot([body({ mate: true, alive: false })]), look, box);
  // Two strokes through the dot, and no dot: a cross is not a live player.
  expect(mate.ops.filter((o) => o.op === "moveTo").length).toBe(2);
  expect(mate.ops.some((o) => o.op === "arc")).toBe(false);
  const enemy = fakeContext();
  drawTopdown(enemy as never, map, snapshot([body({ alive: false })]), look, box);
  const empty = fakeContext();
  drawTopdown(empty as never, map, snapshot([]), look, box);
  expect(enemy.ops.length).toBe(empty.ops.length);
});
test("a living team mate carries their initial on the big map", () => {
  const map = { rows: gridRows(), tile: TILE };
  const big = fakeContext();
  drawTopdown(big as never, map, snapshot([body({ mate: true, name: "Wren" })]), (p: never) => p, {
    x: 0,
    y: 0,
    w: 900,
    h: 570,
  });
  expect(big.ops.some((o) => o.op === "fillText" && o.args[0] === "W")).toBe(true);
});
test("the gun and the crosshair draw, and the hit marker only when there is one", () => {
  const gun = makeGun();
  const ctx = fakeContext();
  drawGun(ctx as never, gun, 900, 570, snapshot([]));
  const quiet = ctx.ops.length;
  gun.mark = 1;
  gun.kick = 1;
  const loud = fakeContext();
  drawGun(loud as never, gun, 900, 570, snapshot([]));
  expect(loud.ops.length).toBeGreaterThan(quiet);
});
@@ -6,7 +6,7 @@
import { join } from "node:path";
process.env.FORGE_APP_DATA = mkdtempSync(join(tmpdir(), "app-"));
process.env.PORT = "0";
const { server } = await import("./server.ts");
const { match, snapshot, advance } = await import("./arena.ts");
const { match, snapshot, advance, takeSeat } = await import("./arena.ts");
const base = `http://${server.hostname}:${server.port}`;
test("serves a live match on the first paint, with no script needed", async () => {
@@ -123,6 +123,11 @@
test("a snapshot only carries the enemies that viewer can see", () => {
  viewer.x = 1200;
  viewer.y = 1320;
  viewer.blind = 0;
  // Both of them alive on purpose: the arena is one live match that other
  // tests run forward, and a dead enemy is invisible for a different reason
  // than the one this test is about.
  viewer.alive = true;
  enemy.alive = true;
  enemy.x = 1200;
  enemy.y = 1240;
  enemy.revealed = 0;
@@ -176,3 +181,41 @@
test("the match keeps running and is never parked", () => {
  expect(state.now).toBeGreaterThan(before);
  expect(["buy", "live", "end", "over"]).toContain(state.phase);
});
test("the kit is public: every ability, its price and what it does", async () => {
  const response = await fetch(base + "/agents.json");
  expect(response.status).toBe(200);
  expect(response.headers.get("content-security-policy")).toContain("default-src 'self'");
  const body = (await response.json()) as { agents: { id: string; abilities: Record<string, { name: string; cost: number; text: string }> }[] };
  expect(body.agents.length).toBe(5);
  const veil = body.agents.find((a) => a.id === "veil")!;
  expect(veil.abilities.c.name).toBe("Cloudburst");
  expect(veil.abilities.c.cost).toBe(100);
  expect(veil.abilities.e.text).toContain("smoke");
  // The ultimate is never for sale, and no server-only state leaks out.
  expect(veil.abilities.x.cost).toBe(0);
  expect(JSON.stringify(body)).not.toContain("kind");
});
test("the page carries the first-run card and the prompt line", async () => {
  const body = await (await fetch(base + "/")).text();
  expect(body).toContain('id="help"');
  expect(body).toContain("How to play");
  expect(body).toContain('id="prompt"');
  // Every buy button says what it costs, so the panel is readable at a glance.
  expect(body).toContain('data-buy="vandal" data-cost="2900"');
  expect(body).toContain('id="viewtoggle"');
});
test("two people who pick the same name do not end up with the same name", () => {
  // Everything that addresses a player — the kill feed, the round log, the
  // scoreboard — does it by name, so the match may never hold two of one.
  const first = takeSeat("clash-a", "Twin")!;
  const second = takeSeat("clash-b", "Twin")!;
  expect(first.name).toBe("Twin");
  expect(second.name).not.toBe("Twin");
  expect(second.name.startsWith("Twin")).toBe(true);
  expect(second.name.length).toBeLessThanOrEqual(16);
  const names = match().players.map((p) => p.name);
  expect(new Set(names).size).toBe(names.length);
});
@@ -9,6 +9,7 @@
import { createHash, randomUUID } from "node:crypto";
import { join } from "node:path";
import { AGENTS, SLOTS } from "./abilities.ts";
import { attach, command, findPlayer, match, release, snapshot, startArena, takeSeat, type Command } from "./arena.ts";
import { recentResults } from "./db.ts";
import { gridRows, TILE } from "./map.ts";
@@ -103,10 +104,17 @@
async function readForm(request: Request): Promise<FormData | undefined> {
// ------------------------------------------------------------- the client
// The client script is named by its content: a change is a new URL, so a
// year-long cache is never stale.
const scriptPath = join(import.meta.dir, "..", "static", "val.js");
const scriptBody = await Bun.file(scriptPath).text();
// The client is a handful of small modules under static/ — the renderer, the
// map, the crosshair, the ray maths — bundled into one file at start-up so a
// browser makes one request and the maths can still be imported by the tests.
// It is named by its content: a change is a new URL, so a year-long cache is
// never stale.
const built = await Bun.build({
  entrypoints: [join(import.meta.dir, "..", "static", "val.js")],
  target: "browser",
});
if (!built.success) throw new AggregateError(built.logs, "the client would not build");
const scriptBody = await built.outputs[0]!.text();
const scriptHash = createHash("sha256").update(scriptBody).digest("hex").slice(0, 10);
const scriptUrl = `/static/val.${scriptHash}.js`;
@@ -192,6 +200,38 @@
export const server = Bun.serve<SocketData, Record<string, never>>({
        : response;
    }
    // The agents and their kits: what every ability does, its price and its
    // charges, so the buy panel can label itself. The same table the server
    // plays by, and no secret in it.
    if (url.pathname === "/agents.json" && (request.method === "GET" || request.method === "HEAD"))
      return Response.json(
        {
          agents: AGENTS.map((a) => ({
            id: a.id,
            name: a.name,
            role: a.role,
            blurb: a.blurb,
            abilities: Object.fromEntries(
              SLOTS.map((slot) => {
                const ability = a.abilities[slot];
                return [
                  slot,
                  {
                    name: ability.name,
                    cost: ability.cost,
                    charges: ability.charges,
                    cooldown: ability.cooldown,
                    points: ability.points,
                    text: ability.text,
                  },
                ];
              }),
            ),
          })),
        },
        { headers: { "cache-control": "public, max-age=300", ...SECURITY } },
      );
    // The map is the same for everybody and changes only when the code does.
    if (url.pathname === "/map.json" && (request.method === "GET" || request.method === "HEAD"))
      return Response.json(
@@ -0,0 +1,35 @@
import { expect, test } from "bun:test";
import { moveVector } from "../static/steer.js";
test("W walks the way you are looking, whichever way that is", () => {
  const east = moveVector(0, -1, 0);
  expect(east.x).toBeCloseTo(1, 6);
  expect(east.y).toBeCloseTo(0, 6);
  const south = moveVector(0, -1, Math.PI / 2);
  expect(south.x).toBeCloseTo(0, 6);
  expect(south.y).toBeCloseTo(1, 6);
});
test("D strafes across the facing, not along it", () => {
  const right = moveVector(1, 0, 0);
  expect(right.x).toBeCloseTo(0, 6);
  expect(right.y).toBeCloseTo(1, 6);
  const other = moveVector(-1, 0, 0);
  expect(other.y).toBeCloseTo(-1, 6);
});
test("forward and strafe together keep their length", () => {
  const both = moveVector(1, -1, 0.7);
  expect(Math.hypot(both.x, both.y)).toBeCloseTo(Math.SQRT2, 6);
});
test("standing still stays still", () => {
  const still = moveVector(0, 0, 2.2);
  expect(still.x).toBeCloseTo(0, 6);
  expect(still.y).toBeCloseTo(0, 6);
});
test("it fills the object it was given, so the input loop allocates nothing", () => {
  const out = { x: 0, y: 0 };
  expect(moveVector(0, -1, 0, out)).toBe(out);
});
@@ -7,6 +7,8 @@
 * The map is the same grid, one character a tile. Plain ANSI, no dependencies.
 */
import { choosePrompt, REACH } from "../static/prompt.js";
const base =
  process.env.VAL_URL ??
  (process.env.PORT ? `http://127.0.0.1:${process.env.PORT}` : undefined) ??
@@ -38,6 +40,7 @@
let status = "connecting";
let aim = -Math.PI / 2;
let move = { mx: 0, my: 0, until: 0 };
let firing = 0;
let helping = false;
let using = 0;
let buying = false;
@@ -71,6 +74,28 @@
async function connect(): Promise<void> {
const colour = (s: string, code: number): string => `${esc}${code}m${s}${esc}0m`;
/** The same line the page shows, from the same function. */
function prompt(s: Snapshot): string {
  const row = map ? map.rows[Math.floor(s.me.y / map.tile)] : "";
  const cell = row ? row[Math.floor(s.me.x / map.tile)] : "";
  return choosePrompt(s, {
    input: "keys",
    onSite: cell === "A" || cell === "B",
    nearSpike:
      s.spike.x !== null && s.spike.y !== null && Math.hypot(s.spike.x - s.me.x, s.spike.y - s.me.y) < REACH,
  });
}
const HOW_TO = [
  "How to play — attackers carry the spike to site A or B and plant it (hold f);",
  "defenders stop them, or hold f on a planted spike to defuse it. 45s fuse, first to 13.",
  "· wasd walks, ←/→ turns the aim, space fires, r reloads",
  "· c q e x cast the kit: c and q are bought in the buy phase, e is free on a cooldown, x is the ultimate",
  "· b opens the buy — the same prices the page charges, refused server-side if you cannot afford them",
  "· A and B on the map are the sites, @ is you, cyan is a team mate, red is an enemy you can see",
  "h closes this.",
];
function draw(): void {
  if (!map) {
    out(`${esc}2J${esc}Hval — ${status}\r\n`);
@@ -101,6 +126,7 @@
function draw(): void {
    lines.push(
      `${me.alive ? colour(`${me.hp}hp${me.armour ? "+" + me.armour : ""}`, 32) : colour("dead", 90)}  ${me.weapon} ${me.ammo}  ${me.credits}cr  ult ${me.ult}/${me.ultNeeds}  C${me.charges.c} Q${me.charges.q} E${me.charges.e}${me.spike ? colour("  SPIKE", 33) : ""}${me.blind > 0 ? colour("  BLIND", 97) : ""}  aim ${((aim * 180) / Math.PI).toFixed(0)}°`,
    );
    lines.push(colour("› " + prompt(snap), 93));
  } else lines.push(`val — ${status}`);
  lines.push("");
  for (const row of rows) lines.push(" " + row.join(""));
@@ -117,10 +143,11 @@
function draw(): void {
    for (const event of snap.events.slice(0, 3)) lines.push(colour("· " + event, 90));
  }
  lines.push("");
  if (helping) for (const line of HOW_TO) lines.push(colour(line, 96));
  lines.push(
    buying
      ? colour("buy: 1 Classic 2 Ghost 3 Sheriff 4 Spectre 5 Phantom 6 Vandal 7 Operator · 8 light 9 heavy · c/q ability · b closes", 33)
      : colour("wasd move · ←/→ aim · space fire · f plant/defuse · c q e x cast · b buy · r reload · q quit", 90),
      : colour("wasd move · ←/→ aim · space fire · f plant/defuse · c q e x cast · b buy · r reload · h how to play · q quit", 90),
  );
  out(`${esc}H${esc}J` + lines.join("\r\n"));
}
@@ -146,6 +173,7 @@
process.stdin.on("data", (key: string) => {
    return;
  }
  if (key === "b") return void (buying = true);
  if (key === "h" || key === "?") return void (helping = !helping);
  if (key === "w") move = { mx: move.mx, my: -1, until: now + 400 };
  if (key === "s") move = { mx: move.mx, my: 1, until: now + 400 };
  if (key === "a") move = { mx: -1, my: move.my, until: now + 400 };
@@ -0,0 +1,62 @@
/**
 * The spike, out loud.
 *
 * One oscillator per beep, scheduled by how much fuse is left: a slow tick
 * when it is planted, a stutter when it is about to go. No audio files, and
 * nothing is created until the person has clicked the page — a browser will
 * not start an audio context before that, and should not.
 */
/** Seconds between beeps for this much fuse left. */
export function beepInterval(fuse) {
  if (fuse <= 0) return 0;
  return Math.max(0.12, Math.min(1, fuse / 30));
}
/** The pitch rises as the fuse burns, so it is audible without watching. */
export const beepPitch = (fuse) => 760 + 620 * (1 - Math.min(1, fuse / 45));
export function makeBeeper() {
  let audio = null;
  let next = 0;
  const context = () => {
    if (audio) return audio;
    const Ctor = globalThis.AudioContext || globalThis.webkitAudioContext;
    if (!Ctor) return null;
    audio = new Ctor();
    return audio;
  };
  return {
    /** Called on a click: browsers only allow audio to start from a gesture. */
    wake() {
      const ctx = context();
      if (ctx && ctx.state === "suspended") ctx.resume();
    },
    /** Called every frame with the fuse the server last sent. */
    update(planted, fuse, now) {
      if (!planted || fuse <= 0) {
        next = 0;
        return;
      }
      if (!audio) return; // no gesture yet; nothing to play into
      if (now < next) return;
      next = now + beepInterval(fuse);
      beep(audio, beepPitch(fuse));
    },
  };
}
function beep(audio, hz) {
  const osc = audio.createOscillator();
  const gain = audio.createGain();
  osc.type = "square";
  osc.frequency.value = hz;
  gain.gain.setValueAtTime(0.0001, audio.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.09, audio.currentTime + 0.01);
  gain.gain.exponentialRampToValueAtTime(0.0001, audio.currentTime + 0.09);
  osc.connect(gain).connect(audio.destination);
  osc.start();
  osc.stop(audio.currentTime + 0.1);
}
@@ -0,0 +1,101 @@
/**
 * The gun in your hands: a crosshair, a shape at the bottom of the screen
 * that kicks when you fire, and a marker when a shot of yours lands.
 *
 * The client never decides whether it hit anything — it reads that off the
 * shots the server sent, the same ones the top-down view draws.
 */
export const makeGun = () => ({ kick: 0, mark: 0, ammo: null });
/** Recoil and the hit marker both fade the same way: fast, and to zero. */
export const fade = (value, dt, life) => Math.max(0, value - dt / life);
/** A shot happened when the magazine went down, never when it was reloaded. */
export const firedNow = (before, ammo, reloading) =>
  before !== null && !reloading && ammo < before;
/** One of my shots landed: it started where I am standing and the server says it hit. */
export function hitMarked(shots, me) {
  for (const shot of shots) {
    if (!shot.hit) continue;
    if (Math.hypot(shot.x1 - me.x, shot.y1 - me.y) < 30) return true;
  }
  return false;
}
/** Fold a fresh snapshot into the gun's state: kick on a shot, mark on a hit. */
export function gunSnapshot(gun, snap) {
  if (firedNow(gun.ammo, snap.me.ammo, snap.me.reloading)) gun.kick = 1;
  if (snap.me.alive && hitMarked(snap.shots, snap.me)) gun.mark = 1;
  gun.ammo = snap.me.ammo;
}
export function gunTick(gun, dt) {
  gun.kick = fade(gun.kick, dt, 0.12);
  gun.mark = fade(gun.mark, dt, 0.35);
}
/** The crosshair, the weapon and the marker, in that order of importance. */
export function drawGun(ctx, gun, width, height, snap) {
  const cx = width / 2;
  const cy = height / 2;
  const gap = 6 + gun.kick * 10;
  const arm = 9;
  ctx.lineWidth = 2;
  ctx.strokeStyle = "rgba(20,24,30,0.8)";
  ctx.beginPath();
  for (const [dx, dy] of [
    [1, 0],
    [-1, 0],
    [0, 1],
    [0, -1],
  ]) {
    ctx.moveTo(cx + dx * gap, cy + dy * gap);
    ctx.lineTo(cx + dx * (gap + arm), cy + dy * (gap + arm));
  }
  ctx.stroke();
  ctx.strokeStyle = snap.me.alive ? "#8ef0c4" : "#888";
  ctx.lineWidth = 1.4;
  ctx.stroke();
  if (gun.mark > 0) {
    ctx.strokeStyle = `rgba(255,120,110,${gun.mark})`;
    ctx.lineWidth = 2.5;
    ctx.beginPath();
    for (const [dx, dy] of [
      [1, 1],
      [-1, -1],
      [1, -1],
      [-1, 1],
    ]) {
      ctx.moveTo(cx + dx * 7, cy + dy * 7);
      ctx.lineTo(cx + dx * 15, cy + dy * 15);
    }
    ctx.stroke();
  }
  if (!snap.me.alive) return;
  // The weapon: a barrel and a body, off to the right, rising with the kick.
  const scale = height / 570;
  const lift = gun.kick * 22 * scale + (snap.me.reloading ? 40 * scale : 0);
  const bx = width * 0.66;
  const by = height + lift;
  ctx.fillStyle = "#23262e";
  ctx.beginPath();
  ctx.moveTo(bx - 34 * scale, by);
  ctx.lineTo(bx - 20 * scale, by - 130 * scale);
  ctx.lineTo(bx + 16 * scale, by - 150 * scale);
  ctx.lineTo(bx + 30 * scale, by - 40 * scale);
  ctx.lineTo(bx + 60 * scale, by);
  ctx.closePath();
  ctx.fill();
  ctx.fillStyle = "#3b414e";
  ctx.fillRect(bx - 8 * scale, by - 160 * scale, 22 * scale, 26 * scale);
  if (gun.kick > 0.35) {
    ctx.fillStyle = `rgba(255,220,140,${gun.kick})`;
    ctx.beginPath();
    ctx.arc(bx + 3 * scale, by - 162 * scale, 18 * scale * gun.kick, 0, 7);
    ctx.fill();
  }
}
@@ -0,0 +1,52 @@
/**
 * One line of advice, in the player's own words.
 *
 * A pure function of the snapshot the server sent plus two things the client
 * works out from the map it was given: whether you are standing on a site,
 * and whether you are within reach of the spike. Never more than one prompt —
 * the most urgent thing wins, because two instructions at once is none.
 */
/** Within this many units the server lets you pick up, plant or defuse. */
export const REACH = 46;
const secs = (n) => Math.max(0, Math.ceil(n));
export function choosePrompt(snap, world = {}) {
  if (!snap) return "";
  const me = snap.me;
  const spike = snap.spike;
  const onSite = world.onSite === true;
  const nearSpike = world.nearSpike === true;
  // The page is played with a mouse and the terminal with keys; one line
  // names the input, so it says the thing the reader can actually do.
  const buyWith = world.input === "keys" ? "Press b and buy a gun you can afford." : "Click a gun you can afford.";
  if (snap.phase === "over") return snap.result ? `Match over — ${snap.result}` : "Match over";
  if (me.blind > 0.05) return "You are blind — back off until it clears";
  if (!me.alive)
    return snap.phase === "buy"
      ? "Buy phase — you are back next round"
      : "Waiting for the next round — you're in it";
  if (snap.phase === "end") return snap.result ? `${snap.result} — next round in ${secs(snap.clock)}s` : "Round over";
  if (snap.phase === "buy") return `Buy phase — ${secs(snap.clock)}s left. ${buyWith}`;
  if (me.planting > 0) return `Planting — hold F for ${secs(4 - me.planting)}s more`;
  if (spike.planted) {
    if (me.side === "def") {
      if (spike.defuse > 0) return `Defusing — keep holding F, ${secs(7 - spike.defuse)}s`;
      return nearSpike
        ? `Spike down, ${secs(spike.fuse)}s — hold F to defuse`
        : `Spike down, ${secs(spike.fuse)}s — get to it and hold F`;
    }
    return `Spike down, ${secs(spike.fuse)}s — keep them off it`;
  }
  if (me.side === "atk") {
    if (me.spike) return onSite ? "Hold F to plant" : "You have the spike — get to site A or B";
    if (spike.carried) return "Your team has the spike — go with them and take a site";
    if (nearSpike) return "Walk onto the spike to pick it up";
    return "Somebody has to carry the spike — it is on the ground";
  }
  return `Defending — hold A and B, ${secs(snap.clock)}s`;
}
@@ -0,0 +1,170 @@
/**
 * The ray maths. Pure numbers in, pure numbers out: no canvas, no DOM, no
 * state — so every decision the first-person view makes can be tested
 * without a browser.
 *
 * The camera is a flat projection plane at `projection()` pixels from the
 * eye. A column maps to an angle through that plane, not by sweeping the
 * field of view evenly, which is what keeps straight walls straight. Depth
 * is always the perpendicular distance to the plane: the fish-eye correction
 * and the sprite z-clip both depend on the two being the same measure.
 *
 * Nothing here allocates. The DDA writes its answer into a result object the
 * caller owns, so a 900-column frame allocates nothing at all.
 */
export const FOV = (75 * Math.PI) / 180;
/** Pixels from the eye to the projection plane for a screen this wide. */
export const projection = (width, fov = FOV) => width / 2 / Math.tan(fov / 2);
/** The angle of the ray through screen column `col`, relative to the view. */
export function columnOffset(col, width, fov = FOV) {
  const cameraX = (2 * (col + 0.5)) / width - 1;
  return Math.atan(cameraX * Math.tan(fov / 2));
}
/** The world angle of the ray through screen column `col`. */
export const columnAngle = (col, width, view, fov = FOV) => view + columnOffset(col, width, fov);
/** The screen column a world angle falls on, fractional, off-screen allowed. */
export function angleColumn(offset, width, fov = FOV) {
  return (width / 2) * (1 + Math.tan(offset) / Math.tan(fov / 2));
}
/** A wall `tall` units high at this depth covers this many pixels. */
export const sliceHeight = (perp, proj, tall) => (tall * proj) / Math.max(perp, 1e-6);
/** A fresh result object for `castRay` to fill. One per renderer, not per ray. */
export const hitResult = () => ({ dist: 0, side: 0, col: 0, row: 0, wall: false });
/**
 * March a ray through the tile grid until it meets a solid tile.
 *
 * `solid(col, row)` answers for the grid; `out` is filled with the distance
 * travelled, which side of the tile was struck (0 = an east or west face,
 * 1 = a north or south face) and the tile itself. A ray that runs out of
 * range reports `wall: false` at `max`.
 */
export function castRay(solid, x, y, angle, tile, max, out) {
  const dx = Math.cos(angle);
  const dy = Math.sin(angle);
  let col = Math.floor(x / tile);
  let row = Math.floor(y / tile);
  const deltaX = dx === 0 ? Infinity : Math.abs(tile / dx);
  const deltaY = dy === 0 ? Infinity : Math.abs(tile / dy);
  const stepX = dx < 0 ? -1 : 1;
  const stepY = dy < 0 ? -1 : 1;
  let sideX = dx === 0 ? Infinity : dx < 0 ? (x - col * tile) / -dx : ((col + 1) * tile - x) / dx;
  let sideY = dy === 0 ? Infinity : dy < 0 ? (y - row * tile) / -dy : ((row + 1) * tile - y) / dy;
  if (solid(col, row)) {
    out.dist = 0;
    out.side = 0;
    out.col = col;
    out.row = row;
    out.wall = true;
    return out;
  }
  for (;;) {
    let dist;
    let side;
    if (sideX < sideY) {
      dist = sideX;
      col += stepX;
      sideX += deltaX;
      side = 0;
    } else {
      dist = sideY;
      row += stepY;
      sideY += deltaY;
      side = 1;
    }
    if (dist > max) {
      out.dist = max;
      out.side = side;
      out.col = col;
      out.row = row;
      out.wall = false;
      return out;
    }
    if (solid(col, row)) {
      out.dist = dist;
      out.side = side;
      out.col = col;
      out.row = row;
      out.wall = true;
      return out;
    }
  }
}
/**
 * How lit a wall slice is: one over the distance, floored so a far wall is
 * dim rather than black, and a north–south face darker than an east–west one
 * so a corner reads as a corner.
 */
export function wallLight(perp, side, tile) {
  const far = 1 / (1 + (perp / (tile * 7)) ** 2);
  const face = side === 1 ? 0.62 : 1;
  return Math.max(0.12, Math.min(1, 0.25 + 0.75 * far)) * face;
}
/** A floor or ceiling band dims the same way, by how far down the screen it is. */
export const bandLight = (rowFromHorizon, halfHeight) =>
  Math.max(0.1, Math.min(1, rowFromHorizon / Math.max(1, halfHeight)));
/**
 * Where a thing in the world lands on the screen.
 *
 * Returns the fractional column of its centre, its perpendicular depth and
 * the pixel height of something `tall` units high there. `behind` is true
 * when it is at or past the camera plane and must not be drawn at all.
 */
export function project(px, py, view, sx, sy, width, proj, tall, out, fov = FOV) {
  const dx = sx - px;
  const dy = sy - py;
  const dist = Math.hypot(dx, dy);
  let offset = Math.atan2(dy, dx) - view;
  while (offset > Math.PI) offset -= Math.PI * 2;
  while (offset < -Math.PI) offset += Math.PI * 2;
  const perp = dist * Math.cos(offset);
  out.dist = dist;
  out.offset = offset;
  out.perp = perp;
  out.behind = perp <= 1 || Math.abs(offset) > fov / 2 + 0.8;
  out.column = out.behind ? -1 : angleColumn(offset, width, fov);
  out.size = out.behind ? 0 : sliceHeight(perp, proj, tall);
  return out;
}
export const projectResult = () => ({ dist: 0, offset: 0, perp: 0, behind: true, column: -1, size: 0 });
/**
 * Is a sprite column in front of the wall drawn there? A sprite slightly
 * nearer than the wall still counts as hidden by a hair of slack, so a body
 * flush against a corner does not bleed through it.
 */
export const spriteColumnVisible = (spritePerp, wallPerp) => spritePerp < wallPerp - 2;
/**
 * How much smoke a ray crosses between the eye and `dist`.
 *
 * The chord of the circle that falls inside the segment, as a fraction of the
 * circle's width: a ray that clips the edge of a smoke barely fogs, one that
 * goes through the middle fogs completely. That is what makes a smoke read as
 * a volume you are standing in rather than a disc painted on the floor.
 */
export function smokeAlong(x, y, dx, dy, cx, cy, r, dist) {
  const ox = x - cx;
  const oy = y - cy;
  const b = ox * dx + oy * dy;
  const c = ox * ox + oy * oy - r * r;
  const disc = b * b - c;
  if (disc <= 0) return 0;
  const root = Math.sqrt(disc);
  const enter = Math.max(0, -b - root);
  const leave = Math.min(dist, -b + root);
  if (leave <= enter) return 0;
  return Math.min(1, (leave - enter) / (r * 1.1));
}
@@ -0,0 +1,30 @@
/**
 * Your five, always.
 *
 * Who is on your team and who is still standing must not depend on whether
 * you can see them — for most of a round you cannot see anybody. Every team
 * mate is in every snapshot already (the server shows you your own side), so
 * this is a read of what is there: a fixed order, health clamped, and the
 * dead marked.
 */
/** The player's own team, in a stable order, ready to draw as rows. */
export function roster(snap) {
  if (!snap || !snap.players) return [];
  return snap.players
    .filter((p) => p.mate)
    .map((p) => ({
      id: p.id,
      name: p.name,
      agent: p.agent,
      hp: p.alive ? Math.max(0, Math.min(100, p.hp)) : 0,
      alive: p.alive === true,
      spike: p.spike === true,
      mine: p.id === snap.me.id,
    }))
    .sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
}
/** Enough of the roster to know when the panel has to be rebuilt. */
export const rosterKey = (rows) =>
  rows.map((r) => `${r.id}:${r.agent}:${Math.round(r.hp)}:${r.alive ? 1 : 0}:${r.spike ? 1 : 0}`).join("|");
@@ -0,0 +1,389 @@
/**
 * The world, drawn from inside the player's head.
 *
 * One pass of rays across the screen builds the walls and a depth buffer;
 * everything else — bodies, the spike, ability zones, tracers — is a
 * billboard tested against that buffer, so a body behind a corner is not
 * drawn at all. Smoke is measured along each ray, not painted as a disc:
 * cross one and everything past it fogs.
 *
 * The ray loop allocates nothing. Colours come out of a table built once,
 * the depth and fog buffers are kept between frames, and the sprite list is
 * sorted in a buffer the scene owns.
 */
import {
  castRay,
  columnOffset,
  hitResult,
  project,
  projection,
  projectResult,
  sliceHeight,
  smokeAlong,
  spriteColumnVisible,
  wallLight,
} from "./raycast.js";
const EYE = 40; // half a tile up: the horizon sits on the middle of the wall
const WALL = 80; // walls are one tile tall
const BODY = 58; // a person, in world units
const MAX_SIGHT = 1800;
const LEVELS = 48;
export const AGENT_COLOUR = {
  ember: "#f08a4b",
  veil: "#8f7fe8",
  sable: "#4fd6a0",
  mender: "#e0c060",
  rook: "#d96a8f",
};
// Wall colours, quantised into levels and built once, so the ray loop never
// builds a string. How dark a slice is comes from `wallLight`, which already
// knows about distance and which face was struck.
const SHADES = (() => {
  const out = [];
  for (let i = 0; i < LEVELS; i++) {
    const k = (i + 0.5) / LEVELS;
    out.push(`rgb(${Math.round(150 * k)},${Math.round(158 * k)},${Math.round(178 * k)})`);
  }
  return out;
})();
const FOG = "rgb(198,203,212)";
export function makeScene() {
  return {
    depth: new Float32Array(0),
    fog: new Float32Array(0),
    hit: hitResult(),
    proj: projectResult(),
    order: [],
    smokes: [],
    sky: null,
    skyKey: "",
  };
}
const shadeOf = (light) => SHADES[Math.min(LEVELS - 1, Math.max(0, (light * LEVELS) | 0))];
/**
 * Draw one frame.
 *
 * `world` carries the map (`solid`, `tile`), `eye` is where the camera
 * stands and looks, `snap` is the last snapshot the server sent, and `view`
 * is the frame: its pixel size, and `look(player)` for the smoothed position
 * to draw somebody at.
 */
export function drawScene(ctx, scene, world, eye, snap, view) {
  const W = view.width;
  const H = view.height;
  const step = W > 1100 ? 2 : 1;
  const columns = Math.ceil(W / step);
  if (scene.depth.length !== columns) {
    scene.depth = new Float32Array(columns);
    scene.fog = new Float32Array(columns);
  }
  const proj = projection(W);
  const horizon = H / 2;
  drawSky(ctx, scene, W, H, horizon);
  const smokes = scene.smokes;
  smokes.length = 0;
  for (const zone of snap.zones) if ((zone.k === "smoke" || zone.k === "wall") && zone.f <= 0) smokes.push(zone);
  const depth = scene.depth;
  const fog = scene.fog;
  const hit = scene.hit;
  for (let i = 0; i < columns; i++) {
    const offset = columnOffset(i * step + step / 2, W);
    const angle = eye.angle + offset;
    castRay(world.solid, eye.x, eye.y, angle, world.tile, MAX_SIGHT, hit);
    const perp = Math.max(1, hit.dist * Math.cos(offset));
    depth[i] = perp;
    let haze = 0;
    if (smokes.length) {
      const dx = Math.cos(angle);
      const dy = Math.sin(angle);
      for (let s = 0; s < smokes.length; s++) {
        const z = smokes[s];
        haze += smokeAlong(eye.x, eye.y, dx, dy, z.x, z.y, z.r, hit.dist);
        if (haze >= 1) break;
      }
      haze = Math.min(1, haze);
    }
    fog[i] = haze;
    if (!hit.wall) continue;
    const h = Math.min(H * 6, sliceHeight(perp, proj, WALL));
    const top = horizon - h / 2;
    ctx.fillStyle = shadeOf(wallLight(perp, hit.side, world.tile));
    ctx.fillRect(i * step, top, step + 1, h);
    if (haze > 0.01) {
      ctx.globalAlpha = haze;
      ctx.fillStyle = FOG;
      ctx.fillRect(i * step, top, step + 1, h);
      ctx.globalAlpha = 1;
    }
  }
  drawThings(ctx, scene, world, eye, snap, view, proj, horizon, step, columns);
}
/** The two bands: a dark ceiling above the horizon, a warmer floor below. */
function drawSky(ctx, scene, W, H, horizon) {
  const key = `${W}x${H}`;
  if (scene.skyKey !== key || !scene.sky) {
    const sky = ctx.createLinearGradient(0, 0, 0, H);
    sky.addColorStop(0, "#0a0c11");
    sky.addColorStop(0.49, "#23262f");
    sky.addColorStop(0.5, "#3a3026");
    sky.addColorStop(1, "#15120e");
    scene.sky = sky;
    scene.skyKey = key;
  }
  ctx.fillStyle = scene.sky;
  ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = "rgba(255,255,255,0.09)";
  ctx.fillRect(0, horizon - 1, W, 2);
}
/**
 * Everything that is not a wall, far to near, each one clipped to the screen
 * columns where it beats the wall behind it.
 */
function drawThings(ctx, scene, world, eye, snap, view, proj, horizon, step, columns) {
  const W = view.width;
  const things = scene.order;
  things.length = 0;
  for (const zone of snap.zones) {
    if (zone.k === "smoke") continue;
    things.push({ kind: "zone", zone, x: zone.x, y: zone.y });
  }
  for (const orb of snap.orbs) things.push({ kind: "orb", x: orb.x, y: orb.y });
  if (snap.spike.x !== null && !snap.spike.carried)
    things.push({ kind: "spike", x: snap.spike.x, y: snap.spike.y });
  for (const player of snap.players) {
    if (player.id === snap.me.id) continue;
    const at = view.look(player);
    things.push({ kind: "body", player, x: at.x, y: at.y, angle: at.angle });
  }
  const p = scene.proj;
  for (const thing of things) {
    project(eye.x, eye.y, eye.angle, thing.x, thing.y, W, proj, BODY, p);
    thing.perp = p.perp;
    thing.column = p.column;
    thing.size = p.size;
    thing.behind = p.behind;
  }
  things.sort((a, b) => b.perp - a.perp);
  for (const thing of things) {
    if (thing.behind) continue;
    const floorY = horizon + (EYE * proj) / thing.perp;
    const haze = hazeAt(scene, thing.column, step, columns);
    ctx.globalAlpha = Math.max(0, 1 - haze);
    if (ctx.globalAlpha < 0.05) continue;
    if (thing.kind === "body") drawBody(ctx, scene, thing, floorY, step, columns);
    else if (thing.kind === "spike") drawSpike(ctx, scene, thing, floorY, snap, step, columns);
    else if (thing.kind === "orb") drawBlob(ctx, scene, thing, floorY, "#c9a0ff", 0.35, step, columns);
    else drawZone(ctx, scene, thing, floorY, proj, step, columns);
    ctx.globalAlpha = 1;
  }
  ctx.globalAlpha = 1;
  drawTracers(ctx, scene, eye, snap, W, proj, horizon);
}
const hazeAt = (scene, column, step, columns) => {
  const i = Math.max(0, Math.min(columns - 1, Math.round(column / step)));
  return scene.fog[i] ?? 0;
};
/**
 * The visible runs of a sprite: the stretches of screen column where it is
 * nearer than the wall. Two rectangles at most in practice, and the caller
 * clips its drawing to each.
 */
function withRuns(ctx, scene, left, right, perp, step, columns, draw) {
  let runStart = -1;
  const from = Math.max(0, Math.floor(left / step));
  const to = Math.min(columns - 1, Math.ceil(right / step));
  for (let i = from; i <= to + 1; i++) {
    const shown = i <= to && spriteColumnVisible(perp, scene.depth[i]);
    if (shown && runStart < 0) runStart = i;
    if (!shown && runStart >= 0) {
      ctx.save();
      ctx.beginPath();
      ctx.rect(runStart * step - 0.5, 0, (i - runStart) * step + 1, 1e5);
      ctx.clip();
      draw();
      ctx.restore();
      runStart = -1;
    }
  }
}
function drawBody(ctx, scene, thing, floorY, step, columns) {
  const p = thing.player;
  const h = thing.size;
  const w = h * 0.46;
  const cx = thing.column;
  const top = floorY - h;
  const mate = p.mate;
  // The dead lie down. No tag, no chevron, no agent colour: if something is
  // upright with a marker over it, it is alive and it can shoot you.
  if (!p.alive) {
    const lie = h * 0.16;
    withRuns(ctx, scene, cx - w * 1.1, cx + w * 1.1, thing.perp, step, columns, () => {
      ctx.fillStyle = "#4a4e57";
      ctx.beginPath();
      ctx.ellipse(cx, floorY - lie * 0.4, w * 1.05, lie, 0, 0, 7);
      ctx.fill();
      ctx.strokeStyle = "#23262d";
      ctx.lineWidth = Math.max(1, h * 0.02);
      ctx.stroke();
    });
    return;
  }
  const skin = mate ? "#3f9fd6" : "#d8483f";
  const trim = AGENT_COLOUR[p.agent] || "#999";
  const edge = Math.max(1.2, h * 0.05);
  withRuns(ctx, scene, cx - w * 1.2, cx + w * 1.5, thing.perp, step, columns, () => {
    // Body and head, each with a hard dark edge: the silhouette is what
    // carries across a dim room, where the colour does not.
    ctx.fillStyle = skin;
    ctx.fillRect(cx - w / 2, top + h * 0.28, w, h * 0.72);
    ctx.strokeStyle = "#0b0d11";
    ctx.lineWidth = edge;
    ctx.strokeRect(cx - w / 2, top + h * 0.28, w, h * 0.72);
    ctx.fillStyle = trim;
    ctx.fillRect(cx - w / 2, top + h * 0.34, w, h * 0.1);
    ctx.beginPath();
    ctx.arc(cx, top + h * 0.17, h * 0.15, 0, 7);
    ctx.fillStyle = skin;
    ctx.fill();
    ctx.strokeStyle = "#0b0d11";
    ctx.stroke();
    if (p.spike) {
      ctx.fillStyle = "#f0d060";
      ctx.fillRect(cx + w * 0.5, top + h * 0.4, w * 0.3, h * 0.3);
    }
    if (p.hp < 100) {
      ctx.fillStyle = "#000a";
      ctx.fillRect(cx - w / 2, top - h * 0.1, w, h * 0.06);
      ctx.fillStyle = mate ? "#6fcf6f" : "#e8b04a";
      ctx.fillRect(cx - w / 2, top - h * 0.1, w * (p.hp / 100), h * 0.06);
    }
    if (mate) tag(ctx, p, cx, top, h);
    else chevron(ctx, cx, top, h);
  });
}
/** An enemy wears a chevron: a shape, not a hue, for anyone whose eyes read
 * red and blue the same way. */
function chevron(ctx, cx, top, h) {
  const size = Math.max(4, h * 0.16);
  const y = top - h * 0.16;
  ctx.beginPath();
  ctx.moveTo(cx - size, y - size);
  ctx.lineTo(cx + size, y - size);
  ctx.lineTo(cx, y);
  ctx.closePath();
  ctx.fillStyle = "#ff6f5e";
  ctx.fill();
  ctx.lineWidth = Math.max(1, h * 0.02);
  ctx.strokeStyle = "#140a08";
  ctx.stroke();
}
/** A team mate wears their name and a pip of their health — never an enemy. */
function tag(ctx, p, cx, top, h) {
  const size = Math.max(9, Math.min(18, h * 0.16));
  const y = top - h * 0.34;
  ctx.font = `${size}px system-ui, sans-serif`;
  ctx.textAlign = "center";
  const width = ctx.measureText(p.name).width + size * 1.4;
  ctx.fillStyle = "rgba(10,12,16,0.65)";
  ctx.fillRect(cx - width / 2, y, width, size * 1.4);
  ctx.fillStyle = p.hp > 60 ? "#6fcf6f" : p.hp > 25 ? "#e0a040" : "#e05a4a";
  ctx.fillRect(cx - width / 2 + size * 0.25, y + size * 0.35, size * 0.45, size * 0.7);
  ctx.fillStyle = "#cfe8ff";
  ctx.fillText(p.name, cx + size * 0.4, y + size * 1.05);
  ctx.textAlign = "left";
}
function drawSpike(ctx, scene, thing, floorY, snap, step, columns) {
  const h = thing.size * 0.42;
  const cx = thing.column;
  const planted = snap.spike.planted;
  const blink = planted && Math.floor(Date.now() / 220) % 2 === 0;
  withRuns(ctx, scene, cx - h, cx + h, thing.perp, step, columns, () => {
    ctx.fillStyle = planted ? (blink ? "#ff5b4a" : "#7d2a22") : "#c8b45c";
    ctx.fillRect(cx - h * 0.28, floorY - h, h * 0.56, h);
    ctx.fillStyle = planted && blink ? "#ffd7a0" : "#2a2418";
    ctx.fillRect(cx - h * 0.14, floorY - h * 0.85, h * 0.28, h * 0.22);
  });
}
function drawBlob(ctx, scene, thing, floorY, colour, scale, step, columns) {
  const r = thing.size * scale;
  const cx = thing.column;
  withRuns(ctx, scene, cx - r, cx + r, thing.perp, step, columns, () => {
    ctx.fillStyle = colour;
    ctx.beginPath();
    ctx.arc(cx, floorY - r, r, 0, 7);
    ctx.fill();
  });
}
function drawZone(ctx, scene, thing, floorY, proj, step, columns) {
  const z = thing.zone;
  const wide = (z.r * proj) / thing.perp;
  const cx = thing.column;
  if (z.k === "wall") {
    const h = (WALL * proj) / thing.perp;
    withRuns(ctx, scene, cx - wide, cx + wide, thing.perp, step, columns, () => {
      ctx.fillStyle = "rgba(120,200,255,0.45)";
      ctx.fillRect(cx - wide, floorY - h, wide * 2, h);
      ctx.strokeStyle = "rgba(180,225,255,0.8)";
      ctx.strokeRect(cx - wide, floorY - h, wide * 2, h);
    });
    return;
  }
  const colour =
    z.k === "molly" ? "rgba(235,120,50,0.6)" : z.k === "flash" ? "rgba(255,235,170,0.9)" : z.k === "heal" ? "rgba(120,230,140,0.55)" : z.k === "trip" ? "rgba(230,200,90,0.75)" : "rgba(90,220,170,0.5)";
  withRuns(ctx, scene, cx - wide, cx + wide, thing.perp, step, columns, () => {
    ctx.fillStyle = colour;
    ctx.beginPath();
    ctx.ellipse(cx, floorY, wide, Math.max(2, wide * 0.3), 0, 0, 7);
    ctx.fill();
  });
}
/** Shots the server let us see, as a line through the world. */
function drawTracers(ctx, scene, eye, snap, W, proj, horizon) {
  if (!snap.shots.length) return;
  const p = scene.proj;
  ctx.lineWidth = 2;
  for (const shot of snap.shots) {
    project(eye.x, eye.y, eye.angle, shot.x1, shot.y1, W, proj, BODY, p);
    if (p.behind) continue;
    const x1 = p.column;
    const y1 = horizon + (EYE * proj) / p.perp - p.size * 0.6;
    project(eye.x, eye.y, eye.angle, shot.x2, shot.y2, W, proj, BODY, p);
    if (p.behind) continue;
    ctx.strokeStyle = shot.hit ? "rgba(255,140,120,0.5)" : "rgba(255,240,190,0.35)";
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(p.column, horizon + (EYE * proj) / p.perp - p.size * 0.6);
    ctx.stroke();
  }
}
@@ -0,0 +1,20 @@
/**
 * Keys to a direction on the map.
 *
 * The server has always been told a world-space direction, and that contract
 * does not change: from inside the player's head W means "the way I am
 * looking", so the keys are turned by the view angle before they are sent.
 * In the top-down view the keys are the compass they always were.
 */
/**
 * `ax` is right on the keyboard (+1 for D), `ay` is down the screen (+1 for
 * S, so forward is -1). `out` is filled and returned: no allocation.
 */
export function moveVector(ax, ay, yaw, out = { x: 0, y: 0 }) {
  const cos = Math.cos(yaw);
  const sin = Math.sin(yaw);
  out.x = cos * -ay - sin * ax;
  out.y = sin * -ay + cos * ax;
  return out;
}
@@ -0,0 +1,217 @@
/**
 * The board from above — the drawing this game started as.
 *
 * It is three things now: the minimap in the corner, the full-screen map Tab
 * holds open, and the view a phone plays in, where a raycaster with touch
 * look would be miserable. One function, drawn into whatever box it is given.
 */
import { AGENT_COLOUR } from "./scene.js";
const TILE_COLOUR = {
  "#": "#20242d",
  A: "#2c2a22",
  B: "#2c2a22",
  a: "#2a2024",
  d: "#1e2630",
  ".": "#171a21",
};
/**
 * Draw the whole map into `box` (canvas pixels). `look(player)` gives the
 * smoothed position; `opts.labels` draws site letters and names, which only
 * fit on the big version.
 */
export function drawTopdown(ctx, map, snap, look, box, opts = {}) {
  const cols = map.rows[0].length;
  const s = box.w / (cols * map.tile);
  const labels = opts.labels !== false;
  ctx.save();
  ctx.beginPath();
  ctx.rect(box.x, box.y, box.w, box.h);
  ctx.clip();
  ctx.translate(box.x, box.y);
  const t = map.tile * s;
  for (let row = 0; row < map.rows.length; row++)
    for (let col = 0; col < map.rows[row].length; col++) {
      const cell = map.rows[row][col];
      ctx.fillStyle = TILE_COLOUR[cell] ?? "#171a21";
      ctx.fillRect(col * t, row * t, t + 0.6, t + 0.6);
      if (labels && (cell === "A" || cell === "B")) {
        ctx.fillStyle = "#6b5f3a";
        ctx.font = `${Math.round(t * 0.5)}px system-ui, sans-serif`;
        ctx.fillText(cell, col * t + t * 0.3, row * t + t * 0.68);
      }
    }
  if (!snap) {
    ctx.restore();
    return;
  }
  for (const orb of snap.orbs) {
    ctx.fillStyle = "#c9a0ff";
    ctx.beginPath();
    ctx.arc(orb.x * s, orb.y * s, Math.max(2, 9 * s), 0, 7);
    ctx.fill();
  }
  for (const zone of snap.zones) if (zone.k !== "smoke") drawZone(ctx, zone, s);
  if (snap.spike.x !== null) {
    const x = snap.spike.x * s;
    const y = snap.spike.y * s;
    const r = Math.max(2.5, 7 * s);
    ctx.fillStyle = snap.spike.planted ? (Math.floor(Date.now() / 250) % 2 ? "#ff5b4a" : "#8a2a22") : "#c8b45c";
    ctx.fillRect(x - r, y - r, r * 2, r * 2);
    if (snap.spike.planted && snap.spike.defuse > 0) {
      ctx.fillStyle = "#4fd6a0";
      ctx.fillRect(x - 20 * s, y + 12 * s, 40 * s * (snap.spike.defuse / 7), 3);
    }
  }
  for (const shot of snap.shots) {
    ctx.strokeStyle = shot.hit ? "rgba(255,120,110,0.85)" : "rgba(255,240,180,0.5)";
    ctx.lineWidth = Math.max(1, 2 * s);
    ctx.beginPath();
    ctx.moveTo(shot.x1 * s, shot.y1 * s);
    ctx.lineTo(shot.x2 * s, shot.y2 * s);
    ctx.stroke();
  }
  for (const player of snap.players) drawPlayer(ctx, player, look(player), s, snap.me, labels);
  // Smoke last: on this view it hides what is under it, as it should.
  for (const zone of snap.zones) if (zone.k === "smoke" && zone.f <= 0) drawZone(ctx, zone, s);
  ctx.restore();
}
function drawZone(ctx, z, s) {
  const x = z.x * s;
  const y = z.y * s;
  const r = z.r * s;
  ctx.lineWidth = Math.max(1, s);
  if (z.k === "smoke") {
    ctx.fillStyle = "rgba(190,195,205,0.72)";
    disc(ctx, x, y, r, true);
  } else if (z.k === "molly") {
    ctx.fillStyle = "rgba(230,110,50,0.45)";
    ctx.strokeStyle = "#f08a4b";
    disc(ctx, x, y, r, true, true);
  } else if (z.k === "wall") {
    ctx.fillStyle = "rgba(120,200,255,0.55)";
    disc(ctx, x, y, r, true);
  } else if (z.k === "flash") {
    ctx.fillStyle = z.f > 0 ? "#ffe9a8" : "rgba(255,255,255,0.9)";
    disc(ctx, x, y, z.f > 0 ? 5 * s : 30 * s, true);
  } else if (z.k === "dart") {
    ctx.strokeStyle = "rgba(90,220,170,0.7)";
    disc(ctx, x, y, r, false, true);
  } else if (z.k === "trip") {
    ctx.strokeStyle = "rgba(230,200,90,0.8)";
    disc(ctx, x, y, r, false, true);
  } else if (z.k === "heal") {
    ctx.fillStyle = "rgba(120,230,140,0.5)";
    disc(ctx, x, y, 14 * s, true);
  }
}
function disc(ctx, x, y, r, fill, stroke) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 7);
  if (fill) ctx.fill();
  if (stroke) ctx.stroke();
}
/**
 * Everybody is a dot and you are an arrow — but a team mate is on the map
 * whether you can see them or not, with their initial in the dot and a cross
 * when they are down, and an enemy is only ever drawn while they are alive
 * and in sight. The map stays honest about vision and legible about your own.
 */
function drawPlayer(ctx, p, pos, s, me, labels) {
  const mine = p.id === me.id;
  if (!p.alive && !p.mate) return; // a corpse is not a threat and not a call-out
  const x = pos.x * s;
  const y = pos.y * s;
  const r = Math.max(2.5, 16 * s);
  const body = !p.alive ? "#555a63" : p.mate ? (mine ? "#eaeaea" : "#4fb3d9") : "#e35d5b";
  if (mine && p.alive) {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(pos.angle);
    ctx.fillStyle = body;
    ctx.beginPath();
    ctx.moveTo(r * 1.5, 0);
    ctx.lineTo(-r, r * 0.9);
    ctx.lineTo(-r * 0.4, 0);
    ctx.lineTo(-r, -r * 0.9);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
    return;
  }
  // The dead of your own team keep their place on the map, crossed out.
  if (!p.alive) {
    ctx.strokeStyle = "#6a707c";
    ctx.lineWidth = Math.max(1, 2 * s);
    ctx.beginPath();
    ctx.moveTo(x - r * 0.8, y - r * 0.8);
    ctx.lineTo(x + r * 0.8, y + r * 0.8);
    ctx.moveTo(x + r * 0.8, y - r * 0.8);
    ctx.lineTo(x - r * 0.8, y + r * 0.8);
    ctx.stroke();
    if (labels) {
      ctx.fillStyle = "rgba(180,185,195,0.6)";
      ctx.font = `${Math.round(11 * Math.max(1, s * 2))}px system-ui, sans-serif`;
      ctx.textAlign = "center";
      ctx.fillText(p.name, x, y - r * 1.9);
      ctx.textAlign = "left";
    }
    return;
  }
  ctx.fillStyle = body;
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 7);
  ctx.fill();
  ctx.strokeStyle = AGENT_COLOUR[p.agent] || "#888";
  ctx.lineWidth = Math.max(1, 3 * s);
  ctx.stroke();
  ctx.strokeStyle = body;
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + Math.cos(pos.angle) * r * 2, y + Math.sin(pos.angle) * r * 2);
  ctx.stroke();
  // The initial inside the dot, when the dot is big enough to hold one.
  if (p.mate && r >= 6) {
    ctx.fillStyle = "#0c1016";
    ctx.font = `${Math.round(r * 1.2)}px system-ui, sans-serif`;
    ctx.textAlign = "center";
    ctx.fillText((p.name[0] || "?").toUpperCase(), x, y + r * 0.45);
    ctx.textAlign = "left";
  }
  if (p.spike) {
    ctx.fillStyle = "#f0d060";
    ctx.fillRect(x - r * 0.4, y - r * 1.8, r * 0.8, r * 0.8);
  }
  if (p.blind) {
    ctx.fillStyle = "rgba(255,255,255,0.8)";
    disc(ctx, x, y - r * 1.6, r * 0.35, true);
  }
  if (labels) {
    ctx.fillStyle = "rgba(235,235,235,0.75)";
    ctx.font = `${Math.round(11 * Math.max(1, s * 2))}px system-ui, sans-serif`;
    ctx.textAlign = "center";
    ctx.fillText(p.name, x, y - r * 1.9);
    ctx.textAlign = "left";
  }
  if (p.hp < 100) {
    ctx.fillStyle = "#0008";
    ctx.fillRect(x - r, y + r * 1.2, r * 2, 3);
    ctx.fillStyle = "#6fcf6f";
    ctx.fillRect(x - r, y + r * 1.2, r * 2 * (p.hp / 100), 3);
  }
}
@@ -3,25 +3,53 @@
 * person does — nothing else. There is no position here the server did not
 * hand over, and no enemy in a snapshot the server decided you cannot see,
 * so a patched client learns nothing a plain one does not.
 *
 * This file is the wiring: the socket, the keys and the pointer, the HUD.
 * The drawing lives beside it — `scene.js` for the first-person view,
 * `topdown.js` for the map, `gun.js` for the crosshair, `prompt.js` for the
 * line of advice and `raycast.js` for the maths all of it stands on.
 */
"use strict";
import { makeBeeper } from "./beep.js";
import { drawGun, gunSnapshot, gunTick, makeGun } from "./gun.js";
import { choosePrompt, REACH } from "./prompt.js";
import { roster, rosterKey } from "./roster.js";
import { AGENT_COLOUR, drawScene, makeScene } from "./scene.js";
import { moveVector } from "./steer.js";
import { drawTopdown } from "./topdown.js";
const $ = (id) => document.getElementById(id);
const view = $("view");
const ctx = view.getContext("2d");
const KEY_SLOT = { KeyC: "c", KeyQ: "q", KeyE: "e", KeyX: "x" };
const AGENT_COLOUR = { ember: "#f08a4b", veil: "#8f7fe8", sable: "#4fd6a0", mender: "#e0c060", rook: "#d96a8f" };
const COARSE = matchMedia("(pointer: coarse)").matches;
const LOOK = 0.0022; // radians per pixel of mouse travel
const HELP_SEEN = "val.help.seen";
let map = null;
let solid = () => true;
let snap = null;
let socket = null;
let agents = null;
const shown = new Map(); // smoothed positions, so 15 frames a second look like 60
const keys = new Set();
let pointer = null; // aim target in canvas pixels
let yaw = 0; // where this person is looking, theirs to move between snapshots
let locked = false;
let firing = false;
let mode = COARSE ? "top" : "fp"; // a raycaster with touch look is miserable
let mapOpen = false;
let pointer = null; // aim target in canvas pixels, top-down only
let stick = null; // { id, ox, oy, mx, my }
let aimTouch = null;
let helpShown = false;
let last = performance.now();
const walk = { x: 0, y: 0 };
const scene = makeScene();
const gun = makeGun();
const beeper = makeBeeper();
// ------------------------------------------------------------------ socket
@@ -35,10 +63,13 @@
function connect() {
  };
  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.t === "s") {
      snap = data;
      paintHud(data);
    }
    if (data.t !== "s") return;
    const first = snap === null;
    snap = data;
    if (first && mode === "fp") yaw = data.me.angle;
    gunSnapshot(gun, data);
    paintHud(data);
    maybeHelp(data);
  };
}
@@ -48,8 +79,30 @@
const send = (message) => {
// ------------------------------------------------------------------- input
function setMode(next) {
  mode = next;
  $("stage").dataset.mode = next;
  if (next !== "fp" && document.pointerLockElement === view) document.exitPointerLock();
  if (snap) yaw = snap.me.angle;
}
addEventListener("keydown", (event) => {
  if (event.target instanceof HTMLInputElement) return;
  if (event.code === "Tab") {
    mapOpen = true;
    event.preventDefault();
    return;
  }
  if (event.code === "KeyH" || event.key === "?") {
    toggleHelp();
    event.preventDefault();
    return;
  }
  if (event.code === "KeyV") {
    setMode(mode === "fp" ? "top" : "fp");
    event.preventDefault();
    return;
  }
  if (event.code === "KeyB") {
    toggleBuy();
    event.preventDefault();
@@ -61,30 +114,74 @@
addEventListener("keydown", (event) => {
    return;
  }
  keys.add(event.code);
  if (["KeyW", "KeyA", "KeyS", "KeyD", "Space", "KeyF", "KeyR"].includes(event.code)) event.preventDefault();
  if (["KeyW", "KeyA", "KeyS", "KeyD", "Space", "KeyF", "KeyR", "ArrowLeft", "ArrowRight"].includes(event.code))
    event.preventDefault();
});
addEventListener("keyup", (event) => {
  if (event.code === "Tab") mapOpen = false;
  keys.delete(event.code);
});
addEventListener("blur", () => {
  keys.clear();
  mapOpen = false;
  firing = false;
});
addEventListener("keyup", (event) => keys.delete(event.code));
addEventListener("blur", () => keys.clear());
view.addEventListener("pointermove", (event) => {
  if (event.pointerType === "touch") return;
// Aiming is pointer lock: click the canvas to capture the mouse, move to
// look, Escape gives it back. The angle sent is the same angle as ever.
view.addEventListener("click", () => {
  beeper.wake();
  if (mode !== "fp" || locked) return;
  if (!view.requestPointerLock) return setMode("top"); // no lock, no first person
  // Asked for too soon after the last release, a browser rejects this; that
  // is a shrug, not an error, and the hint stays up until it takes.
  const asked = view.requestPointerLock();
  if (asked && asked.catch) asked.catch(() => {});
});
document.addEventListener("pointerlockchange", () => {
  locked = document.pointerLockElement === view;
  if (!locked) firing = false;
  $("stage").dataset.locked = locked ? "1" : "";
});
addEventListener("mousemove", (event) => {
  if (locked) yaw += event.movementX * LOOK;
});
addEventListener("mousedown", (event) => {
  if (locked && event.button === 0) firing = true;
});
addEventListener("mouseup", (event) => {
  if (locked && event.button === 0) firing = false;
});
// The top-down view keeps the pointer aim it always had: it is the phone
// control scheme, and the fallback when the first-person view is not wanted.
const canvasPoint = (event) => {
  const box = view.getBoundingClientRect();
  pointer = { x: ((event.clientX - box.left) / box.width) * view.width, y: ((event.clientY - box.top) / box.height) * view.height };
  return {
    x: ((event.clientX - box.left) / box.width) * view.width,
    y: ((event.clientY - box.top) / box.height) * view.height,
  };
};
view.addEventListener("pointermove", (event) => {
  if (mode !== "top" || event.pointerType === "touch") return;
  pointer = canvasPoint(event);
});
view.addEventListener("pointerdown", (event) => {
  beeper.wake();
  if (mode !== "top") return;
  view.setPointerCapture(event.pointerId);
  const box = view.getBoundingClientRect();
  const x = event.clientX - box.left;
  if (event.pointerType === "touch") {
    if (x < box.width / 2) stick = { id: event.pointerId, ox: event.clientX, oy: event.clientY, mx: 0, my: 0 };
    if (event.clientX - box.left < box.width / 2)
      stick = { id: event.pointerId, ox: event.clientX, oy: event.clientY, mx: 0, my: 0 };
    else {
      aimTouch = { id: event.pointerId, x: ((event.clientX - box.left) / box.width) * view.width, y: ((event.clientY - box.top) / box.height) * view.height };
      aimTouch = { id: event.pointerId, ...canvasPoint(event) };
      firing = true;
    }
    event.preventDefault();
    return;
  }
  pointer = { x: ((event.clientX - box.left) / box.width) * view.width, y: ((event.clientY - box.top) / box.height) * view.height };
  pointer = canvasPoint(event);
  firing = true;
});
view.addEventListener("pointermove", (event) => {
@@ -96,11 +193,7 @@
view.addEventListener("pointermove", (event) => {
    stick.mx = (dx / len) * reach;
    stick.my = (dy / len) * reach;
  }
  if (aimTouch && event.pointerId === aimTouch.id) {
    const box = view.getBoundingClientRect();
    aimTouch.x = ((event.clientX - box.left) / box.width) * view.width;
    aimTouch.y = ((event.clientY - box.top) / box.height) * view.height;
  }
  if (aimTouch && event.pointerId === aimTouch.id) Object.assign(aimTouch, canvasPoint(event));
});
const endPointer = (event) => {
  if (stick && event.pointerId === stick.id) stick = null;
@@ -113,34 +206,37 @@
view.addEventListener("pointerup", endPointer);
view.addEventListener("pointercancel", endPointer);
view.addEventListener("contextmenu", (event) => event.preventDefault());
// The buy opens itself every buy phase; closing it is remembered until the
// next one, so nobody has to fight the panel to watch the round start.
function toggleBuy() {
  const open = $("buy").classList.toggle("on");
  $("buy").dataset.closed = open ? "" : "1";
}
$("buytoggle").addEventListener("click", toggleBuy);
for (const button of document.querySelectorAll("[data-buy]"))
  button.addEventListener("click", () => send({ t: "buy", what: button.dataset.buy }));
for (const button of document.querySelectorAll("[data-agent]"))
  button.addEventListener("click", () => send({ t: "agent", id: button.dataset.agent }));
// Twenty times a second the server hears what this person is doing.
// Twenty times a second the server hears what this person is doing. In the
// first-person view the keys are read against the way you are facing; in the
// top-down view they are the compass, the way they always were.
setInterval(() => {
  if (!snap || !map) return;
  let mx = 0;
  let my = 0;
  if (keys.has("KeyW")) my -= 1;
  if (keys.has("KeyS")) my += 1;
  if (keys.has("KeyA")) mx -= 1;
  if (keys.has("KeyD")) mx += 1;
  let ax = 0;
  let ay = 0;
  if (keys.has("KeyW")) ay -= 1;
  if (keys.has("KeyS")) ay += 1;
  if (keys.has("KeyA")) ax -= 1;
  if (keys.has("KeyD")) ax += 1;
  if (stick) {
    mx = stick.mx;
    my = stick.my;
    ax = stick.mx;
    ay = stick.my;
  }
  let mx = ax;
  let my = ay;
  let angle;
  if (mode === "fp") {
    if (keys.has("ArrowLeft")) yaw -= 0.045;
    if (keys.has("ArrowRight")) yaw += 0.045;
    angle = yaw;
    moveVector(ax, ay, yaw, walk);
    mx = walk.x;
    my = walk.y;
  } else {
    const aim = aimTouch || pointer;
    const me = worldToScreen(snap.me);
    angle = aim ? Math.atan2(aim.y - me.y, aim.x - me.x) : snap.me.angle;
    yaw = angle;
  }
  const aim = aimTouch || pointer;
  const me = worldToScreen(snap.me);
  const angle = aim ? Math.atan2(aim.y - me.y, aim.x - me.x) : snap.me.angle;
  send({
    t: "i",
    mx,
@@ -168,168 +264,69 @@
const worldToScreen = (p) => ({ x: p.x * scale(), y: p.y * scale() });
function smooth(id, x, y, angle) {
  const now = shown.get(id);
  if (!now) {
    shown.set(id, { x, y, angle });
    return { x, y, angle };
    const fresh = { x, y, angle };
    shown.set(id, fresh);
    return fresh;
  }
  now.x += (x - now.x) * 0.35;
  now.y += (y - now.y) * 0.35;
  let turn = ((angle - now.angle + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
  const turn = ((angle - now.angle + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
  now.angle += turn * 0.4;
  return now;
}
function drawMap(s) {
  const t = map.tile * s;
  for (let row = 0; row < map.rows.length; row++)
    for (let col = 0; col < map.rows[row].length; col++) {
      const cell = map.rows[row][col];
      ctx.fillStyle =
        cell === "#" ? "#20242d" : cell === "A" || cell === "B" ? "#2c2a22" : cell === "a" ? "#2a2024" : cell === "d" ? "#1e2630" : "#171a21";
      ctx.fillRect(col * t, row * t, t + 0.6, t + 0.6);
      if (cell === "A" || cell === "B") {
        ctx.fillStyle = "#6b5f3a";
        ctx.font = `${Math.round(t * 0.5)}px system-ui`;
        ctx.fillText(cell, col * t + t * 0.3, row * t + t * 0.68);
      }
    }
}
const look = (p) => smooth(p.id, p.x, p.y, p.angle);
function drawZone(z, s) {
  const x = z.x * s;
  const y = z.y * s;
  const r = z.r * s;
  ctx.save();
  if (z.k === "smoke") {
    ctx.fillStyle = "rgba(190,195,205,0.72)";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 7);
    ctx.fill();
  } else if (z.k === "molly") {
    ctx.fillStyle = "rgba(230,110,50,0.45)";
    ctx.strokeStyle = "#f08a4b";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 7);
    ctx.fill();
    ctx.stroke();
  } else if (z.k === "wall") {
    ctx.fillStyle = "rgba(120,200,255,0.55)";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 7);
    ctx.fill();
  } else if (z.k === "flash") {
    ctx.fillStyle = z.f > 0 ? "#ffe9a8" : "rgba(255,255,255,0.9)";
    ctx.beginPath();
    ctx.arc(x, y, z.f > 0 ? 5 * s : 30 * s, 0, 7);
    ctx.fill();
  } else if (z.k === "dart") {
    ctx.strokeStyle = "rgba(90,220,170,0.7)";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 7);
    ctx.stroke();
  } else if (z.k === "trip") {
    ctx.strokeStyle = "rgba(230,200,90,0.8)";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 7);
    ctx.stroke();
  } else if (z.k === "heal") {
    ctx.fillStyle = "rgba(120,230,140,0.5)";
    ctx.beginPath();
    ctx.arc(x, y, 14 * s, 0, 7);
    ctx.fill();
  }
  ctx.restore();
}
function drawPlayer(p, s, me) {
  const pos = smooth(p.id, p.x, p.y, p.angle);
  const x = pos.x * s;
  const y = pos.y * s;
  const r = 16 * s;
  const mine = p.id === me.id;
  ctx.fillStyle = p.mate ? (mine ? "#eaeaea" : "#4fb3d9") : "#e35d5b";
  if (!p.alive) ctx.fillStyle = "#555a63";
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 7);
  ctx.fill();
  ctx.strokeStyle = AGENT_COLOUR[p.agent] || "#888";
  ctx.lineWidth = Math.max(1, 3 * s);
  ctx.stroke();
  if (p.alive) {
    ctx.strokeStyle = mine ? "#fff" : ctx.fillStyle;
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + Math.cos(pos.angle) * r * 2, y + Math.sin(pos.angle) * r * 2);
    ctx.stroke();
  }
  if (p.spike) {
    ctx.fillStyle = "#f0d060";
    ctx.fillRect(x - r * 0.4, y - r * 1.8, r * 0.8, r * 0.8);
  }
  if (p.blind) {
    ctx.fillStyle = "rgba(255,255,255,0.8)";
    ctx.beginPath();
    ctx.arc(x, y - r * 1.6, r * 0.35, 0, 7);
    ctx.fill();
  }
  if (!mine) {
    ctx.fillStyle = "rgba(235,235,235,0.75)";
    ctx.font = `${Math.round(11 * Math.max(1, s * 2))}px system-ui`;
    ctx.textAlign = "center";
    ctx.fillText(p.name, x, y - r * 1.9);
    ctx.textAlign = "left";
  }
  if (p.alive && p.hp < 100) {
    ctx.fillStyle = "#0008";
    ctx.fillRect(x - r, y + r * 1.2, r * 2, 3);
    ctx.fillStyle = "#6fcf6f";
    ctx.fillRect(x - r, y + r * 1.2, r * 2 * (p.hp / 100), 3);
  }
}
function frame() {
function frame(now) {
  requestAnimationFrame(frame);
  const dt = Math.min(0.1, (now - last) / 1000);
  last = now;
  if (!map) return;
  const s = scale();
  gunTick(gun, dt);
  ctx.clearRect(0, 0, view.width, view.height);
  drawMap(s);
  if (!snap) return;
  for (const orb of snap.orbs) {
    ctx.fillStyle = "#c9a0ff";
    ctx.beginPath();
    ctx.arc(orb.x * s, orb.y * s, 9 * s, 0, 7);
    ctx.fill();
  if (!snap) {
    drawTopdown(ctx, map, null, look, { x: 0, y: 0, w: view.width, h: view.height });
    return;
  }
  for (const zone of snap.zones) if (zone.k !== "smoke") drawZone(zone, s);
  beeper.update(snap.spike.planted, snap.spike.fuse, now / 1000);
  const eye = look(snap.me);
  const facing = mode === "fp" ? yaw : eye.angle;
  if (snap.spike.x !== null) {
    const x = snap.spike.x * s;
    const y = snap.spike.y * s;
    ctx.fillStyle = snap.spike.planted ? (Math.floor(Date.now() / 250) % 2 ? "#ff5b4a" : "#8a2a22") : "#c8b45c";
    ctx.fillRect(x - 7 * s, y - 7 * s, 14 * s, 14 * s);
    if (snap.spike.planted && snap.spike.defuse > 0) {
      ctx.fillStyle = "#4fd6a0";
      ctx.fillRect(x - 20 * s, y + 12 * s, 40 * s * (snap.spike.defuse / 7), 4);
    }
  if (mode === "fp" && !mapOpen) {
    drawScene(ctx, scene, { solid, tile: map.tile }, { x: eye.x, y: eye.y, angle: facing }, snap, {
      width: view.width,
      height: view.height,
      look,
    });
    drawGun(ctx, gun, view.width, view.height, snap);
    drawMinimap();
  } else {
    drawTopdown(ctx, map, snap, look, { x: 0, y: 0, w: view.width, h: view.height });
  }
  for (const shot of snap.shots) {
    ctx.strokeStyle = shot.hit ? "rgba(255,120,110,0.85)" : "rgba(255,240,180,0.55)";
    ctx.lineWidth = Math.max(1, 2 * s);
    ctx.beginPath();
    ctx.moveTo(shot.x1 * s, shot.y1 * s);
    ctx.lineTo(shot.x2 * s, shot.y2 * s);
    ctx.stroke();
  }
  for (const player of snap.players) drawPlayer(player, s, snap.me);
  // Smoke goes on last: it hides what is behind it on screen too.
  for (const zone of snap.zones) if (zone.k === "smoke") drawZone(zone, s);
  if (snap.me.planting > 0) bar(snap.me.planting / 4, "#e0a040", "planting");
  else if (snap.spike.planted && snap.spike.defuse > 0 && snap.me.side === "def") bar(snap.spike.defuse / 7, "#4fd6a0", "defusing");
  else if (snap.spike.planted && snap.spike.defuse > 0 && snap.me.side === "def")
    bar(snap.spike.defuse / 7, "#4fd6a0", "defusing");
  $("flash").style.opacity = Math.min(0.95, snap.me.blind * 0.8);
  $("dead").style.display = snap.me.alive ? "none" : "grid";
  $("aimhint").style.display = mode === "fp" && !locked && !COARSE ? "grid" : "none";
}
/** The same top-down drawing, small, in the corner, with you as an arrow. */
function drawMinimap() {
  const w = Math.min(view.width * 0.3, 260 * (view.width / 900));
  const h = (w * map.rows.length) / map.rows[0].length;
  const pad = 8;
  ctx.save();
  ctx.globalAlpha = 0.85;
  ctx.fillStyle = "#0b0d11";
  ctx.fillRect(pad - 2, pad - 2, w + 4, h + 4);
  drawTopdown(ctx, map, snap, look, { x: pad, y: pad, w, h }, { labels: false });
  ctx.restore();
  ctx.strokeStyle = "rgba(255,255,255,0.18)";
  ctx.lineWidth = 1;
  ctx.strokeRect(pad - 2, pad - 2, w + 4, h + 4);
}
function bar(fraction, colour, label) {
@@ -341,7 +338,7 @@
function bar(fraction, colour, label) {
  ctx.fillStyle = colour;
  ctx.fillRect(x, y, w * Math.min(1, fraction), 16);
  ctx.fillStyle = "#fff";
  ctx.font = "12px system-ui";
  ctx.font = "12px system-ui, sans-serif";
  ctx.textAlign = "center";
  ctx.fillText(label, view.width / 2, y + 12);
  ctx.textAlign = "left";
@@ -349,6 +346,50 @@
function bar(fraction, colour, label) {
// --------------------------------------------------------------------- hud
// The buy opens itself every buy phase; closing it is remembered until the
// next one, so nobody has to fight the panel to watch the round start.
function toggleBuy() {
  const open = $("buy").classList.toggle("on");
  $("buy").dataset.closed = open ? "" : "1";
}
$("buytoggle").addEventListener("click", toggleBuy);
$("viewtoggle").addEventListener("click", () => setMode(mode === "fp" ? "top" : "fp"));
$("helptoggle").addEventListener("click", () => toggleHelp());
$("helpclose").addEventListener("click", () => toggleHelp(false));
for (const button of document.querySelectorAll("[data-buy]"))
  button.addEventListener("click", () => send({ t: "buy", what: button.dataset.buy }));
for (const button of document.querySelectorAll("[data-agent]"))
  button.addEventListener("click", () => send({ t: "agent", id: button.dataset.agent }));
function toggleHelp(force) {
  const open = force === undefined ? $("help").style.display !== "grid" : force;
  $("help").style.display = open ? "grid" : "none";
  if (!open) {
    helpShown = true;
    try {
      localStorage.setItem(HELP_SEEN, "1");
    } catch {
      // A browser that refuses storage still gets the card, every visit.
    }
  }
}
/** The first-run card, once per browser, and never over a round in progress. */
function maybeHelp(s) {
  if (helpShown) return;
  try {
    if (localStorage.getItem(HELP_SEEN) === "1") {
      helpShown = true;
      return;
    }
  } catch {
    /* no storage: show it and move on */
  }
  if (s.phase === "live" && s.me.alive) return;
  helpShown = true;
  $("help").style.display = "grid";
}
const KITS = {};
function paintHud(s) {
@@ -364,28 +405,22 @@
function paintHud(s) {
  $("buy").classList.toggle("on", s.phase === "buy" && $("buy").dataset.closed !== "1");
  if (s.phase !== "buy") $("buy").dataset.closed = "";
  const kit = $("kit");
  const shape = ["c", "q", "e", "x"].map((slot) => `${slot}${s.me.charges[slot]}${Math.ceil(s.me.cooldown[slot])}`).join("|") + s.me.agent + s.me.ult;
  if (KITS.shape !== shape) {
    KITS.shape = shape;
    kit.innerHTML = "";
    for (const slot of ["c", "q", "e", "x"]) {
      const button = document.createElement("button");
      const ready = slot === "x" ? s.me.ult >= s.me.ultNeeds : s.me.charges[slot] > 0 && s.me.cooldown[slot] <= 0;
      button.disabled = !ready;
      const count = slot === "x" ? `${s.me.ult}/${s.me.ultNeeds}` : s.me.cooldown[slot] > 0 ? `${Math.ceil(s.me.cooldown[slot])}s` : s.me.charges[slot];
      button.innerHTML = `${slot.toUpperCase()} <b>${count}</b>`;
      button.type = "button";
      button.addEventListener("click", () => send({ t: "i", c: slot }));
      kit.append(button);
    }
  }
  const text = choosePrompt(s, {
    onSite: onSite(s.me),
    nearSpike: s.spike.x !== null && Math.hypot(s.spike.x - s.me.x, s.spike.y - s.me.y) < REACH,
  });
  if ($("prompt").textContent !== text) $("prompt").textContent = text;
  paintKit(s);
  paintBuy(s);
  paintRoster(s);
  paintFeed(s);
  const log = $("log");
  const text = s.events.slice(0, 3).join("\n");
  if (log.dataset.text !== text) {
    log.dataset.text = text;
    log.innerHTML = "";
  const lines = s.events.slice(0, 3).join("\n");
  if (log.dataset.text !== lines) {
    log.dataset.text = lines;
    log.replaceChildren();
    for (const line of s.events.slice(0, 3)) {
      const div = document.createElement("div");
      div.textContent = line;
@@ -399,7 +434,7 @@
function paintHud(s) {
    const key = rows.map((p) => `${p.name}${p.kills}${p.deaths}${p.alive}${p.credits}`).join();
    if (body.dataset.key === key) continue;
    body.dataset.key = key;
    body.innerHTML = "";
    body.replaceChildren();
    for (const player of rows) {
      const tr = document.createElement("tr");
      const cells = [
@@ -419,11 +454,175 @@
function paintHud(s) {
  }
}
fetch("/map.json")
  .then((r) => r.json())
  .then((data) => {
    map = data;
/** Is this player standing where the spike arms? The grid says so. */
function onSite(me) {
  if (!map) return false;
  const row = map.rows[Math.floor(me.y / map.tile)];
  const cell = row ? row[Math.floor(me.x / map.tile)] : "";
  return cell === "A" || cell === "B";
}
/**
 * What just happened to whom: newest first, and gone a few seconds later.
 * The server sends names and a gun and nothing else, so there is nothing
 * here to read a position out of.
 */
function paintFeed(s) {
  const box = $("feed");
  const lines = (s.feed ?? []).slice().reverse();
  // The age is bucketed into the key: an entry fades once on its way out
  // rather than rebuilding the panel every frame.
  const key = lines.map((l) => `${l.k}>${l.v}:${l.w}:${l.h}:${l.t > 6 ? "old" : "new"}`).join("|");
  if (box.dataset.key === key) return;
  box.dataset.key = key;
  box.replaceChildren();
  for (const line of lines) {
    const row = document.createElement("div");
    row.style.opacity = line.t > 6 ? "0.5" : "1";
    const killer = document.createElement("span");
    killer.className = "k";
    killer.textContent = line.k ?? "—";
    const victim = document.createElement("span");
    victim.className = "v";
    victim.textContent = line.v;
    const how = document.createElement("span");
    how.className = "w";
    how.textContent = `${line.w ? " " + line.w : " ability"}${line.h ? " ✧" : ""}`;
    const arrow = document.createElement("span");
    arrow.textContent = " ▸ ";
    row.append(killer, arrow, victim, how);
    box.append(row);
  }
}
/**
 * Your team, always on screen: five slots, health, and struck through when
 * somebody is dead. The one place both questions — who is with me, who is
 * still up — are answered whether anybody is in sight or not.
 */
function paintRoster(s) {
  const rows = roster(s);
  const panel = $("roster");
  const key = rosterKey(rows);
  if (panel.dataset.key === key) return;
  panel.dataset.key = key;
  panel.replaceChildren();
  for (const row of rows) {
    const slot = document.createElement("div");
    slot.className = `slot${row.mine ? " mine" : ""}${row.alive ? "" : " down"}`;
    slot.style.borderLeftColor = AGENT_COLOUR[row.agent] || "#4a5162";
    const who = document.createElement("span");
    who.className = "who";
    who.textContent = row.name;
    const agent = document.createElement("span");
    agent.className = "agent";
    agent.textContent = row.alive ? row.agent : `${row.agent} · dead`;
    if (row.spike) {
      const spike = document.createElement("span");
      spike.className = "spike";
      spike.textContent = " spike";
      agent.append(spike);
    }
    const bar = document.createElement("span");
    bar.className = "hp";
    const fill = document.createElement("i");
    fill.style.width = `${row.hp}%`;
    fill.style.background = row.hp > 40 ? "#6fcf6f" : "#e0a040";
    bar.append(fill);
    slot.append(who, agent, bar);
    panel.append(slot);
  }
}
const kitOf = (id) => (agents ? agents.find((a) => a.id === id) : null);
/** The four ability buttons, each saying what it does and what it has left. */
function paintKit(s) {
  const kit = $("kit");
  const agent = kitOf(s.me.agent);
  const shape =
    ["c", "q", "e", "x"].map((slot) => `${slot}${s.me.charges[slot]}${Math.ceil(s.me.cooldown[slot])}`).join("|") +
    s.me.agent +
    s.me.ult +
    (agent ? "k" : "");
  if (KITS.shape === shape) return;
  KITS.shape = shape;
  kit.replaceChildren();
  for (const slot of ["c", "q", "e", "x"]) {
    const ability = agent ? agent.abilities[slot] : null;
    const button = document.createElement("button");
    const ready = slot === "x" ? s.me.ult >= s.me.ultNeeds : s.me.charges[slot] > 0 && s.me.cooldown[slot] <= 0;
    button.disabled = !ready;
    button.type = "button";
    const count =
      slot === "x"
        ? `${s.me.ult}/${s.me.ultNeeds}`
        : s.me.cooldown[slot] > 0
          ? `${Math.ceil(s.me.cooldown[slot])}s`
          : s.me.charges[slot];
    const name = document.createElement("span");
    name.textContent = `${slot.toUpperCase()}${ability ? " " + ability.name : ""}`;
    const tally = document.createElement("b");
    tally.textContent = String(count);
    button.append(name, tally);
    if (ability) button.title = `${ability.name} — ${ability.text}`;
    button.addEventListener("click", () => send({ t: "i", c: slot }));
    kit.append(button);
  }
}
/** Prices on every button, greyed when you cannot afford it. */
function paintBuy(s) {
  const agent = kitOf(s.me.agent);
  for (const button of document.querySelectorAll("[data-buy]")) {
    const what = button.dataset.buy;
    let cost = Number(button.dataset.cost ?? 0);
    if ((what === "c" || what === "q") && agent) {
      const ability = agent.abilities[what];
      cost = ability.cost;
      button.replaceChildren();
      const name = document.createElement("span");
      name.textContent = `${what.toUpperCase()} ${ability.name}`;
      const price = document.createElement("b");
      price.textContent = `${ability.cost} · ${s.me.charges[what]}/${ability.charges}`;
      button.append(name, price);
      button.title = `${ability.text} (${ability.charges} charge${ability.charges === 1 ? "" : "s"} a round)`;
    }
    button.disabled = cost > s.me.credits;
  }
  for (const button of document.querySelectorAll("[data-agent]")) {
    const picked = button.dataset.agent === s.me.agent;
    button.style.outline = picked ? "2px solid #6fcf9f" : "";
  }
}
// ------------------------------------------------------------------- start
Promise.all([fetch("/map.json").then((r) => r.json()), fetch("/agents.json").then((r) => r.json())])
  .then(([mapData, kit]) => {
    map = mapData;
    agents = kit.agents;
    const rows = map.rows;
    const cols = rows[0].length;
    solid = (col, row) =>
      col < 0 || row < 0 || row >= rows.length || col >= cols || rows[row][col] === "#";
    $("stage").dataset.mode = mode;
    fillHelp();
    resize();
    connect();
  });
  })
  .catch(() => ($("conn").textContent = "offline"));
/** The card says the round, the sides, the keys and the kit, in that order. */
function fillHelp() {
  const list = $("helpagents");
  if (!list || !agents) return;
  list.replaceChildren();
  for (const agent of agents) {
    const li = document.createElement("li");
    li.textContent = `${agent.name} (${agent.role}) — ${agent.blurb}`;
    list.append(li);
  }
}
requestAnimationFrame(frame);
		@@ -2,11 +2,12 @@
2	2
3	3	Five attackers with the spike, five defenders, abilities on cooldown. First to 13.
4	4
5		A top-down 5v5 played in a browser. One match is always running on the
6		server: open the page and you are given a seat in the round that is
7		happening, taken from a bot where it stands. When a match ends it shows the
8		result for a few seconds and starts a new one, so nobody ever arrives at a
9		frozen board.
	5	A 5v5 played in a browser, from inside the player's head — the map is a tile
	6	grid and the view is a raycaster over it, so there is no 3D library and no
	7	dependency at all. One match is always running on the server: open the page
	8	and you are given a seat in the round that is happening, taken from a bot
	9	where it stands. When a match ends it shows the result for a few seconds and
	10	starts a new one, so nobody ever arrives at a frozen board.
10	11
11	12	## What is real
12	13
		@@ -31,6 +32,10 @@ server:
31	32	- Credits. 800 to start, 9,000 cap, +200 a kill, +300 to the team on a
32	33	plant, loss bonus 1,900 / 2,400 / 2,900. A buy you cannot afford is
33	34	refused server-side.
	35	- Who is alive. The roster under the view lists your five with their
	36	health from the snapshot's own team data, and the kill feed is derived in
	37	`src/arena.ts` by comparing the players either side of a tick — it carries
	38	names, the gun and an age, and never a position.
34	39	- Bots fill every empty seat and use their kit: smokes on the way in,
35	40	flashes before the entry, a recon dart, a molly on the planted spike.
36	41
		@@ -42,20 +47,30 @@ Guns: Classic, Ghost, Sheriff, Spectre, Phantom, Vandal, Operator.
42	47
43	48	## What is not
44	49
	50	- The view is a raycaster: walls are one tile tall and flat-shaded, there is
	51	no looking up or down, and everything that is not a wall — bodies, the
	52	spike, ability zones — is a flat billboard scaled by distance and clipped
	53	against the walls.
45	54	- One map, one match at a time, ten seats. There is no matchmaking, no
46	55	ranking and no account: your seat belongs to a session cookie.
47	56	- No overtime — first to 13 ends it at 12–12 too.
48		- Sight is a full circle rather than a view cone; top-down has no vertical,
49		so the hit location comes from how precisely the shot passes the target.
	57	- Sight is a full circle rather than a view cone — you are drawn what is in
	58	front of you, but the server reveals anything you have line of sight to,
	59	so a team mate behind you still appears on the minimap. The world has no
	60	vertical, so the hit location comes from how precisely the shot passes
	61	the target.
50	62	- Assists are counted as a field but never awarded.
51	63	- The live match lives in memory and is gone if the process restarts; only
52	64	finished match results are written to SQLite under `FORGE_APP_DATA`.
53	65
54	66	## Playing
55	67
56		WASD move, the mouse aims, click fires, R reloads, F plants and
57		defuses (hold it), C / Q / E / X cast, B opens the buy. On a phone
58		the left thumb walks and the right thumb aims and fires.
	68	Click the view to capture the mouse, then WASD move and the mouse looks;
	69	Esc gives the pointer back. Click fires, R reloads, F plants and
	70	defuses (hold it), C / Q / E / X cast, B opens the buy, Tab
	71	holds the big map open, V swaps to the top-down view and H or ?
	72	brings back the how-to-play card. On a phone it stays top-down: the left
	73	thumb walks and the right thumb aims and fires.
59	74
60	75	```sh
61	76	PORT=8080 FORGE_APP_DATA=./data bun run src/server.ts # run it here
		@@ -77,6 +92,9 @@ says how.
77	92	`src/economy.ts` credits · `src/abilities.ts` the agent kits ·
78	93	`src/match.ts` the round loop (`tick(state, dt)` is the whole game and takes
79	94	no clock) · `src/bots.ts` the seats nobody is in · `src/arena.ts` the one
80		live match and its sockets · `src/server.ts` the door · `static/val.js` the
81		browser. The rules are pure functions and the tests play whole matches
	95	live match and its sockets · `src/server.ts` the door · `static/` the browser client —
	96	`val.js` wires the socket, the keys and the HUD, `raycast.js` is the ray
	97	maths, `scene.js` the first-person view, `topdown.js` the minimap,
	98	`gun.js`, `beep.js`, `steer.js`, `roster.js` and `prompt.js` the rest; the server bundles
	99	them into one content-named file at start-up. The rules are pure functions and the tests play whole matches
82	100	headlessly.
		@@ -13,6 +13,7 @@
13	13	import { agentById, sightBlocked } from "./abilities.ts";
14	14	import { runBots } from "./bots.ts";
15	15	import { recordResult } from "./db.ts";
	16	import { fallsBetween, marksOf, trimFeed, type Fall, type Mark } from "./killfeed.ts";
16	17	import type { Point } from "./map.ts";
17	18	import {
18	19	buyAbility,
		@@ -25,7 +26,7 @@ import {
25	26	visible,
26	27	} from "./match.ts";
27	28	import type { MatchState, Player } from "./state.ts";
28		import { isWeaponId } from "./weapons.ts";
	29	import { isWeaponId, WEAPONS } from "./weapons.ts";
29	30
30	31	export const TICK = 1 / 30;
31	32	const BROADCAST_EVERY = 2;
		@@ -36,17 +37,40 @@ let state: MatchState = newMatch();
36	37	const seats = new Map<string, Seat>();
37	38	let ticks = 0;
38	39	let lastResult: string \| null = null;
	40	// The kill feed is read off the match a tick at a time; the rules keep no
	41	// list of their own, and this is a view, not a rule.
	42	let marks: Mark[] = marksOf(state.players);
	43	let feed: Fall[] = [];
39	44
40	45	export const match = (): MatchState => state;
41	46
42	47	export const findPlayer = (id: string): Player \| undefined => state.players.find((p) => p.id === id);
43	48
	49	/**
	50	* A name nobody else in this match is using.
	51	*
	52	* The kill feed, the round log and the scoreboard all address people by
	53	* name: two players called Kit make a line that reads as a team kill this
	54	* game cannot have. The bots are dealt distinct names; a person who picks
	55	* one that is taken gets a number after it, inside the sixteen characters a
	56	* name is allowed.
	57	*/
	58	function freeName(want: string, exceptId: string): string {
	59	const taken = new Set(state.players.filter((p) => p.id !== exceptId).map((p) => p.name));
	60	if (!taken.has(want)) return want;
	61	for (let n = 2; n < 100; n++) {
	62	const tried = `${want.slice(0, 13)} ${n}`;
	63	if (!taken.has(tried)) return tried;
	64	}
	65	return want;
	66	}
	67
44	68	/** Sit somebody down in the emptiest team, replacing a bot where it stands. */
45	69	export function takeSeat(session: string, name: string): Player \| null {
46	70	const existing = seats.get(session);
47	71	const held = existing ? findPlayer(existing.playerId) : undefined;
48	72	if (held) {
49		held.name = name;
	73	held.name = freeName(name, held.id);
50	74	return held;
51	75	}
52	76	const humans = { red: 0, blue: 0 };
		@@ -56,7 +80,7 @@ export function takeSeat(session: string, name: string): Player \| null {
56	80	state.players.find((p) => p.bot && p.team === wanted) ?? state.players.find((p) => p.bot);
57	81	if (!seat) return null;
58	82	seat.bot = false;
59		seat.name = name;
	83	seat.name = freeName(name, seat.id);
60	84	seat.think = 0;
61	85	seat.input = { mx: 0, my: 0, angle: seat.angle, fire: false, use: false, reload: false, cast: null };
62	86	return seat;
		@@ -211,14 +235,47 @@ export function snapshot(viewerId: string): string {
211	235	ultNeeds: agentById(p.agent).abilities.x.points,
212	236	})),
213	237	events: state.events.slice(0, 5).map((e) => e.text),
	238	// Names and a gun, never a position: the feed says what happened, not
	239	// where, so it can never be read as a call-out.
	240	feed: feed.map((f) => ({
	241	k: f.killer,
	242	v: f.victim,
	243	w: f.weapon ? WEAPONS[f.weapon].name : null,
	244	h: f.headshot,
	245	t: round2(Math.max(0, state.now - f.at)),
	246	})),
214	247	});
215	248	}
216	249
	250	/**
	251	* Who fell on this tick. A shot that landed this tick and started where the
	252	* killer stands is what tells a gun kill from an ability kill — the position
	253	* is used here and goes no further.
	254	*/
	255	function readFalls(): void {
	256	const after = marksOf(state.players);
	257	const shooters = new Set<string>();
	258	for (const shot of state.shots) {
	259	if (!shot.hit \|\| shot.age > 0) continue;
	260	for (const player of state.players)
	261	if (Math.hypot(player.x - shot.x1, player.y - shot.y1) < 2) shooters.add(player.id);
	262	}
	263	const falls = fallsBetween(marks, after, {
	264	at: state.now,
	265	events: state.events.slice(0, 6).map((e) => e.text),
	266	shooters,
	267	});
	268	marks = after;
	269	if (falls.length) feed = [...feed, ...falls];
	270	feed = trimFeed(feed, state.now);
	271	}
	272
217	273	// ----------------------------------------------------------------- the loop
218	274
219	275	function step(): void {
220	276	runBots(state, TICK);
221	277	tick(state, TICK);
	278	readFalls();
222	279	if (state.result && state.result !== lastResult) {
223	280	lastResult = state.result;
224	281	recordResult(state.result, state.score.red, state.score.blue, state.round);
		@@ -0,0 +1,24 @@
	1	import { expect, test } from "bun:test";
	2	import { beepInterval, beepPitch, makeBeeper } from "../static/beep.js";
	3
	4	test("the spike beeps faster as the fuse burns down", () => {
	5	expect(beepInterval(45)).toBeGreaterThan(beepInterval(20));
	6	expect(beepInterval(20)).toBeGreaterThan(beepInterval(5));
	7	expect(beepInterval(1)).toBeGreaterThanOrEqual(0.12);
	8	expect(beepInterval(45)).toBeLessThanOrEqual(1);
	9	});
	10
	11	test("a spent fuse does not beep at all", () => {
	12	expect(beepInterval(0)).toBe(0);
	13	});
	14
	15	test("and it rises in pitch on the way", () => {
	16	expect(beepPitch(2)).toBeGreaterThan(beepPitch(40));
	17	});
	18
	19	test("nothing is played before the browser has had a gesture", () => {
	20	const beeper = makeBeeper();
	21	// No AudioContext in this runtime: update must be a no-op, not a throw.
	22	expect(() => beeper.update(true, 30, 1)).not.toThrow();
	23	expect(() => beeper.wake()).not.toThrow();
	24	});
		@@ -0,0 +1,259 @@
	1	/**
	2	* The client, played.
	3	*
	4	* The bundle the browser is served is loaded here against a stub document
	5	* and a canvas that only writes down what it was told to draw, and pointed
	6	* at the running server over a real socket. It is not a browser, but it is
	7	* the whole path a person takes: connect, take a snapshot, paint the HUD,
	8	* draw a frame, press a key, send an input back.
	9	*/
	10
	11	import { expect, test } from "bun:test";
	12	import { mkdtempSync } from "node:fs";
	13	import { tmpdir } from "node:os";
	14	import { join } from "node:path";
	15
	16	process.env.FORGE_APP_DATA ??= mkdtempSync(join(tmpdir(), "app-"));
	17	process.env.PORT ??= "0";
	18	const { server } = await import("./server.ts");
	19	const base = `http://${server.hostname}:${server.port}`;
	20
	21	// ------------------------------------------------------------ the stub DOM
	22
	23	const drawn: string[] = [];
	24	const listeners = new Map<string, ((event: unknown) => void)[]>();
	25	const frames: ((now: number) => void)[] = [];
	26
	27	const noop = () => {};
	28	const context = () =>
	29	new Proxy(
	30	{
	31	measureText: (text: string) => ({ width: text.length * 6 }),
	32	createLinearGradient: () => ({ addColorStop: noop }),
	33	} as Record<string, unknown>,
	34	{
	35	get(target, prop: string) {
	36	if (prop in target) return target[prop];
	37	if (prop === "fillStyle" \|\| prop === "strokeStyle" \|\| prop === "font" \|\| prop === "textAlign") return "";
	38	if (prop === "globalAlpha" \|\| prop === "lineWidth") return 1;
	39	return (...args: unknown[]) => drawn.push(`${prop}(${args.length})`);
	40	},
	41	set: () => true,
	42	},
	43	);
	44
	45	function element(id: string, attrs: Record<string, string> = {}) {
	46	const node: Record<string, unknown> = {
	47	id,
	48	dataset: { ...attrs },
	49	style: {},
	50	textContent: "",
	51	title: "",
	52	disabled: false,
	53	type: "",
	54	children: [] as unknown[],
	55	classList: {
	56	on: new Set<string>(),
	57	add(name: string) {
	58	(this.on as Set<string>).add(name);
	59	},
	60	remove(name: string) {
	61	(this.on as Set<string>).delete(name);
	62	},
	63	toggle(name: string, force?: boolean) {
	64	const on = force ?? !(this.on as Set<string>).has(name);
	65	if (on) (this.on as Set<string>).add(name);
	66	else (this.on as Set<string>).delete(name);
	67	return on;
	68	},
	69	contains(name: string) {
	70	return (this.on as Set<string>).has(name);
	71	},
	72	},
	73	events: new Map<string, ((event: unknown) => void)[]>(),
	74	addEventListener(kind: string, fn: (event: unknown) => void) {
	75	const map = node.events as Map<string, ((event: unknown) => void)[]>;
	76	map.set(kind, [...(map.get(kind) ?? []), fn]);
	77	},
	78	append(...kids: unknown[]) {
	79	(node.children as unknown[]).push(...kids);
	80	},
	81	replaceChildren(...kids: unknown[]) {
	82	node.children = kids;
	83	},
	84	getBoundingClientRect: () => ({ left: 0, top: 0, width: 900, height: 570 }),
	85	getContext: () => context(),
	86	requestPointerLock: noop,
	87	setPointerCapture: noop,
	88	width: 900,
	89	height: 570,
	90	};
	91	return node;
	92	}
	93
	94	const click = (node: Record<string, unknown>) => {
	95	for (const fn of (node.events as Map<string, ((e: unknown) => void)[]>).get("click") ?? []) fn({});
	96	};
	97	const press = (code: string, key = "") => {
	98	for (const fn of listeners.get("keydown") ?? []) fn({ code, key, target: {}, preventDefault: noop });
	99	};
	100
	101	const nodes = new Map<string, Record<string, unknown>>();
	102	for (const id of [
	103	"view", "conn", "clock", "phase", "hp", "gun", "creds", "ultmeter", "kit", "buy", "buytoggle",
	104	"viewtoggle", "helptoggle", "helpclose", "help", "prompt", "flash", "dead", "aimhint", "stage",
	105	"log", "atkboard", "defboard", "helpagents", "roster", "feed",
	106	])
	107	nodes.set(id, element(id));
	108
	109	const buys = [
	110	element("b1", { buy: "vandal", cost: "2900" }),
	111	element("b2", { buy: "c", cost: "0" }),
	112	element("b3", { buy: "q", cost: "0" }),
	113	];
	114	const agentButtons = [element("a1", { agent: "veil" })];
	115	const scoreRed = element("red");
	116	const scoreBlue = element("blue");
	117
	118	Object.assign(globalThis, {
	119	document: {
	120	getElementById: (id: string) => nodes.get(id) ?? null,
	121	querySelector: (sel: string) => (sel.includes("red") ? scoreRed : scoreBlue),
	122	querySelectorAll: (sel: string) => (sel.includes("data-buy") ? buys : agentButtons),
	123	createElement: (tag: string) => element(tag),
	124	addEventListener: noop,
	125	pointerLockElement: null,
	126	exitPointerLock: noop,
	127	},
	128	HTMLInputElement: class {},
	129	matchMedia: () => ({ matches: false }),
	130	devicePixelRatio: 1,
	131	localStorage: {
	132	store: new Map<string, string>(),
	133	getItem(key: string) {
	134	return this.store.get(key) ?? null;
	135	},
	136	setItem(key: string, value: string) {
	137	this.store.set(key, value);
	138	},
	139	},
	140	requestAnimationFrame: (fn: (now: number) => void) => frames.push(fn),
	141	addEventListener: (kind: string, fn: (event: unknown) => void) => {
	142	listeners.set(kind, [...(listeners.get(kind) ?? []), fn]);
	143	},
	144	location: new URL(base),
	145	});
	146
	147	// Relative fetches, the way a page makes them.
	148	const realFetch = globalThis.fetch;
	149	globalThis.fetch = ((input: string, init?: RequestInit) =>
	150	realFetch(typeof input === "string" && input.startsWith("/") ? base + input : input, init)) as typeof fetch;
	151
	152	const runFrame = () => {
	153	const pending = frames.splice(0, frames.length);
	154	for (const fn of pending) fn(performance.now());
	155	};
	156	const until = async (what: () => boolean, ms = 4000) => {
	157	const stop = Date.now() + ms;
	158	while (Date.now() < stop) {
	159	runFrame();
	160	if (what()) return true;
	161	await Bun.sleep(20);
	162	}
	163	return false;
	164	};
	165
	166	// ------------------------------------------------------------------ the run
	167
	168	test("the bundled client connects, paints the HUD and draws a frame", async () => {
	169	const page = await (await fetch(base + "/")).text();
	170	const src = /src="(\/static\/val\.[0-9a-f]+\.js)"/.exec(page)![1]!;
	171	const script = await (await fetch(base + src)).text();
	172	const path = join(process.env.FORGE_APP_DATA!, "client.mjs");
	173	await Bun.write(path, script);
	174
	175	await import(path);
	176	expect(await until(() => nodes.get("conn")!.textContent === "live")).toBe(true);
	177	expect(await until(() => String(nodes.get("hp")!.textContent).includes("hp"))).toBe(true);
	178
	179	// The HUD says what the match says.
	180	expect(String(nodes.get("phase")!.textContent)).toContain("round");
	181	expect(String(nodes.get("creds")!.textContent)).toContain("cr");
	182	// The kit is four buttons, each named after the ability it casts.
	183	expect((nodes.get("kit")!.children as unknown[]).length).toBe(4);
	184	// One prompt, in words, about the round that is running.
	185	expect(String(nodes.get("prompt")!.textContent).length).toBeGreaterThan(8);
	186	// And the buy panel prices itself off the agent's real kit.
	187	expect(String(buys[1]!.title)).toContain("charge");
	188
	189	// The team is on screen whether anybody is in sight or not: five slots.
	190	const slots = nodes.get("roster")!.children as { className: string }[];
	191	expect(slots.length).toBe(5);
	192	expect(slots.filter((slot) => slot.className.includes("mine")).length).toBe(1);
	193
	194	// Run the match on a few seconds: bots trade, and the feed fills with
	195	// names — and with nothing that says where anybody is.
	196	const arena = await import("./arena.ts");
	197	for (let i = 0; i < 40 && (nodes.get("feed")!.children as unknown[]).length === 0; i++) {
	198	arena.advance(5);
	199	await Bun.sleep(5);
	200	}
	201	const feedRows = nodes.get("feed")!.children as { children: { textContent: string }[] }[];
	202	expect(feedRows.length).toBeGreaterThan(0);
	203	// killer ▸ victim, and the gun or the ability it was: four spans, no numbers.
	204	const row = feedRows[0]!.children.map((span) => span.textContent).join("");
	205	expect(row).toContain(" ▸ ");
	206	expect(row).not.toMatch(/\d/);
	207
	208	// A frame of the first-person view actually draws walls: a slice a column,
	209	// far more rectangles than the map has tiles.
	210	drawn.length = 0;
	211	runFrame();
	212	expect(drawn.filter((op) => op.startsWith("fillRect")).length).toBeGreaterThan(800);
	213
	214	// Tab swaps that frame for the whole map — many fewer rectangles.
	215	for (const fn of listeners.get("keydown") ?? []) fn({ code: "Tab", key: "", target: {}, preventDefault: noop });
	216	drawn.length = 0;
	217	runFrame();
	218	expect(drawn.filter((op) => op.startsWith("fillRect")).length).toBeLessThan(800);
	219	for (const fn of listeners.get("keyup") ?? []) fn({ code: "Tab" });
	220	drawn.length = 0;
	221	runFrame();
	222	expect(drawn.filter((op) => op.startsWith("fillRect")).length).toBeGreaterThan(800);
	223
	224	// Holding W reaches the server as a direction, and it is the way we face.
	225	const seat = (await import("./arena.ts")).match().players.find((p) => !p.bot)!;
	226	press("KeyW");
	227	await Bun.sleep(160);
	228	expect(Math.hypot(seat.input.mx, seat.input.my)).toBeGreaterThan(0.9);
	229	expect(Math.atan2(seat.input.my, seat.input.mx)).toBeCloseTo(seat.input.angle, 4);
	230
	231	// V falls back to the top-down view, and it draws too.
	232	press("KeyV");
	233	drawn.length = 0;
	234	runFrame();
	235	expect(drawn.some((op) => op.startsWith("fillRect"))).toBe(true);
	236	expect(nodes.get("stage")!.dataset).toMatchObject({ mode: "top" });
	237	press("KeyV");
	238	expect(nodes.get("stage")!.dataset).toMatchObject({ mode: "fp" });
	239
	240	// H toggles the card either way, and the button closes it for good.
	241	const help = nodes.get("help")!.style as Record<string, string>;
	242	const before = help.display;
	243	press("KeyH");
	244	expect(help.display).not.toBe(before);
	245	if (help.display !== "grid") press("KeyH");
	246	expect(help.display).toBe("grid");
	247	click(nodes.get("helpclose")!);
	248	expect((nodes.get("help")!.style as Record<string, string>).display).toBe("none");
	249	expect((globalThis as unknown as { localStorage: Storage }).localStorage.getItem("val.help.seen")).toBe("1");
	250
	251	// B works the buy panel either way — it opens itself in the buy phase.
	252	const panel = nodes.get("buy")!.classList as { contains: (n: string) => boolean };
	253	const wasOpen = panel.contains("on");
	254	press("KeyB");
	255	expect(panel.contains("on")).toBe(!wasOpen);
	256
	257	// And the socket really took a seat in the running match.
	258	expect(seat.bot).toBe(false);
	259	}, 15000);
		@@ -0,0 +1,49 @@
	1	import { expect, test } from "bun:test";
	2	import { fade, firedNow, gunSnapshot, gunTick, hitMarked, makeGun } from "../static/gun.js";
	3
	4	const snap = (over: Record<string, unknown> = {}, shots: unknown[] = []) => ({
	5	me: { x: 100, y: 100, ammo: 25, reloading: false, alive: true, ...over },
	6	shots,
	7	});
	8
	9	test("the magazine going down is a shot; a reload is not", () => {
	10	expect(firedNow(25, 24, false)).toBe(true);
	11	expect(firedNow(25, 25, false)).toBe(false);
	12	expect(firedNow(1, 25, true)).toBe(false);
	13	expect(firedNow(null, 25, false)).toBe(false);
	14	});
	15
	16	test("a hit marker comes from a shot of mine the server says landed", () => {
	17	const mine = [{ x1: 102, y1: 99, x2: 400, y2: 100, hit: true }];
	18	expect(hitMarked(mine, { x: 100, y: 100 })).toBe(true);
	19	const missed = [{ x1: 102, y1: 99, x2: 400, y2: 100, hit: false }];
	20	expect(hitMarked(missed, { x: 100, y: 100 })).toBe(false);
	21	const somebody_else = [{ x1: 900, y1: 900, x2: 400, y2: 100, hit: true }];
	22	expect(hitMarked(somebody_else, { x: 100, y: 100 })).toBe(false);
	23	});
	24
	25	test("a snapshot with a shot in it kicks the gun, and the kick fades", () => {
	26	const gun = makeGun();
	27	gunSnapshot(gun, snap());
	28	expect(gun.kick).toBe(0);
	29	gunSnapshot(gun, snap({ ammo: 24 }));
	30	expect(gun.kick).toBe(1);
	31	gunTick(gun, 0.06);
	32	expect(gun.kick).toBeLessThan(1);
	33	gunTick(gun, 1);
	34	expect(gun.kick).toBe(0);
	35	});
	36
	37	test("a landed shot marks, and the mark fades on its own clock", () => {
	38	const gun = makeGun();
	39	gunSnapshot(gun, snap({ ammo: 24 }, [{ x1: 100, y1: 100, x2: 300, y2: 100, hit: true }]));
	40	expect(gun.mark).toBe(1);
	41	gunTick(gun, 0.2);
	42	expect(gun.mark).toBeGreaterThan(0);
	43	gunTick(gun, 0.2);
	44	expect(gun.mark).toBe(0);
	45	});
	46
	47	test("fade never goes below nothing", () => {
	48	expect(fade(0.1, 10, 0.2)).toBe(0);
	49	});
		@@ -0,0 +1,153 @@
	1	import { describe, expect, test } from "bun:test";
	2	import { mkdtempSync } from "node:fs";
	3	import { tmpdir } from "node:os";
	4	import { join } from "node:path";
	5	import { fallsBetween, marksOf, trimFeed, type Mark } from "./killfeed.ts";
	6	import { newMatch } from "./match.ts";
	7
	8	process.env.FORGE_APP_DATA ??= mkdtempSync(join(tmpdir(), "app-"));
	9
	10	const mark = (id: string, over: Partial<Mark> = {}): Mark => ({
	11	id,
	12	name: id,
	13	side: "atk",
	14	alive: true,
	15	kills: 0,
	16	weapon: "vandal",
	17	...over,
	18	});
	19
	20	const context = (events: string[] = [], shooters: string[] = [], at = 10) => ({
	21	at,
	22	events,
	23	shooters: new Set(shooters),
	24	});
	25
	26	describe("reading falls out of two instants", () => {
	27	test("a shot kill names the killer, the victim and the gun", () => {
	28	const before = [mark("A", { side: "atk" }), mark("B", { side: "def" })];
	29	const after = [mark("A", { side: "atk", kills: 1 }), mark("B", { side: "def", alive: false })];
	30	const falls = fallsBetween(before, after, context(["A killed B"], ["A"]));
	31	expect(falls).toEqual([{ killer: "A", victim: "B", weapon: "vandal", headshot: false, at: 10 }]);
	32	});
	33
	34	test("a head shot is marked as one", () => {
	35	const before = [mark("A", { side: "atk" }), mark("B", { side: "def" })];
	36	const after = [mark("A", { side: "atk", kills: 1 }), mark("B", { side: "def", alive: false })];
	37	expect(fallsBetween(before, after, context(["A headshot B"], ["A"]))[0]!.headshot).toBe(true);
	38	});
	39
	40	test("a kill with no shot behind it names no gun — a molly is not a Vandal", () => {
	41	const before = [mark("A", { side: "atk" }), mark("B", { side: "def" })];
	42	const after = [mark("A", { side: "atk", kills: 1 }), mark("B", { side: "def", alive: false })];
	43	expect(fallsBetween(before, after, context(["A killed B"]))[0]!.weapon).toBe(null);
	44	});
	45
	46	test("dying to nobody — a molly of your own, a fall — has no killer", () => {
	47	const before = [mark("A", { side: "atk" }), mark("B", { side: "def" })];
	48	const after = [mark("A", { side: "atk" }), mark("B", { side: "def", alive: false })];
	49	const falls = fallsBetween(before, after, context(["B died"]));
	50	expect(falls.length).toBe(1);
	51	expect(falls[0]!.killer).toBe(null);
	52	expect(falls[0]!.weapon).toBe(null);
	53	});
	54
	55	test("two kills in one tick go to the right killers, by what the loop said", () => {
	56	const before = [
	57	mark("A", { side: "atk" }),
	58	mark("C", { side: "atk" }),
	59	mark("B", { side: "def" }),
	60	mark("D", { side: "def" }),
	61	];
	62	const after = [
	63	mark("A", { side: "atk", kills: 1 }),
	64	mark("C", { side: "atk", kills: 1 }),
	65	mark("B", { side: "def", alive: false }),
	66	mark("D", { side: "def", alive: false }),
	67	];
	68	const falls = fallsBetween(before, after, context(["C killed B", "A killed D"], ["A", "C"]));
	69	expect(falls.find((f) => f.victim === "B")!.killer).toBe("C");
	70	expect(falls.find((f) => f.victim === "D")!.killer).toBe("A");
	71	});
	72
	73	test("a killer is never somebody on the victim's own side", () => {
	74	const before = [mark("A", { side: "atk" }), mark("B", { side: "atk" }), mark("E", { side: "def" })];
	75	const after = [
	76	mark("A", { side: "atk", kills: 1 }),
	77	mark("B", { side: "atk", alive: false }),
	78	mark("E", { side: "def" }),
	79	];
	80	expect(fallsBetween(before, after, context([]))[0]!.killer).toBe(null);
	81	});
	82
	83	test("a kill with two victims and one killer only credits the one kill", () => {
	84	const before = [mark("A", { side: "atk" }), mark("B", { side: "def" }), mark("C", { side: "def" })];
	85	const after = [
	86	mark("A", { side: "atk", kills: 1 }),
	87	mark("B", { side: "def", alive: false }),
	88	mark("C", { side: "def", alive: false }),
	89	];
	90	const falls = fallsBetween(before, after, context(["A killed B"], ["A"]));
	91	expect(falls.filter((f) => f.killer === "A").length).toBe(1);
	92	expect(falls.filter((f) => f.killer === null).length).toBe(1);
	93	});
	94
	95	test("nothing happening is no falls", () => {
	96	const players = [mark("A"), mark("B", { side: "def" })];
	97	expect(fallsBetween(players, players, context())).toEqual([]);
	98	});
	99
	100	test("a body that was already dead does not fall twice", () => {
	101	const before = [mark("B", { side: "def", alive: false })];
	102	expect(fallsBetween(before, before, context())).toEqual([]);
	103	});
	104
	105	test("a fall never carries a position", () => {
	106	const before = [mark("A", { side: "atk" }), mark("B", { side: "def" })];
	107	const after = [mark("A", { side: "atk", kills: 1 }), mark("B", { side: "def", alive: false })];
	108	const fall = fallsBetween(before, after, context(["A killed B"], ["A"]))[0]!;
	109	expect(Object.keys(fall).sort()).toEqual(["at", "headshot", "killer", "victim", "weapon"]);
	110	});
	111
	112	test("marks come off the real players of a real match", () => {
	113	const marks = marksOf(newMatch().players);
	114	expect(marks.length).toBe(10);
	115	expect(marks.every((m) => m.alive && m.kills === 0 && typeof m.name === "string")).toBe(true);
	116	expect(JSON.stringify(marks)).not.toContain('"x"');
	117	});
	118	});
	119
	120	describe("the feed as it is shown", () => {
	121	const fall = (victim: string, at: number) => ({ killer: "A", victim, weapon: null, headshot: false, at });
	122
	123	test("keeps the last few and drops the stale", () => {
	124	const feed = [fall("a", 1), fall("b", 2), fall("c", 9), fall("d", 10)];
	125	expect(trimFeed(feed, 10, 5, 8).map((f) => f.victim)).toEqual(["b", "c", "d"]);
	126	});
	127
	128	test("never grows past its slots", () => {
	129	const feed = [1, 2, 3, 4, 5, 6, 7].map((n) => fall(String(n), 10));
	130	expect(trimFeed(feed, 10, 5, 8).map((f) => f.victim)).toEqual(["3", "4", "5", "6", "7"]);
	131	});
	132	});
	133
	134	describe("the feed the arena sends", () => {
	135	test("bots killing each other reach the snapshot as names, with no positions", async () => {
	136	const { advance, match, snapshot } = await import("./arena.ts");
	137	const viewer = match().players[0]!.id;
	138	let feed: { k: string \| null; v: string; w: string \| null; h: boolean; t: number }[] = [];
	139	for (let seconds = 0; seconds < 400 && feed.length === 0; seconds += 10) {
	140	advance(10);
	141	feed = JSON.parse(snapshot(viewer)).feed;
	142	}
	143	expect(feed.length).toBeGreaterThan(0);
	144	const names = match().players.map((p) => p.name);
	145	for (const line of feed) {
	146	expect(names).toContain(line.v);
	147	if (line.k !== null) expect(names).toContain(line.k);
	148	expect(line.t).toBeLessThanOrEqual(8);
	149	// Names, a gun, an age. Nothing that says where anybody is.
	150	expect(Object.keys(line).sort()).toEqual(["h", "k", "t", "v", "w"]);
	151	}
	152	}, 30000);
	153	});
		@@ -0,0 +1,84 @@
	1	/**
	2	* Who killed whom, read off the match rather than written into it.
	3	*
	4	* The round loop counts kills and deaths on the players and says a line
	5	* about it; it keeps no list. Rather than change the rules to carry one,
	6	* the arena compares the players before and after a tick: somebody who was
	7	* alive and is not is a victim, somebody whose kill count went up is a
	8	* killer, and the line the loop said settles which of them did it when two
	9	* fall in the same thirtieth of a second.
	10	*
	11	* Pure functions over plain marks. Nothing here knows a position, and a fall
	12	* never carries one — the feed must not be a way to learn where anybody is.
	13	*/
	14
	15	import type { Player, Side } from "./state.ts";
	16	import type { WeaponId } from "./weapons.ts";
	17
	18	/** Everything about a player this module needs, taken at one instant. */
	19	export type Mark = {
	20	id: string;
	21	name: string;
	22	side: Side;
	23	alive: boolean;
	24	kills: number;
	25	weapon: WeaponId;
	26	};
	27
	28	export type Fall = {
	29	killer: string \| null;
	30	victim: string;
	31	/** The killer's gun when the kill came from a shot; null when it did not. */
	32	weapon: WeaponId \| null;
	33	headshot: boolean;
	34	/** The match clock when it happened. */
	35	at: number;
	36	};
	37
	38	export const marksOf = (players: Player[]): Mark[] =>
	39	players.map((p) => ({ id: p.id, name: p.name, side: p.side, alive: p.alive, kills: p.kills, weapon: p.weapon }));
	40
	41	export type Context = {
	42	at: number;
	43	/** The lines the round loop said this tick, or the most recent few. */
	44	events: string[];
	45	/** Players whose shot landed on this tick, so a molly is not called a gun. */
	46	shooters: Set<string>;
	47	};
	48
	49	/**
	50	* The falls between two instants. Killers are matched to victims by the line
	51	* the loop said, and by side and a spare kill when there is no line.
	52	*/
	53	export function fallsBetween(before: Mark[], after: Mark[], context: Context): Fall[] {
	54	const was = new Map(before.map((m) => [m.id, m]));
	55	const falls: Fall[] = [];
	56	const credit = new Map<string, number>();
	57	for (const mark of after) {
	58	const old = was.get(mark.id);
	59	if (old && mark.kills > old.kills) credit.set(mark.id, mark.kills - old.kills);
	60	}
	61	const named = (killer: Mark, victim: Mark): boolean =>
	62	context.events.includes(`${killer.name} killed ${victim.name}`) \|\|
	63	context.events.includes(`${killer.name} headshot ${victim.name}`);
	64
	65	for (const mark of after) {
	66	const old = was.get(mark.id);
	67	if (!old \|\| !old.alive \|\| mark.alive) continue;
	68	const able = after.filter((m) => (credit.get(m.id) ?? 0) > 0 && m.side !== mark.side);
	69	const killer = able.find((m) => named(m, mark)) ?? able[0] ?? null;
	70	if (killer) credit.set(killer.id, (credit.get(killer.id) ?? 1) - 1);
	71	falls.push({
	72	killer: killer ? killer.name : null,
	73	victim: mark.name,
	74	weapon: killer && context.shooters.has(killer.id) ? killer.weapon : null,
	75	headshot: killer ? context.events.includes(`${killer.name} headshot ${mark.name}`) : false,
	76	at: context.at,
	77	});
	78	}
	79	return falls;
	80	}
	81
	82	/** The feed as it is shown: the last few falls, and only the recent ones. */
	83	export const trimFeed = (feed: Fall[], now: number, keep = 5, life = 8): Fall[] =>
	84	feed.filter((f) => now - f.at <= life).slice(-keep);
		@@ -8,6 +8,7 @@ import {
8	8	DEFUSE_CHECKPOINT,
9	9	DEFUSE_TIME,
10	10	FUSE_TIME,
	11	makePlayer,
11	12	newMatch,
12	13	PLANT_TIME,
13	14	ROUND_TIME,
		@@ -371,3 +372,28 @@ test("bots play the round: they buy, they take a site and they use their kit", (
371	372	expect(state.players.some((p) => p.weapon !== "classic")).toBe(true);
372	373	expect(aliveOn(state, "atk").length + aliveOn(state, "def").length).toBeGreaterThan(0);
373	374	});
	375
	376
	377	test("no match ever has two players with the same name", () => {
	378	// The kill feed, the round log and the scoreboard all address people by
	379	// name; two Kits read as a team kill this game cannot have. A thousand
	380	// rosters, no collision.
	381	for (let seed = 0; seed < 1000; seed++) {
	382	const names = newMatch(seed).players.map((p) => p.name);
	383	expect(names.length).toBe(10);
	384	expect(new Set(names).size).toBe(10);
	385	}
	386	});
	387
	388	test("a seat made on its own still gets a name of its own", () => {
	389	const state = newMatch(1234);
	390	const names = new Set<string>();
	391	for (const team of ["red", "blue"] as const)
	392	for (let i = 0; i < 5; i++) names.add(makePlayer(state, team, i).name);
	393	expect(names.size).toBe(10);
	394	});
	395
	396	test("the deal is the seeded shuffle, so the same match replays the same", () => {
	397	expect(newMatch(77).players.map((p) => p.name)).toEqual(newMatch(77).players.map((p) => p.name));
	398	expect(newMatch(77).players.map((p) => p.name)).not.toEqual(newMatch(78).players.map((p) => p.name));
	399	});
		@@ -69,9 +69,39 @@ const BOT_NAMES = [
69	69	"Kit", "Lux", "Mox", "Nell", "Orla", "Pike", "Quill", "Rio", "Sage", "Tove",
70	70	];
71	71
72		export function makePlayer(state: MatchState, team: Team, index: number): Player {
	72	/**
	73	* Twenty names, shuffled, dealt to the ten seats — drawn without replacement.
	74	*
	75	* A name is how a person is addressed: in the kill feed, in the round log, on
	76	* the scoreboard. Two bots called Kit make "Kit killed Kit", which reads as a
	77	* team kill that this game cannot even have. Picking each name independently
	78	* collided in most matches — a uniform pick over twenty names for ten seats
	79	* is a birthday problem, and no arithmetic spacing survives adding a uniform
	80	* term to it. Shuffling once and dealing cannot collide at all.
	81	*/
	82	export function dealNames(state: MatchState, count = TEAMS.length * ROSTER): string[] {
	83	const bag = BOT_NAMES.slice();
	84	for (let i = bag.length - 1; i > 0; i--) {
	85	const j = Math.floor(random(state) * (i + 1));
	86	const swap = bag[i]!;
	87	bag[i] = bag[j]!;
	88	bag[j] = swap;
	89	}
	90	return bag.slice(0, Math.min(count, bag.length));
	91	}
	92
	93	/**
	94	* One seat. The name is dealt by the caller so a whole roster is drawn
	95	* without replacement; on its own it falls back to the seat's own slot,
	96	* which is distinct for every seat in a match too.
	97	*/
	98	export function makePlayer(
	99	state: MatchState,
	100	team: Team,
	101	index: number,
	102	name = BOT_NAMES[(TEAMS.indexOf(team) * ROSTER + index) % BOT_NAMES.length]!,
	103	): Player {
73	104	const agent = ["ember", "veil", "sable", "mender", "rook"][index % 5]!;
74		const name = BOT_NAMES[(TEAMS.indexOf(team) * 7 + index * 3 + Math.floor(random(state) * 20)) % BOT_NAMES.length]!;
75	105	return {
76	106	id: `bot-${team}-${index}`,
77	107	name: `${name}`,
		@@ -132,8 +162,10 @@ export function newMatch(seed = Date.now() % 100000): MatchState {
132	162	seed,
133	163	now: 0,
134	164	};
	165	const names = dealNames(state);
135	166	for (const team of TEAMS)
136		for (let i = 0; i < ROSTER; i++) state.players.push(makePlayer(state, team, i));
	167	for (let i = 0; i < ROSTER; i++)
	168	state.players.push(makePlayer(state, team, i, names[state.players.length]));
137	169	startRound(state, true);
138	170	say(state, "Round 1 — buy phase");
139	171	return state;
		@@ -70,6 +70,41 @@ export function gamePage(opts: {
70	70	#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
71	71	#dead { position: absolute; inset: 0; display: none; place-items: center; background: #0008;
72	72	font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; }
	73	#prompt { position: absolute; left: 50%; transform: translateX(-50%); bottom: .6rem;
	74	max-width: 92%; padding: .35rem .7rem; border-radius: .4rem; background: #0b0d11cc;
	75	border: 1px solid #2f3541; font-size: .9rem; text-align: center; pointer-events: none; }
	76	#aimhint { position: absolute; inset: auto 0 45% 0; display: none; place-items: center;
	77	font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
	78	text-shadow: 0 1px 4px #000; pointer-events: none; }
	79	#help { position: fixed; inset: 0; z-index: 10; display: none; place-items: center;
	80	background: #080a0ef2; padding: .8rem; overflow: auto; }
	81	#help > div { max-width: 40rem; }
	82	#help h2 { font-size: 1rem; margin: 0 0 .4rem; letter-spacing: .1em; text-transform: uppercase; }
	83	#help p, #help ul { margin: .4rem 0; font-size: .88rem; }
	84	#help ul { padding-left: 1.1rem; }
	85	#help kbd { background: #222732; border: 1px solid #39404e; border-radius: .25rem;
	86	padding: 0 .3rem; font: inherit; font-size: .82rem; }
	87	#helpclose { min-height: 44px; padding: 0 1.1rem; margin-top: .5rem; background: #3a4356;
	88	color: var(--ink); border: 0; border-radius: .45rem; font: inherit; cursor: pointer; }
	89	#roster { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; margin: .5rem 0;
	90	min-height: 3.1rem; }
	91	.slot { background: #171a21; border: 1px solid #262b35; border-left: 3px solid #4a5162;
	92	border-radius: .35rem; padding: .2rem .35rem; font-size: .72rem; overflow: hidden; }
	93	.slot .who { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	94	.slot .agent { display: block; opacity: .6; font-size: .66rem; white-space: nowrap;
	95	overflow: hidden; text-overflow: ellipsis; }
	96	.slot .hp { display: block; height: 5px; margin-top: .2rem; border-radius: 3px; background: #2a2f3a; }
	97	.slot .hp i { display: block; height: 100%; border-radius: 3px; background: #6fcf6f; }
	98	.slot.mine { border-color: #6f8ecf; background: #1b2130; }
	99	.slot.down { opacity: .42; filter: grayscale(1); }
	100	.slot.down .who { text-decoration: line-through; }
	101	.slot .spike { color: #f0d060; }
	102	#feed { position: absolute; top: .5rem; right: .5rem; width: min(17rem, 52%); display: grid;
	103	gap: .18rem; justify-items: end; pointer-events: none; font-size: .76rem; }
	104	#feed div { background: #0b0d11cc; border: 1px solid #2f3541; border-radius: .3rem;
	105	padding: .1rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	106	max-width: 100%; }
	107	#feed .k { color: #8ef0c4; } #feed .v { color: #e39a95; } #feed .w { opacity: .65; }
73	108	#hud { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0;
74	109	font-variant-numeric: tabular-nums; }
75	110	.chip { background: #1b1e25; border: 1px solid #2a2f3a; border-radius: .4rem; padding: .3rem .55rem;
		@@ -118,9 +153,42 @@ export function gamePage(opts: {
118	153	<div id="stage">
119	154	<canvas id="view" width="900" height="570"></canvas>
120	155	<div id="flash"></div>
	156	<div id="aimhint">click to aim · esc releases</div>
121	157	<div id="dead">waiting for the next round</div>
	158	<div id="feed"></div>
	159	<div id="prompt">Click the map to aim, then press <b>H</b> for how to play.</div>
	160	<div id="help" role="dialog" aria-label="How to play val"><div>
	161	<h2>How to play</h2>
	162	<p><strong>The round.</strong> Attackers carry the spike to site A or B and plant it;
	163	defenders stop them, or defuse it once it is down. Plant and it runs a 45s fuse.
	164	First team to 13 rounds wins, and the sides swap at 12.</p>
	165	<p><strong>The teams.</strong> You are <span class="red">red</span> or
	166	<span class="blue">blue</span>; each round one team attacks and the other defends.
	167	Team mates carry a name tag over their head, enemies never do.</p>
	168	<p><strong>Controls.</strong> <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> move ·
	169	click the view to capture the mouse and look, <kbd>Esc</kbd> releases ·
	170	click to fire · <kbd>R</kbd> reload · hold <kbd>F</kbd> to plant, defuse or pick up ·
	171	<kbd>Tab</kbd> holds the big map open · <kbd>V</kbd> swaps to the top-down view ·
	172	<kbd>B</kbd> opens the buy · <kbd>H</kbd> brings this card back.</p>
	173	<p><strong>Abilities.</strong> <kbd>C</kbd> and <kbd>Q</kbd> are bought in the buy phase and
	174	last the round, <kbd>E</kbd> is free and comes back on a cooldown, and <kbd>X</kbd> is
	175	the ultimate, paid for in ult points you earn by playing.</p>
	176	<p><strong>Telling people apart.</strong> Your five are always listed under the view with their
	177	health — struck through when they are down — and the last few kills scroll in the top right.
	178	In the world an enemy wears a red chevron over their head and a hard dark outline, a team mate
	179	wears their name and a health pip, and anybody lying flat on the floor is dead. On the map your
	180	team is always shown (crossed out when down) and enemies appear only while you can see them.</p>
	181	<p><strong>On a phone</strong> the view stays top-down: the left thumb walks, the right
	182	thumb aims and fires, and the buttons under the map buy and cast.</p>
	183	<ul id="helpagents"></ul>
	184	<button id="helpclose" type="button">Got it — play</button>
	185	</div></div>
122	186	</div>
123	187
	188	<div id="roster" aria-label="your team">${["", "", "", "", ""]
	189	.map(() => `<div class="slot"><span class="who">—</span><span class="hp"><i style="width:0"></i></span></div>`)
	190	.join("")}</div>
	191
124	192	<div id="hud">
125	193	<span class="chip" id="hp">100 hp</span>
126	194	<span class="chip" id="gun">Classic 12</span>
		@@ -128,6 +196,8 @@ export function gamePage(opts: {
128	196	<span class="chip" id="ultmeter">ult 0/6</span>
129	197	<span class="kit" id="kit"></span>
130	198	<button id="buytoggle" class="chip" type="button">buy (B)</button>
	199	<button id="viewtoggle" class="chip" type="button">view (V)</button>
	200	<button id="helptoggle" class="chip" type="button">how to play (H)</button>
131	201	</div>
132	202
133	203	<div id="buy">
		@@ -136,13 +206,16 @@ export function gamePage(opts: {
136	206	(a) => `<button type="button" data-agent="${escape(a.id)}" title="${escape(a.blurb)}">${escape(a.name)} <small>${escape(a.role)}</small></button>`,
137	207	).join("")}</div>
138	208	<div class="buys" id="guns">${weaponIds()
139		.map((id) => `<button type="button" data-buy="${id}">${escape(WEAPONS[id].name)} <b>${WEAPONS[id].cost}</b></button>`)
	209	.map(
	210	(id) =>
	211	`<button type="button" data-buy="${id}" data-cost="${WEAPONS[id].cost}" title="${escape(WEAPONS[id].name)} — ${WEAPONS[id].cost} credits, ${WEAPONS[id].magazine} rounds, ${WEAPONS[id].auto ? "automatic" : "semi-automatic"}">${escape(WEAPONS[id].name)} <b>${WEAPONS[id].cost}</b></button>`,
	212	)
140	213	.join("")}</div>
141	214	<div class="buys" id="gear">
142		<button type="button" data-buy="light">Light shield <b>400</b></button>
143		<button type="button" data-buy="heavy">Heavy shield <b>1000</b></button>
144		<button type="button" data-buy="c">Ability C</button>
145		<button type="button" data-buy="q">Ability Q</button>
	215	<button type="button" data-buy="light" data-cost="400" title="25 armour that soaks a quarter of what hits you">Light shield <b>400</b></button>
	216	<button type="button" data-buy="heavy" data-cost="1000" title="50 armour that soaks half of what hits you">Heavy shield <b>1000</b></button>
	217	<button type="button" data-buy="c" data-cost="0">C ability <b>—</b></button>
	218	<button type="button" data-buy="q" data-cost="0">Q ability <b>—</b></button>
146	219	</div>
147	220	</div>
148	221
		@@ -162,9 +235,11 @@ export function gamePage(opts: {
162	235	</div>
163	236
164	237	<footer>
165		<p><strong>Controls.</strong> WASD move · mouse aims · click fires · R reloads ·
166		<strong>F</strong> plants and defuses (hold it) · C / Q / E / X cast · B opens the buy.
167		On a phone: left thumb walks, right thumb aims and fires, the buttons under the map do the rest.</p>
	238	<p><strong>Controls.</strong> WASD move · click the view to capture the mouse, move to look,
	239	Esc releases · click fires · R reloads · <strong>F</strong> plants and defuses (hold it) ·
	240	C / Q / E / X cast · Tab holds the map open · V swaps to the top-down view ·
	241	B opens the buy · H shows how to play.
	242	On a phone it stays top-down: left thumb walks, right thumb aims and fires.</p>
168	243	<p>Five attackers carry the spike, five defenders stop them. 100s round, 4s plant, 45s fuse,
169	244	7s defuse with a checkpoint at half. First to 13, sides swap at 12. Bots fill every seat
170	245	nobody is in, and they use their kit.</p>