52f9b27
@@ -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,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);
});
@@ -70,6 +70,22 @@
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; }
  #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,7 +134,30 @@
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="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>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="hud">
@@ -128,6 +167,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 +177,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 +206,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,79 @@
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("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,174 @@
/**
 * 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("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("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);
});
@@ -176,3 +176,28 @@
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"');
});
@@ -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);
});
@@ -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,50 @@
/**
 * 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;
  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. Click a gun you can afford.`;
  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,344 @@
/**
 * 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;
  const skin = !p.alive ? "#555a63" : mate ? "#3f9fd6" : "#d8483f";
  const trim = AGENT_COLOUR[p.agent] || "#999";
  withRuns(ctx, scene, cx - w, cx + w * 1.4, thing.perp, step, columns, () => {
    // Body, head, and a shoulder band in the agent's colour.
    ctx.fillStyle = skin;
    ctx.fillRect(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.lineWidth = Math.max(1, h * 0.03);
    ctx.strokeStyle = trim;
    ctx.stroke();
    if (!p.alive) return;
    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);
    }
    // A name tag over team mates only: an enemy is a shape, never a label.
    if (mate) {
      const size = Math.max(9, Math.min(18, h * 0.16));
      ctx.font = `${size}px system-ui, sans-serif`;
      ctx.textAlign = "center";
      ctx.fillStyle = "rgba(10,12,16,0.65)";
      const tw = ctx.measureText(p.name).width + 8;
      ctx.fillRect(cx - tw / 2, top - h * 0.34, tw, size * 1.4);
      ctx.fillStyle = "#cfe8ff";
      ctx.fillText(p.name, cx, top - h * 0.34 + 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,184 @@
/**
 * 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; you are an arrow, so you can tell at a glance where you face. */
function drawPlayer(ctx, p, pos, s, me, labels) {
  const x = pos.x * s;
  const y = pos.y * s;
  const r = Math.max(2.5, 16 * s);
  const mine = p.id === me.id;
  const body = !p.alive ? "#555a63" : p.mate ? (mine ? "#eaeaea" : "#4fb3d9") : "#e35d5b";
  if (mine) {
    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;
  }
  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();
  if (p.alive) {
    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();
  }
  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.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);
  }
}
@@ -3,25 +3,52 @@
 * 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 { 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 +62,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 +78,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 +113,69 @@
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 && view.requestPointerLock) view.requestPointerLock();
});
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 +187,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 +200,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 +258,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 +332,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 +340,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 +399,20 @@
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);
  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 +426,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 +446,103 @@
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";
}
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);
		@@ -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,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	});
		@@ -70,6 +70,22 @@ 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; }
73	89	#hud { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0;
74	90	font-variant-numeric: tabular-nums; }
75	91	.chip { background: #1b1e25; border: 1px solid #2a2f3a; border-radius: .4rem; padding: .3rem .55rem;
		@@ -118,7 +134,30 @@ export function gamePage(opts: {
118	134	<div id="stage">
119	135	<canvas id="view" width="900" height="570"></canvas>
120	136	<div id="flash"></div>
	137	<div id="aimhint">click to aim · esc releases</div>
121	138	<div id="dead">waiting for the next round</div>
	139	<div id="prompt">Click the map to aim, then press <b>H</b> for how to play.</div>
	140	<div id="help" role="dialog" aria-label="How to play val"><div>
	141	<h2>How to play</h2>
	142	<p><strong>The round.</strong> Attackers carry the spike to site A or B and plant it;
	143	defenders stop them, or defuse it once it is down. Plant and it runs a 45s fuse.
	144	First team to 13 rounds wins, and the sides swap at 12.</p>
	145	<p><strong>The teams.</strong> You are <span class="red">red</span> or
	146	<span class="blue">blue</span>; each round one team attacks and the other defends.
	147	Team mates carry a name tag over their head, enemies never do.</p>
	148	<p><strong>Controls.</strong> <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> move ·
	149	click the view to capture the mouse and look, <kbd>Esc</kbd> releases ·
	150	click to fire · <kbd>R</kbd> reload · hold <kbd>F</kbd> to plant, defuse or pick up ·
	151	<kbd>Tab</kbd> holds the big map open · <kbd>V</kbd> swaps to the top-down view ·
	152	<kbd>B</kbd> opens the buy · <kbd>H</kbd> brings this card back.</p>
	153	<p><strong>Abilities.</strong> <kbd>C</kbd> and <kbd>Q</kbd> are bought in the buy phase and
	154	last the round, <kbd>E</kbd> is free and comes back on a cooldown, and <kbd>X</kbd> is
	155	the ultimate, paid for in ult points you earn by playing.</p>
	156	<p><strong>On a phone</strong> the view stays top-down: the left thumb walks, the right
	157	thumb aims and fires, and the buttons under the map buy and cast.</p>
	158	<ul id="helpagents"></ul>
	159	<button id="helpclose" type="button">Got it — play</button>
	160	</div></div>
122	161	</div>
123	162
124	163	<div id="hud">
		@@ -128,6 +167,8 @@ export function gamePage(opts: {
128	167	<span class="chip" id="ultmeter">ult 0/6</span>
129	168	<span class="kit" id="kit"></span>
130	169	<button id="buytoggle" class="chip" type="button">buy (B)</button>
	170	<button id="viewtoggle" class="chip" type="button">view (V)</button>
	171	<button id="helptoggle" class="chip" type="button">how to play (H)</button>
131	172	</div>
132	173
133	174	<div id="buy">
		@@ -136,13 +177,16 @@ export function gamePage(opts: {
136	177	(a) => `<button type="button" data-agent="${escape(a.id)}" title="${escape(a.blurb)}">${escape(a.name)} <small>${escape(a.role)}</small></button>`,
137	178	).join("")}</div>
138	179	<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>`)
	180	.map(
	181	(id) =>
	182	`<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>`,
	183	)
140	184	.join("")}</div>
141	185	<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>
	186	<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>
	187	<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>
	188	<button type="button" data-buy="c" data-cost="0">C ability <b>—</b></button>
	189	<button type="button" data-buy="q" data-cost="0">Q ability <b>—</b></button>
146	190	</div>
147	191	</div>
148	192
		@@ -162,9 +206,11 @@ export function gamePage(opts: {
162	206	</div>
163	207
164	208	<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>
	209	<p><strong>Controls.</strong> WASD move · click the view to capture the mouse, move to look,
	210	Esc releases · click fires · R reloads · <strong>F</strong> plants and defuses (hold it) ·
	211	C / Q / E / X cast · Tab holds the map open · V swaps to the top-down view ·
	212	B opens the buy · H shows how to play.
	213	On a phone it stays top-down: left thumb walks, right thumb aims and fires.</p>
168	214	<p>Five attackers carry the spike, five defenders stop them. 100s round, 4s plant, 45s fuse,
169	215	7s defuse with a checkpoint at half. First to 13, sides swap at 12. Bots fill every seat
170	216	nobody is in, and they use their kit.</p>
		@@ -0,0 +1,79 @@
	1	import { describe, expect, test } from "bun:test";
	2	import { choosePrompt } from "../static/prompt.js";
	3
	4	type Snap = ReturnType<typeof snapshot>;
	5
	6	const snapshot = (over: Record<string, unknown> = {}, me: Record<string, unknown> = {}, spike: Record<string, unknown> = {}) => ({
	7	phase: "live",
	8	clock: 40,
	9	result: null,
	10	me: { side: "atk", alive: true, blind: 0, planting: 0, spike: false, ...me },
	11	spike: { planted: false, carried: false, fuse: 0, defuse: 0, x: 100, y: 100, ...spike },
	12	...over,
	13	});
	14
	15	describe("the one prompt on screen", () => {
	16	test("the buy phase says what to do and how long there is", () => {
	17	const text = choosePrompt(snapshot({ phase: "buy", clock: 14.2 }));
	18	expect(text).toBe("Buy phase — 15s left. Click a gun you can afford.");
	19	});
	20
	21	test("carrying the spike off a site sends you to one", () => {
	22	expect(choosePrompt(snapshot({}, { spike: true }), { onSite: false })).toBe(
	23	"You have the spike — get to site A or B",
	24	);
	25	});
	26
	27	test("carrying it onto a site says how to plant", () => {
	28	expect(choosePrompt(snapshot({}, { spike: true }), { onSite: true })).toBe("Hold F to plant");
	29	});
	30
	31	test("a defender near a planted spike is told to defuse, with the fuse", () => {
	32	const text = choosePrompt(snapshot({}, { side: "def" }, { planted: true, fuse: 31.4 }), { nearSpike: true });
	33	expect(text).toBe("Spike down, 32s — hold F to defuse");
	34	});
	35
	36	test("a defender across the map is told to get to it", () => {
	37	const text = choosePrompt(snapshot({}, { side: "def" }, { planted: true, fuse: 31.4 }), { nearSpike: false });
	38	expect(text).toBe("Spike down, 32s — get to it and hold F");
	39	});
	40
	41	test("an attacker with it planted is told to hold the site", () => {
	42	expect(choosePrompt(snapshot({}, {}, { planted: true, fuse: 10 }))).toBe(
	43	"Spike down, 10s — keep them off it",
	44	);
	45	});
	46
	47	test("blind beats everything else on screen", () => {
	48	const text = choosePrompt(snapshot({}, { blind: 1.4, spike: true }), { onSite: true });
	49	expect(text).toBe("You are blind — back off until it clears");
	50	});
	51
	52	test("dead in a live round says you are still in the match", () => {
	53	expect(choosePrompt(snapshot({}, { alive: false }))).toBe("Waiting for the next round — you're in it");
	54	});
	55
	56	test("the end of a round shows the result and the countdown", () => {
	57	const text = choosePrompt(snapshot({ phase: "end", clock: 4.1, result: "Spike defused" }));
	58	expect(text).toBe("Spike defused — next round in 5s");
	59	});
	60
	61	test("a live defender is told what defending is", () => {
	62	expect(choosePrompt(snapshot({}, { side: "def" }))).toBe("Defending — hold A and B, 40s");
	63	});
	64
	65	test("an attacker beside a loose spike is told to walk onto it", () => {
	66	expect(choosePrompt(snapshot(), { nearSpike: true })).toBe("Walk onto the spike to pick it up");
	67	});
	68
	69	test("defusing counts down the defuse, not the fuse", () => {
	70	const text = choosePrompt(snapshot({}, { side: "def" }, { planted: true, fuse: 20, defuse: 3.5 }), {
	71	nearSpike: true,
	72	});
	73	expect(text).toBe("Defusing — keep holding F, 4s");
	74	});
	75
	76	test("no snapshot yet is no prompt", () => {
	77	expect(choosePrompt(null as unknown as Snap)).toBe("");
	78	});
	79	});
		@@ -0,0 +1,185 @@
	1	import { describe, expect, test } from "bun:test";
	2	import {
	3	angleColumn,
	4	bandLight,
	5	castRay,
	6	columnAngle,
	7	columnOffset,
	8	FOV,
	9	hitResult,
	10	project,
	11	projection,
	12	projectResult,
	13	sliceHeight,
	14	smokeAlong,
	15	spriteColumnVisible,
	16	wallLight,
	17	} from "../static/raycast.js";
	18
	19	const W = 900;
	20
	21	describe("columns and angles", () => {
	22	test("the middle column looks straight ahead", () => {
	23	expect(columnOffset(W / 2 - 0.5, W)).toBeCloseTo(0, 6);
	24	expect(columnAngle(W / 2 - 0.5, W, 1.2)).toBeCloseTo(1.2, 6);
	25	});
	26
	27	test("the outer columns sit at the edges of the field of view", () => {
	28	expect(columnOffset(0, W)).toBeCloseTo(-FOV / 2, 2);
	29	expect(columnOffset(W - 1, W)).toBeCloseTo(FOV / 2, 2);
	30	});
	31
	32	test("a column maps to an angle and back again", () => {
	33	for (const col of [0, 123, 450, 899]) {
	34	expect(angleColumn(columnOffset(col, W), W)).toBeCloseTo(col + 0.5, 4);
	35	}
	36	});
	37
	38	test("columns are not spread evenly — that is what keeps walls straight", () => {
	39	const middle = columnOffset(451, W) - columnOffset(450, W);
	40	const edge = columnOffset(1, W) - columnOffset(0, W);
	41	expect(edge).toBeLessThan(middle);
	42	});
	43	});
	44
	45	describe("wall slices", () => {
	46	test("a wall twice as far is half as tall", () => {
	47	const proj = projection(W);
	48	expect(sliceHeight(160, proj, 80)).toBeCloseTo(sliceHeight(80, proj, 80) / 2, 6);
	49	});
	50
	51	test("a north–south face is darker than an east–west one at the same range", () => {
	52	expect(wallLight(200, 1, 80)).toBeLessThan(wallLight(200, 0, 80));
	53	});
	54
	55	test("further is dimmer, and never fully black", () => {
	56	expect(wallLight(900, 0, 80)).toBeLessThan(wallLight(120, 0, 80));
	57	expect(wallLight(5000, 1, 80)).toBeGreaterThan(0);
	58	});
	59
	60	test("the floor is dimmest at the horizon", () => {
	61	expect(bandLight(2, 200)).toBeLessThan(bandLight(180, 200));
	62	});
	63	});
	64
	65	// A four-by-four room: solid border, open inside.
	66	const room = (col: number, row: number): boolean => col <= 0 \|\| row <= 0 \|\| col >= 3 \|\| row >= 3;
	67
	68	describe("castRay", () => {
	69	const out = hitResult();
	70
	71	test("finds the wall straight ahead and calls it an east–west face", () => {
	72	castRay(room, 120, 120, 0, 80, 2000, out);
	73	expect(out.wall).toBe(true);
	74	expect(out.dist).toBeCloseTo(120, 6); // from x=120 to the face at x=240
	75	expect(out.side).toBe(0);
	76	expect(out.col).toBe(3);
	77	});
	78
	79	test("a ray upward strikes a north–south face", () => {
	80	castRay(room, 120, 120, -Math.PI / 2, 80, 2000, out);
	81	expect(out.wall).toBe(true);
	82	expect(out.dist).toBeCloseTo(40, 6);
	83	expect(out.side).toBe(1);
	84	expect(out.row).toBe(0);
	85	});
	86
	87	test("a ray that runs out of range reports no wall", () => {
	88	castRay(room, 120, 120, 0, 80, 50, out);
	89	expect(out.wall).toBe(false);
	90	expect(out.dist).toBe(50);
	91	});
	92
	93	test("standing inside a wall is zero distance, not an infinite loop", () => {
	94	castRay(room, 10, 10, 0.3, 80, 2000, out);
	95	expect(out.dist).toBe(0);
	96	expect(out.wall).toBe(true);
	97	});
	98
	99	test("a diagonal ray agrees with walking the same line by hand", () => {
	100	castRay(room, 120, 120, Math.PI / 4, 80, 2000, out);
	101	let step = 0;
	102	while (step < 2000 && !room(Math.floor((120 + Math.cos(Math.PI / 4) * step) / 80), Math.floor((120 + Math.sin(Math.PI / 4) * step) / 80)))
	103	step += 0.25;
	104	expect(out.dist).toBeCloseTo(step, 0);
	105	});
	106
	107	test("it fills the caller's object and allocates nothing", () => {
	108	const same = castRay(room, 120, 120, 0, 80, 2000, out);
	109	expect(same).toBe(out);
	110	});
	111	});
	112
	113	describe("projecting a body onto the screen", () => {
	114	const proj = projection(W);
	115	const out = projectResult();
	116
	117	test("something dead ahead lands in the middle of the screen", () => {
	118	project(100, 100, 0, 500, 100, W, proj, 80, out);
	119	expect(out.behind).toBe(false);
	120	expect(out.column).toBeCloseTo(W / 2, 4);
	121	expect(out.perp).toBeCloseTo(400, 6);
	122	});
	123
	124	test("something to the right lands right of centre", () => {
	125	project(100, 100, 0, 500, 260, W, proj, 80, out);
	126	expect(out.column).toBeGreaterThan(W / 2);
	127	});
	128
	129	test("something behind the camera is not drawn at all", () => {
	130	project(100, 100, 0, -400, 100, W, proj, 80, out);
	131	expect(out.behind).toBe(true);
	132	expect(out.size).toBe(0);
	133	});
	134
	135	test("the further body is the smaller one", () => {
	136	project(100, 100, 0, 300, 100, W, proj, 80, out);
	137	const near = out.size;
	138	project(100, 100, 0, 900, 100, W, proj, 80, out);
	139	expect(out.size).toBeLessThan(near);
	140	});
	141
	142	test("perpendicular depth, not straight-line distance, so the edges do not bulge", () => {
	143	project(100, 100, 0, 500, 300, W, proj, 80, out);
	144	expect(out.perp).toBeLessThan(out.dist);
	145	});
	146	});
	147
	148	describe("z-clip", () => {
	149	test("a body nearer than the wall behind it is drawn", () => {
	150	expect(spriteColumnVisible(300, 900)).toBe(true);
	151	});
	152
	153	test("a body behind the corner is hidden", () => {
	154	expect(spriteColumnVisible(900, 300)).toBe(false);
	155	});
	156
	157	test("a body flush against the wall does not bleed through it", () => {
	158	expect(spriteColumnVisible(299, 300)).toBe(false);
	159	});
	160	});
	161
	162	describe("smoke as a volume", () => {
	163	test("a ray through the middle of a smoke is fully fogged", () => {
	164	expect(smokeAlong(0, 0, 1, 0, 400, 0, 110, 1000)).toBe(1);
	165	});
	166
	167	test("a ray that misses it is not fogged at all", () => {
	168	expect(smokeAlong(0, 0, 1, 0, 400, 400, 110, 1000)).toBe(0);
	169	});
	170
	171	test("a wall in front of the smoke is not fogged by it", () => {
	172	expect(smokeAlong(0, 0, 1, 0, 400, 0, 110, 200)).toBe(0);
	173	});
	174
	175	test("clipping the edge fogs less than going through the middle", () => {
	176	const edge = smokeAlong(0, 0, 1, 0, 400, 100, 110, 1000);
	177	expect(edge).toBeGreaterThan(0);
	178	expect(edge).toBeLessThan(1);
	179	});
	180
	181	test("standing in the middle of one is nearly opaque in every direction", () => {
	182	expect(smokeAlong(400, 0, 1, 0, 400, 0, 110, 1000)).toBeGreaterThan(0.9);
	183	expect(smokeAlong(400, 0, 0, -1, 400, 0, 110, 1000)).toBeGreaterThan(0.9);
	184	});
	185	});
		@@ -0,0 +1,174 @@
	1	/**
	2	* The renderer, run for real against a canvas that writes down what it was
	3	* asked to draw. No browser, but every line of the draw path is executed —
	4	* which is what catches a typo in a frame nobody can see from a unit test.
	5	*/
	6
	7	import { expect, test } from "bun:test";
	8	import { drawGun, makeGun } from "../static/gun.js";
	9	import { drawScene, makeScene } from "../static/scene.js";
	10	import { drawTopdown } from "../static/topdown.js";
	11	import { gridRows, TILE } from "./map.ts";
	12
	13	type Op = { op: string; args: unknown[] };
	14
	15	/** A canvas that records. Every call the renderer makes has to exist here. */
	16	function fakeContext() {
	17	const ops: Op[] = [];
	18	const note =
	19	(op: string) =>
	20	(...args: unknown[]) => {
	21	ops.push({ op, args });
	22	};
	23	const ctx = {
	24	ops,
	25	fillStyle: "",
	26	strokeStyle: "",
	27	lineWidth: 1,
	28	font: "",
	29	textAlign: "left",
	30	globalAlpha: 1,
	31	clearRect: note("clearRect"),
	32	fillRect: note("fillRect"),
	33	strokeRect: note("strokeRect"),
	34	beginPath: note("beginPath"),
	35	closePath: note("closePath"),
	36	moveTo: note("moveTo"),
	37	lineTo: note("lineTo"),
	38	arc: note("arc"),
	39	ellipse: note("ellipse"),
	40	fill: note("fill"),
	41	stroke: note("stroke"),
	42	clip: note("clip"),
	43	rect: note("rect"),
	44	save: note("save"),
	45	restore: note("restore"),
	46	translate: note("translate"),
	47	rotate: note("rotate"),
	48	fillText: note("fillText"),
	49	measureText: (text: string) => ({ width: text.length * 6 }),
	50	createLinearGradient: () => ({ addColorStop() {} }),
	51	};
	52	return ctx;
	53	}
	54
	55	// A room three tiles deep running east, with a pillar standing in it at
	56	// column 5 — enough geometry for a body to hide behind.
	57	const room = (col: number, row: number): boolean =>
	58	col < 1 \|\| col > 12 \|\| row < 1 \|\| row > 3 \|\| col === 5;
	59	const world = { solid: room, tile: TILE };
	60
	61	const snapshot = (players: unknown[], zones: unknown[] = []) => ({
	62	phase: "live",
	63	clock: 40,
	64	result: null,
	65	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" },
	66	players,
	67	zones,
	68	orbs: [],
	69	shots: [],
	70	spike: { planted: false, carried: false, fuse: 0, defuse: 0, x: null, y: null },
	71	});
	72
	73	const body = (over: Record<string, unknown> = {}) => ({
	74	id: "them",
	75	name: "Sable",
	76	agent: "sable",
	77	x: 280,
	78	y: 200,
	79	angle: 3.1,
	80	hp: 100,
	81	alive: true,
	82	mate: false,
	83	spike: false,
	84	blind: false,
	85	...over,
	86	});
	87
	88	const view = { width: 900, height: 570, look: (p: { x: number; y: number; angle: number }) => p };
	89	const eye = { x: 120, y: 200, angle: 0 };
	90
	91	test("a frame draws walls: one filled column per screen column, and the horizon", () => {
	92	const ctx = fakeContext();
	93	drawScene(ctx as never, makeScene(), world, eye, snapshot([]), view);
	94	const rects = ctx.ops.filter((o) => o.op === "fillRect");
	95	// The two bands and the horizon, then a slice for every column of the wall.
	96	expect(rects.length).toBeGreaterThan(800);
	97	});
	98
	99	test("a body in the open is drawn; the same body behind the pillar is not", () => {
	100	const open = fakeContext();
	101	drawScene(open as never, makeScene(), world, eye, snapshot([body()]), view);
	102	// The head is the only arc in this scene, so it stands for the body.
	103	expect(open.ops.some((o) => o.op === "arc")).toBe(true);
	104
	105	const hidden = fakeContext();
	106	drawScene(hidden as never, makeScene(), world, eye, snapshot([body({ x: 700 })]), view);
	107	expect(hidden.ops.some((o) => o.op === "arc")).toBe(false);
	108	});
	109
	110	test("a team mate gets a name tag and an enemy never does", () => {
	111	const mate = fakeContext();
	112	drawScene(mate as never, makeScene(), world, eye, snapshot([body({ mate: true })]), view);
	113	expect(mate.ops.some((o) => o.op === "fillText" && o.args[0] === "Sable")).toBe(true);
	114
	115	const enemy = fakeContext();
	116	drawScene(enemy as never, makeScene(), world, eye, snapshot([body()]), view);
	117	expect(enemy.ops.some((o) => o.op === "fillText")).toBe(false);
	118	});
	119
	120	test("a smoke between the eye and a body hides it", () => {
	121	const smoke = [{ k: "smoke", x: 200, y: 200, r: 90, f: 0, l: 8 }];
	122	const ctx = fakeContext();
	123	drawScene(ctx as never, makeScene(), world, eye, snapshot([body()], smoke), view);
	124	expect(ctx.ops.some((o) => o.op === "arc")).toBe(false);
	125
	126	// A smoke that is not on the line does not hide anything.
	127	const aside = [{ k: "smoke", x: 200, y: 900, r: 90, f: 0, l: 8 }];
	128	const clear = fakeContext();
	129	drawScene(clear as never, makeScene(), world, eye, snapshot([body()], aside), view);
	130	expect(clear.ops.some((o) => o.op === "arc")).toBe(true);
	131	});
	132
	133	test("every kind of zone, the spike and a tracer draw without falling over", () => {
	134	const zones = ["smoke", "molly", "wall", "trip", "dart", "flash", "heal"].map((k, i) => ({
	135	k,
	136	x: 300 + i * 20,
	137	y: 200,
	138	r: 90,
	139	f: k === "flash" ? 0.3 : 0,
	140	l: 5,
	141	}));
	142	const snap = snapshot([body(), body({ id: "mate", mate: true, alive: false, hp: 0 })], zones);
	143	snap.orbs = [{ x: 360, y: 200 }] as never;
	144	snap.shots = [{ x1: 130, y1: 200, x2: 380, y2: 200, hit: true, age: 0 }] as never;
	145	snap.spike = { planted: true, carried: false, fuse: 12, defuse: 0, x: 330, y: 200 } as never;
	146	const ctx = fakeContext();
	147	drawScene(ctx as never, makeScene(), world, eye, snap, view);
	148	expect(ctx.ops.length).toBeGreaterThan(100);
	149	expect(ctx.globalAlpha).toBe(1);
	150	});
	151
	152	test("the top-down view draws the real map, small or large", () => {
	153	const map = { rows: gridRows(), tile: TILE };
	154	const snap = snapshot([body({ mate: true })]);
	155	const big = fakeContext();
	156	drawTopdown(big as never, map, snap, (p: never) => p, { x: 0, y: 0, w: 900, h: 570 });
	157	const small = fakeContext();
	158	drawTopdown(small as never, map, snap, (p: never) => p, { x: 8, y: 8, w: 260, h: 165 }, { labels: false });
	159	expect(big.ops.some((o) => o.op === "fillText")).toBe(true);
	160	expect(small.ops.some((o) => o.op === "fillText")).toBe(false);
	161	expect(small.ops.some((o) => o.op === "translate")).toBe(true);
	162	});
	163
	164	test("the gun and the crosshair draw, and the hit marker only when there is one", () => {
	165	const gun = makeGun();
	166	const ctx = fakeContext();
	167	drawGun(ctx as never, gun, 900, 570, snapshot([]));
	168	const quiet = ctx.ops.length;
	169	gun.mark = 1;
	170	gun.kick = 1;
	171	const loud = fakeContext();
	172	drawGun(loud as never, gun, 900, 570, snapshot([]));
	173	expect(loud.ops.length).toBeGreaterThan(quiet);
	174	});
		@@ -176,3 +176,28 @@ test("the match keeps running and is never parked", () => {
176	176	expect(state.now).toBeGreaterThan(before);
177	177	expect(["buy", "live", "end", "over"]).toContain(state.phase);
178	178	});
	179
	180	test("the kit is public: every ability, its price and what it does", async () => {
	181	const response = await fetch(base + "/agents.json");
	182	expect(response.status).toBe(200);
	183	expect(response.headers.get("content-security-policy")).toContain("default-src 'self'");
	184	const body = (await response.json()) as { agents: { id: string; abilities: Record<string, { name: string; cost: number; text: string }> }[] };
	185	expect(body.agents.length).toBe(5);
	186	const veil = body.agents.find((a) => a.id === "veil")!;
	187	expect(veil.abilities.c.name).toBe("Cloudburst");
	188	expect(veil.abilities.c.cost).toBe(100);
	189	expect(veil.abilities.e.text).toContain("smoke");
	190	// The ultimate is never for sale, and no server-only state leaks out.
	191	expect(veil.abilities.x.cost).toBe(0);
	192	expect(JSON.stringify(body)).not.toContain("kind");
	193	});
	194
	195	test("the page carries the first-run card and the prompt line", async () => {
	196	const body = await (await fetch(base + "/")).text();
	197	expect(body).toContain('id="help"');
	198	expect(body).toContain("How to play");
	199	expect(body).toContain('id="prompt"');
	200	// Every buy button says what it costs, so the panel is readable at a glance.
	201	expect(body).toContain('data-buy="vandal" data-cost="2900"');
	202	expect(body).toContain('id="viewtoggle"');
	203	});
		@@ -9,6 +9,7 @@
9	9
10	10	import { createHash, randomUUID } from "node:crypto";
11	11	import { join } from "node:path";
	12	import { AGENTS, SLOTS } from "./abilities.ts";
12	13	import { attach, command, findPlayer, match, release, snapshot, startArena, takeSeat, type Command } from "./arena.ts";
13	14	import { recentResults } from "./db.ts";
14	15	import { gridRows, TILE } from "./map.ts";
		@@ -103,10 +104,17 @@ async function readForm(request: Request): Promise<FormData \| undefined> {
103	104
104	105	// ------------------------------------------------------------- the client
105	106
106		// The client script is named by its content: a change is a new URL, so a
107		// year-long cache is never stale.
108		const scriptPath = join(import.meta.dir, "..", "static", "val.js");
109		const scriptBody = await Bun.file(scriptPath).text();
	107	// The client is a handful of small modules under static/ — the renderer, the
	108	// map, the crosshair, the ray maths — bundled into one file at start-up so a
	109	// browser makes one request and the maths can still be imported by the tests.
	110	// It is named by its content: a change is a new URL, so a year-long cache is
	111	// never stale.
	112	const built = await Bun.build({
	113	entrypoints: [join(import.meta.dir, "..", "static", "val.js")],
	114	target: "browser",
	115	});
	116	if (!built.success) throw new AggregateError(built.logs, "the client would not build");
	117	const scriptBody = await built.outputs[0]!.text();
110	118	const scriptHash = createHash("sha256").update(scriptBody).digest("hex").slice(0, 10);
111	119	const scriptUrl = `/static/val.${scriptHash}.js`;
112	120
		@@ -192,6 +200,38 @@ export const server = Bun.serve<SocketData, Record<string, never>>({
192	200	: response;
193	201	}
194	202
	203	// The agents and their kits: what every ability does, its price and its
	204	// charges, so the buy panel can label itself. The same table the server
	205	// plays by, and no secret in it.
	206	if (url.pathname === "/agents.json" && (request.method === "GET" \|\| request.method === "HEAD"))
	207	return Response.json(
	208	{
	209	agents: AGENTS.map((a) => ({
	210	id: a.id,
	211	name: a.name,
	212	role: a.role,
	213	blurb: a.blurb,
	214	abilities: Object.fromEntries(
	215	SLOTS.map((slot) => {
	216	const ability = a.abilities[slot];
	217	return [
	218	slot,
	219	{
	220	name: ability.name,
	221	cost: ability.cost,
	222	charges: ability.charges,
	223	cooldown: ability.cooldown,
	224	points: ability.points,
	225	text: ability.text,
	226	},
	227	];
	228	}),
	229	),
	230	})),
	231	},
	232	{ headers: { "cache-control": "public, max-age=300", ...SECURITY } },
	233	);
	234
195	235	// The map is the same for everybody and changes only when the code does.
196	236	if (url.pathname === "/map.json" && (request.method === "GET" \|\| request.method === "HEAD"))
197	237	return Response.json(
		@@ -0,0 +1,35 @@
	1	import { expect, test } from "bun:test";
	2	import { moveVector } from "../static/steer.js";
	3
	4	test("W walks the way you are looking, whichever way that is", () => {
	5	const east = moveVector(0, -1, 0);
	6	expect(east.x).toBeCloseTo(1, 6);
	7	expect(east.y).toBeCloseTo(0, 6);
	8	const south = moveVector(0, -1, Math.PI / 2);
	9	expect(south.x).toBeCloseTo(0, 6);
	10	expect(south.y).toBeCloseTo(1, 6);
	11	});
	12
	13	test("D strafes across the facing, not along it", () => {
	14	const right = moveVector(1, 0, 0);
	15	expect(right.x).toBeCloseTo(0, 6);
	16	expect(right.y).toBeCloseTo(1, 6);
	17	const other = moveVector(-1, 0, 0);
	18	expect(other.y).toBeCloseTo(-1, 6);
	19	});
	20
	21	test("forward and strafe together keep their length", () => {
	22	const both = moveVector(1, -1, 0.7);
	23	expect(Math.hypot(both.x, both.y)).toBeCloseTo(Math.SQRT2, 6);
	24	});
	25
	26	test("standing still stays still", () => {
	27	const still = moveVector(0, 0, 2.2);
	28	expect(still.x).toBeCloseTo(0, 6);
	29	expect(still.y).toBeCloseTo(0, 6);
	30	});
	31
	32	test("it fills the object it was given, so the input loop allocates nothing", () => {
	33	const out = { x: 0, y: 0 };
	34	expect(moveVector(0, -1, 0, out)).toBe(out);
	35	});
		@@ -0,0 +1,62 @@
	1	/**
	2	* The spike, out loud.
	3	*
	4	* One oscillator per beep, scheduled by how much fuse is left: a slow tick
	5	* when it is planted, a stutter when it is about to go. No audio files, and
	6	* nothing is created until the person has clicked the page — a browser will
	7	* not start an audio context before that, and should not.
	8	*/
	9
	10	/** Seconds between beeps for this much fuse left. */
	11	export function beepInterval(fuse) {
	12	if (fuse <= 0) return 0;
	13	return Math.max(0.12, Math.min(1, fuse / 30));
	14	}
	15
	16	/** The pitch rises as the fuse burns, so it is audible without watching. */
	17	export const beepPitch = (fuse) => 760 + 620 * (1 - Math.min(1, fuse / 45));
	18
	19	export function makeBeeper() {
	20	let audio = null;
	21	let next = 0;
	22
	23	const context = () => {
	24	if (audio) return audio;
	25	const Ctor = globalThis.AudioContext \|\| globalThis.webkitAudioContext;
	26	if (!Ctor) return null;
	27	audio = new Ctor();
	28	return audio;
	29	};
	30
	31	return {
	32	/** Called on a click: browsers only allow audio to start from a gesture. */
	33	wake() {
	34	const ctx = context();
	35	if (ctx && ctx.state === "suspended") ctx.resume();
	36	},
	37	/** Called every frame with the fuse the server last sent. */
	38	update(planted, fuse, now) {
	39	if (!planted \|\| fuse <= 0) {
	40	next = 0;
	41	return;
	42	}
	43	if (!audio) return; // no gesture yet; nothing to play into
	44	if (now < next) return;
	45	next = now + beepInterval(fuse);
	46	beep(audio, beepPitch(fuse));
	47	},
	48	};
	49	}
	50
	51	function beep(audio, hz) {
	52	const osc = audio.createOscillator();
	53	const gain = audio.createGain();
	54	osc.type = "square";
	55	osc.frequency.value = hz;
	56	gain.gain.setValueAtTime(0.0001, audio.currentTime);
	57	gain.gain.exponentialRampToValueAtTime(0.09, audio.currentTime + 0.01);
	58	gain.gain.exponentialRampToValueAtTime(0.0001, audio.currentTime + 0.09);
	59	osc.connect(gain).connect(audio.destination);
	60	osc.start();
	61	osc.stop(audio.currentTime + 0.1);
	62	}