e8d188e
@@ -59,7 +59,17 @@
Guns: Classic, Ghost, Sheriff, Spectre, Phantom, Vandal, Operator.
  snapshot forward by up to a quarter second of held input. It is a drawing
  optimisation only: nothing is sent, every snapshot leans the drawn body
  back onto the server's answer, and a real disagreement is taken outright.
  Everybody else is still smoothed toward the last position the server sent.
  Where you are *looking* is the browser's too: the mouse moves it at frame
  rate, and the server's angle is taken back only when it is telling you
  something you did not say (`static/yaw.js`).
- Everybody else is drawn by entity interpolation (`static/interp.js`): each
  body keeps the last few snapshots with the times they landed, and the frame
  is drawn about one snapshot interval in the past, between the two that
  bracket that moment. So they move at the speed the server moved them and
  arrive where it put them, one interval late. A missed snapshot is carried
  one interval further and then held. Snapshots go out every tick (30Hz, some
  3.4 KiB a seat) while two or fewer seats are filled, and every other tick
  above that.
- The view is a raycaster: walls are one tile tall and flat-shaded, there is
  no looking up or down, and everything that is not a wall — bodies, the
  spike, ability zones — is a flat billboard scaled by distance and clipped
@@ -113,7 +123,7 @@
no clock) · `src/bots.ts` the seats nobody is in · `src/arena.ts` the one
live match and its sockets · `src/server.ts` the door · `static/` the browser client —
`val.js` wires the socket, the keys and the HUD, `raycast.js` is the ray
maths, `scene.js` the first-person view, `topdown.js` the minimap,
`gun.js`, `beep.js`, `steer.js`, `roster.js` and `prompt.js` the rest; the server bundles
`gun.js`, `beep.js`, `steer.js`, `roster.js`, `yaw.js`, `interp.js` and `prompt.js` the rest; the server bundles
them into one content-named file at start-up. The rules are pure functions and the tests play whole matches
headlessly.
@@ -0,0 +1,66 @@
/**
 * How often the arena speaks.
 *
 * The simulation is 30Hz either way; what is decided here is how much of it
 * the browser is told about, which is the difference between a body drawn
 * from fifteen samples a second and one drawn from thirty.
 */
import { expect, test } from "bun:test";
import { mkdtempSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
process.env.FORGE_APP_DATA ??= mkdtempSync(join(tmpdir(), "app-"));
const { advance, attach, broadcastEvery, match, release, seatCount, snapshot } = await import("./arena.ts");
test("a small room hears every tick, a full one every other", () => {
  expect(broadcastEvery(0)).toBe(1);
  expect(broadcastEvery(1)).toBe(1);
  expect(broadcastEvery(2)).toBe(1);
  expect(broadcastEvery(3)).toBe(2);
  expect(broadcastEvery(10)).toBe(2);
});
/** A seat that only counts what it was sent. */
function listen(session: string) {
  const got: string[] = [];
  attach(session, match().players[0]!.id, `test-${session}`, session, (data) => got.push(data));
  return got;
}
// The arena is one match shared by the whole test run, and another file may
// be holding a seat of its own while this one runs; what is checked is that
// the loop broadcasts at exactly the cadence the room it is in asks for.
test("the loop sends at the cadence the seat count asks for", () => {
  const one = listen("rate-a");
  const two = listen("rate-b");
  const every = broadcastEvery(seatCount());
  advance(1);
  // Thirty ticks to the second, one snapshot every `every` of them.
  expect(one.length).toBe(30 / every);
  expect(two.length).toBe(one.length);
  release("rate-a", "rate-a");
  release("rate-b", "rate-b");
});
test("a full room halves the cadence rather than multiplying the traffic", () => {
  const seats = ["rate-c", "rate-d", "rate-e"].map(listen);
  expect(seatCount()).toBeGreaterThan(2);
  advance(1);
  for (const got of seats) expect(got.length).toBe(15);
  for (const session of ["rate-c", "rate-d", "rate-e"]) release(session, session);
});
test("a snapshot stays small enough to send thirty times a second", () => {
  // The trade is only worth making if the payload is small. Measured over a
  // live round it is 3.2-4.5 KiB a seat, mean 3.4 — a hundred KiB a second
  // at 30Hz, and at most two seats are sent that much. This is the number
  // the pull quotes, so it is checked here rather than assumed; the ceiling
  // is loose enough not to fail on a busy tick and tight enough that a
  // snapshot which doubled in size would say so.
  for (let i = 0; i < 40 && match().phase !== "live"; i++) advance(1);
  const bytes = Buffer.byteLength(snapshot(match().players[0]!.id));
  expect(bytes).toBeGreaterThan(200);
  expect(bytes).toBeLessThan(8000);
});
@@ -29,7 +29,20 @@
import type { MatchState, Player } from "./state.ts";
import { isWeaponId, WEAPONS } from "./weapons.ts";
export const TICK = 1 / 30;
const BROADCAST_EVERY = 2;
/**
 * How many ticks apart the snapshots go out.
 *
 * The simulation runs at 30Hz and used to broadcast every other tick, which
 * gave the browser fifteen positions a second to draw sixty frames from —
 * not many, and with interpolation it also doubles the delay the drawing has
 * to sit behind the present. A small room gets every tick: it is the case
 * that matters (one or two people playing each other), the payload is a
 * couple of kilobytes of JSON a seat, and the arena only runs at all while
 * somebody is connected. Above that the cost multiplies by seats and the
 * older cadence comes back.
 */
export const broadcastEvery = (filled: number): number => (filled <= 2 ? 1 : 2);
export type Seat = { playerId: string; token: string; address: string; send: (data: string) => void };
@@ -378,7 +391,7 @@
function step(): void {
  }
  if (state.result === null) lastResult = null;
  ticks += 1;
  if (ticks % BROADCAST_EVERY !== 0) return;
  if (ticks % broadcastEvery(seats.size) !== 0) return;
  for (const seat of seats.values()) {
    try {
      seat.send(snapshot(seat.playerId));
@@ -264,6 +264,24 @@
test("the bundled client connects, paints the HUD and draws a frame", async () =
  press("KeyV");
  expect(nodes.get("stage")!.dataset).toMatchObject({ mode: "fp" });
  // Where you are looking is this browser's between snapshots. Turning with
  // the arrow key, the angle the server is told only ever climbs: the client
  // used to take `snap.me.angle` back on every snapshot, so the view was
  // dragged to a stale angle thirty times a second and what it sent stepped
  // backwards in between.
  const shortWay = (from: number, to: number) => ((to - from + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
  press("ArrowRight");
  const angles: number[] = [];
  for (let i = 0; i < 60; i++) {
    runFrame(performance.now());
    await Bun.sleep(10);
    angles.push(seat.input.angle);
  }
  release("ArrowRight");
  const steps = angles.slice(1).map((angle, i) => shortWay(angles[i]!, angle));
  expect(Math.min(...steps)).toBeGreaterThan(-1e-9);
  expect(steps.reduce((sum, step) => sum + step, 0)).toBeGreaterThan(0.2);
  // H toggles the card either way, and the button closes it for good.
  const help = nodes.get("help")!.style as Record<string, string>;
  const before = help.display;
@@ -0,0 +1,230 @@
/**
 * Entity interpolation: a pure function of two samples and a time.
 *
 * What is checked here is what a browser cannot be asked about — that the
 * body walks between the pair at the server's own speed, that a missed
 * snapshot is carried exactly one interval and no further, that the turn is
 * taken the short way round, and that a time between the pair never draws
 * the body anywhere but between them.
 */
import { expect, test } from "bun:test";
import { arrive, bodyAt, delay, feed, GONE, LAG, LAG_MAX, LAG_MIN, makeTimeline, sample } from "../static/interp.js";
type Mark = { t: number; x: number; y: number; angle: number };
const pair = (a: Mark, b: Mark) => [a, b];
const walk = pair({ t: 10, x: 100, y: 200, angle: 0 }, { t: 10.1, x: 120, y: 200, angle: 1 });
test("between the pair it walks at the speed the server moved it", () => {
  expect(sample(walk, 10)).toMatchObject({ x: 100, y: 200 });
  expect(sample(walk, 10.05).x).toBeCloseTo(110, 6);
  expect(sample(walk, 10.1)).toMatchObject({ x: 120, y: 200 });
  // Constant speed: equal steps of time are equal steps of distance, which
  // is the whole difference from an exponential chase that never arrives.
  const a = sample(walk, 10.02).x;
  const b = sample(walk, 10.04).x;
  const c = sample(walk, 10.06).x;
  expect(b - a).toBeCloseTo(c - b, 6);
});
test("a time inside the pair is never a position outside it", () => {
  const diagonal = pair({ t: 1, x: -30, y: 80, angle: 2 }, { t: 1.07, x: 45, y: -10, angle: -2 });
  for (let when = 1; when <= 1.07; when += 0.002) {
    const at = sample(diagonal, when);
    expect(at.x).toBeGreaterThanOrEqual(-30);
    expect(at.x).toBeLessThanOrEqual(45);
    expect(at.y).toBeGreaterThanOrEqual(-10);
    expect(at.y).toBeLessThanOrEqual(80);
  }
});
test("before the older sample it holds rather than running backwards", () => {
  expect(sample(walk, 9.5)).toMatchObject({ x: 100, y: 200 });
  expect(sample(walk, 0)).toMatchObject({ x: 100, y: 200 });
});
test("a missed snapshot is carried one interval and then held", () => {
  // Half an interval late: half an interval of the pair's own velocity.
  expect(sample(walk, 10.15).x).toBeCloseTo(130, 6);
  // A whole one: exactly one more interval of it.
  expect(sample(walk, 10.2).x).toBeCloseTo(140, 6);
  // And never a step further, however long the silence lasts.
  expect(sample(walk, 10.3).x).toBeCloseTo(140, 6);
  expect(sample(walk, 30).x).toBeCloseTo(140, 6);
  expect(sample(walk, 30).angle).toBeCloseTo(2, 6);
});
test("two samples at one instant are one sample", () => {
  const still = pair({ t: 5, x: 7, y: 8, angle: 0.5 }, { t: 5, x: 7, y: 8, angle: 0.5 });
  expect(sample(still, 9)).toMatchObject({ x: 7, y: 8, angle: 0.5 });
});
test("the turn is taken the short way round", () => {
  const spin = pair({ t: 0, x: 0, y: 0, angle: 3.0 }, { t: 0.1, x: 0, y: 0, angle: -3.0 });
  // Not back through zero: onward past π, by a sixth of a radian or so.
  expect(sample(spin, 0.05).angle).toBeCloseTo(3.0 + 0.2831853 / 2, 6);
  const back = pair({ t: 0, x: 0, y: 0, angle: -3.0 }, { t: 0.1, x: 0, y: 0, angle: 3.0 });
  expect(sample(back, 0.05).angle).toBeCloseTo(-3.0 - 0.2831853 / 2, 6);
});
// ------------------------------------------------------------- the timeline
const body = (id: string, x: number, y = 0, angle = 0) => ({ id, x, y, angle });
test("a body is drawn where the server says until there are two of it", () => {
  const timeline = makeTimeline();
  const first = body("a", 50);
  expect(bodyAt(timeline, first, 10)).toBe(first);
  feed(timeline, "a", first, 10);
  expect(bodyAt(timeline, first, 10.2)).toMatchObject({ x: 50, y: 0 });
  feed(timeline, "a", body("a", 60), 10.1);
  expect(bodyAt(timeline, body("a", 60), 10.05).x).toBeCloseTo(55, 6);
});
test("each body keeps its own answer: one can be held while another is asked", () => {
  const timeline = makeTimeline();
  feed(timeline, "a", body("a", 0), 1);
  feed(timeline, "a", body("a", 10), 1.1);
  feed(timeline, "b", body("b", 100), 1);
  feed(timeline, "b", body("b", 110), 1.1);
  const a = bodyAt(timeline, body("a", 10), 1.05);
  const b = bodyAt(timeline, body("b", 110), 1.05);
  expect(a.x).toBeCloseTo(5, 6);
  expect(b.x).toBeCloseTo(105, 6);
});
test("a body that was out of sight starts again rather than sliding back", () => {
  const timeline = makeTimeline();
  feed(timeline, "a", body("a", 0), 1);
  feed(timeline, "a", body("a", 10), 1.1);
  feed(timeline, "a", body("a", 900), 1.1 + GONE + 0.1);
  expect(bodyAt(timeline, body("a", 900), 1.1 + GONE + 0.15).x).toBeCloseTo(900, 6);
});
test("a jump no one could have run is a respawn, not a walk", () => {
  const timeline = makeTimeline();
  feed(timeline, "a", body("a", 0), 1);
  feed(timeline, "a", body("a", 10), 1.1);
  // A third of a second's running is 80-odd units; 600 is a teleport.
  feed(timeline, "a", body("a", 610), 1.2);
  expect(bodyAt(timeline, body("a", 610), 1.25).x).toBeCloseTo(610, 6);
});
test("a sample that arrives out of order is dropped", () => {
  const timeline = makeTimeline();
  feed(timeline, "a", body("a", 0), 1);
  feed(timeline, "a", body("a", 10), 1.1);
  feed(timeline, "a", body("a", 999), 1.05);
  expect(bodyAt(timeline, body("a", 10), 1.1).x).toBeCloseTo(10, 6);
});
test("the delay follows the rate the snapshots actually arrive at", () => {
  const slow = makeTimeline();
  for (let i = 0; i < 60; i++) arrive(slow, 10 + i / 15);
  const fast = makeTimeline();
  for (let i = 0; i < 60; i++) arrive(fast, 10 + i / 30);
  expect(delay(slow)).toBeGreaterThan(delay(fast));
  expect(delay(slow)).toBeCloseTo((1 / 15) * LAG, 3);
  // Thirty a second wants less of a delay, and both stay inside the bounds.
  for (const d of [delay(slow), delay(fast)]) {
    expect(d).toBeGreaterThanOrEqual(LAG_MIN);
    expect(d).toBeLessThanOrEqual(LAG_MAX);
  }
  // A pause — a backgrounded tab, a reconnect — says nothing about the rate.
  arrive(fast, 40);
  expect(delay(fast)).toBeCloseTo(LAG_MIN, 3);
});
test("the moment being drawn is always bracketed by samples on hand", () => {
  // Thirty snapshots a second, a frame every 16ms: the moment being drawn
  // always falls between the two samples on hand, never before them.
  const timeline = makeTimeline();
  let x = 0;
  let last = { t: 0, x: 0 };
  for (let i = 0; i < 40; i++) {
    const at = 10 + i / 30;
    arrive(timeline, at);
    x += 8;
    feed(timeline, "a", body("a", x), at);
    last = { t: at, x };
    if (i < 3) continue;
    for (let f = 0; f < 2; f++) {
      const now = at + f * 0.016;
      const marks = timeline.bodies.get("a")!.marks as Mark[];
      const when = now - delay(timeline);
      expect(when).toBeGreaterThanOrEqual(marks[0]!.t - 1e-9);
      expect(when).toBeLessThanOrEqual(marks[marks.length - 1]!.t + 1e-9);
    }
  }
  // And late is what late means: behind the newest word by the delay, which
  // at eight units an interval is between one and two of them.
  const drawn = bodyAt(timeline, body("a", last.x), last.t - delay(timeline));
  expect(last.x - drawn.x).toBeGreaterThan(0);
  expect(last.x - drawn.x).toBeLessThan(20);
});
// --------------------------------------------- against the real simulation
/**
 * The match's own motion, sampled at the rate the server broadcasts it and
 * drawn at the rate a browser draws: what a bot walking across the map
 * actually looks like. The samples carry exactly what a snapshot carries —
 * a position rounded to a tenth, thirty times a second.
 *
 * The measure is the spread of the per-frame steps. A body drawn at the
 * server's speed takes even steps; the exponential chase this replaced took
 * a long step just after each snapshot and shorter ones after it, which is
 * choppiness with a number on it — twice this spread, measured the same way.
 */
test("the simulation's own motion is drawn at an even speed", async () => {
  const { runBots } = await import("./bots.ts");
  const { newMatch, tick } = await import("./match.ts");
  const round2 = (n: number) => Math.round(n * 10) / 10;
  // A match of its own: nothing here touches the arena everybody shares.
  const state = newMatch();
  const step = () => {
    runBots(state, 1 / 30);
    tick(state, 1 / 30);
  };
  for (let i = 0; i < 30 * 40 && state.phase !== "live"; i++) step();
  const stream: { t: number; bodies: { id: string; x: number; y: number; angle: number }[] }[] = [];
  for (let i = 0; i < 60; i++) {
    step();
    stream.push({
      t: i / 30,
      bodies: state.players.map((p) => ({ id: p.id, x: round2(p.x), y: round2(p.y), angle: round2(p.angle) })),
    });
  }
  const timeline = makeTimeline();
  const paths = new Map<string, { x: number; y: number }[]>();
  let next = 0;
  for (let f = 0; f / 60 < 1.8; f++) {
    const now = f / 60;
    while (next < stream.length && stream[next]!.t <= now) {
      arrive(timeline, stream[next]!.t);
      for (const p of stream[next]!.bodies) feed(timeline, p.id, p, stream[next]!.t);
      next += 1;
    }
    for (const p of stream[Math.max(0, next - 1)]!.bodies) {
      const at = bodyAt(timeline, p, now - delay(timeline));
      paths.set(p.id, [...(paths.get(p.id) ?? []), { x: at.x, y: at.y }]);
    }
  }
  // Whoever walked furthest in that second and a half.
  const walked = [...paths.values()]
    .filter((path) => path.length > 80)
    .map((path) => path.slice(1).map((at, i) => Math.hypot(at.x - path[i]!.x, at.y - path[i]!.y)))
    .map((steps) => steps.filter((step) => step > 0.001))
    .sort((a, b) => b.reduce((s, x) => s + x, 0) - a.reduce((s, x) => s + x, 0))[0]!;
  expect(walked.length).toBeGreaterThan(30);
  const mean = walked.reduce((s, x) => s + x, 0) / walked.length;
  const spread = Math.sqrt(walked.reduce((s, x) => s + (x - mean) ** 2, 0) / walked.length) / mean;
  // A body moving at the server's own speed: about four units every sixtieth
  // of a second, which is the run speed.
  expect(mean * 60).toBeGreaterThan(150);
  expect(spread).toBeLessThan(0.15);
});
@@ -0,0 +1,118 @@
/**
 * The view angle belongs to the browser between snapshots, and the server
 * gets it back only when it has something to say that we did not.
 */
import { expect, test } from "bun:test";
import { makeYaw, settle, shortWay, told, turn, SENT_TOLERANCE } from "../static/yaw.js";
const me = (angle: number, extra: Partial<{ id: string; alive: boolean }> = {}) => ({
  id: "p1",
  alive: true,
  angle,
  ...extra,
});
// The server rounds an angle to a tenth of a radian on the way out.
const echoed = (angle: number) => Math.round(angle * 10) / 10;
test("the first snapshot is where you are looking: there is no view of your own yet", () => {
  const yaw = makeYaw();
  expect(yaw.ready).toBe(false);
  expect(settle(yaw, me(1.4), 10)).toBeCloseTo(1.4, 6);
  expect(yaw.ready).toBe(true);
});
test("a snapshot does not drag the camera back to the angle it was told", () => {
  const yaw = makeYaw();
  settle(yaw, me(0), 10);
  // A flick: the mouse moves at frame rate, and every angle is announced.
  for (let i = 1; i <= 10; i++) {
    turn(yaw, 0.12);
    told(yaw, yaw.angle, 10 + i * 0.016);
  }
  expect(yaw.angle).toBeCloseTo(1.2, 6);
  // The snapshot is the angle the server last heard — four frames ago.
  settle(yaw, me(echoed(0.72)), 10.17);
  expect(yaw.angle).toBeCloseTo(1.2, 6);
});
test("an angle we never sent is a correction, and is taken", () => {
  const yaw = makeYaw();
  settle(yaw, me(0), 10);
  told(yaw, 0, 10);
  turn(yaw, 0.5);
  told(yaw, 0.5, 10.05);
  // The round starts and the match points everybody at the site.
  settle(yaw, me(-2.1), 10.1);
  expect(yaw.angle).toBeCloseTo(-2.1, 6);
});
test("an echo just inside the rounding is ours, one just outside is not", () => {
  const near = makeYaw();
  settle(near, me(0), 10);
  told(near, 0.5, 10);
  turn(near, 0.4);
  settle(near, me(0.5 + SENT_TOLERANCE / 2), 10.05);
  expect(near.angle).toBeCloseTo(0.4, 6);
  const far = makeYaw();
  settle(far, me(0), 10);
  told(far, 0.5, 10);
  turn(far, 0.4);
  settle(far, me(0.5 + SENT_TOLERANCE * 2), 10.05);
  expect(far.angle).toBeCloseTo(0.5 + SENT_TOLERANCE * 2, 6);
});
test("an echo from a second ago has expired: only recent angles are ours", () => {
  const yaw = makeYaw();
  settle(yaw, me(0), 10);
  told(yaw, 0.5, 10);
  turn(yaw, 0.4);
  settle(yaw, me(0.5), 12);
  expect(yaw.angle).toBeCloseTo(0.5, 6);
});
test("a client that has not spoken yet keeps what it has", () => {
  const yaw = makeYaw();
  settle(yaw, me(0), 10);
  turn(yaw, 0.8);
  // No input has been sent between the two snapshots; the server can only be
  // repeating what it already knew, so there is nothing here to take.
  settle(yaw, me(0), 10.03);
  expect(yaw.angle).toBeCloseTo(0.8, 6);
});
test("a respawn and a seat change both point you where the server points you", () => {
  const respawn = makeYaw();
  settle(respawn, me(0, { alive: false }), 10);
  told(respawn, 0, 10);
  turn(respawn, 1);
  settle(respawn, me(0, { alive: true }), 10.1);
  expect(respawn.angle).toBeCloseTo(0, 6);
  const seat = makeYaw();
  settle(seat, me(0), 10);
  told(seat, 0, 10);
  turn(seat, 1);
  settle(seat, { id: "p2", alive: true, angle: 0 }, 10.1);
  expect(seat.angle).toBeCloseTo(0, 6);
});
test("the wrap is taken the short way round", () => {
  expect(shortWay(3.0, -3.0)).toBeCloseTo(0.2831853, 6);
  expect(shortWay(-3.0, 3.0)).toBeCloseTo(-0.2831853, 6);
  // Which means an echo either side of π is still ours.
  const yaw = makeYaw();
  settle(yaw, me(0), 10);
  told(yaw, Math.PI - 0.01, 10);
  turn(yaw, 0.3);
  settle(yaw, me(-Math.PI + 0.01), 10.05);
  expect(yaw.angle).toBeCloseTo(0.3, 6);
});
test("the sent log does not grow without bound", () => {
  const yaw = makeYaw();
  for (let i = 0; i < 500; i++) told(yaw, i * 0.01, 10 + i * 0.05);
  expect(yaw.sent.length).toBeLessThan(30);
});
@@ -0,0 +1,146 @@
/**
 * Everybody else, drawn between the things the server said about them.
 *
 * A remote body is only ever heard about a few dozen times a second, so it
 * has to be drawn somewhere in between. The old way was an exponential chase
 * — `now.x += (x - now.x) * 0.35` every frame — which is wrong twice: it is a
 * different speed at 60Hz than at 144Hz, and it is a pursuit that never
 * arrives, so every other player was permanently behind and rubbery.
 *
 * This is entity interpolation instead. Each body keeps the last few samples
 * with the times they landed, and the frame is drawn at `now - delay`, about
 * a snapshot interval in the past. That moment falls between two samples on
 * hand, so the body moves at exactly the speed the server moved it and
 * arrives exactly where the server put it — one interval late, which nobody
 * can see. A handful of samples rather than strictly two is what buys the
 * delay a margin: a snapshot that arrives late or early still brackets the
 * moment being drawn instead of stalling the body.
 *
 * When a snapshot really is missed the newest pair's own velocity is carried
 * forward for one interval and then held: a guess that long is better than a
 * stall, and a guess longer than that is fiction. The delay follows the rate
 * snapshots actually arrive at, so the same code is right at 15Hz and at
 * 30Hz without being told which it is.
 *
 * Nothing here is ever sent anywhere: it is a drawing, and the server is
 * still the only thing that says where anybody is.
 */
/** The render delay, as a multiple of the interval snapshots arrive at. */
export const LAG = 1.3;
/** ...never tighter than this, never looser, in seconds. */
export const LAG_MIN = 0.045;
export const LAG_MAX = 0.13;
/** How many samples a body keeps: enough to bracket the delay, and no more. */
export const KEEP = 4;
/** How fast the measured interval follows the arrivals. */
const INTERVAL_PULL = 0.25;
/** A gap this long means the body was gone, not slow: start it again. */
export const GONE = 0.4;
/** Faster than anything can run: a respawn, or a body back from nowhere. */
const TOP_SPEED = 400;
const clamp = (n, low, high) => (n < low ? low : n > high ? high : n);
/** The short way round from one angle to another, in (-π, π]. */
export const shortWay = (from, to) => ((to - from + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
/** One timeline for the whole snapshot stream: the bodies, and the rate. */
export const makeTimeline = (interval = 1 / 15) => ({ bodies: new Map(), interval, at: 0 });
/**
 * A snapshot landed at `at` seconds. The gap since the last one is what the
 * render delay is built out of; a gap wilder than any real rate (a tab that
 * was in the background, a reconnect) says nothing about the rate and is
 * left out of it.
 */
export function arrive(timeline, at) {
  const gap = at - timeline.at;
  if (timeline.at > 0 && gap > 1 / 120 && gap < 0.5)
    timeline.interval += (gap - timeline.interval) * INTERVAL_PULL;
  timeline.at = at;
  return timeline;
}
/** How far behind the present this timeline is drawn, in seconds. */
export const delay = (timeline) => clamp(timeline.interval * LAG, LAG_MIN, LAG_MAX);
/** The moment being drawn, given the clock now. */
export const renderTime = (timeline, now) => now - delay(timeline);
const mark = (at, body) => ({ t: at, x: body.x, y: body.y, angle: body.angle });
/**
 * What the server just said about one body. Out-of-order samples are
 * dropped; a body that has been away, or that has moved further than anyone
 * can run, starts fresh rather than sliding across the map to its new place.
 *
 * The drawn position lives on the track — one object per body, so a caller
 * may hold the answer it was given while asking about somebody else.
 */
export function feed(timeline, id, body, at) {
  const track = timeline.bodies.get(id);
  if (!track) {
    timeline.bodies.set(id, { marks: [mark(at, body)], out: { x: 0, y: 0, angle: 0 } });
    return timeline;
  }
  const last = track.marks[track.marks.length - 1];
  if (at <= last.t) return timeline;
  const gap = at - last.t;
  const jumped = Math.hypot(body.x - last.x, body.y - last.y) > TOP_SPEED * gap + 4;
  if (gap > GONE || jumped) track.marks.length = 0;
  track.marks.push(mark(at, body));
  if (track.marks.length > KEEP) track.marks.shift();
  return timeline;
}
/**
 * Where a body was at a moment, given the samples it has — ascending in
 * time, and at least one.
 *
 * Between two samples this is a straight walk from one to the other at the
 * server's own speed. Before the oldest it holds, because running backwards
 * to meet a moment we have no answer for would be inventing one. After the
 * newest it carries the last pair's velocity for one interval — no more,
 * ever — and then holds there.
 */
export function sample(marks, when, out = { x: 0, y: 0, angle: 0 }) {
  const last = marks[marks.length - 1];
  if (marks.length === 1 || when >= last.t) return beyond(marks, when, out);
  if (when <= marks[0].t) return at(marks[0], marks[0], 0, out);
  let i = marks.length - 2;
  while (i > 0 && marks[i].t > when) i -= 1;
  const from = marks[i];
  const to = marks[i + 1];
  const span = to.t - from.t;
  return at(from, to, span > 0 ? (when - from.t) / span : 1, out);
}
/** Past the newest sample: one interval of the last pair's velocity, held. */
function beyond(marks, when, out) {
  const last = marks[marks.length - 1];
  const before = marks[marks.length - 2];
  if (!before) return at(last, last, 0, out);
  const span = last.t - before.t;
  if (span <= 0) return at(last, last, 0, out);
  return at(before, last, clamp((when - before.t) / span, 1, 2), out);
}
/** A point `u` of the way from one sample to another; the turn is short. */
function at(from, to, u, out) {
  out.x = from.x + (to.x - from.x) * u;
  out.y = from.y + (to.y - from.y) * u;
  out.angle = from.angle + shortWay(from.angle, to.angle) * u;
  return out;
}
/**
 * Where to draw a body out of a snapshot. One with no samples yet — the
 * first frame it is seen on — is drawn where the server says, which is the
 * only honest answer available.
 */
export function bodyAt(timeline, body, when, out = null) {
  const track = timeline.bodies.get(body.id);
  if (!track) return body;
  return sample(track.marks, when, out ?? track.out);
}
@@ -12,6 +12,7 @@
"use strict";
import { makeBeeper } from "./beep.js";
import { arrive, bodyAt, feed, makeTimeline, renderTime } from "./interp.js";
import { BODY_R, moveSpeed } from "../src/glide.ts";
import { drawGun, gunSnapshot, gunTick, makeGun } from "./gun.js";
import { advance, anchor, holdBack, insideWall, makeLocal, project, reconcile } from "./predict.js";
@@ -20,6 +21,7 @@
import { roster, rosterKey } from "./roster.js";
import { AGENT_COLOUR, drawScene, makeScene } from "./scene.js";
import { moveVector } from "./steer.js";
import { drawTopdown } from "./topdown.js";
import { aim as aimAt, makeYaw, settle, told, turn } from "./yaw.js";
const $ = (id) => document.getElementById(id);
const view = $("view");
@@ -36,9 +38,16 @@
let world = null; // what predict.js slides against: the grid, from map.json
let snap = null;
let socket = null;
let agents = null;
const shown = new Map(); // smoothed positions, so 15 frames a second look like 60
// Everybody else, kept as the last few things the server said about them and
// drawn between those — see interp.js. `drawAt` is the moment this frame is
// drawing, a snapshot interval behind the present.
const timeline = makeTimeline();
let drawAt = 0;
const keys = new Set();
let yaw = 0; // where this person is looking, theirs to move between snapshots
// Where this person is looking: the browser's between snapshots, and the
// server's word taken only when it is saying something we did not. See
// yaw.js — a snapshot that stomps this is what made looking around choppy.
const head = makeYaw();
let locked = false;
let firing = false;
let mode = COARSE ? "top" : "fp"; // a raycaster with touch look is miserable
@@ -76,10 +85,16 @@
function connect() {
  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.t !== "s") return;
    const first = snap === null;
    snap = data;
    snapAt = performance.now();
    if (first && mode === "fp") yaw = data.me.angle;
    // Timed samples for every body in it, ours included: the drawing walks
    // between them rather than chasing the newest one.
    arrive(timeline, snapAt / 1000);
    feed(timeline, data.me.id, data.me, snapAt / 1000);
    for (const player of data.players) feed(timeline, player.id, player, snapAt / 1000);
    // The server's angle is taken only when it is a correction, never as the
    // routine echo of the angle we sent it a moment ago.
    settle(head, data.me, snapAt / 1000);
    gunSnapshot(gun, data);
    paintHud(data);
    maybeHelp(data);
@@ -92,11 +107,14 @@
const send = (message) => {
// ------------------------------------------------------------------- input
/**
 * Swap the view. The two share one facing — whichever you leave, you keep
 * looking the way you were looking — so nothing here touches the angle.
 */
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) => {
@@ -157,7 +175,7 @@
document.addEventListener("pointerlockchange", () => {
  $("stage").dataset.locked = locked ? "1" : "";
});
addEventListener("mousemove", (event) => {
  if (locked) yaw += event.movementX * LOOK;
  if (locked) turn(head, event.movementX * LOOK);
});
addEventListener("mousedown", (event) => {
  if (locked && event.button === 0) firing = true;
@@ -236,15 +254,17 @@
function readIntent() {
  intent.mx = ax;
  intent.my = ay;
  if (mode === "fp") {
    intent.angle = yaw;
    moveVector(ax, ay, yaw, walk);
    intent.angle = head.angle;
    moveVector(ax, ay, head.angle, walk);
    intent.mx = walk.x;
    intent.my = walk.y;
  } else {
    const aim = aimTouch || pointer;
    const me = worldToScreen(drawnMe.id ? drawnMe : snap.me);
    intent.angle = aim ? Math.atan2(aim.y - me.y, aim.x - me.x) : snap.me.angle;
    yaw = intent.angle;
    // The pointer is this view's aim, and it is ours the same way the mouse
    // is: with no pointer yet, keep the facing rather than the stale answer.
    if (aim) aimAt(head, Math.atan2(aim.y - me.y, aim.x - me.x));
    intent.angle = head.angle;
  }
  intent.fire = firing || keys.has("Space");
  intent.use = keys.has("KeyF");
@@ -258,6 +278,8 @@
setInterval(() => {
  if (!snap || !map) return;
  const now = readIntent();
  send({ t: "i", mx: now.mx, my: now.my, a: now.angle, f: now.fire, u: now.use, r: now.reload });
  // What we told it, so its echo is recognisable as ours when it comes back.
  told(head, now.angle, performance.now() / 1000);
}, 50);
// ------------------------------------------------------------------ drawing
@@ -273,26 +295,13 @@
addEventListener("resize", resize);
const scale = () => (map ? view.width / (map.rows[0].length * map.tile) : 1);
const worldToScreen = (p) => ({ x: p.x * scale(), y: p.y * scale() });
function smooth(id, x, y, angle) {
  const now = shown.get(id);
  if (!now) {
    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;
  const turn = ((angle - now.angle + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
  now.angle += turn * 0.4;
  return now;
}
/**
 * Everybody else is smoothed toward the last position the server sent.
 * Everybody else is drawn at `drawAt`: between the two samples that bracket
 * it, so they move at the server's own speed and arrive where it put them.
 * You are not: your own body is the one this browser can run forward
 * honestly, and smoothing it is what dragged the camera backwards.
 * honestly, and drawing it late is what dragged the camera backwards.
 */
const look = (p) => (predicting() && p.id === snap.me.id ? drawnMe : smooth(p.id, p.x, p.y, p.angle));
const look = (p) => (predicting() && p.id === snap.me.id ? drawnMe : bodyAt(timeline, p, drawAt));
/**
 * Your own movement is only guessed at while the round is live and you are
@@ -328,13 +337,16 @@
function predict(dt, now) {
  drawnMe.id = snap.me.id;
  drawnMe.x = local.x;
  drawnMe.y = local.y;
  drawnMe.angle = mode === "fp" ? yaw : snap.me.angle;
  // Either view: the facing is the one this browser is holding, whether the
  // mouse moved it or the pointer aim did. The server hears it a moment later.
  drawnMe.angle = head.angle;
}
function frame(now) {
  requestAnimationFrame(frame);
  const dt = Math.min(0.1, (now - last) / 1000);
  last = now;
  drawAt = renderTime(timeline, now / 1000);
  if (!map) return;
  gunTick(gun, dt);
  ctx.clearRect(0, 0, view.width, view.height);
@@ -345,12 +357,12 @@
function frame(now) {
  }
  // Turning with the arrow keys belongs to the frame, at a rate a second,
  // rather than to whatever the input timer happens to do.
  if (mode === "fp" && keys.has("ArrowLeft")) yaw -= 0.9 * dt;
  if (mode === "fp" && keys.has("ArrowRight")) yaw += 0.9 * dt;
  if (mode === "fp" && keys.has("ArrowLeft")) turn(head, -0.9 * dt);
  if (mode === "fp" && keys.has("ArrowRight")) turn(head, 0.9 * dt);
  predict(dt, now);
  beeper.update(snap.spike.planted, snap.spike.fuse, now / 1000);
  const eye = look(snap.me);
  const facing = mode === "fp" ? yaw : eye.angle;
  const facing = mode === "fp" ? head.angle : eye.angle;
  if (mode === "fp" && !mapOpen) {
    drawScene(ctx, scene, { solid, tile: map.tile }, { x: eye.x, y: eye.y, angle: facing }, snap, {
@@ -0,0 +1,75 @@
/**
 * Where this person is looking.
 *
 * The view angle is the browser's to move: the mouse arrives at frame rate,
 * and a snapshot is a description of a moment already gone. The client used
 * to take `snap.me.angle` on every snapshot, which dragged the camera back
 * to a stale angle thirty times a second — worst exactly when you turned
 * fastest, because that is when the stale angle is furthest away.
 *
 * So the local angle is the camera's, and the server's angle is taken only
 * when it is telling us something we did not say: there is no view yet, the
 * body under us changed, we respawned, or the angle that came back is one we
 * never sent. That last one is what the sent log is for — the server echoes
 * our own angle back, rounded, so an angle matching nothing we sent in the
 * last second came from the match (a round start recentring everybody at the
 * site) rather than from us, and is worth taking.
 *
 * Nothing here is sent anywhere: the angle still leaves through the input
 * timer exactly as it always did.
 */
/** How long a sent angle is remembered, in seconds. */
export const SENT_MEMORY = 1.2;
/** How close an echo must be to count as ours. The server rounds to 0.1. */
export const SENT_TOLERANCE = 0.08;
export const makeYaw = (angle = 0) => ({ angle, id: "", alive: false, ready: false, sent: [] });
/** The short way round from one angle to another, in (-π, π]. */
export const shortWay = (from, to) => ((to - from + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
/** A mouse delta, or an arrow key's share of a second. Ours, always taken. */
export function turn(yaw, delta) {
  yaw.angle += delta;
  return yaw.angle;
}
/** Point it somewhere outright: the top-down view's pointer aim. */
export function aim(yaw, angle) {
  yaw.angle = angle;
  return yaw.angle;
}
/** Remember an angle we told the server about, at a time in seconds. */
export function told(yaw, angle, at) {
  yaw.sent.push({ at, angle });
  while (yaw.sent.length && yaw.sent[0].at < at - SENT_MEMORY) yaw.sent.shift();
  return yaw;
}
/** Is this angle one we sent recently? An echo, not a correction. */
const ours = (yaw, angle, at) =>
  yaw.sent.some((s) => s.at >= at - SENT_MEMORY && Math.abs(shortWay(s.angle, angle)) <= SENT_TOLERANCE);
/**
 * A snapshot landed. Returns the angle to look along, having decided whether
 * the server's word replaces ours.
 *
 * `me` is the snapshot's own body: `{ id, angle, alive }`. `at` is now, in
 * seconds. An empty sent log is not evidence of anything — a client that has
 * not spoken yet keeps what it has.
 */
export function settle(yaw, me, at) {
  const seatChanged = !yaw.ready || me.id !== yaw.id;
  const respawned = me.alive && !yaw.alive;
  const corrected = yaw.sent.length > 0 && !ours(yaw, me.angle, at);
  if (seatChanged || respawned || corrected) {
    yaw.angle = me.angle;
    yaw.sent.length = 0;
  }
  yaw.id = me.id;
  yaw.alive = me.alive;
  yaw.ready = true;
  return yaw.angle;
}
		@@ -59,7 +59,17 @@ Guns: Classic, Ghost, Sheriff, Spectre, Phantom, Vandal, Operator.
59	59	snapshot forward by up to a quarter second of held input. It is a drawing
60	60	optimisation only: nothing is sent, every snapshot leans the drawn body
61	61	back onto the server's answer, and a real disagreement is taken outright.
62		Everybody else is still smoothed toward the last position the server sent.
	62	Where you are looking is the browser's too: the mouse moves it at frame
	63	rate, and the server's angle is taken back only when it is telling you
	64	something you did not say (`static/yaw.js`).
	65	- Everybody else is drawn by entity interpolation (`static/interp.js`): each
	66	body keeps the last few snapshots with the times they landed, and the frame
	67	is drawn about one snapshot interval in the past, between the two that
	68	bracket that moment. So they move at the speed the server moved them and
	69	arrive where it put them, one interval late. A missed snapshot is carried
	70	one interval further and then held. Snapshots go out every tick (30Hz, some
	71	3.4 KiB a seat) while two or fewer seats are filled, and every other tick
	72	above that.
63	73	- The view is a raycaster: walls are one tile tall and flat-shaded, there is
64	74	no looking up or down, and everything that is not a wall — bodies, the
65	75	spike, ability zones — is a flat billboard scaled by distance and clipped
		@@ -113,7 +123,7 @@ no clock) · `src/bots.ts` the seats nobody is in · `src/arena.ts` the one
113	123	live match and its sockets · `src/server.ts` the door · `static/` the browser client —
114	124	`val.js` wires the socket, the keys and the HUD, `raycast.js` is the ray
115	125	maths, `scene.js` the first-person view, `topdown.js` the minimap,
116		`gun.js`, `beep.js`, `steer.js`, `roster.js` and `prompt.js` the rest; the server bundles
	126	`gun.js`, `beep.js`, `steer.js`, `roster.js`, `yaw.js`, `interp.js` and `prompt.js` the rest; the server bundles
117	127	them into one content-named file at start-up. The rules are pure functions and the tests play whole matches
118	128	headlessly.
119	129
		@@ -0,0 +1,66 @@
	1	/**
	2	* How often the arena speaks.
	3	*
	4	* The simulation is 30Hz either way; what is decided here is how much of it
	5	* the browser is told about, which is the difference between a body drawn
	6	* from fifteen samples a second and one drawn from thirty.
	7	*/
	8
	9	import { expect, test } from "bun:test";
	10	import { mkdtempSync } from "node:fs";
	11	import { tmpdir } from "node:os";
	12	import { join } from "node:path";
	13
	14	process.env.FORGE_APP_DATA ??= mkdtempSync(join(tmpdir(), "app-"));
	15	const { advance, attach, broadcastEvery, match, release, seatCount, snapshot } = await import("./arena.ts");
	16
	17	test("a small room hears every tick, a full one every other", () => {
	18	expect(broadcastEvery(0)).toBe(1);
	19	expect(broadcastEvery(1)).toBe(1);
	20	expect(broadcastEvery(2)).toBe(1);
	21	expect(broadcastEvery(3)).toBe(2);
	22	expect(broadcastEvery(10)).toBe(2);
	23	});
	24
	25	/** A seat that only counts what it was sent. */
	26	function listen(session: string) {
	27	const got: string[] = [];
	28	attach(session, match().players[0]!.id, `test-${session}`, session, (data) => got.push(data));
	29	return got;
	30	}
	31
	32	// The arena is one match shared by the whole test run, and another file may
	33	// be holding a seat of its own while this one runs; what is checked is that
	34	// the loop broadcasts at exactly the cadence the room it is in asks for.
	35	test("the loop sends at the cadence the seat count asks for", () => {
	36	const one = listen("rate-a");
	37	const two = listen("rate-b");
	38	const every = broadcastEvery(seatCount());
	39	advance(1);
	40	// Thirty ticks to the second, one snapshot every `every` of them.
	41	expect(one.length).toBe(30 / every);
	42	expect(two.length).toBe(one.length);
	43	release("rate-a", "rate-a");
	44	release("rate-b", "rate-b");
	45	});
	46
	47	test("a full room halves the cadence rather than multiplying the traffic", () => {
	48	const seats = ["rate-c", "rate-d", "rate-e"].map(listen);
	49	expect(seatCount()).toBeGreaterThan(2);
	50	advance(1);
	51	for (const got of seats) expect(got.length).toBe(15);
	52	for (const session of ["rate-c", "rate-d", "rate-e"]) release(session, session);
	53	});
	54
	55	test("a snapshot stays small enough to send thirty times a second", () => {
	56	// The trade is only worth making if the payload is small. Measured over a
	57	// live round it is 3.2-4.5 KiB a seat, mean 3.4 — a hundred KiB a second
	58	// at 30Hz, and at most two seats are sent that much. This is the number
	59	// the pull quotes, so it is checked here rather than assumed; the ceiling
	60	// is loose enough not to fail on a busy tick and tight enough that a
	61	// snapshot which doubled in size would say so.
	62	for (let i = 0; i < 40 && match().phase !== "live"; i++) advance(1);
	63	const bytes = Buffer.byteLength(snapshot(match().players[0]!.id));
	64	expect(bytes).toBeGreaterThan(200);
	65	expect(bytes).toBeLessThan(8000);
	66	});
		@@ -29,7 +29,20 @@ import type { MatchState, Player } from "./state.ts";
29	29	import { isWeaponId, WEAPONS } from "./weapons.ts";
30	30
31	31	export const TICK = 1 / 30;
32		const BROADCAST_EVERY = 2;
	32
	33	/**
	34	* How many ticks apart the snapshots go out.
	35	*
	36	* The simulation runs at 30Hz and used to broadcast every other tick, which
	37	* gave the browser fifteen positions a second to draw sixty frames from —
	38	* not many, and with interpolation it also doubles the delay the drawing has
	39	* to sit behind the present. A small room gets every tick: it is the case
	40	* that matters (one or two people playing each other), the payload is a
	41	* couple of kilobytes of JSON a seat, and the arena only runs at all while
	42	* somebody is connected. Above that the cost multiplies by seats and the
	43	* older cadence comes back.
	44	*/
	45	export const broadcastEvery = (filled: number): number => (filled <= 2 ? 1 : 2);
33	46
34	47	export type Seat = { playerId: string; token: string; address: string; send: (data: string) => void };
35	48
		@@ -378,7 +391,7 @@ function step(): void {
378	391	}
379	392	if (state.result === null) lastResult = null;
380	393	ticks += 1;
381		if (ticks % BROADCAST_EVERY !== 0) return;
	394	if (ticks % broadcastEvery(seats.size) !== 0) return;
382	395	for (const seat of seats.values()) {
383	396	try {
384	397	seat.send(snapshot(seat.playerId));
		@@ -264,6 +264,24 @@ test("the bundled client connects, paints the HUD and draws a frame", async () =
264	264	press("KeyV");
265	265	expect(nodes.get("stage")!.dataset).toMatchObject({ mode: "fp" });
266	266
	267	// Where you are looking is this browser's between snapshots. Turning with
	268	// the arrow key, the angle the server is told only ever climbs: the client
	269	// used to take `snap.me.angle` back on every snapshot, so the view was
	270	// dragged to a stale angle thirty times a second and what it sent stepped
	271	// backwards in between.
	272	const shortWay = (from: number, to: number) => ((to - from + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
	273	press("ArrowRight");
	274	const angles: number[] = [];
	275	for (let i = 0; i < 60; i++) {
	276	runFrame(performance.now());
	277	await Bun.sleep(10);
	278	angles.push(seat.input.angle);
	279	}
	280	release("ArrowRight");
	281	const steps = angles.slice(1).map((angle, i) => shortWay(angles[i]!, angle));
	282	expect(Math.min(...steps)).toBeGreaterThan(-1e-9);
	283	expect(steps.reduce((sum, step) => sum + step, 0)).toBeGreaterThan(0.2);
	284
267	285	// H toggles the card either way, and the button closes it for good.
268	286	const help = nodes.get("help")!.style as Record<string, string>;
269	287	const before = help.display;
		@@ -0,0 +1,230 @@
	1	/**
	2	* Entity interpolation: a pure function of two samples and a time.
	3	*
	4	* What is checked here is what a browser cannot be asked about — that the
	5	* body walks between the pair at the server's own speed, that a missed
	6	* snapshot is carried exactly one interval and no further, that the turn is
	7	* taken the short way round, and that a time between the pair never draws
	8	* the body anywhere but between them.
	9	*/
	10
	11	import { expect, test } from "bun:test";
	12	import { arrive, bodyAt, delay, feed, GONE, LAG, LAG_MAX, LAG_MIN, makeTimeline, sample } from "../static/interp.js";
	13
	14	type Mark = { t: number; x: number; y: number; angle: number };
	15	const pair = (a: Mark, b: Mark) => [a, b];
	16
	17	const walk = pair({ t: 10, x: 100, y: 200, angle: 0 }, { t: 10.1, x: 120, y: 200, angle: 1 });
	18
	19	test("between the pair it walks at the speed the server moved it", () => {
	20	expect(sample(walk, 10)).toMatchObject({ x: 100, y: 200 });
	21	expect(sample(walk, 10.05).x).toBeCloseTo(110, 6);
	22	expect(sample(walk, 10.1)).toMatchObject({ x: 120, y: 200 });
	23	// Constant speed: equal steps of time are equal steps of distance, which
	24	// is the whole difference from an exponential chase that never arrives.
	25	const a = sample(walk, 10.02).x;
	26	const b = sample(walk, 10.04).x;
	27	const c = sample(walk, 10.06).x;
	28	expect(b - a).toBeCloseTo(c - b, 6);
	29	});
	30
	31	test("a time inside the pair is never a position outside it", () => {
	32	const diagonal = pair({ t: 1, x: -30, y: 80, angle: 2 }, { t: 1.07, x: 45, y: -10, angle: -2 });
	33	for (let when = 1; when <= 1.07; when += 0.002) {
	34	const at = sample(diagonal, when);
	35	expect(at.x).toBeGreaterThanOrEqual(-30);
	36	expect(at.x).toBeLessThanOrEqual(45);
	37	expect(at.y).toBeGreaterThanOrEqual(-10);
	38	expect(at.y).toBeLessThanOrEqual(80);
	39	}
	40	});
	41
	42	test("before the older sample it holds rather than running backwards", () => {
	43	expect(sample(walk, 9.5)).toMatchObject({ x: 100, y: 200 });
	44	expect(sample(walk, 0)).toMatchObject({ x: 100, y: 200 });
	45	});
	46
	47	test("a missed snapshot is carried one interval and then held", () => {
	48	// Half an interval late: half an interval of the pair's own velocity.
	49	expect(sample(walk, 10.15).x).toBeCloseTo(130, 6);
	50	// A whole one: exactly one more interval of it.
	51	expect(sample(walk, 10.2).x).toBeCloseTo(140, 6);
	52	// And never a step further, however long the silence lasts.
	53	expect(sample(walk, 10.3).x).toBeCloseTo(140, 6);
	54	expect(sample(walk, 30).x).toBeCloseTo(140, 6);
	55	expect(sample(walk, 30).angle).toBeCloseTo(2, 6);
	56	});
	57
	58	test("two samples at one instant are one sample", () => {
	59	const still = pair({ t: 5, x: 7, y: 8, angle: 0.5 }, { t: 5, x: 7, y: 8, angle: 0.5 });
	60	expect(sample(still, 9)).toMatchObject({ x: 7, y: 8, angle: 0.5 });
	61	});
	62
	63	test("the turn is taken the short way round", () => {
	64	const spin = pair({ t: 0, x: 0, y: 0, angle: 3.0 }, { t: 0.1, x: 0, y: 0, angle: -3.0 });
	65	// Not back through zero: onward past π, by a sixth of a radian or so.
	66	expect(sample(spin, 0.05).angle).toBeCloseTo(3.0 + 0.2831853 / 2, 6);
	67	const back = pair({ t: 0, x: 0, y: 0, angle: -3.0 }, { t: 0.1, x: 0, y: 0, angle: 3.0 });
	68	expect(sample(back, 0.05).angle).toBeCloseTo(-3.0 - 0.2831853 / 2, 6);
	69	});
	70
	71	// ------------------------------------------------------------- the timeline
	72
	73	const body = (id: string, x: number, y = 0, angle = 0) => ({ id, x, y, angle });
	74
	75	test("a body is drawn where the server says until there are two of it", () => {
	76	const timeline = makeTimeline();
	77	const first = body("a", 50);
	78	expect(bodyAt(timeline, first, 10)).toBe(first);
	79	feed(timeline, "a", first, 10);
	80	expect(bodyAt(timeline, first, 10.2)).toMatchObject({ x: 50, y: 0 });
	81	feed(timeline, "a", body("a", 60), 10.1);
	82	expect(bodyAt(timeline, body("a", 60), 10.05).x).toBeCloseTo(55, 6);
	83	});
	84
	85	test("each body keeps its own answer: one can be held while another is asked", () => {
	86	const timeline = makeTimeline();
	87	feed(timeline, "a", body("a", 0), 1);
	88	feed(timeline, "a", body("a", 10), 1.1);
	89	feed(timeline, "b", body("b", 100), 1);
	90	feed(timeline, "b", body("b", 110), 1.1);
	91	const a = bodyAt(timeline, body("a", 10), 1.05);
	92	const b = bodyAt(timeline, body("b", 110), 1.05);
	93	expect(a.x).toBeCloseTo(5, 6);
	94	expect(b.x).toBeCloseTo(105, 6);
	95	});
	96
	97	test("a body that was out of sight starts again rather than sliding back", () => {
	98	const timeline = makeTimeline();
	99	feed(timeline, "a", body("a", 0), 1);
	100	feed(timeline, "a", body("a", 10), 1.1);
	101	feed(timeline, "a", body("a", 900), 1.1 + GONE + 0.1);
	102	expect(bodyAt(timeline, body("a", 900), 1.1 + GONE + 0.15).x).toBeCloseTo(900, 6);
	103	});
	104
	105	test("a jump no one could have run is a respawn, not a walk", () => {
	106	const timeline = makeTimeline();
	107	feed(timeline, "a", body("a", 0), 1);
	108	feed(timeline, "a", body("a", 10), 1.1);
	109	// A third of a second's running is 80-odd units; 600 is a teleport.
	110	feed(timeline, "a", body("a", 610), 1.2);
	111	expect(bodyAt(timeline, body("a", 610), 1.25).x).toBeCloseTo(610, 6);
	112	});
	113
	114	test("a sample that arrives out of order is dropped", () => {
	115	const timeline = makeTimeline();
	116	feed(timeline, "a", body("a", 0), 1);
	117	feed(timeline, "a", body("a", 10), 1.1);
	118	feed(timeline, "a", body("a", 999), 1.05);
	119	expect(bodyAt(timeline, body("a", 10), 1.1).x).toBeCloseTo(10, 6);
	120	});
	121
	122	test("the delay follows the rate the snapshots actually arrive at", () => {
	123	const slow = makeTimeline();
	124	for (let i = 0; i < 60; i++) arrive(slow, 10 + i / 15);
	125	const fast = makeTimeline();
	126	for (let i = 0; i < 60; i++) arrive(fast, 10 + i / 30);
	127	expect(delay(slow)).toBeGreaterThan(delay(fast));
	128	expect(delay(slow)).toBeCloseTo((1 / 15) * LAG, 3);
	129	// Thirty a second wants less of a delay, and both stay inside the bounds.
	130	for (const d of [delay(slow), delay(fast)]) {
	131	expect(d).toBeGreaterThanOrEqual(LAG_MIN);
	132	expect(d).toBeLessThanOrEqual(LAG_MAX);
	133	}
	134	// A pause — a backgrounded tab, a reconnect — says nothing about the rate.
	135	arrive(fast, 40);
	136	expect(delay(fast)).toBeCloseTo(LAG_MIN, 3);
	137	});
	138
	139	test("the moment being drawn is always bracketed by samples on hand", () => {
	140	// Thirty snapshots a second, a frame every 16ms: the moment being drawn
	141	// always falls between the two samples on hand, never before them.
	142	const timeline = makeTimeline();
	143	let x = 0;
	144	let last = { t: 0, x: 0 };
	145	for (let i = 0; i < 40; i++) {
	146	const at = 10 + i / 30;
	147	arrive(timeline, at);
	148	x += 8;
	149	feed(timeline, "a", body("a", x), at);
	150	last = { t: at, x };
	151	if (i < 3) continue;
	152	for (let f = 0; f < 2; f++) {
	153	const now = at + f * 0.016;
	154	const marks = timeline.bodies.get("a")!.marks as Mark[];
	155	const when = now - delay(timeline);
	156	expect(when).toBeGreaterThanOrEqual(marks[0]!.t - 1e-9);
	157	expect(when).toBeLessThanOrEqual(marks[marks.length - 1]!.t + 1e-9);
	158	}
	159	}
	160	// And late is what late means: behind the newest word by the delay, which
	161	// at eight units an interval is between one and two of them.
	162	const drawn = bodyAt(timeline, body("a", last.x), last.t - delay(timeline));
	163	expect(last.x - drawn.x).toBeGreaterThan(0);
	164	expect(last.x - drawn.x).toBeLessThan(20);
	165	});
	166
	167	// --------------------------------------------- against the real simulation
	168
	169	/**
	170	* The match's own motion, sampled at the rate the server broadcasts it and
	171	* drawn at the rate a browser draws: what a bot walking across the map
	172	* actually looks like. The samples carry exactly what a snapshot carries —
	173	* a position rounded to a tenth, thirty times a second.
	174	*
	175	* The measure is the spread of the per-frame steps. A body drawn at the
	176	* server's speed takes even steps; the exponential chase this replaced took
	177	* a long step just after each snapshot and shorter ones after it, which is
	178	* choppiness with a number on it — twice this spread, measured the same way.
	179	*/
	180	test("the simulation's own motion is drawn at an even speed", async () => {
	181	const { runBots } = await import("./bots.ts");
	182	const { newMatch, tick } = await import("./match.ts");
	183	const round2 = (n: number) => Math.round(n * 10) / 10;
	184
	185	// A match of its own: nothing here touches the arena everybody shares.
	186	const state = newMatch();
	187	const step = () => {
	188	runBots(state, 1 / 30);
	189	tick(state, 1 / 30);
	190	};
	191	for (let i = 0; i < 30 * 40 && state.phase !== "live"; i++) step();
	192	const stream: { t: number; bodies: { id: string; x: number; y: number; angle: number }[] }[] = [];
	193	for (let i = 0; i < 60; i++) {
	194	step();
	195	stream.push({
	196	t: i / 30,
	197	bodies: state.players.map((p) => ({ id: p.id, x: round2(p.x), y: round2(p.y), angle: round2(p.angle) })),
	198	});
	199	}
	200
	201	const timeline = makeTimeline();
	202	const paths = new Map<string, { x: number; y: number }[]>();
	203	let next = 0;
	204	for (let f = 0; f / 60 < 1.8; f++) {
	205	const now = f / 60;
	206	while (next < stream.length && stream[next]!.t <= now) {
	207	arrive(timeline, stream[next]!.t);
	208	for (const p of stream[next]!.bodies) feed(timeline, p.id, p, stream[next]!.t);
	209	next += 1;
	210	}
	211	for (const p of stream[Math.max(0, next - 1)]!.bodies) {
	212	const at = bodyAt(timeline, p, now - delay(timeline));
	213	paths.set(p.id, [...(paths.get(p.id) ?? []), { x: at.x, y: at.y }]);
	214	}
	215	}
	216
	217	// Whoever walked furthest in that second and a half.
	218	const walked = [...paths.values()]
	219	.filter((path) => path.length > 80)
	220	.map((path) => path.slice(1).map((at, i) => Math.hypot(at.x - path[i]!.x, at.y - path[i]!.y)))
	221	.map((steps) => steps.filter((step) => step > 0.001))
	222	.sort((a, b) => b.reduce((s, x) => s + x, 0) - a.reduce((s, x) => s + x, 0))[0]!;
	223	expect(walked.length).toBeGreaterThan(30);
	224	const mean = walked.reduce((s, x) => s + x, 0) / walked.length;
	225	const spread = Math.sqrt(walked.reduce((s, x) => s + (x - mean) ** 2, 0) / walked.length) / mean;
	226	// A body moving at the server's own speed: about four units every sixtieth
	227	// of a second, which is the run speed.
	228	expect(mean * 60).toBeGreaterThan(150);
	229	expect(spread).toBeLessThan(0.15);
	230	});
		@@ -0,0 +1,118 @@
	1	/**
	2	* The view angle belongs to the browser between snapshots, and the server
	3	* gets it back only when it has something to say that we did not.
	4	*/
	5
	6	import { expect, test } from "bun:test";
	7	import { makeYaw, settle, shortWay, told, turn, SENT_TOLERANCE } from "../static/yaw.js";
	8
	9	const me = (angle: number, extra: Partial<{ id: string; alive: boolean }> = {}) => ({
	10	id: "p1",
	11	alive: true,
	12	angle,
	13	...extra,
	14	});
	15
	16	// The server rounds an angle to a tenth of a radian on the way out.
	17	const echoed = (angle: number) => Math.round(angle * 10) / 10;
	18
	19	test("the first snapshot is where you are looking: there is no view of your own yet", () => {
	20	const yaw = makeYaw();
	21	expect(yaw.ready).toBe(false);
	22	expect(settle(yaw, me(1.4), 10)).toBeCloseTo(1.4, 6);
	23	expect(yaw.ready).toBe(true);
	24	});
	25
	26	test("a snapshot does not drag the camera back to the angle it was told", () => {
	27	const yaw = makeYaw();
	28	settle(yaw, me(0), 10);
	29	// A flick: the mouse moves at frame rate, and every angle is announced.
	30	for (let i = 1; i <= 10; i++) {
	31	turn(yaw, 0.12);
	32	told(yaw, yaw.angle, 10 + i * 0.016);
	33	}
	34	expect(yaw.angle).toBeCloseTo(1.2, 6);
	35	// The snapshot is the angle the server last heard — four frames ago.
	36	settle(yaw, me(echoed(0.72)), 10.17);
	37	expect(yaw.angle).toBeCloseTo(1.2, 6);
	38	});
	39
	40	test("an angle we never sent is a correction, and is taken", () => {
	41	const yaw = makeYaw();
	42	settle(yaw, me(0), 10);
	43	told(yaw, 0, 10);
	44	turn(yaw, 0.5);
	45	told(yaw, 0.5, 10.05);
	46	// The round starts and the match points everybody at the site.
	47	settle(yaw, me(-2.1), 10.1);
	48	expect(yaw.angle).toBeCloseTo(-2.1, 6);
	49	});
	50
	51	test("an echo just inside the rounding is ours, one just outside is not", () => {
	52	const near = makeYaw();
	53	settle(near, me(0), 10);
	54	told(near, 0.5, 10);
	55	turn(near, 0.4);
	56	settle(near, me(0.5 + SENT_TOLERANCE / 2), 10.05);
	57	expect(near.angle).toBeCloseTo(0.4, 6);
	58
	59	const far = makeYaw();
	60	settle(far, me(0), 10);
	61	told(far, 0.5, 10);
	62	turn(far, 0.4);
	63	settle(far, me(0.5 + SENT_TOLERANCE * 2), 10.05);
	64	expect(far.angle).toBeCloseTo(0.5 + SENT_TOLERANCE * 2, 6);
	65	});
	66
	67	test("an echo from a second ago has expired: only recent angles are ours", () => {
	68	const yaw = makeYaw();
	69	settle(yaw, me(0), 10);
	70	told(yaw, 0.5, 10);
	71	turn(yaw, 0.4);
	72	settle(yaw, me(0.5), 12);
	73	expect(yaw.angle).toBeCloseTo(0.5, 6);
	74	});
	75
	76	test("a client that has not spoken yet keeps what it has", () => {
	77	const yaw = makeYaw();
	78	settle(yaw, me(0), 10);
	79	turn(yaw, 0.8);
	80	// No input has been sent between the two snapshots; the server can only be
	81	// repeating what it already knew, so there is nothing here to take.
	82	settle(yaw, me(0), 10.03);
	83	expect(yaw.angle).toBeCloseTo(0.8, 6);
	84	});
	85
	86	test("a respawn and a seat change both point you where the server points you", () => {
	87	const respawn = makeYaw();
	88	settle(respawn, me(0, { alive: false }), 10);
	89	told(respawn, 0, 10);
	90	turn(respawn, 1);
	91	settle(respawn, me(0, { alive: true }), 10.1);
	92	expect(respawn.angle).toBeCloseTo(0, 6);
	93
	94	const seat = makeYaw();
	95	settle(seat, me(0), 10);
	96	told(seat, 0, 10);
	97	turn(seat, 1);
	98	settle(seat, { id: "p2", alive: true, angle: 0 }, 10.1);
	99	expect(seat.angle).toBeCloseTo(0, 6);
	100	});
	101
	102	test("the wrap is taken the short way round", () => {
	103	expect(shortWay(3.0, -3.0)).toBeCloseTo(0.2831853, 6);
	104	expect(shortWay(-3.0, 3.0)).toBeCloseTo(-0.2831853, 6);
	105	// Which means an echo either side of π is still ours.
	106	const yaw = makeYaw();
	107	settle(yaw, me(0), 10);
	108	told(yaw, Math.PI - 0.01, 10);
	109	turn(yaw, 0.3);
	110	settle(yaw, me(-Math.PI + 0.01), 10.05);
	111	expect(yaw.angle).toBeCloseTo(0.3, 6);
	112	});
	113
	114	test("the sent log does not grow without bound", () => {
	115	const yaw = makeYaw();
	116	for (let i = 0; i < 500; i++) told(yaw, i * 0.01, 10 + i * 0.05);
	117	expect(yaw.sent.length).toBeLessThan(30);
	118	});
		@@ -0,0 +1,146 @@
	1	/**
	2	* Everybody else, drawn between the things the server said about them.
	3	*
	4	* A remote body is only ever heard about a few dozen times a second, so it
	5	* has to be drawn somewhere in between. The old way was an exponential chase
	6	* — `now.x += (x - now.x) * 0.35` every frame — which is wrong twice: it is a
	7	* different speed at 60Hz than at 144Hz, and it is a pursuit that never
	8	* arrives, so every other player was permanently behind and rubbery.
	9	*
	10	* This is entity interpolation instead. Each body keeps the last few samples
	11	* with the times they landed, and the frame is drawn at `now - delay`, about
	12	* a snapshot interval in the past. That moment falls between two samples on
	13	* hand, so the body moves at exactly the speed the server moved it and
	14	* arrives exactly where the server put it — one interval late, which nobody
	15	* can see. A handful of samples rather than strictly two is what buys the
	16	* delay a margin: a snapshot that arrives late or early still brackets the
	17	* moment being drawn instead of stalling the body.
	18	*
	19	* When a snapshot really is missed the newest pair's own velocity is carried
	20	* forward for one interval and then held: a guess that long is better than a
	21	* stall, and a guess longer than that is fiction. The delay follows the rate
	22	* snapshots actually arrive at, so the same code is right at 15Hz and at
	23	* 30Hz without being told which it is.
	24	*
	25	* Nothing here is ever sent anywhere: it is a drawing, and the server is
	26	* still the only thing that says where anybody is.
	27	*/
	28
	29	/** The render delay, as a multiple of the interval snapshots arrive at. */
	30	export const LAG = 1.3;
	31	/** ...never tighter than this, never looser, in seconds. */
	32	export const LAG_MIN = 0.045;
	33	export const LAG_MAX = 0.13;
	34	/** How many samples a body keeps: enough to bracket the delay, and no more. */
	35	export const KEEP = 4;
	36	/** How fast the measured interval follows the arrivals. */
	37	const INTERVAL_PULL = 0.25;
	38	/** A gap this long means the body was gone, not slow: start it again. */
	39	export const GONE = 0.4;
	40	/** Faster than anything can run: a respawn, or a body back from nowhere. */
	41	const TOP_SPEED = 400;
	42
	43	const clamp = (n, low, high) => (n < low ? low : n > high ? high : n);
	44
	45	/** The short way round from one angle to another, in (-π, π]. */
	46	export const shortWay = (from, to) => ((to - from + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
	47
	48	/** One timeline for the whole snapshot stream: the bodies, and the rate. */
	49	export const makeTimeline = (interval = 1 / 15) => ({ bodies: new Map(), interval, at: 0 });
	50
	51	/**
	52	* A snapshot landed at `at` seconds. The gap since the last one is what the
	53	* render delay is built out of; a gap wilder than any real rate (a tab that
	54	* was in the background, a reconnect) says nothing about the rate and is
	55	* left out of it.
	56	*/
	57	export function arrive(timeline, at) {
	58	const gap = at - timeline.at;
	59	if (timeline.at > 0 && gap > 1 / 120 && gap < 0.5)
	60	timeline.interval += (gap - timeline.interval) * INTERVAL_PULL;
	61	timeline.at = at;
	62	return timeline;
	63	}
	64
	65	/** How far behind the present this timeline is drawn, in seconds. */
	66	export const delay = (timeline) => clamp(timeline.interval * LAG, LAG_MIN, LAG_MAX);
	67
	68	/** The moment being drawn, given the clock now. */
	69	export const renderTime = (timeline, now) => now - delay(timeline);
	70
	71	const mark = (at, body) => ({ t: at, x: body.x, y: body.y, angle: body.angle });
	72
	73	/**
	74	* What the server just said about one body. Out-of-order samples are
	75	* dropped; a body that has been away, or that has moved further than anyone
	76	* can run, starts fresh rather than sliding across the map to its new place.
	77	*
	78	* The drawn position lives on the track — one object per body, so a caller
	79	* may hold the answer it was given while asking about somebody else.
	80	*/
	81	export function feed(timeline, id, body, at) {
	82	const track = timeline.bodies.get(id);
	83	if (!track) {
	84	timeline.bodies.set(id, { marks: [mark(at, body)], out: { x: 0, y: 0, angle: 0 } });
	85	return timeline;
	86	}
	87	const last = track.marks[track.marks.length - 1];
	88	if (at <= last.t) return timeline;
	89	const gap = at - last.t;
	90	const jumped = Math.hypot(body.x - last.x, body.y - last.y) > TOP_SPEED * gap + 4;
	91	if (gap > GONE \|\| jumped) track.marks.length = 0;
	92	track.marks.push(mark(at, body));
	93	if (track.marks.length > KEEP) track.marks.shift();
	94	return timeline;
	95	}
	96
	97	/**
	98	* Where a body was at a moment, given the samples it has — ascending in
	99	* time, and at least one.
	100	*
	101	* Between two samples this is a straight walk from one to the other at the
	102	* server's own speed. Before the oldest it holds, because running backwards
	103	* to meet a moment we have no answer for would be inventing one. After the
	104	* newest it carries the last pair's velocity for one interval — no more,
	105	* ever — and then holds there.
	106	*/
	107	export function sample(marks, when, out = { x: 0, y: 0, angle: 0 }) {
	108	const last = marks[marks.length - 1];
	109	if (marks.length === 1 \|\| when >= last.t) return beyond(marks, when, out);
	110	if (when <= marks[0].t) return at(marks[0], marks[0], 0, out);
	111	let i = marks.length - 2;
	112	while (i > 0 && marks[i].t > when) i -= 1;
	113	const from = marks[i];
	114	const to = marks[i + 1];
	115	const span = to.t - from.t;
	116	return at(from, to, span > 0 ? (when - from.t) / span : 1, out);
	117	}
	118
	119	/** Past the newest sample: one interval of the last pair's velocity, held. */
	120	function beyond(marks, when, out) {
	121	const last = marks[marks.length - 1];
	122	const before = marks[marks.length - 2];
	123	if (!before) return at(last, last, 0, out);
	124	const span = last.t - before.t;
	125	if (span <= 0) return at(last, last, 0, out);
	126	return at(before, last, clamp((when - before.t) / span, 1, 2), out);
	127	}
	128
	129	/** A point `u` of the way from one sample to another; the turn is short. */
	130	function at(from, to, u, out) {
	131	out.x = from.x + (to.x - from.x) * u;
	132	out.y = from.y + (to.y - from.y) * u;
	133	out.angle = from.angle + shortWay(from.angle, to.angle) * u;
	134	return out;
	135	}
	136
	137	/**
	138	* Where to draw a body out of a snapshot. One with no samples yet — the
	139	* first frame it is seen on — is drawn where the server says, which is the
	140	* only honest answer available.
	141	*/
	142	export function bodyAt(timeline, body, when, out = null) {
	143	const track = timeline.bodies.get(body.id);
	144	if (!track) return body;
	145	return sample(track.marks, when, out ?? track.out);
	146	}
		@@ -12,6 +12,7 @@
12	12	"use strict";
13	13
14	14	import { makeBeeper } from "./beep.js";
	15	import { arrive, bodyAt, feed, makeTimeline, renderTime } from "./interp.js";
15	16	import { BODY_R, moveSpeed } from "../src/glide.ts";
16	17	import { drawGun, gunSnapshot, gunTick, makeGun } from "./gun.js";
17	18	import { advance, anchor, holdBack, insideWall, makeLocal, project, reconcile } from "./predict.js";
		@@ -20,6 +21,7 @@ import { roster, rosterKey } from "./roster.js";
20	21	import { AGENT_COLOUR, drawScene, makeScene } from "./scene.js";
21	22	import { moveVector } from "./steer.js";
22	23	import { drawTopdown } from "./topdown.js";
	24	import { aim as aimAt, makeYaw, settle, told, turn } from "./yaw.js";
23	25
24	26	const $ = (id) => document.getElementById(id);
25	27	const view = $("view");
		@@ -36,9 +38,16 @@ let world = null; // what predict.js slides against: the grid, from map.json
36	38	let snap = null;
37	39	let socket = null;
38	40	let agents = null;
39		const shown = new Map(); // smoothed positions, so 15 frames a second look like 60
	41	// Everybody else, kept as the last few things the server said about them and
	42	// drawn between those — see interp.js. `drawAt` is the moment this frame is
	43	// drawing, a snapshot interval behind the present.
	44	const timeline = makeTimeline();
	45	let drawAt = 0;
40	46	const keys = new Set();
41		let yaw = 0; // where this person is looking, theirs to move between snapshots
	47	// Where this person is looking: the browser's between snapshots, and the
	48	// server's word taken only when it is saying something we did not. See
	49	// yaw.js — a snapshot that stomps this is what made looking around choppy.
	50	const head = makeYaw();
42	51	let locked = false;
43	52	let firing = false;
44	53	let mode = COARSE ? "top" : "fp"; // a raycaster with touch look is miserable
		@@ -76,10 +85,16 @@ function connect() {
76	85	socket.onmessage = (event) => {
77	86	const data = JSON.parse(event.data);
78	87	if (data.t !== "s") return;
79		const first = snap === null;
80	88	snap = data;
81	89	snapAt = performance.now();
82		if (first && mode === "fp") yaw = data.me.angle;
	90	// Timed samples for every body in it, ours included: the drawing walks
	91	// between them rather than chasing the newest one.
	92	arrive(timeline, snapAt / 1000);
	93	feed(timeline, data.me.id, data.me, snapAt / 1000);
	94	for (const player of data.players) feed(timeline, player.id, player, snapAt / 1000);
	95	// The server's angle is taken only when it is a correction, never as the
	96	// routine echo of the angle we sent it a moment ago.
	97	settle(head, data.me, snapAt / 1000);
83	98	gunSnapshot(gun, data);
84	99	paintHud(data);
85	100	maybeHelp(data);
		@@ -92,11 +107,14 @@ const send = (message) => {
92	107
93	108	// ------------------------------------------------------------------- input
94	109
	110	/**
	111	* Swap the view. The two share one facing — whichever you leave, you keep
	112	* looking the way you were looking — so nothing here touches the angle.
	113	*/
95	114	function setMode(next) {
96	115	mode = next;
97	116	$("stage").dataset.mode = next;
98	117	if (next !== "fp" && document.pointerLockElement === view) document.exitPointerLock();
99		if (snap) yaw = snap.me.angle;
100	118	}
101	119
102	120	addEventListener("keydown", (event) => {
		@@ -157,7 +175,7 @@ document.addEventListener("pointerlockchange", () => {
157	175	$("stage").dataset.locked = locked ? "1" : "";
158	176	});
159	177	addEventListener("mousemove", (event) => {
160		if (locked) yaw += event.movementX * LOOK;
	178	if (locked) turn(head, event.movementX * LOOK);
161	179	});
162	180	addEventListener("mousedown", (event) => {
163	181	if (locked && event.button === 0) firing = true;
		@@ -236,15 +254,17 @@ function readIntent() {
236	254	intent.mx = ax;
237	255	intent.my = ay;
238	256	if (mode === "fp") {
239		intent.angle = yaw;
240		moveVector(ax, ay, yaw, walk);
	257	intent.angle = head.angle;
	258	moveVector(ax, ay, head.angle, walk);
241	259	intent.mx = walk.x;
242	260	intent.my = walk.y;
243	261	} else {
244	262	const aim = aimTouch \|\| pointer;
245	263	const me = worldToScreen(drawnMe.id ? drawnMe : snap.me);
246		intent.angle = aim ? Math.atan2(aim.y - me.y, aim.x - me.x) : snap.me.angle;
247		yaw = intent.angle;
	264	// The pointer is this view's aim, and it is ours the same way the mouse
	265	// is: with no pointer yet, keep the facing rather than the stale answer.
	266	if (aim) aimAt(head, Math.atan2(aim.y - me.y, aim.x - me.x));
	267	intent.angle = head.angle;
248	268	}
249	269	intent.fire = firing \|\| keys.has("Space");
250	270	intent.use = keys.has("KeyF");
		@@ -258,6 +278,8 @@ setInterval(() => {
258	278	if (!snap \|\| !map) return;
259	279	const now = readIntent();
260	280	send({ t: "i", mx: now.mx, my: now.my, a: now.angle, f: now.fire, u: now.use, r: now.reload });
	281	// What we told it, so its echo is recognisable as ours when it comes back.
	282	told(head, now.angle, performance.now() / 1000);
261	283	}, 50);
262	284
263	285	// ------------------------------------------------------------------ drawing
		@@ -273,26 +295,13 @@ addEventListener("resize", resize);
273	295	const scale = () => (map ? view.width / (map.rows[0].length * map.tile) : 1);
274	296	const worldToScreen = (p) => ({ x: p.x * scale(), y: p.y * scale() });
275	297
276		function smooth(id, x, y, angle) {
277		const now = shown.get(id);
278		if (!now) {
279		const fresh = { x, y, angle };
280		shown.set(id, fresh);
281		return fresh;
282		}
283		now.x += (x - now.x) * 0.35;
284		now.y += (y - now.y) * 0.35;
285		const turn = ((angle - now.angle + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
286		now.angle += turn * 0.4;
287		return now;
288		}
289
290	298	/**
291		* Everybody else is smoothed toward the last position the server sent.
	299	* Everybody else is drawn at `drawAt`: between the two samples that bracket
	300	* it, so they move at the server's own speed and arrive where it put them.
292	301	* You are not: your own body is the one this browser can run forward
293		* honestly, and smoothing it is what dragged the camera backwards.
	302	* honestly, and drawing it late is what dragged the camera backwards.
294	303	*/
295		const look = (p) => (predicting() && p.id === snap.me.id ? drawnMe : smooth(p.id, p.x, p.y, p.angle));
	304	const look = (p) => (predicting() && p.id === snap.me.id ? drawnMe : bodyAt(timeline, p, drawAt));
296	305
297	306	/**
298	307	* Your own movement is only guessed at while the round is live and you are
		@@ -328,13 +337,16 @@ function predict(dt, now) {
328	337	drawnMe.id = snap.me.id;
329	338	drawnMe.x = local.x;
330	339	drawnMe.y = local.y;
331		drawnMe.angle = mode === "fp" ? yaw : snap.me.angle;
	340	// Either view: the facing is the one this browser is holding, whether the
	341	// mouse moved it or the pointer aim did. The server hears it a moment later.
	342	drawnMe.angle = head.angle;
332	343	}
333	344
334	345	function frame(now) {
335	346	requestAnimationFrame(frame);
336	347	const dt = Math.min(0.1, (now - last) / 1000);
337	348	last = now;
	349	drawAt = renderTime(timeline, now / 1000);
338	350	if (!map) return;
339	351	gunTick(gun, dt);
340	352	ctx.clearRect(0, 0, view.width, view.height);
		@@ -345,12 +357,12 @@ function frame(now) {
345	357	}
346	358	// Turning with the arrow keys belongs to the frame, at a rate a second,
347	359	// rather than to whatever the input timer happens to do.
348		if (mode === "fp" && keys.has("ArrowLeft")) yaw -= 0.9 * dt;
349		if (mode === "fp" && keys.has("ArrowRight")) yaw += 0.9 * dt;
	360	if (mode === "fp" && keys.has("ArrowLeft")) turn(head, -0.9 * dt);
	361	if (mode === "fp" && keys.has("ArrowRight")) turn(head, 0.9 * dt);
350	362	predict(dt, now);
351	363	beeper.update(snap.spike.planted, snap.spike.fuse, now / 1000);
352	364	const eye = look(snap.me);
353		const facing = mode === "fp" ? yaw : eye.angle;
	365	const facing = mode === "fp" ? head.angle : eye.angle;
354	366
355	367	if (mode === "fp" && !mapOpen) {
356	368	drawScene(ctx, scene, { solid, tile: map.tile }, { x: eye.x, y: eye.y, angle: facing }, snap, {
		@@ -0,0 +1,75 @@
	1	/**
	2	* Where this person is looking.
	3	*
	4	* The view angle is the browser's to move: the mouse arrives at frame rate,
	5	* and a snapshot is a description of a moment already gone. The client used
	6	* to take `snap.me.angle` on every snapshot, which dragged the camera back
	7	* to a stale angle thirty times a second — worst exactly when you turned
	8	* fastest, because that is when the stale angle is furthest away.
	9	*
	10	* So the local angle is the camera's, and the server's angle is taken only
	11	* when it is telling us something we did not say: there is no view yet, the
	12	* body under us changed, we respawned, or the angle that came back is one we
	13	* never sent. That last one is what the sent log is for — the server echoes
	14	* our own angle back, rounded, so an angle matching nothing we sent in the
	15	* last second came from the match (a round start recentring everybody at the
	16	* site) rather than from us, and is worth taking.
	17	*
	18	* Nothing here is sent anywhere: the angle still leaves through the input
	19	* timer exactly as it always did.
	20	*/
	21
	22	/** How long a sent angle is remembered, in seconds. */
	23	export const SENT_MEMORY = 1.2;
	24	/** How close an echo must be to count as ours. The server rounds to 0.1. */
	25	export const SENT_TOLERANCE = 0.08;
	26
	27	export const makeYaw = (angle = 0) => ({ angle, id: "", alive: false, ready: false, sent: [] });
	28
	29	/** The short way round from one angle to another, in (-π, π]. */
	30	export const shortWay = (from, to) => ((to - from + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
	31
	32	/** A mouse delta, or an arrow key's share of a second. Ours, always taken. */
	33	export function turn(yaw, delta) {
	34	yaw.angle += delta;
	35	return yaw.angle;
	36	}
	37
	38	/** Point it somewhere outright: the top-down view's pointer aim. */
	39	export function aim(yaw, angle) {
	40	yaw.angle = angle;
	41	return yaw.angle;
	42	}
	43
	44	/** Remember an angle we told the server about, at a time in seconds. */
	45	export function told(yaw, angle, at) {
	46	yaw.sent.push({ at, angle });
	47	while (yaw.sent.length && yaw.sent[0].at < at - SENT_MEMORY) yaw.sent.shift();
	48	return yaw;
	49	}
	50
	51	/** Is this angle one we sent recently? An echo, not a correction. */
	52	const ours = (yaw, angle, at) =>
	53	yaw.sent.some((s) => s.at >= at - SENT_MEMORY && Math.abs(shortWay(s.angle, angle)) <= SENT_TOLERANCE);
	54
	55	/**
	56	* A snapshot landed. Returns the angle to look along, having decided whether
	57	* the server's word replaces ours.
	58	*
	59	* `me` is the snapshot's own body: `{ id, angle, alive }`. `at` is now, in
	60	* seconds. An empty sent log is not evidence of anything — a client that has
	61	* not spoken yet keeps what it has.
	62	*/
	63	export function settle(yaw, me, at) {
	64	const seatChanged = !yaw.ready \|\| me.id !== yaw.id;
	65	const respawned = me.alive && !yaw.alive;
	66	const corrected = yaw.sent.length > 0 && !ours(yaw, me.angle, at);
	67	if (seatChanged \|\| respawned \|\| corrected) {
	68	yaw.angle = me.angle;
	69	yaw.sent.length = 0;
	70	}
	71	yaw.id = me.id;
	72	yaw.alive = me.alive;
	73	yaw.ready = true;
	74	return yaw.angle;
	75	}