62e681a · 868ec74 · 24dcb2d · dc4eee3 · a110654 · ced16d8
@@ -419,6 +419,56 @@
phone, where there is no keyboard and no pointer to lock. A browser that will no
put an element full screen — an iPhone will not — never shows that button rather
than showing one that does nothing.
**The whole mouse plays, not just its two big buttons.** The wheel jumps either
way it is turned — counted in notches, so one click of a wheel is one press
whether the browser sends a hundred pixels, three lines or a page, and a
trackpad's stream of small deltas has to travel a click's distance to be one —
the wheel pressed pulls the knife, and the two buttons under your thumb plant or
defuse and throw an HE. On Windows those two are the browser's Back and Forward:
while the game has the mouse their `mousedown` and their `auxclick` are
prevented, so a thumb mid-round cannot leave the page with the match on it. At
`/range` the thumb pair reloads and switches drill and the middle button is left
to the browser. A button no game binds keeps whatever meaning the browser gave it.
**Windows is asked for the mouse the way Windows needs.** `Controls.lock()` asks
for `unadjustedMovement`, because without it Chromium on Windows hands the page
a `movementX` with the OS's pointer speed and "enhance pointer precision"
already applied — the same flick is worth a different angle than it is on a Mac,
and non-linearly so — and falls back to a plain ask on a browser that will not
take the dictionary. The answer is read rather than dropped: a refusal leaves the
pause panel up with a sentence, instead of a match running with a dead mouse. The
Keyboard Lock API is asked for every key each game binds, which on Windows
matters twice over: crouch is <kbd>Ctrl</kbd>, so crouch-and-forward is Ctrl+W
and crouch-and-reload is Ctrl+R, and out of full screen no browser hands those
over — so a match in progress puts a `beforeunload` confirmation in the way.
**And it is sharp at 125%.** Windows ships display scaling at 125% and 150% far
more often than anything else does, and a crosshair *stroked* through the centre
of a 1601-pixel-wide backing store covers three columns of pixels at two thirds
of its colour each: a dim, smeared cross that a 1.0 laptop never shows you.
`src/engine/pixels.ts` is the one place that says how large a canvas's backing
store is and where a bar of pixels has to start for both its edges to land on
one; the overlay draws in device pixels with no context transform, and a
crosshair arm is a rectangle filled on whole pixels whose thickness bends by a
pixel rather than letting the centre move by half of one. Sizes are written in
CSS pixels and turned into whole device pixels there, so the HUD is the same size
on the glass at 1, 1.25, 1.5 and 2 instead of shrinking to 70% on a dense screen.
All three games go through it, including the range's no-WebGL2 horizon, which is
the picture a machine whose driver refused the shaders actually gets.
**If it still misbehaves, there is a line to paste.** The menu prints one: the
browser and the platform, what the WebGL2 driver calls itself — on Windows the
ANGLE string naming the Direct3D device — the stage's size, the pixel ratio,
whether the pointer lock is raw and whether the keyboard lock was granted.
`src/client/support.ts` is a pure function of those facts; every one of them
comes from outside the page, so every one is flattened of control characters,
stripped of the separator and cut to 120 characters, and it reaches the DOM
through `textContent`. When the picture cannot be built at all — ANGLE on D3D11
refuses shaders a desktop driver waves through — the boot catches the throw, the
menu says so in words with the driver's own log on the end of that line, and the
loop does not start. A black canvas with no sentence is the one bug report
nobody can answer.
Escape is the one key the browser reads before the page does, and on a Mac what
it means is *give the window back*: full screen drops with the whole animation,
mid-round. So the game asks for the key rather than obeying it. Where a browser
@@ -49,9 +49,9 @@
function fixture(): { dir: string; entries: Entry[]; source: (n: string, t: stri
test("the entry table is what the app ships today, each with the size it may not pass", () => {
  expect(ENTRIES).toEqual([
    { name: "app", entry: "src/client/main.ts", ceiling: { raw: 122_000, gzip: 47_500 } },
    { name: "range", entry: "src/range/main.ts", ceiling: { raw: 41_500, gzip: 17_200 } },
    { name: "example", entry: "src/example/main.ts", ceiling: { raw: 23_500, gzip: 10_200 } },
    { name: "app", entry: "src/client/main.ts", ceiling: { raw: 132_000, gzip: 51_500 } },
    { name: "range", entry: "src/range/main.ts", ceiling: { raw: 44_000, gzip: 18_200 } },
    { name: "example", entry: "src/example/main.ts", ceiling: { raw: 26_800, gzip: 11_400 } },
  ]);
  // And it is the registry projected, not a second list beside it: a game's
  // source and its ceiling are written down once, in `src/games.ts`.
@@ -1,5 +1,5 @@
import { expect, test } from "bun:test";
import { CS_KEYS, CS_MOUSE, CS_TAP, NUMBER_ROW, readIntent, slotAction, slotIndex } from "./binding.ts";
import { CS_KEYS, CS_MOUSE, CS_TAP, CS_WHEEL, NUMBER_ROW, readIntent, slotAction, slotIndex } from "./binding.ts";
const NONE = { x: 0, y: 0 };
const intent = (actions: string[], stick = NONE) => readIntent(new Set(actions), stick);
@@ -25,6 +25,16 @@
test("the bindings are the ones the keyboard has always had", () => {
  expect(CS_KEYS.Digit3).toBe("slot3");
  expect(CS_MOUSE[0]).toBe("fire");
  expect(CS_MOUSE[2]).toBe("scope");
  // The whole mouse, because an unbound button is one the browser keeps: 3 and
  // 4 are Back and Forward on Windows, and the wheel pressed is the quick knife.
  expect(CS_MOUSE[1]).toBe("knife");
  expect(CS_MOUSE[3]).toBe("use");
  expect(CS_MOUSE[4]).toBe("grenade");
  // The wheel jumps whichever way it is turned, which is how half of this
  // game's players jump at all.
  expect(CS_WHEEL.up).toBe("jump");
  expect(CS_WHEEL.down).toBe("jump");
  expect(intent(["jump"]).input.jump).toBe(true);
  expect([...CS_TAP]).toEqual(["jump", "reload", "buy", "grenade", "flash", "smoke"]);
  // F is the page's, not the world's: `main.ts` hears it on `onAction` and asks
  // the browser for the screen, and nothing about an `Input` changes for it.
@@ -64,6 +74,15 @@
test("only the first three of the row are pockets: the rest are the panel's and
  }
});
test("the wheel pressed is the knife pocket, and it is not a tile of the buy panel", () => {
  // The same pocket `3` is, by a name no tile is printed with: with the shop
  // open a key of the number row buys, and a thumb on the wheel means the knife
  // rather than whatever the third tile happens to be.
  expect(intent(["knife"]).slotWanted).toBe(3);
  expect(slotIndex("knife")).toBeNull();
  expect(intent(["knife"]).input).toEqual(intent([]).input);
});
test("nothing held is nothing asked for", () => {
  const { input, scoreboard, slotWanted } = intent([]);
  expect(input.forward).toBe(0);
@@ -59,8 +59,27 @@
export const CS_KEYS: Record<string, string> = {
  KeyX: "rebuy",
};
/** Left fires, right scopes. */
export const CS_MOUSE: Record<number, string> = { 0: "fire", 2: "scope" };
/**
 * Left fires, right scopes, and the three buttons a five-button mouse has as
 * well — all of them, because a bound button is a button the engine takes the
 * browser's meaning away from and an unbound one is left alone.
 *
 * That matters most for the two under the thumb: to a browser on Windows they
 * are Back and Forward, so a thumb that finds one mid-round in Edge leaves the
 * page and takes the match with it. Bound here, they are the game's. Which
 * actions they get is the pair a thumb reaches for: plant-or-defuse, and the HE.
 *
 * The wheel pressed is the quick knife every other shooter puts there — it is
 * `knife` rather than `slot3` on purpose, because the number row is also the
 * buy panel's and a middle click with the shop open would otherwise spend the
 * money on whatever tile is printed with a 3.
 */
export const CS_MOUSE: Record<number, string> = {
  0: "fire", 1: "knife", 2: "scope", 3: "use", 4: "grenade",
};
/** The wheel jumps, both ways, which is the bind half this game plays with. */
export const CS_WHEEL: Record<string, string> = { up: "jump", down: "jump" };
/** On-screen buttons that are a tap, not a hold. */
export const CS_TAP = ["jump", "reload", "buy", "grenade", "flash", "smoke"] as const;
@@ -102,7 +121,9 @@
export function readIntent(held: ReadonlySet<string>, stick: { x: number; y: num
    scoreboard: down("scoreboard"),
    // Three pockets, and only three: the rest of the number row belongs to the
    // buy panel, and a world that has never heard of `slot4` cannot be steered
    // by the key that buys the fourth tile.
    slotWanted: down("slot3") ? 3 : down("slot2") ? 2 : down("slot1") ? 1 : null,
    // by the key that buys the fourth tile. `knife` is the third pocket by
    // another name — the wheel pressed, which no tile is printed with.
    slotWanted:
      down("slot3") || down("knife") ? 3 : down("slot2") ? 2 : down("slot1") ? 1 : null,
  };
}
@@ -83,12 +83,14 @@
const HEIGHT = 720;
 */
function draw(
  world: World,
  options: { width?: number; height?: number; scoreboard?: boolean; view?: Player } = {},
  options: {
    width?: number; height?: number; scoreboard?: boolean; view?: Player; dpr?: number;
  } = {},
): Recorder {
  const paint = recorder();
  drawHud(
    paint, world, options.width ?? WIDTH, options.height ?? HEIGHT,
    options.scoreboard ?? false, options.view ?? world.me,
    options.scoreboard ?? false, options.view ?? world.me, options.dpr ?? 1,
  );
  return paint;
}
@@ -111,19 +113,28 @@
function line(paint: Recorder, text: string): Call {
// --- the crosshair ---------------------------------------------------------
/**
 * The crosshair's first arm, as how far each of its two ends is from the middle
 * of the screen. Which end is stroked first is not something anybody can see —
 * the engine's `crosshair` draws an arm outer end inwards, the HUD used to draw
 * it inner end out, and it is the same segment — so this reads near and far
 * rather than first and second.
 * The crosshair's arm reaching right, as how far each of its two ends is from
 * the middle of the screen. An arm is a filled rectangle of whole device pixels
 * now rather than a stroked segment — see `engine/pixels.ts` — so it is found
 * as the first fill that starts right of the centre and straddles the middle
 * row, which nothing else on the HUD does.
 */
function armOf(paint: Recorder, width = WIDTH): { near: number; far: number } {
  const start = paint.calls.findIndex((c) => c.op === "moveTo");
  const ends = [paint.calls[start], paint.calls[start + 1]]
    .map((c) => Math.abs(Number(c?.args[0]) - width / 2));
  return { near: Math.min(...ends), far: Math.max(...ends) };
function armOf(paint: Recorder, width = WIDTH, height = HEIGHT): { near: number; far: number } {
  const cx = width / 2, cy = height / 2;
  const arm = paint.calls.find((c) =>
    c.op === "fillRect" && Number(c.args[0]) > cx &&
    Number(c.args[1]) <= cy && Number(c.args[1]) + Number(c.args[3]) >= cy);
  if (arm === undefined) throw new Error("no crosshair arm was filled");
  const near = Number(arm.args[0]) - cx;
  return { near, far: near + Number(arm.args[2]) };
}
/** Whether a crosshair was drawn at all: four arms, or none. */
const aimed = (paint: Recorder, width = WIDTH, height = HEIGHT): boolean =>
  paint.calls.some((c) =>
    c.op === "fillRect" && Number(c.args[0]) > width / 2 &&
    Number(c.args[1]) <= height / 2 && Number(c.args[1]) + Number(c.args[3]) >= height / 2);
/** How far the crosshair's first arm starts from the middle of the screen. */
const gapOf = (paint: Recorder, width = WIDTH): number => armOf(paint, width).near;
@@ -138,14 +149,17 @@
const spreadOf = (world: World, moving: number): number =>
test("the crosshair opens exactly as far as the gun is inaccurate, and is gone when you are", () => {
  const still = scene();
  const rest = draw(still);
  // At a standstill it is the gun's own spread and nothing else.
  expect(gapOf(rest)).toBeCloseTo(4 + spreadOf(still, 0) * 14, 10);
  // At a standstill it is the gun's own spread and nothing else — in whole
  // device pixels, because half a pixel of crosshair is a grey smear and not a
  // finer aim. At a ratio of 1, which is what this file draws at, a device
  // pixel is a CSS pixel and the number is the one it always was, rounded.
  expect(gapOf(rest)).toBe(Math.round(4 + spreadOf(still, 0) * 14));
  // Each arm is seven pixels long, from the gap outwards.
  expect(armOf(rest).far).toBeCloseTo(gapOf(rest) + 7, 10);
  expect(armOf(rest).far).toBe(gapOf(rest) + 7);
  // Running wide open: any speed at or over the walk cap counts as fully moving.
  const running = scene((w) => { w.me.vel = [1000, 0, 0]; });
  expect(gapOf(draw(running))).toBeCloseTo(4 + spreadOf(running, 1) * 14, 10);
  expect(gapOf(draw(running))).toBe(Math.round(4 + spreadOf(running, 1) * 14));
  expect(gapOf(draw(running))).toBeGreaterThan(gapOf(rest));
  // Scoped it draws tight, and darkens everything outside the sight.
@@ -157,7 +171,54 @@
test("the crosshair opens exactly as far as the gun is inaccurate, and is gone w
  // Dead players do not aim: no crosshair, no sight, nothing stroked at all.
  const dead = draw(scene((w) => { w.me.alive = false; }));
  expect(dead.calls.some((c) => c.op === "stroke")).toBe(false);
  expect(dead.calls.some((c) => c.op === "moveTo")).toBe(false);
  expect(aimed(dead)).toBe(false);
});
test("the crosshair is whole device pixels and centred, at every ratio Windows has", () => {
  // The report behind this: Windows ships display scaling at 125% and 150%, and
  // a crosshair stroked through a centre at 800.5 is a grey smear three columns
  // wide. Every arm is a filled rectangle of whole pixels now, and the four of
  // them are symmetrical about the true centre of the canvas.
  for (const dpr of [1, 1.25, 1.5, 2]) {
    // An even backing store and an odd one: 125% of an odd CSS width is where
    // the centre lands in the middle of a pixel rather than on a boundary.
    for (const width of [Math.round(1280 * dpr), Math.round(1280 * dpr) + 1]) {
      const height = width - 1;
      const paint = draw(scene(), { width, height, dpr });
      const arms = paint.calls.filter((c) =>
        c.op === "fillRect" && Number(c.args[2]) < width / 4 && Number(c.args[3]) < height / 4);
      expect(arms.length).toBeGreaterThanOrEqual(4);
      for (const arm of arms.slice(0, 4))
        for (const n of arm.args.slice(0, 4)) expect(Number.isInteger(Number(n))).toBe(true);
      // The arm reaching right and the one reaching left are the same distance
      // from the centre, so the cross does not lean at 125%.
      const { near, far } = armOf(paint, width, height);
      const left = paint.calls.filter((c) =>
        c.op === "fillRect" && Number(c.args[0]) + Number(c.args[2]) < width / 2 &&
        Number(c.args[1]) <= height / 2 && Number(c.args[1]) + Number(c.args[3]) >= height / 2);
      const mirror = left[0] as Call;
      expect(width / 2 - (Number(mirror.args[0]) + Number(mirror.args[2]))).toBe(near);
      expect(width / 2 - Number(mirror.args[0])).toBe(far);
    }
  }
});
test("a crosshair is the same size on the glass however dense the screen is", () => {
  // Seven CSS pixels of arm is seven device pixels at 1 and fourteen at 2. It
  // used to be seven either way, so on a retina screen the cross was half the
  // size it is on a plain one — and at 125% it was four fifths of it.
  const at = (dpr: number): number => {
    const { near, far } = armOf(
      draw(scene(), { width: Math.round(1280 * dpr), height: Math.round(720 * dpr), dpr }),
      Math.round(1280 * dpr), Math.round(720 * dpr),
    );
    return far - near;
  };
  // Within half a device pixel of seven CSS pixels at each ratio, which is as
  // exact as whole pixels allow — and the point is that it scales at all.
  for (const dpr of [1, 1.25, 1.5, 2]) expect(Math.abs(at(dpr) - 7 * dpr)).toBeLessThanOrEqual(0.5);
  expect(at(1)).toBe(7);
  expect(at(2)).toBe(14);
});
test("a hit is marked white, a headshot red, and both are gone a quarter second later", () => {
@@ -165,21 +226,26 @@
test("a hit is marked white, a headshot red, and both are gone a quarter second
    w.time = 10;
    w.effects = only({ kind: "hitmark", at: 9.9, headshot: false });
  }));
  // One stroke, and it is the marker: the crosshair is filled, not stroked.
  const body = hit.calls.filter((c) => c.op === "stroke");
  expect(body.length).toBe(2); // the crosshair, then the marker
  expect(body[1]?.stroke).toBe("rgba(255,255,255,0.9)");
  expect(body.length).toBe(1);
  expect(aimed(hit)).toBe(true);
  expect(body[0]?.stroke).toBe("rgba(255,255,255,0.9)");
  const head = draw(scene((w) => {
    w.time = 10;
    w.effects = only({ kind: "hitmark", at: 9.9, headshot: true });
  }));
  expect(head.calls.filter((c) => c.op === "stroke")[1]?.stroke).toBe("rgba(255,90,90,0.95)");
  expect(head.calls.filter((c) => c.op === "stroke")[0]?.stroke).toBe("rgba(255,90,90,0.95)");
  const old = draw(scene((w) => {
    w.time = 10;
    w.effects = only({ kind: "hitmark", at: 9.7, headshot: true });
  }));
  expect(old.calls.filter((c) => c.op === "stroke").length).toBe(1);
  // A quarter second later the marker is gone and nothing is stroked at all —
  // the crosshair, which is still drawn, is four fills.
  expect(old.calls.filter((c) => c.op === "stroke").length).toBe(0);
  expect(aimed(old)).toBe(true);
});
// --- health, money and armour ----------------------------------------------
@@ -586,7 +652,9 @@
test("the same canvas turned sideways is drawn at the new size, not the one befo
  // The clock bar is 240 units wide at the scale the *new* width says. It is
  // the first filled rectangle that is not a full-screen wash — this world has
  // somebody shooting back in it, and the pain flash goes on before anything.
  const bar = after.find((c) => c.op === "fillRect" && c.args[2] !== 360) as Call;
  // (The four narrow rectangles before it are the crosshair's arms.)
  const bar = after.find((c) =>
    c.op === "fillRect" && c.args[2] !== 360 && Number(c.args[2]) > 100) as Call;
  expect(bar.args[2]).toBe(Math.round(240 * 0.7));
});
@@ -622,7 +690,9 @@
test("a flashed player gets white over the world, and the crosshair back before
  expect(whiteout(0.45)).toBeLessThan(0.5);
  const half = draw(scene((w) => { (w.me as Player).blind = 0.45; }));
  const wash = washes(half)[0] as Call;
  const crosshair = half.calls.findIndex((c) => c.op === "stroke");
  const crosshair = half.calls.findIndex((c) =>
    c.op === "fillRect" && Number(c.args[0]) > WIDTH / 2 &&
    Number(c.args[1]) <= HEIGHT / 2 && Number(c.args[1]) + Number(c.args[3]) >= HEIGHT / 2);
  expect(crosshair).toBeGreaterThanOrEqual(0);
  expect(half.calls.indexOf(wash)).toBeGreaterThan(crosshair);
@@ -26,7 +26,7 @@
 */
import {
  angleDelta, clamp, effectAt, overlay,
  angleDelta, clamp, effectAt, overlay, ratioOf,
  type Overlay, type Paint as Surface, type Vec3,
} from "../engine/index.ts";
import { drawMinimap } from "./minimap.ts";
@@ -77,9 +77,12 @@
const NOTHING: readonly string[] = [];
let tools: Overlay | null = null;
let builtOn: Paint | null = null;
function toolsFor(ctx: Paint, width: number, height: number): Overlay {
  if (tools === null || builtOn !== ctx || tools.width !== width || tools.height !== height) {
    tools = overlay(ctx, width, height);
function toolsFor(ctx: Paint, width: number, height: number, dpr: number): Overlay {
  if (
    tools === null || builtOn !== ctx ||
    tools.width !== width || tools.height !== height || tools.ratio !== ratioOf(dpr)
  ) {
    tools = overlay(ctx, width, height, dpr);
    builtOn = ctx;
  }
  return tools;
@@ -191,6 +194,11 @@
export const FOG = 0.9;
 * round, the feed and the scoreboard belong to the match and are the same from
 * anybody's eyes. Left out, the view is you, which is every frame of a round
 * you are alive in.
 *
 * `width` and `height` are the canvas's backing store — device pixels, not CSS
 * pixels — and `dpr` is how many of those go to a CSS pixel, so that the
 * crosshair is the same size on the glass and exact on the grid at 125% and
 * 150% as well as at 100%. Left out it is 1, which is what every test draws at.
 */
export function drawHud(
  ctx: Paint,
@@ -199,8 +207,9 @@
export function drawHud(
  height: number,
  showScoreboard: boolean,
  view: Player = world.me,
  dpr = 1,
): void {
  const ui = toolsFor(ctx, width, height);
  const ui = toolsFor(ctx, width, height, dpr);
  ctx.clearRect(0, 0, width, height);
  ctx.textBaseline = "alphabetic";
  const weapon = currentWeapon(view);
@@ -236,7 +245,11 @@
export function drawHud(
      ducking: view.duckAmount > 0.5,
      scoped: view.scoped,
    });
    ui.crosshair(width / 2, height / 2, 4 + spread * 14, 7, CROSSHAIR);
    // The gap and the arm in CSS pixels, turned into whole device pixels here:
    // the cross is the same size on the glass at 100%, 125% and 200%, and every
    // edge of it is a pixel's edge. `px` never rounds down to nothing, so the
    // tightest scoped crosshair is still a cross.
    ui.crosshair(width / 2, height / 2, ui.px(4 + spread * 14), ui.px(7), CROSSHAIR);
    if (view.scoped) {
      ctx.fillStyle = "rgba(0,0,0,0.55)";
      ctx.beginPath();
@@ -254,8 +267,11 @@
export function drawHud(
    const age = world.time - effect.at;
    if (age > 0.25) continue;
    ctx.strokeStyle = effect.headshot ? "rgba(255,90,90,0.95)" : "rgba(255,255,255,0.9)";
    ctx.lineWidth = 2;
    const r = 9 + age * 20;
    // On the diagonals, so there is no pixel grid to land on and no point
    // pretending there is — but it is still the same size on the glass at every
    // ratio, which is the half of this a dense screen used to lose.
    ctx.lineWidth = ui.px(2);
    const r = ui.px(9 + age * 20);
    ctx.beginPath();
    const arms: [number, number][] = [[1, 1], [-1, -1], [1, -1], [-1, 1]];
    for (const [dx, dy] of arms) {
@@ -32,6 +32,7 @@
import { expect, test } from "bun:test";
import { generateLevel, nameOf, seedFrom, seedOf } from "./generate.ts";
import type { Level } from "./level.ts";
import { boot, COPIED, gameMeshes, NOT_AN_ID, NOT_A_MAP, NOT_COPIED, type Frame } from "./main.ts";
import { NO_PICTURE } from "./support.ts";
import { HINT } from "./buy.ts";
import { DE_FORGE } from "./map.ts";
import { endRound, SHORT } from "./match.ts";
@@ -45,7 +46,7 @@
import { WEAPONS } from "./weapons.ts";
import { matchOf } from "../matchid.ts";
import { dailyOn, DAILY_LENGTH, saidToday } from "../daily.ts";
import { parseResult, type Result } from "../result.ts";
import { fakeStage, ORIGIN, type FakeStage } from "./stage.test-helper.ts";
import { DRIVER, fakeStage, ORIGIN, type FakeStage } from "./stage.test-helper.ts";
import { parseSituation } from "../plan/situation.ts";
import { createWorld, type World } from "./world.ts";
@@ -180,6 +181,12 @@
test("clicking play starts a match: the menu goes, the pointer is asked for, the
  expect(stage.by("menu").hidden).toBe(true);
  expect(stage.by("pause").hidden).toBe(true);
  expect(stage.scene.locks).toBe(1);
  // Raw counts, asked for by name. Without the dictionary Windows applies its
  // own pointer speed and "enhance pointer precision" to `movementX` before the
  // page sees it: the same flick of the same mouse is worth a different angle
  // depending on how fast it was flicked, and the sensitivity in the menu is
  // not the sensitivity you get.
  expect(stage.scene.lockOptions).toEqual([{ unadjustedMovement: true }]);
  expect(stage.ids.length).toBe(1);
  expect(stage.sounds).toContain("resume");
@@ -198,6 +205,25 @@
test("clicking play starts a match: the menu goes, the pointer is asked for, the
  expect(stage.by("fps").textContent).toContain("ms");
});
test("the HUD's backing store follows the screen's ratio, at 125% as well as at 100%", () => {
  // Windows at 125% is where #307 came from: the canvas box is still 800×450
  // CSS pixels and the backing store behind it is a quarter larger, so the HUD
  // and the scene under it are drawn on the same grid rather than two.
  const stage = playing();
  stage.window.devicePixelRatio = 1.25;
  stage.step(FRAME);
  expect([stage.hud.width, stage.hud.height]).toEqual([1000, 563]);
  // Every arm of the crosshair lands on a whole pixel: no smeared cross.
  const arms = stage.hud.paint.calls.filter((c) => c[0] === "fillRect" && Number(c[3]) < 250);
  expect(arms.length).toBeGreaterThanOrEqual(4);
  for (const arm of arms.slice(0, 4))
    for (const n of arm.slice(1, 5)) expect(Number.isInteger(Number(n))).toBe(true);
  // And a ratio past the cap is the cap: pixels past two cost and show nothing.
  stage.window.devicePixelRatio = 4;
  stage.step(FRAME);
  expect([stage.hud.width, stage.hud.height]).toEqual([1600, 900]);
});
test("nothing is heard before a match, and then your own boots are heard as your own", () => {
  const stage = painted(start(fakeStage()));
  // Nine frames of painting an atlas in front of a menu: the voice has not
@@ -296,6 +322,29 @@
test("the mouse turns the view, and while scoped it turns it by the zoom's share
  expect(world.me.yaw).toBeCloseTo(plainFrom - 0.484, 9);
});
test("the whole mouse plays the game: the wheel jumps and the thumb buttons do not navigate", () => {
  const stage = playing();
  stage.lock(true);
  const world = (stage.step(FRAME), worldOf(stage)) as World;
  world.match.phase = "live";
  world.match.timer = 60;
  expect(world.me.vel[2]).toBe(0);
  // A notch of the wheel is the jump a lot of people play with.
  stage.window.fire("wheel", { deltaY: -120 });
  stage.step(FRAME);
  expect(world.me.vel[2]).toBeGreaterThan(0);
  // And the two buttons under a thumb are Back and Forward in Edge on Windows:
  // pressed here they are bound actions and the browser is told to do nothing,
  // so a five-button mouse mid-round cannot take the page away from the match.
  let navigated = 0;
  stage.scene.fire("mousedown", { button: 3, preventDefault: () => void (navigated += 1) });
  expect(navigated).toBe(1);
  stage.scene.fire("auxclick", { button: 3, preventDefault: () => void (navigated += 1) });
  expect(navigated).toBe(2);
});
test("B opens the buy overlay: it is drawn, it keeps the pointer and the shelf takes the focus", () => {
  const stage = playing();
  stage.lock(true);
@@ -447,14 +496,16 @@
test("the buy overlay open suppresses fire, but not movement", () => {
  expect(stage.sounds.some((s) => s.startsWith("shot:"))).toBe(true);
});
test("losing the pointer pauses a running match, buy panel open or not", () => {
test("losing the pointer pauses a running match, buy panel open or not", async () => {
  const stage = playing();
  stage.lock(true);
  stage.lock(false);
  expect(stage.by("pause").hidden).toBe(false);
  // Resume asks for the pointer back.
  // Resume asks for the pointer back — and the panel goes when the browser has
  // answered, which is a promise and so a turn of the loop later.
  stage.by("resume").fire("click");
  await settled();
  expect(stage.by("pause").hidden).toBe(true);
  expect(stage.scene.locks).toBe(2);
@@ -470,15 +521,47 @@
test("losing the pointer pauses a running match, buy panel open or not", () => {
  expect(stage.by("pause").hidden).toBe(false);
});
test("a refused Resume stays paused and says so, rather than a match with a dead mouse", async () => {
  const stage = playing();
  stage.lock(true);
  stage.lock(false);
  expect(stage.by("pause").hidden).toBe(false);
  // Chromium — Edge included — will not grant a lock for about a second after
  // one was released, which is exactly how fast a person presses Resume after
  // Escape. The old code hid the panel on the way out and never read the
  // answer: the match ran on with no look, no trigger and nothing to click.
  stage.scene.refuseLock = true;
  stage.by("resume").fire("click");
  await settled();
  expect(stage.by("pause").hidden).toBe(false);
  expect(stage.by("esc").textContent).toContain("press Resume again");
  expect(stage.by("resume").focused).toBeGreaterThan(0);
  // Pressed again a moment later, when the browser will give it: back in.
  stage.scene.refuseLock = false;
  stage.by("resume").fire("click");
  await settled();
  expect(stage.by("pause").hidden).toBe(true);
});
test("Escape pauses and keeps the screen where the browser hands the key over", async () => {
  const stage = playing();
  stage.press("KeyF");
  stage.lock(true);
  const box = stage.by("stage");
  expect(stage.document.fullscreenElement).toBe(box);
  // The key was asked for on the way into full screen, and granted a microtask
  // later: from here on Escape is the page's and not the browser's.
  expect(stage.keyboard.locked).toEqual(["Escape"]);
  // The keys were asked for on the way into full screen, and granted a microtask
  // later: from here on Escape is the page's and not the browser's — and so is
  // every key this game binds, because on Windows the browser's own shortcuts
  // are Ctrl and a letter, and Ctrl here is crouch: crouch-and-forward is
  // Ctrl+W, which closes the tab, and crouch-and-reload is Ctrl+R, which
  // reloads the match away.
  const locked = stage.keyboard.locked ?? [];
  expect(locked[0]).toBe("Escape");
  for (const code of ["KeyW", "KeyR", "KeyD", "Digit1", "Tab"]) expect(locked).toContain(code);
  // Asked for once each, however many tables name it.
  expect(new Set(locked).size).toBe(locked.length);
  await Promise.resolve();
  stage.window.fire("keydown", { code: "Escape" });
@@ -493,6 +576,7 @@
test("Escape pauses and keeps the screen where the browser hands the key over",
  // And Resume goes back into the match without asking for a screen it already
  // has: one pointer lock, no second `requestFullscreen`.
  stage.by("resume").fire("click");
  await settled();
  expect(stage.by("pause").hidden).toBe(true);
  expect(box.fullscreens).toBe(1);
  expect(stage.scene.locks).toBe(2);
@@ -958,6 +1042,47 @@
test("no WebGL2 is a sentence on the page, not an exception", () => {
  expect(stage.atlases.length).toBe(0);
});
test("a refused shader is a sentence and a line to paste, not a black canvas", () => {
  const log = "ERROR: 0:7: 'texture' : no matching overloaded function found";
  const stage = painted(start(fakeStage({ refuseShaders: log })));
  // The driver took the context and then refused the program, which is what
  // ANGLE on Direct3D does. The menu says so in words.
  expect(stage.by("menu").innerHTML).toContain(NO_PICTURE);
  expect(stage.by("menu").innerHTML).toContain("Nothing else on the page is affected");
  // And the line under it carries the browser, the driver and what it said —
  // which is the whole of what a bug report from a Windows machine was missing.
  const line = stage.by("supportline").textContent ?? "";
  expect(line).toContain("Edge 128 on Windows");
  expect(line).toContain("Direct3D11");
  expect(line).toContain("no matching overloaded function found");
  // The page is alive: nothing is drawn, nothing throws on the next frame, and
  // the atlas that was paid for is the one that was painted.
  expect(stage.draws.length).toBe(0);
  stage.step(FRAME);
  expect(stage.by("menu").hidden).toBe(false);
});
test("the line says what this browser is, and says so before anything is built", () => {
  const stage = start(fakeStage());
  const line = stage.by("supportline").textContent ?? "";
  expect(line).toBe("Edge 128 on Windows · " + DRIVER + " · 960×540 at 1× dpr");
  // A browser that refuses `WEBGL_debug_renderer_info` is named as one.
  const quiet = start(fakeStage({ driver: null }));
  expect(quiet.by("supportline").textContent).toContain("driver not named");
  // Even a browser with no WebGL2 at all has the line: it is the report that
  // says which of the two happened.
  const none = start(fakeStage({ webgl: false }));
  expect(none.by("supportline").textContent).toContain("Edge 128 on Windows");
});
test("the copy control copies the line it is under, and hides where there is no clipboard", () => {
  const stage = start(fakeStage());
  const button = stage.by("copysupport");
  expect(button.hidden).toBe(false);
  button.fire("click");
  expect(stage.copied).toEqual([stage.by("supportline").textContent ?? ""]);
});
test("every mesh name a scene of this game can place is handed in at construction", () => {
  // The renderer keeps what it is given and resolves nothing, so a name this
  // table misses is an exception on the frame a player first holds that gun.
@@ -67,10 +67,12 @@
 */
import { createAudio, type Audio } from "./audio.ts";
import { CS_KEYS, CS_MOUSE, CS_TAP, readIntent, slotIndex } from "./binding.ts";
import { CS_KEYS, CS_MOUSE, CS_TAP, CS_WHEEL, readIntent, slotIndex } from "./binding.ts";
import { drawHud, type Paint } from "./hud.ts";
import { NO_PICTURE, NO_PICTURE_SAYS, supportLine, type Facts, type Running } from "./support.ts";
import {
  attachButtons, clamp, createControls, createEscape, createFullscreen, createLoop, createRenderer,
  attachButtons, backing, clamp, createControls, createEscape, createFullscreen, createLoop,
  createRenderer,
  effectAt,
  painter,
  type Button, type Camera, type KeyboardLock, type Listens, type Mesh,
@@ -155,6 +157,9 @@
export const NO_MAKE = "A room could not be made right now. Try again in a momen
export const COPIED = "Copied";
export const NOT_COPIED = "Copy failed — the link still works";
/** The same, for the line about this browser: there is no link to fall back to. */
export const NOT_COPIED_LINE = "Copy failed — the line above can be selected";
// --- the host: what a page has to be for this frame to run on it -----------
/** One element on the page, as far as this file is concerned. */
@@ -196,8 +201,14 @@
export type Link = Panel & { getAttribute(name: string): string | null };
/** A button that says which of two states it is in — the full screen one does. */
export type Toggle = Panel & { setAttribute(name: string, value: string): void };
/** A canvas on the stage: the scene is drawn into, the HUD is painted on. */
export type Stage = Sheet & { requestPointerLock(): unknown };
/**
 * A canvas on the stage: the scene is drawn into, the HUD is painted on.
 *
 * The pointer is asked for through `Controls.lock` rather than here, so this
 * says only that a browser may have the method — an iPhone has not, and a game
 * that called it blind would throw on the first press of Play.
 */
export type Stage = Sheet & { requestPointerLock?(options?: { unadjustedMovement?: boolean }): unknown };
export type PageDocument = Listens & {
  readonly pointerLockElement: unknown;
@@ -289,6 +300,13 @@
export type Host = {
  now(): number;
  /** Null when this browser has no WebGL2: the menu says so and nothing starts. */
  createRenderer(canvas: Stage): BuildRenderer | null;
  /**
   * What this browser is, for the one line a bug report pastes: the user agent,
   * the name the WebGL2 driver gives itself, the stage's size and the pixel
   * ratio. Gathered by the host because every one of those is a browser's, and
   * turned into a sentence by `./support.ts`, which is a pure function.
   */
  facts(canvas: Stage): Facts;
  createAudio(): Audio;
  /**
   * Where this page is, so a link to a map is a whole URL somebody can paste
@@ -417,6 +435,47 @@
export function boot(host: Host): Frame {
  const againButton = by("again");
  const leaveButton = by("leave");
  // What this browser is, said once, in the one place a person can copy it. It
  // is gathered before anything is built, so a boot that fails still has it.
  const supportSays = by("supportline");
  const copySupport = by<Panel & { disabled: boolean }>("copysupport");
  const facts = host.facts(sceneCanvas);
  /**
   * The moving half of the line — how the pointer was granted, whose Escape it
   * is, what a frame costs — asked for at the moment the line is written rather
   * than kept up to date behind a closed panel. It answers nothing until the
   * engine's pieces exist, a few dozen lines below: the line is on the page
   * before the first press of Play, and a browser with no WebGL2 never gets past
   * the guard that follows.
   */
  let doing: () => Running = () => ({});
  /**
   * The line, on the page. `failure` is what the picture died of, when it died:
   * `textContent` and never `innerHTML`, because every piece of this came from
   * a driver or a user agent and neither is this page's to trust.
   */
  const saySupport = (failure?: string): void => {
    supportSays.textContent = supportLine(facts, { ...doing(), failure });
  };
  saySupport();
  // Written again each time the panel is opened, because half of it is only true
  // while a match is running and a person opens this *after* the trouble. A
  // closed panel costs nothing: no timer, no frame, no listener but this one.
  by("support").addEventListener("toggle", () => saySupport());
  // The copy control is hidden until a clipboard is known to be there: the line
  // is selectable text either way, and a button that copies nothing is worse
  // than no button.
  if (host.copy !== undefined) {
    copySupport.hidden = false;
    copySupport.addEventListener<{ preventDefault(): void }>("click", () => {
      const said = supportSays.textContent ?? "";
      void host.copy?.(said).then(
        () => void (copySupport.textContent = COPIED),
        () => void (copySupport.textContent = NOT_COPIED_LINE),
      );
    });
  }
  const maybeBuild = host.createRenderer(sceneCanvas);
  if (maybeBuild === null) {
    menu.innerHTML = "<h2>No WebGL2</h2><p>This browser cannot run the game. Everything else on the page still works.</p>";
@@ -431,7 +490,7 @@
export function boot(host: Host): Frame {
  const audio = host.createAudio();
  const controls = createControls(
    { surface: sceneCanvas, window: win, document: doc },
    { keys: CS_KEYS, mouse: CS_MOUSE, sensitivity: Number(sensField.value) || 2.2 },
    { keys: CS_KEYS, mouse: CS_MOUSE, wheel: CS_WHEEL, sensitivity: Number(sensField.value) || 2.2 },
  );
  attachButtons(doc.querySelectorAll("[data-action]"), controls, { tap: CS_TAP });
@@ -478,7 +537,62 @@
export function boot(host: Host): Frame {
   * gives back. `P` is the same press for a player who would rather not find out
   * which browser they are on.
   */
  const escape = createEscape({ window: win, document: doc, keyboard: host.keyboard }, full);
  const escape = createEscape(
    { window: win, document: doc, keyboard: host.keyboard },
    full,
    // Every key this game binds, asked for by name. On Windows the browser owns
    // half of them the moment crouch is held — Ctrl+R reloads the round away,
    // Ctrl+W closes the tab, Ctrl+1 to Ctrl+9 change it — and full screen plus
    // this lock is the only place a browser hands them over. Out of full screen
    // they stay the browser's, which is what `guardUnload` below is for.
    Object.keys(CS_KEYS),
  );
  /**
   * The other half of the same Windows problem, for the match that is not on
   * the whole screen: out of full screen no lock is granted, so Ctrl+R still
   * reloads and Ctrl+W still closes — and with crouch on Ctrl a player hits one
   * of them by playing. A match in progress is worth a confirmation, so the
   * browser is asked to put its own "leave this page?" in the way. Only while a
   * match is running: a page nobody is playing must not argue about being left.
   */
  win.addEventListener("beforeunload", (event: { preventDefault(): void; returnValue?: unknown }) => {
    if (!running) return;
    event.preventDefault();
    // Chromium wants the old property set as well as the new call, and shows
    // its own sentence either way: the string is never read by anybody.
    event.returnValue = "";
  });
  /** Whether the pointer this page is played with is a finger. */
  const coarse = (): boolean => win.matchMedia("(pointer: coarse)").matches;
  /**
   * Take the pointer, inside the gesture that asked for it, and only leave the
   * pause once the browser has actually handed it over.
   *
   * A refusal is a real thing and not a rare one: Chromium — Edge included —
   * will not grant pointer lock for about a second after Escape released it,
   * which is exactly the moment a paused game asks for it back. The old code
   * asked, ignored the answer and hid the panel anyway, so a player pressing
   * Resume too soon after Esc landed in a running match with a dead mouse: no
   * look, no trigger, nothing to click. Now the panel stays, says so, and
   * Resume is still under the cursor.
   *
   * A phone is the other way round: there is no pointer to lock, the refusal is
   * the honest answer, and the touch controls are what the match is played
   * with — so a coarse pointer plays on.
   */
  async function takePointer(): Promise<void> {
    const got = await controls.lock();
    if (!got && !coarse()) {
      escHint.textContent = "Paused. The browser kept the pointer just then — press Resume again.";
      show(pause, true);
      resumeButton.focus();
      return;
    }
    show(pause, false);
  }
  const loop = createLoop({ tick: TICK }, {
    requestAnimationFrame: (callback) => win.requestAnimationFrame(callback),
@@ -544,10 +658,26 @@
export function boot(host: Host): Frame {
  let roomBuy: Item | null = null;
  let lastSound = 0;
  let frameAverage = 16.7;
  /** Whether a frame has actually been drawn, so the average above means something. */
  let painted = false;
  let posted = -1;
  /** Whether the post that said this match is finished has been made. */
  let postedFinal = false;
  // Now there is a game to ask, the support line has its second half. Every
  // member is read at the moment the line is written: the pointer the player is
  // aiming with, whose Escape it is on this browser, whether full screen is
  // offered at all, the fixed step, and what a frame costs — left out until one
  // has been drawn, because 16.7 before the first frame is a number nobody
  // measured. A browser with no Keyboard Lock API says nothing rather than "no".
  doing = () => ({
    pointer: controls.pointer,
    keys: escape.supported ? escape.held : undefined,
    fullscreen: full.supported,
    hz: 1 / TICK,
    frameMs: painted ? frameAverage : undefined,
  });
  const show = (element: Panel, on: boolean): void => {
    element.hidden = !on;
  };
@@ -910,14 +1040,12 @@
export function boot(host: Host): Frame {
    const level = levelOfChoice(choice, choice === "generated" ? seedFrom(nextMatch()) : 0);
    // Device pixels, like the HUD's canvas: the CSS box is a fixed square and
    // this is what the browser is actually giving us of it.
    const dpr = Math.min(win.devicePixelRatio || 1, 2);
    const w = Math.round(planCanvas.clientWidth * dpr);
    const h = Math.round(planCanvas.clientHeight * dpr);
    const [w, h] = backing(planCanvas.clientWidth, planCanvas.clientHeight, win.devicePixelRatio);
    if (planCanvas.width !== w || planCanvas.height !== h) {
      planCanvas.width = w;
      planCanvas.height = h;
    }
    drawPreview(planCtx, level, w, h);
    drawPreview(planCtx, level, w, h, win.devicePixelRatio);
    planAlt.textContent = previewText(level);
  }
@@ -1064,7 +1192,7 @@
export function boot(host: Host): Frame {
    show(summaryPanel, false);
    show(touchPanel, win.matchMedia("(pointer: coarse)").matches);
    audio.resume();
    void sceneCanvas.requestPointerLock();
    void takePointer();
    host.storage.setItem("cs.name", name);
  }
@@ -1111,7 +1239,10 @@
export function boot(host: Host): Frame {
    show(summaryPanel, false);
    show(touchPanel, win.matchMedia("(pointer: coarse)").matches);
    audio.resume();
    void sceneCanvas.requestPointerLock();
    // The same ask as a match of your own: raw counts first, and the answer read
    // — a room is exactly where a silently refused lock would be worst, because
    // the round starts on the server whether this page took the mouse or not.
    void takePointer();
  }
  joinRoom.addEventListener("click", () => {
@@ -1162,9 +1293,10 @@
export function boot(host: Host): Frame {
  // Resume is the gesture that puts back whatever the pause cost: the screen
  // first, if a browser took it, and then the pointer.
  resumeButton.addEventListener("click", () => {
    show(pause, false);
    restoreFull();
    void sceneCanvas.requestPointerLock();
    // The panel goes when the pointer comes back and not before: see
    // `takePointer`. A browser that refuses leaves the pause where it was.
    void takePointer();
  });
  /**
   * Back to the page: the menu, nothing of the match left running, and the
@@ -1318,12 +1450,25 @@
export function boot(host: Host): Frame {
  function frame(elapsed: number): void {
    frameAverage += (elapsed * 1000 - frameAverage) * 0.05;
    painted = true;
    // One layer of the atlas per frame, and the browser has the rest of it: the
    // menu is clickable the whole way through. The last slice is what builds
    // the renderer, before anything has been drawn with it.
    if (renderer === null) {
      if (!atlas.paint(TEX_SIZE)) return;
      renderer = build(atlas.bytes);
      // A driver that refuses a shader throws here with its own info log —
      // ANGLE on Direct3D rejects programs a desktop driver waves through, so
      // this is the common way a Windows machine ends up with a black canvas.
      // It is a sentence and a line to paste, not silence, and the rest of the
      // page — the leaderboard, the map plan, the reference — is untouched.
      try {
        renderer = build(atlas.bytes);
      } catch (failure) {
        loop.stop();
        menu.innerHTML = `<h2>${NO_PICTURE}</h2><p>${NO_PICTURE_SAYS}</p>`;
        saySupport(failure instanceof Error ? failure.message : String(failure));
        return;
      }
      ready();
      return;
    }
@@ -1423,14 +1568,16 @@
export function boot(host: Host): Frame {
    renderer.draw(buildScene(world, camera, frameScene, view), elapsed);
    const dpr = Math.min(win.devicePixelRatio || 1, 2);
    const w = Math.round(hudCanvas.clientWidth * dpr);
    const h = Math.round(hudCanvas.clientHeight * dpr);
    // The same backing store the renderer gives the scene canvas underneath —
    // one function, so the HUD's pixels and the world's are the same pixels —
    // and the ratio goes through to the HUD, which needs it to put the
    // crosshair on the grid rather than across it. See `engine/pixels.ts`.
    const [w, h] = backing(hudCanvas.clientWidth, hudCanvas.clientHeight, win.devicePixelRatio);
    if (hudCanvas.width !== w || hudCanvas.height !== h) {
      hudCanvas.width = w;
      hudCanvas.height = h;
    }
    drawHud(hudCtx, world, w, h, scoreboard, view);
    drawHud(hudCtx, world, w, h, scoreboard, view, win.devicePixelRatio);
    by("fps").textContent = `${(1000 / Math.max(1, frameAverage)).toFixed(0)} fps · ${frameAverage.toFixed(1)} ms`;
  }
  loop.start(frame);
@@ -1476,6 +1623,29 @@
export function gameMeshes(level: Level = DE_FORGE): Record<string, Mesh> {
 * question and the answer — which is the only way the engine's `createRenderer`
 * returns null, and why the line below says so rather than pretending.
 */
/**
 * What the WebGL2 driver calls itself — on Windows the ANGLE line naming the
 * Direct3D device, which is the single most useful thing in a report from that
 * platform — or null for a browser that will not say.
 *
 * Every step of it is optional and every step is guarded: the extension is a
 * browser's to refuse, a context stub in a test has no `getExtension` at all,
 * and a driver that throws inside one is still a driver whose game must boot.
 * A name nobody can read is worth less than a page that starts.
 */
function driverName(surface: HTMLCanvasElement): string | null {
  try {
    const gl = surface.getContext("webgl2");
    if (gl === null || typeof gl.getExtension !== "function") return null;
    const info = gl.getExtension("WEBGL_debug_renderer_info");
    if (info === null) return null;
    const name = gl.getParameter(info.UNMASKED_RENDERER_WEBGL);
    return typeof name === "string" && name !== "" ? name : null;
  } catch {
    return null;
  }
}
const browser = (): Host => ({
  document,
  window,
@@ -1500,6 +1670,23 @@
const browser = (): Host => ({
  // asked for: a browser without it has no such member, and the copy control
  // stays the plain link it is rendered as.
  copy: navigator.clipboard === undefined ? undefined : (text) => navigator.clipboard.writeText(text),
  // Everything a browser will say about itself, asked for once. The driver's
  // own name is behind `WEBGL_debug_renderer_info`, which a browser is entitled
  // to refuse — Firefox does, in some configurations — and a refusal is null
  // here and a plain "driver not named" in the line.
  facts: (canvas) => {
    const surface = canvas as unknown as HTMLCanvasElement;
    return {
      userAgent: navigator.userAgent,
      renderer: driverName(surface),
      stage: [surface.clientWidth, surface.clientHeight],
      dpr: window.devicePixelRatio,
      // What the server said it built this page from: `<meta name=build>`, which
      // `pages/shell.ts` writes beside the commit in the header. A local run has
      // no commit and so no meta, and the line simply does not mention one.
      commit: document.querySelector('meta[name="build"]')?.getAttribute("content") ?? undefined,
    };
  },
  createRenderer: (canvas) => {
    const surface = canvas as unknown as HTMLCanvasElement;
    if (surface.getContext("webgl2") === null) return null;
@@ -96,13 +96,19 @@
function drawSpawns(ui: Overlay, at: Projection, points: readonly Vec3[], half:
 * It clears first, because it is drawn once per choice rather than once a frame
 * and the map before it was a different shape.
 */
export function drawPreview(ctx: Paint, level: Level, width: number, height: number): void {
export function drawPreview(
  ctx: Paint,
  level: Level,
  width: number,
  height: number,
  dpr = 1,
): void {
  ctx.clearRect(0, 0, width, height);
  const side = Math.min(width, height);
  if (side <= 0) return;
  const x = Math.round((width - side) / 2);
  const y = Math.round((height - side) / 2);
  const ui = overlay(ctx, side, side);
  const ui = overlay(ctx, side, side, dpr);
  const at = drawPlan(ui, level, x, y, side);
  // One cell of this map, in pixels of this square, and never under a pixel.
  const half = Math.max(1, Math.round(side / Math.max(level.grid.width, level.grid.height) / 2));
@@ -102,6 +102,16 @@
export type StageCanvas = FakeCanvas & { paint: FakePaint; gl: GlRecorder | null
/** Where this stub page is, for the whole URL a copied link has to be. */
export const ORIGIN = "https://cs.example";
/**
 * The browser this stub page says it is, and the driver behind its picture:
 * Edge on Windows over ANGLE's Direct3D, because that is the machine #307 was
 * reported from and the one the support line exists for.
 */
export const USER_AGENT =
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) " +
  "Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0";
export const DRIVER = "ANGLE (NVIDIA, NVIDIA GeForce RTX 3060 Direct3D11 vs_5_0 ps_5_0, D3D11)";
/**
 * What this page's wall clock says until a test moves it: noon UTC on an
 * ordinary day, so `src/daily.ts` has a day to derive the match of the day
@@ -210,7 +220,7 @@
export type FakeStage = {
 * contract between the page and this file, so `src/server.test.ts` checks the
 * served page against this same list rather than a second copy of it.
 */
export const PAGE_IDS = ["weights", "stage", "scene", "hud", "menu", "pause", "summary", "buy", "buyshelf", "buysays", "touch", "stats", "saved", "name", "length", "side", "sens", "map", "mapseed", "matchid", "onid", "onmap", "today", "ontoday", "willplay", "plan", "planalt", "copymap", "play", "room", "joinroom", "makeroom", "roomsaid", "prep", "resume", "quit", "esc", "pauseid", "sumtitle", "sumscore", "sumyou", "sumboard", "sumsaved", "again", "leave", "playing", "mapname", "share", "fps", "full"];
export const PAGE_IDS = ["weights", "stage", "scene", "hud", "menu", "pause", "summary", "buy", "buyshelf", "buysays", "touch", "stats", "saved", "name", "length", "side", "sens", "map", "mapseed", "matchid", "onid", "onmap", "today", "ontoday", "willplay", "plan", "planalt", "copymap", "play", "room", "joinroom", "makeroom", "roomsaid", "prep", "resume", "quit", "esc", "pauseid", "sumtitle", "sumscore", "sumyou", "sumboard", "sumsaved", "again", "leave", "playing", "mapname", "share", "fps", "full", "support", "supportline", "copysupport"];
/** The ones the server renders with `hidden` on them: the page starts at the menu. */
const HIDDEN = ["pause", "summary", "buy", "touch", "full"];
@@ -251,6 +261,14 @@
export function fakeStage(
    hold?: boolean;
    /** Leave the `#weights` link off the page entirely: a page that named nothing. */
    unlinked?: boolean;
    /**
     * A driver that takes the context and then refuses the shaders, which is
     * what ANGLE on Direct3D does with GLSL a desktop driver waves through: the
     * build throws with the driver's own info log, as `createRenderer` does.
     */
    refuseShaders?: string;
    /** What `WEBGL_debug_renderer_info` names, and null for a browser that refuses it. */
    driver?: string | null;
    /**
     * The endpoint meta a deployment with a TypeSafe key renders: where the page
     * asks for a round to be planned. Absent is every other deployment, which
@@ -357,10 +375,17 @@
export function fakeStage(
      // The wall clock, which is only ever asked which day it is: a test sets
      // `stage.wall` and the page is on that day, without waiting for one.
      now: () => stub.wall,
      facts: (_canvas: Stage) => ({
        userAgent: USER_AGENT,
        renderer: options.driver === undefined ? DRIVER : options.driver,
        stage: [960, 540],
        dpr: 1,
      }),
      createRenderer: (_canvas: Stage): BuildRenderer | null =>
        options.webgl === false
          ? null
          : (bytes) => {
            if (options.refuseShaders !== undefined) throw new Error(options.refuseShaders);
            // Every atlas the frame ever built a renderer out of, kept whole:
            // a test says there was one of them and that it was finished.
            atlases.push(bytes);
@@ -0,0 +1,95 @@
import { expect, test } from "bun:test";
import { browserOf, NO_PICTURE, NO_PICTURE_SAYS, supportLine } from "./support.ts";
const EDGE =
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) " +
  "Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0";
const SAFARI =
  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) " +
  "Version/17.5 Safari/605.1.15";
const ANGLE = "ANGLE (Intel, Intel(R) UHD Graphics 620 Direct3D11 vs_5_0 ps_5_0, D3D11)";
const FACTS = { userAgent: EDGE, renderer: ANGLE, stage: [960, 540] as [number, number], dpr: 1.25 };
test("the browser is named the short way, and Edge is not Chrome", () => {
  // The order matters: Edge says Chrome too, and says it first.
  expect(browserOf(EDGE)).toBe("Edge 128 on Windows");
  expect(browserOf(EDGE.replace(" Edg/128.0.0.0", ""))).toBe("Chrome 128 on Windows");
  expect(browserOf(SAFARI)).toBe("Safari 17 on macOS");
  expect(browserOf("Mozilla/5.0 (X11; Linux x86_64) Firefox/130.0")).toBe("Firefox 130 on Linux");
});
test("a user agent it cannot read is handed back rather than guessed at", () => {
  // The honest answer to a string with none of the tokens in it is the string:
  // a report from a browser this file has never heard of is still a report.
  expect(browserOf("curl/8.6.0")).toBe("curl/8.6.0");
  expect(browserOf("")).toBe("an unnamed browser");
  expect(browserOf("   ")).toBe("an unnamed browser");
});
test("the line is one line: the browser, the driver, the stage and the ratio", () => {
  expect(supportLine(FACTS)).toBe(
    "Edge 128 on Windows · ANGLE (Intel, Intel(R) UHD Graphics 620 Direct3D11 vs_5_0 ps_5_0, D3D11) · " +
      "960×540 at 1.25× dpr",
  );
  // A browser that refuses `WEBGL_debug_renderer_info` says so rather than
  // printing the word undefined at somebody who is about to file a bug.
  expect(supportLine({ ...FACTS, renderer: null })).toContain("driver not named");
  // And the ratio is written as a person writes it.
  expect(supportLine({ ...FACTS, dpr: 1.5 })).toContain("at 1.5× dpr");
  expect(supportLine({ ...FACTS, dpr: Number.NaN })).toContain("at 1× dpr");
  expect(supportLine({ ...FACTS, dpr: 0 })).toContain("at 1× dpr");
  expect(supportLine({ ...FACTS, stage: [960.4, 540.6] })).toContain("960×541");
});
test("the second half is what the game is doing, and only what it was told", () => {
  // Nothing about the run is nothing printed: the example has no pointer to
  // lock and no keyboard lock to be granted, and a line for it says neither.
  expect(supportLine(FACTS).split(" · ")).toHaveLength(3);
  const line = supportLine(
    { ...FACTS, commit: "ced16d8" },
    { pointer: "raw", keys: true, fullscreen: true, hz: 64, frameMs: 16.66 },
  );
  expect(line).toBe(
    "Edge 128 on Windows · ANGLE (Intel, Intel(R) UHD Graphics 620 Direct3D11 vs_5_0 ps_5_0, D3D11) · " +
      "960×540 at 1.25× dpr · pointer raw · Esc held · full screen · 64 Hz · 16.7 ms frame · build ced16d8",
  );
  // The three the report of #307 turns on: a pointer Windows adjusted, a Play
  // that locked nothing, and a browser that never had the keyboard lock at all.
  expect(supportLine(FACTS, { pointer: "adjusted" })).toContain("pointer adjusted");
  expect(supportLine(FACTS, { pointer: null })).toContain("pointer free");
  expect(supportLine(FACTS, { pointer: "unknown" })).toContain("pointer unknown");
  expect(supportLine(FACTS, { keys: false })).toContain("Esc the browser's");
  expect(supportLine(FACTS, { fullscreen: false })).toContain("no full screen");
  // A number that is not one is left out rather than printed as NaN.
  expect(supportLine(FACTS, { hz: Number.NaN, frameMs: Number.POSITIVE_INFINITY }))
    .toBe(supportLine(FACTS));
  // And a build nobody named — a local run, where the server has no commit.
  expect(supportLine({ ...FACTS, commit: "" })).not.toContain("build");
});
test("what the driver said is the end of the line, and it is one line", () => {
  const log = "ERROR: 0:14: 'texture' : no matching overloaded function found\n\nfragment shader";
  const line = supportLine(FACTS, { failure: log });
  expect(line).toContain("no matching overloaded function found");
  expect(line.split("\n")).toHaveLength(1);
  // A middle dot inside a driver's own string would read as another field, so
  // it is not one. Neither is a control character.
  expect(supportLine(FACTS, { failure: "a · b\u0007c" }).endsWith("a b c")).toBe(true);
  // Nothing to say is nothing said: no trailing separator.
  expect(supportLine(FACTS, { failure: "   " })).toBe(supportLine(FACTS));
  expect(supportLine(FACTS, { failure: "" })).toBe(supportLine(FACTS));
});
test("every piece is cut to a length, because every piece comes from outside", () => {
  const long = "x".repeat(400);
  const line = supportLine({ ...FACTS, renderer: long, commit: long }, { failure: long });
  for (const piece of line.split(" · ")) expect(piece.length).toBeLessThanOrEqual(120);
  expect(line).toContain("…");
});
test("the sentence a refused shader gets says what still works", () => {
  expect(NO_PICTURE).toBe("The picture could not be built");
  expect(NO_PICTURE_SAYS).toContain("Nothing else on the page is affected");
  expect(NO_PICTURE_SAYS).toContain("paste it into a bug report");
});
@@ -0,0 +1,175 @@
/**
 * One line of what this browser is doing, for a person who is about to say the
 * game is buggy.
 *
 * "Buggy on Windows in Edge" is a true sentence and an unanswerable one: a
 * refused shader, a driver that paints nothing, a pointer that was never
 * granted and a display at 125% all read the same from the outside. This is the
 * line that tells them apart — the browser, the platform, the driver behind the
 * WebGL2 context, the size and the pixel ratio of the screen it is drawing at,
 * and then what the game is doing in it: how the pointer was granted, whether
 * Escape is the page's, whether full screen is there at all, the tick rate, what
 * a frame costs and the build it is all running on — short enough to paste into
 * an issue and boring enough that pasting one costs nothing.
 *
 * It is a pure function of plain facts: `main.ts` gathers them from the
 * browser, this builds the sentence, and a test holds the sentence. Every piece
 * of it comes from outside the page — a driver's own string, a user agent — so
 * every piece is trimmed, stripped of control characters and cut to a length
 * before it goes anywhere near the DOM.
 */
/** What the page can find out about the browser it is running in. */
export type Facts = {
  /** `navigator.userAgent`. */
  userAgent: string;
  /**
   * What the WebGL2 driver calls itself — `WEBGL_debug_renderer_info`'s
   * unmasked renderer, which on Windows is the ANGLE line naming the D3D11
   * device. Null where the extension is refused, which is a browser's right.
   */
  renderer: string | null;
  /** The stage's size in CSS pixels, as the page laid it out. */
  stage: [number, number];
  /** `window.devicePixelRatio`: 1 on a plain screen, 1.25 and 1.5 on Windows. */
  dpr: number;
  /**
   * The commit this deployment was built from, server-rendered into the page —
   * a report about a preview and a report about production are different
   * reports. Left out where the server did not say, which is a local run.
   */
  commit?: string;
};
/**
 * What the game is doing *now*, as against what the browser is: the half of the
 * line that is only true while a match is running, gathered at the moment
 * somebody opens the panel rather than kept up to date behind their back.
 *
 * Every member is optional because every one of them is a different game's, and
 * the example has no scoreboard, no keyboard lock and no pointer to report on.
 */
export type Running = {
  /**
   * How the locked pointer is sending counts — the engine's `PointerMode` — or
   * null while the game has no pointer. This is the field that separates "the
   * mouse feels wrong on Windows" from "Play did nothing": `adjusted` is the
   * first, `null` after pressing Play is the second.
   */
  pointer?: "raw" | "adjusted" | "unknown" | null;
  /**
   * Whether the Keyboard Lock API handed Escape over, false where it exists and
   * has not, and left out on a browser that has no such API at all.
   */
  keys?: boolean;
  /** Whether this browser will put the stage on the whole screen. */
  fullscreen?: boolean;
  /** The fixed step this game simulates at, in Hz. */
  hz?: number;
  /** The smoothed cost of a frame, in milliseconds. */
  frameMs?: number;
  /** What the picture died of, when it died: a driver's own shader log. */
  failure?: string;
};
/** The longest any one piece of this may be before it is cut short. */
const PIECE = 120;
/**
 * One piece of the line: trimmed, control characters and separators removed —
 * a driver string with a newline in it must not become two lines, and a middle
 * dot in it must not read as another field — and cut to `PIECE` characters, or
 * to fewer where the piece carries a word of this file's own in front of it.
 */
function piece(text: string, most = PIECE): string {
  const flat = text.replace(/[\u0000-\u001f\u007f·]+/g, " ").replace(/\s+/g, " ").trim();
  return flat.length > most ? `${flat.slice(0, most - 1)}…` : flat;
}
/** A piece with a label: `build abc1234`, and the whole of it inside `PIECE`. */
const labelled = (label: string, text: string): string =>
  `${label} ${piece(text, PIECE - label.length - 1)}`;
/**
 * The browser and the platform, named the short way, out of a user agent.
 *
 * A user agent is a lie by design and this does not pretend otherwise: it looks
 * for the handful of tokens that actually distinguish the cases this game
 * behaves differently in — Edge and Chrome are both Chromium and say so in that
 * order, Windows is where the pointer and the shortcuts differ — and falls back
 * to the raw string, which is the honest answer when the tokens are not there.
 */
export function browserOf(userAgent: string): string {
  const ua = piece(userAgent);
  const name =
    /\bEdg\//.test(ua) ? "Edge"
    : /\bOPR\//.test(ua) ? "Opera"
    : /\bFirefox\//.test(ua) ? "Firefox"
    : /\bChrome\//.test(ua) ? "Chrome"
    : /\bSafari\//.test(ua) ? "Safari"
    : null;
  const os =
    /Windows NT/.test(ua) ? "Windows"
    : /Mac OS X/.test(ua) ? "macOS"
    : /Android/.test(ua) ? "Android"
    : /(iPhone|iPad|iPod)/.test(ua) ? "iOS"
    : /Linux/.test(ua) ? "Linux"
    : null;
  if (name === null || os === null) return ua === "" ? "an unnamed browser" : ua;
  // Each browser keeps its own version under its own token — and Safari keeps
  // it under `Version/`, because `Safari/605` is the engine's build and has not
  // moved in years.
  const token = name === "Edge" ? "Edg" : name === "Safari" ? "Version" : name;
  const version = new RegExp(`${token}/(\\d+)`).exec(ua)?.[1];
  return `${name}${version === undefined ? "" : ` ${version}`} on ${os}`;
}
/**
 * The line itself: what the browser is, then what the game is doing in it, then
 * what went wrong if something did.
 *
 * `run.failure` is what the boot threw, when it threw, and it goes last because
 * it is the longest: a refused shader's info log is the single most useful thing
 * in a report from a Windows machine, because ANGLE on D3D11 rejects programs a
 * desktop driver takes. Anything a caller leaves out of `run` is left out of the
 * line rather than printed as a guess — a game with no pointer to lock should
 * not claim one, and "not knowing" is not a field worth a person's eye.
 */
export function supportLine(facts: Facts, run: Running = {}): string {
  const parts = [
    browserOf(facts.userAgent),
    facts.renderer === null ? "driver not named" : piece(facts.renderer),
    `${Math.round(facts.stage[0])}×${Math.round(facts.stage[1])} at ${dprOf(facts.dpr)}× dpr`,
  ];
  if (run.pointer !== undefined) {
    parts.push(run.pointer === null ? "pointer free" : `pointer ${run.pointer}`);
  }
  if (run.keys !== undefined) parts.push(run.keys ? "Esc held" : "Esc the browser's");
  if (run.fullscreen !== undefined) parts.push(run.fullscreen ? "full screen" : "no full screen");
  if (run.hz !== undefined && Number.isFinite(run.hz)) parts.push(`${Math.round(run.hz)} Hz`);
  if (run.frameMs !== undefined && Number.isFinite(run.frameMs)) {
    parts.push(`${run.frameMs.toFixed(1)} ms frame`);
  }
  if (facts.commit !== undefined && piece(facts.commit) !== "") {
    parts.push(labelled("build", facts.commit));
  }
  if (run.failure !== undefined && piece(run.failure) !== "") parts.push(piece(run.failure));
  return parts.join(" · ");
}
/** The pixel ratio as it is written: 1, 1.25, 2 — never 1.2500000000000002. */
const dprOf = (dpr: number): string =>
  Number.isFinite(dpr) && dpr > 0 ? String(Math.round(dpr * 1000) / 1000) : "1";
/** What the menu says when the picture could not be built at all. */
export const NO_PICTURE = "The picture could not be built";
/**
 * And the paragraph under that heading: what happened, what still works, and
 * what to do with the line below it. Text, escaped where it is rendered.
 */
export const NO_PICTURE_SAYS =
  "This browser has WebGL2 and then refused the game’s shaders — which is what a driver " +
  "does when it is asked for something it will not compile, and is far more common on Windows, " +
  "where the browser draws through Direct3D. Nothing else on the page is affected. The line " +
  "below says which browser and which driver: paste it into a bug report.";
@@ -150,7 +150,7 @@
const SPEED = 4, TURN = 120, EYE = 1.6, REACH = 40;
## What is behind the door
**Weight**: 36.1 kB raw, 14.7 kB gzipped — every group at once, which is the most any game can pay.
**Weight**: 41.1 kB raw, 16.6 kB gzipped — every group at once, which is the most any game can pay.
Every section below opens with what that group costs a bundle, because "what
does it cost to use?" is a question a page can answer with a number. The number
@@ -413,21 +413,42 @@
number the test moves, which is how a second of play takes a millisecond.
### controls
**Weight**: 2.7 kB raw, 1.1 kB gzipped — including math, which comes with it.
**Weight**: 3.9 kB raw, 1.7 kB gzipped — including math, which comes with it.
`createControls` takes the host and `Options` — the key table, the mouse table,
the keys whose default the page must not take, the look scales, the sensitivity,
the thumb-stick region and whether the mouse is ignored until the pointer is
locked — and returns `Controls`: the live held set, the `Stick`, a
the wheel table, the keys whose default the page must not take, the look scales,
the sensitivity, the thumb-stick region and whether the mouse is ignored until
the pointer is locked — and returns `Controls`: the live held set, the `Stick`, a
`Controls.takeLook` that hands over the turn asked for since you last asked and
then forgets it, a `Controls.locked` flag, the `Controls.onAction` and
then forgets it, a `Controls.locked` flag, a `Controls.pointer` saying which
counts the locked mouse is sending — a `PointerMode`: *raw* where the ask for the
unadjusted movement dictionary was taken, *adjusted* where the platform's own
pointer speed is in the movement a mouse event carries, *unknown* where the
browser said yes without saying which, and null while there is no pointer at all,
which is what a page prints in the line a bug report pastes — the
`Controls.onAction` and
`Controls.onUnlock` callbacks, a `Controls.setAction` for pressing an action by
name, and a `Controls.detach` for when the game is over. `attachButtons` wires
every element carrying a `data-action` attribute to `Controls.setAction`, with
`ButtonOptions` saying which of them are a tap rather than a hold, so a thumb
reaches what a keyboard does. The event shapes it reads are exported too —
`KeyEventish`, `MouseEventish`, `TouchEventish`, `Touchish`, `Button` — because
a test drives the handlers with plain objects and no browser is in the room.
`KeyEventish`, `MouseEventish`, `WheelEventish`, `TouchEventish`, `Touchish`,
`Button` — because a test drives the handlers with plain objects and no browser
is in the room.
The mouse is the whole mouse. `Options.mouse` is keyed by `MouseEvent.button`,
so 1 is the wheel pressed and 3 and 4 are the two under the thumb — which are
Back and Forward to a browser on Windows, and a page that does not take their
default loses the match to a stray thumb. Every button a game binds has its
`mousedown` and its `auxclick` prevented while the game has the input, and every
button it does not bind is left exactly as the browser had it. `Options.wheel`
binds the two directions by name — `{ up: "jump", down: "jump" }` — and a turn
is counted in notches rather than in the delta the browser happened to send: one
click of a wheel is one press whether it arrives as a hundred pixels, as three
lines or as a page, a violent flick is still one press, and a trackpad's stream
of small deltas has to add up to a click's worth of travel before it is one.
A notch presses the action and releases it `Options.wheelMs` later, so a polled
frame sees it, the way `attachButtons` treats a tap.
What a game does with all that can be one line — read the held set every tick
and be done — and `attachButtons` is a second line whenever there are on-screen
@@ -493,9 +514,42 @@
that: close a panel, pause the match, let the pointer go. What this does not do
put anything back — a browser that took the screen took it inside its own gesture,
and only another gesture can ask again, which is your Resume button.
### pixels
**Weight**: 0.6 kB raw, 0.3 kB gzipped — this module alone.
The device pixel grid, which is two questions a game asks on every resize and
every frame, and which nobody gets right by remembering to.
`backing` — `backing(clientWidth, clientHeight, dpr)` — is how large a canvas's backing store
should be for the box the layout gave it: whole pixels, never none, and the
ratio capped at `MAX_RATIO`, which is 2 — past that the pixels cost memory and
fill rate and buy nothing an eye finds at arm's length. `ratioOf` is the cap and
the guard on its own, for a game that needs the number rather than the size.
The renderer's own `Renderer.resize` uses it, and so should whatever 2D canvas
you lay over the scene, so the two are the same grid.
`px(css, ratio)` turns a length you wrote in CSS pixels into whole device
pixels, never fewer than one, so a thing is the same size on the glass at 1,
1.25, 1.5 and 2. `bar` — `bar(centre, thickness)` — is the other half: where a bar that
thick, centred there, has to start so that *both* of its edges land on a pixel
— and how thick it ends up, because a bar of even thickness fits a centre on a
pixel boundary and one of odd thickness fits a centre in the middle of a pixel,
so the thickness bends by one rather than the centre moving by a half.
This exists because Windows ships display scaling at 125% and 150% far more
often than anything else does. At 1.25 a canvas 1281 CSS pixels wide has a
1601-pixel backing store, its centre is 800.5, and a two-pixel crosshair arm
*stroked* through that centre covers three columns of pixels at two thirds of
its colour each: a smeared, dim cross, on the one thing a player looks at for an
hour. On a 1.0 display it is pixel-perfect, which is why it can live in a game
for a long time. The rule the engine draws by is in `overlay` below: device
pixels, no context transform, and everything with an edge filled on whole
pixels.
### overlay
**Weight**: 1.2 kB raw, 0.7 kB gzipped — including math, which comes with it.
**Weight**: 1.8 kB raw, 1.0 kB gzipped — including pixels and math, which come with it.
The 2D a game draws over its scene. `overlay` takes the surface, the width and
the height and hands back an `Overlay`: `Overlay.scale`, the canvas width over
@@ -507,6 +561,17 @@
that is always put back, `Overlay.crosshair` for four arms around a centre,
right-aligned figures and `Overlay.clock` for seconds as `m:ss`. Build it on a
resize, not in a frame: the tools it returns allocate nothing per call.
The width and the height it is built with are **device** pixels — a canvas's
backing store — and the fourth argument is the device pixel ratio, 1 when it is
left out. It draws with no context transform, because a transform is how a 1.25
display resamples everything drawn through it, and `Overlay.crosshair` fills
four rectangles on whole pixels rather than stroking four lines through a
centre that may be half of one. `Overlay.px` is `px` bound to that ratio, for a
size you wrote in CSS pixels; `Overlay.ratio` is the ratio it settled on; and
`Overlay.scale` is now two questions multiplied — how wide the canvas is *in CSS
pixels* against 1280, clamped to 0.7–1.4, times that ratio — so the furniture is
the same size on the glass on a dense screen instead of shrinking to 70% of it.
What it draws onto is a `Paint` — the seventeen members of a 2D context these
tools touch, and not a whole context. A browser's is one; so is a recorder in a
test, which is how every pixel decision in `overlay.test.ts` is checked with no
@@ -623,7 +688,7 @@
in. A game reads the first two of those and leaves the ring arithmetic here.
### renderer
**Weight**: 9.0 kB raw, 3.6 kB gzipped — including math, which comes with it.
**Weight**: 9.1 kB raw, 3.7 kB gzipped — including math and pixels, which come with it.
The 3D under the scene, and the largest thing behind the door. `createRenderer`
takes the canvas and the assets and hands back a `Renderer` — or nothing at all,
@@ -674,7 +739,7 @@
game's. One line a frame draws it, and `src/client/main.ts` and
### page
**Weight**: 3.1 kB raw, 1.6 kB gzipped — this module alone.
**Weight**: 3.5 kB raw, 1.7 kB gzipped — this module alone.
How you boot your entry in a test with no browser. `fakePage` hands back a
`FakePage`: a `FakePage.surface`, a `FakePage.window` and a `FakePage.document`
@@ -691,7 +756,10 @@
and `PageOptions.actions` is one `[data-action]` element per name.
is a phone, `fullscreen: false` is a browser that will not put an element on the
whole screen, and `keyboardLock: false` is one with no Keyboard Lock API — which
takes both methods off `FakePage.keyboard`, the `FakeKeyboard` that records what
is locked, how often it was asked and whether it is refusing. Then `FakePage.step(ms)` runs the oldest frame that was asked for,
is locked, how often it was asked and whether it is refusing. `PageOptions.metas`
is the `<meta name=…>` elements the server rendered into the page, by name, which
`FakeDocument.querySelector` answers for — `meta[name="build"]` is the commit a
game reads back to say which deployment a bug report came from. Then `FakePage.step(ms)` runs the oldest frame that was asked for,
that many milliseconds after the last one — that is the whole clock, and there
is no timer anywhere in the file.
@@ -1,5 +1,5 @@
import { expect, test } from "bun:test";
import { attachButtons, createControls, type Host } from "./controls.ts";
import { attachButtons, createControls, MAX_MOVEMENT, type Host } from "./controls.ts";
// `(event: never)` is the one type every listener can be stored as: a handler
// written for a key event and one written for a touch both fit here, which is
@@ -44,7 +44,18 @@
type Stub = ReturnType<typeof stubTarget>;
const KEYS = { KeyW: "forward", KeyA: "left", Space: "jump", Tab: "scoreboard" };
function harness(options: Partial<Parameters<typeof createControls>[1]> = {}) {
  const surface = Object.assign(stubTarget(), { clientWidth: 1000 });
  // The browser's half of pointer lock: what each ask was given, and what the
  // browser answers with — nothing, by default, which is what a browser with no
  // promise in its `requestPointerLock` has always said.
  const asks: unknown[] = [];
  let answer: (options: unknown) => unknown = () => undefined;
  const surface = Object.assign(stubTarget(), {
    clientWidth: 1000,
    requestPointerLock(options?: unknown): unknown {
      asks.push(options);
      return answer(options);
    },
  });
  const win = stubTarget();
  const doc = Object.assign(stubTarget(), { pointerLockElement: null as unknown });
  const host: Host = { surface, window: win, document: doc };
@@ -53,7 +64,10 @@
function harness(options: Partial<Parameters<typeof createControls>[1]> = {}) {
    doc.pointerLockElement = on ? surface : null;
    doc.emit("pointerlockchange", {});
  };
  return { controls, surface: surface as Stub & { clientWidth: number }, win, doc, lock };
  const answers = (reply: (options: unknown) => unknown): void => {
    answer = reply;
  };
  return { controls, surface: surface as Stub & { clientWidth: number }, win, doc, lock, asks, answers };
}
const key = (code: string, extra: Record<string, unknown> = {}) => ({
@@ -106,17 +120,64 @@
test("a repeating keydown does not fire the action again", () => {
  expect([...controls.held]).toEqual(["forward"]);
});
test("Tab and Space keep their default off the page, W does not need to", () => {
  const { win } = harness();
const prevented = (event: unknown): boolean | undefined =>
  (event as { prevented?: boolean }).prevented;
test("Tab and Space keep their default off the game, W does not need to", () => {
  const { win, lock } = harness();
  lock(true);
  const tab = key("Tab");
  const space = key("Space");
  const w = key("KeyW");
  win.emit("keydown", tab);
  win.emit("keydown", space);
  win.emit("keydown", w);
  expect((tab as { prevented?: boolean }).prevented).toBe(true);
  expect((space as { prevented?: boolean }).prevented).toBe(true);
  expect((w as { prevented?: boolean }).prevented).toBeUndefined();
  expect(prevented(tab)).toBe(true);
  expect(prevented(space)).toBe(true);
  expect(prevented(w)).toBeUndefined();
});
test("out of the lock the page keeps its keys: Tab walks the menu, Space presses", () => {
  const { win } = harness();
  const tab = key("Tab");
  const space = key("Space");
  win.emit("keydown", tab);
  win.emit("keydown", space);
  expect(prevented(tab)).toBeUndefined();
  expect(prevented(space)).toBeUndefined();
});
test("a game that never locks takes its keys anyway", () => {
  const { win } = harness({ requireLock: false });
  const space = key("Space");
  win.emit("keydown", space);
  expect(prevented(space)).toBe(true);
});
test("the arrow keys scroll the page and steer the locked game", () => {
  const { win, lock } = harness({ keys: { ...KEYS, ArrowUp: "forward" } });
  const loose = key("ArrowUp");
  win.emit("keydown", loose);
  expect(prevented(loose)).toBeUndefined();
  lock(true);
  const held = key("ArrowUp");
  win.emit("keydown", held);
  expect(prevented(held)).toBe(true);
});
test("a key typed into a field is the field's: no action, and no swallowed space", () => {
  const { controls, win, lock } = harness();
  lock(true);
  const field = { tagName: "input" };
  const space = key("Space", { target: field });
  win.emit("keydown", key("KeyW", { target: field }));
  win.emit("keydown", space);
  win.emit("keydown", key("KeyA", { target: { isContentEditable: true } }));
  expect(controls.held.size).toBe(0);
  expect(prevented(space)).toBeUndefined();
  // The stage is not a field, and the same key on it is the game's.
  win.emit("keydown", key("KeyW", { target: { tagName: "canvas" } }));
  expect([...controls.held]).toEqual(["forward"]);
});
test("mouse movement accumulates and takeLook drains it exactly once", () => {
@@ -130,6 +191,84 @@
test("mouse movement accumulates and takeLook drains it exactly once", () => {
  expect(controls.takeLook()).toEqual([0, 0]);
});
test("the pointer is asked for raw first: no operating system acceleration on the look", async () => {
  const { controls, asks } = harness();
  expect(await controls.lock()).toBe(true);
  expect(asks).toEqual([{ unadjustedMovement: true }]);
});
test("a browser that will not take the dictionary is asked again plainly", async () => {
  const { controls, asks, answers } = harness();
  answers((options) =>
    options === undefined ? Promise.resolve() : Promise.reject(new Error("unadjustedMovement")));
  expect(await controls.lock()).toBe(true);
  expect(asks).toEqual([{ unadjustedMovement: true }, undefined]);
});
test("which mouse the player got is readable, and not knowing is not a guess", async () => {
  // Chromium: a promise that resolves on the ask that carried the dictionary,
  // which is the only way a page is told it has raw counts.
  const raw = harness();
  raw.answers(() => Promise.resolve());
  expect(raw.controls.pointer).toBe(null); // nothing is locked yet
  expect(await raw.controls.lock()).toBe(true);
  raw.lock(true);
  expect(raw.controls.pointer).toBe("raw");
  // Escape, and there is no pointer to describe any more.
  raw.lock(false);
  expect(raw.controls.pointer).toBe(null);
  // A browser that refuses the dictionary and takes the plain ask: the platform's
  // own pointer speed is in `movementX`, which is the Windows half of #307 and
  // the thing a bug report has to be able to say.
  const adjusted = harness();
  adjusted.answers((options) =>
    options === undefined ? Promise.resolve() : Promise.reject(new Error("unadjustedMovement")));
  expect(await adjusted.controls.lock()).toBe(true);
  adjusted.lock(true);
  expect(adjusted.controls.pointer).toBe("adjusted");
  // And a pre-promise browser, which says yes by saying nothing: it has not said
  // whether it read the dictionary, so neither does this.
  const quiet = harness();
  expect(await quiet.controls.lock()).toBe(true);
  quiet.lock(true);
  expect(quiet.controls.pointer).toBe("unknown");
});
test("a refused lock is an answer, not a throw: both ways of refusing say false", async () => {
  const rejects = harness();
  rejects.answers(() => Promise.reject(new Error("exited the lock with Escape")));
  expect(await rejects.controls.lock()).toBe(false);
  const throws = harness();
  throws.answers(() => {
    throw new Error("no pointer lock in this document");
  });
  expect(await throws.controls.lock()).toBe(false);
});
test("a browser with no pointer to lock says so instead of crashing the game", async () => {
  const surface = Object.assign(stubTarget(), { clientWidth: 1000 });
  const doc = Object.assign(stubTarget(), { pointerLockElement: null as unknown });
  const controls = createControls({ surface, window: stubTarget(), document: doc }, { keys: KEYS });
  expect(await controls.lock()).toBe(false);
});
test("one absurd pointer event cannot fling the view", () => {
  const { controls, win, lock } = harness({ sensitivity: 2.2 });
  lock(true);
  // What a browser hands a page when its own delta is wrong: a whole screen of
  // desk in one event, and a value that is not a number at all.
  win.emit("mousemove", { movementX: 900_000, movementY: Number.NaN });
  const [dx, dy] = controls.takeLook();
  expect(dx).toBeCloseTo(MAX_MOVEMENT * 2.2 * 0.022, 10);
  expect(dy).toBe(0);
  // A flick under the ceiling keeps every count of itself.
  win.emit("mousemove", { movementX: -300, movementY: 40 });
  expect(controls.takeLook()[0]).toBeCloseTo(-300 * 2.2 * 0.022, 10);
});
test("the mouse says nothing until the pointer is locked", () => {
  const { controls, win, surface } = harness();
  win.emit("mousemove", { movementX: 100, movementY: 100 });
@@ -147,6 +286,140 @@
test("the mouse buttons are bindings too", () => {
  expect(controls.held.size).toBe(0);
});
test("the buttons under the thumb are the game's, not the browser's Back and Forward", () => {
  const { controls, win, surface, lock } = harness({ mouse: { 0: "fire", 3: "use", 4: "grenade" } });
  lock(true);
  // Buttons 3 and 4 on Windows: Edge navigates on them unless the press is
  // taken, and a page that navigates mid-round is a match thrown away.
  const back = { button: 3, preventDefault() {}, prevented: false };
  back.preventDefault = () => void (back.prevented = true);
  surface.emit("mousedown", back);
  expect(back.prevented).toBe(true);
  expect([...controls.held]).toEqual(["use"]);
  win.emit("mouseup", { button: 3, preventDefault() {} });
  // The click a non-primary button fires afterwards is taken too.
  const aux = { button: 4, preventDefault() {}, prevented: false };
  aux.preventDefault = () => void (aux.prevented = true);
  surface.emit("auxclick", aux);
  expect(aux.prevented).toBe(true);
  // A button this game never asked for keeps whatever the browser does with it:
  // a game that has not bound mouse3 does not get to break the middle click.
  const wheelPress = { button: 1, preventDefault() {}, prevented: false };
  wheelPress.preventDefault = () => void (wheelPress.prevented = true);
  surface.emit("mousedown", wheelPress);
  const wheelClick = { button: 1, preventDefault() {}, prevented: false };
  wheelClick.preventDefault = () => void (wheelClick.prevented = true);
  surface.emit("auxclick", wheelClick);
  expect(wheelPress.prevented).toBe(false);
  expect(wheelClick.prevented).toBe(false);
  expect(controls.held.size).toBe(0);
});
test("out of the game the page keeps its own mouse: Back goes back", () => {
  const { surface } = harness({ mouse: { 3: "use" } });
  const back = { button: 3, preventDefault() {}, prevented: false };
  back.preventDefault = () => void (back.prevented = true);
  const aux = { button: 3, preventDefault() {}, prevented: false };
  aux.preventDefault = () => void (aux.prevented = true);
  surface.emit("mousedown", back);
  surface.emit("auxclick", aux);
  expect(back.prevented).toBe(false);
  expect(aux.prevented).toBe(false);
});
test("the wheel is a binding: a notch presses its action and lets go by itself", async () => {
  const { controls, win, lock } = harness({ wheel: { up: "jump", down: "jump" }, wheelMs: 5 });
  lock(true);
  const up = { deltaY: -120, preventDefault() {}, prevented: false };
  up.preventDefault = () => void (up.prevented = true);
  win.emit("wheel", up);
  // The page behind a locked game must not scroll under it.
  expect(up.prevented).toBe(true);
  expect([...controls.held]).toEqual(["jump"]);
  // Held long enough for a polled frame to see, and then released with no
  // second event: a wheel has no "up".
  await Bun.sleep(20);
  expect(controls.held.size).toBe(0);
  // The other way round is the same bind, and a notch of no size is no notch.
  win.emit("wheel", { deltaY: 120, preventDefault() {} });
  expect([...controls.held]).toEqual(["jump"]);
  await Bun.sleep(20);
  win.emit("wheel", { deltaY: 0, preventDefault() {} });
  expect(controls.held.size).toBe(0);
});
test("a notch is a notch in pixels, in lines and in pages, and a fling is still one", async () => {
  const { controls, win, lock } = harness({ wheel: { down: "jump" }, wheelMs: 5 });
  lock(true);
  let pressed = 0;
  controls.onAction = (_action, down) => void (down && (pressed += 1));
  // The same click of the same wheel, as three browsers describe it: Chromium's
  // hundred pixels, Firefox's three lines, and a page.
  win.emit("wheel", { deltaY: 100, deltaMode: 0, preventDefault() {} });
  win.emit("wheel", { deltaY: 3, deltaMode: 1, preventDefault() {} });
  win.emit("wheel", { deltaY: 1, deltaMode: 2, preventDefault() {} });
  expect(pressed).toBe(3);
  // And one violent flick of it, which some drivers send as one huge delta: one
  // press, not seven.
  win.emit("wheel", { deltaY: 700, deltaMode: 0, preventDefault() {} });
  expect(pressed).toBe(4);
  await Bun.sleep(20);
  expect(controls.held.size).toBe(0);
});
test("a trackpad is not twenty jumps: the small deltas add up to a notch and no more", () => {
  const { controls, win, lock } = harness({ wheel: { down: "jump", up: "jump" } });
  lock(true);
  let pressed = 0;
  controls.onAction = (_action, down) => void (down && (pressed += 1));
  // Twenty events of ten pixels is what a finger dragged down a trackpad sends.
  // It is two wheel clicks of travel, so it is two jumps.
  for (let i = 0; i < 20; i++) win.emit("wheel", { deltaY: 10, deltaMode: 0, preventDefault() {} });
  expect(pressed).toBe(2);
  // Turning back the other way starts the count again rather than cancelling
  // out: half a notch down and then half a notch up is neither.
  pressed = 0;
  win.emit("wheel", { deltaY: 50, deltaMode: 0, preventDefault() {} });
  win.emit("wheel", { deltaY: -50, deltaMode: 0, preventDefault() {} });
  expect(pressed).toBe(0);
  win.emit("wheel", { deltaY: -60, deltaMode: 0, preventDefault() {} });
  expect(pressed).toBe(1);
});
test("the wheel outside the game scrolls the page, as a wheel does", () => {
  const { controls, win } = harness({ wheel: { up: "jump", down: "jump" } });
  const notch = { deltaY: -120, preventDefault() {}, prevented: false };
  notch.preventDefault = () => void (notch.prevented = true);
  win.emit("wheel", notch);
  expect(notch.prevented).toBe(false);
  expect(controls.held.size).toBe(0);
  expect(win.optionsFor("wheel")).toEqual({ passive: false });
});
test("a direction the game never bound is the page's scroll, locked or not", () => {
  const { controls, win, lock } = harness({ wheel: { down: "jump" } });
  lock(true);
  const up = { deltaY: -400, preventDefault() {}, prevented: false };
  up.preventDefault = () => void (up.prevented = true);
  win.emit("wheel", up);
  expect(up.prevented).toBe(false);
  expect(controls.held.size).toBe(0);
});
test("detaching with a wheel notch in flight lets nothing go off afterwards", async () => {
  const { controls, win, lock } = harness({ wheel: { down: "jump" }, wheelMs: 5 });
  lock(true);
  const seen: [string, boolean][] = [];
  win.emit("wheel", { deltaY: 120, preventDefault() {} });
  controls.onAction = (action, down) => seen.push([action, down]);
  controls.detach();
  await Bun.sleep(20);
  expect(seen).toEqual([]);
});
test("the stick clamps to ±1 and returns to zero when the touch ends", () => {
  const { controls, surface } = harness();
  surface.emit("touchstart", touchEvent([{ identifier: 1, clientX: 100, clientY: 400 }]));
@@ -6,6 +6,12 @@
 * half; this module only says which actions are down, how far the stick is
 * pushed, and how much the view was asked to turn since the last frame.
 *
 * The pointer is asked for here as well as read here — `lock()` — because the
 * module that knows whether the mouse is the game's is the one that should ask
 * for it, and because asking properly is four lines of browser lore (raw
 * counts, a fallback, a refusal that is an answer rather than an exception)
 * that no game should be writing twice.
 *
 * Every target it listens on is a parameter, typed by the two methods it
 * actually calls, so a stub with `addEventListener`/`removeEventListener`
 * drives the whole thing headlessly. Every listener it adds is remembered, so
@@ -27,21 +33,51 @@
export type Listens = {
  removeEventListener<E>(type: string, handler: (event: E) => void): void;
};
/** The element the pointer locks to and the fingers land on. */
export type Surface = Listens & { readonly clientWidth: number };
/**
 * The element the pointer locks to and the fingers land on.
 *
 * `requestPointerLock` is optional because a browser without one is a real
 * browser — an iPhone has no pointer to lock — and calling a method that is not
 * there is a thrown `TypeError` in the middle of starting a game. `lock()`
 * below is the only thing that calls it, and a browser that has not got it gets
 * `false` rather than an exception.
 *
 * The options dictionary is Chromium's `unadjustedMovement`: see `lock()`.
 */
export type Surface = Listens & {
  readonly clientWidth: number;
  requestPointerLock?(options?: { unadjustedMovement?: boolean }): unknown;
};
/** Whatever owns pointer lock — a `Document` fits. */
export type LockOwner = Listens & { readonly pointerLockElement: unknown };
export type Host = { surface: Surface; window: Listens; document: LockOwner };
export type KeyEventish = { code: string; repeat?: boolean; preventDefault(): void };
/**
 * A key, as far as this module reads one. `target` is where the browser aimed
 * it — a text field, usually not — and it is `unknown` because the only
 * question asked of it is whether somebody is typing into it, which `typing`
 * below answers from two properties and no DOM.
 */
export type KeyEventish = {
  code: string;
  repeat?: boolean;
  target?: unknown;
  preventDefault(): void;
};
export type MouseEventish = {
  button?: number;
  movementX?: number;
  movementY?: number;
  preventDefault(): void;
};
/**
 * A wheel turn, as far as this module reads one: which way, how far, and in
 * whose units — `deltaMode` is 0 for pixels, 1 for lines and 2 for pages, and a
 * browser picks whichever it likes for the same physical notch. See `NOTCH`.
 */
export type WheelEventish = { deltaY?: number; deltaMode?: number; preventDefault(): void };
export type Touchish = { identifier: number; clientX: number; clientY: number };
export type TouchEventish = { changedTouches: ArrayLike<Touchish>; preventDefault(): void };
@@ -50,12 +86,27 @@
export type Stick = { readonly x: number; readonly y: number };
export type Options = {
  /** `KeyboardEvent.code` to action name. Anything unbound is ignored. */
  keys: Record<string, string>;
  /** `MouseEvent.button` to action name; 0 is left, 2 is right. */
  /**
   * `MouseEvent.button` to action name; 0 is left, 1 the wheel pressed, 2 the
   * right one, and 3 and 4 the two under the thumb — which are Back and Forward
   * to a browser on Windows, and are bound here so that they are the game's.
   */
  mouse?: Record<number, string>;
  /**
   * The wheel, by direction: `{ up: "jump", down: "jump" }` is the bind half of
   * the world plays with. A notch is an edge and not a hold, so the action is
   * pressed and released `wheelMs` later — long enough for a frame to see it.
   * A direction nothing is bound to is left to the browser, scroll and all.
   */
  wheel?: Record<string, string>;
  /** How long a wheel notch holds its action down, in milliseconds. */
  wheelMs?: number;
  /** Codes whose default the page must not take — Tab moves focus, Space scrolls. */
  preventKeys?: readonly string[];
  /** Degrees of turn per unit of pointer movement, scaled by `sensitivity`. */
  lookScale?: number;
  /** Most counts one pointer event may be worth. See `MAX_MOVEMENT`. */
  maxMove?: number;
  /** The same, for a finger dragged across the surface. */
  touchLookScale?: number;
  sensitivity?: number;
@@ -67,6 +118,20 @@
export type Options = {
  requireLock?: boolean;
};
/**
 * Which counts a locked pointer is sending.
 *
 * - `"raw"` — the ask for `unadjustedMovement` was answered with a promise and
 *   that promise resolved, which is Chromium saying it took the dictionary.
 * - `"adjusted"` — that ask failed and the plain one was the one taken, so
 *   `movementX` arrives with the platform's pointer speed and acceleration in it.
 * - `"unknown"` — the ask returned nothing at all, which is what a
 *   pre-promise `requestPointerLock` does for everything: it has said yes and
 *   has not said whether it read the dictionary. Not knowing is reported as not
 *   knowing rather than guessed at.
 */
export type PointerMode = "raw" | "adjusted" | "unknown";
export type Controls = {
  /** The actions held right now. Live: read it every frame. */
  readonly held: ReadonlySet<string>;
@@ -76,6 +141,20 @@
export type Controls = {
  takeLook(): [number, number];
  sensitivity: number;
  readonly locked: boolean;
  /**
   * How the pointer the game has now was granted, and null while it has none.
   * Live, like `locked`: a page can say which mouse the player is actually
   * aiming with, which is the difference between a Windows machine that plays
   * like a Mac and one that does not. See `PointerMode`.
   */
  readonly pointer: PointerMode | null;
  /**
   * Ask for the pointer, inside the gesture that wants it. True when the
   * browser took the request, false when it refused or has no pointer lock at
   * all — a refusal a caller can say something about instead of a match that
   * runs with a dead mouse. See `lock` in `createControls` for what is asked.
   */
  lock(): Promise<boolean>;
  /** Press or release an action by name — how an on-screen button speaks. */
  setAction(action: string, down: boolean): void;
  /** Every press and release, however it arrived. */
@@ -85,7 +164,66 @@
export type Controls = {
  detach(): void;
};
const PREVENT_KEYS = ["Tab", "Space"] as const;
/**
 * The bound keys whose browser meaning would fight the game: Tab moves the
 * focus, Space and the arrows scroll the page. Every one of them is a key these
 * games bind to something, and the default is only ever taken while the game
 * actually has the input — see `engaged` below — so a person reading the page
 * around the stage still scrolls it with the keyboard.
 */
const PREVENT_KEYS = ["Tab", "Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"] as const;
/**
 * Most counts one pointer event may be worth, per axis.
 *
 * A hand does not move a mouse four thousand counts between two events: at
 * 1600 dpi that is a quarter of a metre of desk inside one frame, and at this
 * package's default of 0.022°/count and a sensitivity of 2.2 it is already a
 * half turn. A number past it is the platform's rather than the player's —
 * Windows adds its own pointer ballistics to `movementX` unless a page asks for
 * raw counts, and a lock that has just engaged can carry the whole distance
 * from wherever the cursor was — and one of those must not fling the view
 * across the map. Clamped rather than dropped: a real fast flick keeps every
 * degree up to the ceiling.
 */
export const MAX_MOVEMENT = 4000;
/**
 * How much of a wheel's own unit is one notch, by `deltaMode`: pixels, lines,
 * pages.
 *
 * One click of a wheel is one jump, and a browser is free to describe that
 * click as 100 pixels (Chromium), as three lines (Firefox on Windows) or as a
 * page. A trackpad is the other half of the reason this table exists: it sends
 * a stream of small pixel deltas, and a finger dragged down it would be twenty
 * jumps if every event were a notch. So the deltas are summed in notches and an
 * action is pressed each time the sum passes one — a click is a click whatever
 * it is measured in, a flick of the wheel worth three notches is still one
 * press, and a trackpad has to travel a wheel click's distance to be one.
 */
const NOTCH = [100, 3, 1] as const;
/** The unit one notch is in, for a `deltaMode` this module has not heard of. */
const notchOf = (mode: number | undefined): number => NOTCH[mode ?? 0] ?? NOTCH[0];
/**
 * Whether a key belongs to whatever it was aimed at rather than to the game. A
 * name being typed into the menu is not a player running west: the games here
 * listen on the window, so without this every letter of a name is also a
 * binding, `preventDefault` eats the space bar between two words, and Tab
 * cannot leave the field it is in.
 *
 * Read off the two properties every browser puts on such an element and nothing
 * else — no `instanceof`, no DOM — so a plain object in a test is a text field
 * by saying it is one.
 */
function typing(target: unknown): boolean {
  if (typeof target !== "object" || target === null) return false;
  const node = target as { tagName?: unknown; isContentEditable?: unknown };
  if (node.isContentEditable === true) return true;
  const tag = typeof node.tagName === "string" ? node.tagName.toUpperCase() : "";
  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
}
export function createControls(host: Host, options: Options): Controls {
  const keys = options.keys;
@@ -96,12 +234,21 @@
export function createControls(host: Host, options: Options): Controls {
  const stickRegion = options.stickRegion ?? 0.38;
  const stickRadius = options.stickRadius ?? 60;
  const requireLock = options.requireLock ?? true;
  const maxMove = options.maxMove ?? MAX_MOVEMENT;
  const wheel = options.wheel ?? {};
  const wheelMs = options.wheelMs ?? 120;
  const held = new Set<string>();
  /** The release a wheel notch has pending, by action: one per action, restarted. */
  const wheelTimers = new Map<string, ReturnType<typeof setTimeout>>();
  /** How far the wheel has turned since the last notch, in notches. See `NOTCH`. */
  let wheelTurn = 0;
  const stick = { x: 0, y: 0 };
  let lookX = 0;
  let lookY = 0;
  let locked = false;
  /** How the last successful ask for the pointer was answered. See `PointerMode`. */
  let granted: PointerMode | null = null;
  // Every listener, so detach can undo exactly what attach did.
  const added: [Listens, string, (event: never) => void][] = [];
@@ -128,6 +275,10 @@
export function createControls(host: Host, options: Options): Controls {
    get locked() {
      return locked;
    },
    get pointer() {
      return locked ? granted : null;
    },
    lock,
    setAction(action, down) {
      if (down) held.add(action);
      else held.delete(action);
@@ -138,6 +289,10 @@
export function createControls(host: Host, options: Options): Controls {
    detach() {
      for (const [target, type, handler] of added) target.removeEventListener(type, handler);
      added.length = 0;
      // A wheel notch has a release in flight; a detached controls must not
      // fire it at a game that has stopped listening.
      for (const timer of wheelTimers.values()) clearTimeout(timer);
      wheelTimers.clear();
    },
  };
@@ -145,10 +300,19 @@
export function createControls(host: Host, options: Options): Controls {
  on(host.window, "keydown", (event: KeyEventish) => {
    const action = keys[event.code];
    if (action === undefined) return;
    if (preventKeys.has(event.code)) event.preventDefault();
    // Somebody is typing. The key is theirs, and the game hears nothing: not
    // the action, and not the `preventDefault` that would swallow a space.
    if (typing(event.target)) return;
    // The browser's meaning, taken only while the game has the input. Out of
    // the lock the page is a page: Tab walks the menu, Space presses what it
    // walked to, and the arrows scroll the words under the stage.
    if (engaged() && preventKeys.has(event.code)) event.preventDefault();
    if (event.repeat === true) return; // a held key repeats; the action is already down
    controls.setAction(action, true);
  });
  // A release is heard wherever it lands, typed into or not: a key that went
  // down on the stage and came up somewhere else must not stay down. It is the
  // safe direction — releasing what was never pressed costs nothing.
  on(host.window, "keyup", (event: KeyEventish) => {
    const action = keys[event.code];
    if (action !== undefined) controls.setAction(action, false);
@@ -163,9 +327,22 @@
export function createControls(host: Host, options: Options): Controls {
  });
  on(host.surface, "mousedown", (event: MouseEventish) => {
    if (requireLock && !locked) return;
    event.preventDefault();
    const action = mouse[event.button ?? 0];
    if (action !== undefined) controls.setAction(action, true);
    if (action === undefined) return; // an unbound button is still the browser's
    // A bound button belongs to the game, and buttons 3 and 4 are Back and
    // Forward to a browser on Windows: a thumb that finds one mid-round would
    // otherwise leave the page, taking the match, the round and the score with
    // it. This is what stops the navigation; the table is what gives the button
    // something to do instead.
    event.preventDefault();
    controls.setAction(action, true);
  });
  // The click a non-primary button fires after its press. Chromium navigates on
  // it as well as on the press, and the wheel pressed is where a page gets its
  // scroll cursor — so for the buttons this game asked for, neither happens
  // while it has the mouse. A button it did not ask for keeps both.
  on(host.surface, "auxclick", (event: MouseEventish) => {
    if (engaged() && mouse[event.button ?? 0] !== undefined) event.preventDefault();
  });
  on(host.window, "mouseup", (event: MouseEventish) => {
    const action = mouse[event.button ?? 0];
@@ -174,9 +351,39 @@
export function createControls(host: Host, options: Options): Controls {
  on(host.surface, "contextmenu", (event: MouseEventish) => event.preventDefault());
  on(host.window, "mousemove", (event: MouseEventish) => {
    if (requireLock && !locked) return;
    lookX += (event.movementX ?? 0) * controls.sensitivity * lookScale;
    lookY += (event.movementY ?? 0) * controls.sensitivity * lookScale;
    // Counts first, clamped, and degrees after: the ceiling is the mouse's own
    // unit, so it means the same thing at every sensitivity. See `MAX_MOVEMENT`.
    lookX += counts(event.movementX) * controls.sensitivity * lookScale;
    lookY += counts(event.movementY) * controls.sensitivity * lookScale;
  });
  // The wheel, which is how a lot of people jump. Not passive: a page that
  // scrolls behind a locked game is a page that has moved when the game gives
  // the pointer back, so a bound turn is the game's and the scroll with it.
  on(host.window, "wheel", (event: WheelEventish) => {
    if (!engaged()) return;
    const delta = event.deltaY ?? 0;
    if (delta === 0) return;
    const action = wheel[delta < 0 ? "up" : "down"];
    if (action === undefined) return; // an unbound direction still scrolls
    event.preventDefault();
    // Turning the other way is a new gesture, not the rest of this one.
    if (wheelTurn !== 0 && (wheelTurn < 0) !== (delta < 0)) wheelTurn = 0;
    wheelTurn += delta / notchOf(event.deltaMode);
    // The slack is floating point and nothing else: ten events of a tenth of a
    // notch sum to 0.9999999999999999, and a player who has turned the wheel a
    // whole click must not be told they have not.
    if (Math.abs(wheelTurn) + 1e-9 < 1) return;
    wheelTurn = 0;
    // A notch is an edge and a frame is polled, so the action is held long
    // enough for one to see it — the same shape `attachButtons` gives a tap.
    controls.setAction(action, true);
    const timer = wheelTimers.get(action);
    if (timer !== undefined) clearTimeout(timer);
    wheelTimers.set(action, setTimeout(() => {
      wheelTimers.delete(action);
      controls.setAction(action, false);
    }, wheelMs));
  }, false);
  on(host.window, "blur", clearHeld);
  // --- touch: the left of the surface is a stick, the rest of it looks around
@@ -226,6 +433,55 @@
export function createControls(host: Host, options: Options): Controls {
    for (const action of Array.from(held)) controls.setAction(action, false);
  }
  /** Whether the keyboard is the game's right now rather than the page's. */
  function engaged(): boolean {
    return locked || !requireLock;
  }
  /** One event's movement on one axis: a finite number of counts, clamped. */
  function counts(movement: number | undefined): number {
    const raw = movement ?? 0;
    return Number.isFinite(raw) ? clamp(raw, -maxMove, maxMove) : 0;
  }
  /**
   * Ask the browser for the pointer, the way a shooter wants it.
   *
   * `unadjustedMovement` is the first ask and the whole point of asking twice:
   * without it Chromium on Windows hands a page `movementX` with the operating
   * system's pointer acceleration already applied, so the same flick of the
   * same mouse is worth a different angle depending on how fast it was flicked
   * and the sensitivity in the menu is not the sensitivity you get. With it the
   * page is given raw counts. Chromium takes the dictionary; a browser that
   * does not either ignores it or rejects the request, so a refusal is asked
   * again plainly rather than left as the answer.
   *
   * Every failure is a `false`, never a throw and never an unhandled rejection:
   * a browser with no pointer lock, one that will not give it (Chromium refuses
   * for about a second after Escape let it go, which is exactly the moment a
   * paused game asks for it back), one that throws where it should reject.
   */
  async function lock(): Promise<boolean> {
    const surface = host.surface;
    if (typeof surface.requestPointerLock !== "function") return false;
    const asked = async (options?: { unadjustedMovement: boolean }): Promise<boolean> => {
      try {
        const answer = surface.requestPointerLock?.(options);
        // A promise is Chromium's answer and its rejection is a refusal; a
        // browser that answers with nothing has said yes, which is all a
        // pre-promise `requestPointerLock` ever said — and all it says about the
        // dictionary either, which is why that case is `"unknown"`.
        const promised = answer instanceof Promise;
        if (promised) await answer;
        granted = options === undefined ? "adjusted" : promised ? "raw" : "unknown";
        return true;
      } catch {
        return false;
      }
    };
    return (await asked({ unadjustedMovement: true })) || (await asked());
  }
  return controls;
}
@@ -5,8 +5,8 @@
 * a player sees as their window being thrown away mid-round.
 *
 * There is exactly one way to ask for the key rather than the meaning, and this
 * module is the three lines of it: the Keyboard Lock API. `keyboard.lock(["Escape"])`
 * says "deliver that key to the page while it is full screen"; the browser then
 * module is the three lines of it: the Keyboard Lock API. `keyboard.lock(codes)`
 * says "deliver those keys to the page while it is full screen"; the browser then
 * only leaves full screen when Escape is *held*, which is the behaviour the
 * platform intends and the one a game wants. It is Chrome's and Edge's; Safari
 * and Firefox do not have it, so `supported` says so and a game that asks gets
@@ -73,7 +73,22 @@
export type Escape = {
  detach(): void;
};
export function createEscape(host: EscapeHost, screen: Screen): Escape {
/**
 * The keys this page asks for, Escape and whatever else a game names, with no
 * key twice. A game names the rest because on Windows the browser's own
 * shortcuts are built out of Ctrl and a letter — and Ctrl is crouch: Ctrl+R
 * reloads a match away, Ctrl+W closes the tab it was in, Ctrl+1 changes tab.
 * (On a Mac those are Command, which no game binds, which is why this is a
 * Windows bug and not one anybody saw here.) A locked key is delivered to the
 * page instead, but only while the page is full screen, which is the only place
 * a browser will hand its own shortcuts over.
 */
export function createEscape(
  host: EscapeHost,
  screen: Screen,
  also: readonly string[] = [],
): Escape {
  const codes = [...new Set([ESCAPE, ...also])];
  const keyboard = host.keyboard;
  const supported = typeof keyboard?.lock === "function" && typeof keyboard?.unlock === "function";
  // Whether the last request was granted. `held` is this *and* the screen: the
@@ -101,7 +116,7 @@
export function createEscape(host: EscapeHost, screen: Screen): Escape {
    try {
      // A promise nobody awaits still rejects loudly, and a refusal here is not
      // news: it is a browser saying the key stays its own.
      const asking = keyboard?.lock?.([ESCAPE]);
      const asking = keyboard?.lock?.(codes);
      // Only the current request may claim the key: a stale one says nothing at
      // all, rather than answering for the lock that replaced it.
      if (asking instanceof Promise) asking.then(() => void (mine === asked && (granted = true)), () => {});
@@ -64,8 +64,9 @@
const NOT_THE_ENGINES = new Set([
  "AudioContext", "DynamicsCompressorNode", "Float32Array", "Float64Array", "GainNode",
  "Int32Array", "StereoPannerNode",
  "TEXTURE_2D_ARRAY",
  "addEventListener",
  "addEventListener", "auxclick",
  "cancelAnimationFrame", "createDynamicsCompressor", "createStereoPanner", "de_forge",
  "mousedown",
  "fullscreenElement",
  "pointerLockElement",
  "removeEventListener", "requestAnimationFrame", "uniformMatrix4fv",
@@ -59,7 +59,7 @@
export type { Frames, Loop, LoopOptions } from "./loop.ts";
export { attachButtons, createControls } from "./controls.ts";
export type {
  Button, ButtonOptions, Controls, Host, KeyEventish, Listens, LockOwner, MouseEventish,
  Options, Stick, Surface, TouchEventish, Touchish,
  Options, PointerMode, Stick, Surface, TouchEventish, Touchish, WheelEventish,
} from "./controls.ts";
/** The stage on the whole screen: whether this browser will, whether it is, and the way in and out. */
@@ -77,6 +77,13 @@
export type { Escape, EscapeHost, KeyboardLock, Screen } from "./escape.ts";
export { overlay } from "./overlay.ts";
export type { Overlay, Paint } from "./overlay.ts";
/**
 * The device pixel grid: how big a canvas's backing store is for its box, and
 * where a bar of pixels starts so both its edges land on one. Windows at 125%
 * is the reason this is arithmetic and not a rounding somebody remembered.
 */
export { backing, bar, MAX_RATIO, px, ratioOf } from "./pixels.ts";
/** A frame as data, in a pool: made once at a capacity, refilled, never grown. */
export { createScene, nextInstance, pushLine, pushShadow, resetScene } from "./scene.ts";
export type { Camera, Instance, Scene, SceneCapacity, Shadow } from "./scene.ts";
@@ -38,9 +38,9 @@
function recorder(): Paint & { calls: Call[]; texts: string[]; points: Call[] }
}
/** A tool set on a recorder, since every test below wants both. */
const tools = (width = 1280, height = 720) => {
const tools = (width = 1280, height = 720, dpr = 1) => {
  const paint = recorder();
  return { paint, o: overlay(paint, width, height) };
  return { paint, o: overlay(paint, width, height, dpr) };
};
const rects = (paint: ReturnType<typeof recorder>): Call[] =>
@@ -116,26 +116,75 @@
test("a faded line leaves the context solid, even when it draws nothing", () =>
  expect(paint.globalAlpha).toBe(1);
});
test("the crosshair strokes four arms, each between the gap and the gap plus the arm", () => {
test("the crosshair fills four arms, each between the gap and the gap plus the arm", () => {
  const { paint, o } = tools();
  o.crosshair(200, 100, 5, 7, "#8ea");
  expect(paint.strokeStyle).toBe("#8ea");
  expect(paint.calls.filter((c) => c[0] === "beginPath").length).toBe(1);
  expect(paint.calls.filter((c) => c[0] === "stroke").length).toBe(1);
  expect(paint.points).toEqual([
    ["moveTo", 212, 100], ["lineTo", 205, 100],
    ["moveTo", 188, 100], ["lineTo", 195, 100],
    ["moveTo", 200, 112], ["lineTo", 200, 105],
    ["moveTo", 200, 88], ["lineTo", 200, 95],
  // Filled, not stroked: a stroke is centred on its line and a line through a
  // fractional centre is grey on both sides of where it should be.
  expect(paint.fillStyle).toBe("#8ea");
  expect(paint.calls.some((c) => c[0] === "stroke")).toBe(false);
  expect(rects(paint)).toEqual([
    ["fillRect", 205, 99, 7, 2], // right: from the gap out, two pixels thick
    ["fillRect", 188, 99, 7, 2], // left, the same distance the other way
    ["fillRect", 199, 105, 2, 7], // down
    ["fillRect", 199, 88, 2, 7], // up
  ]);
});
test("no gap is a plain cross: the four arms meet at the centre", () => {
  const { paint, o } = tools();
  o.crosshair(100, 100, 0, 10, "#fff");
  expect(paint.points.filter((c) => c[1] === 100 && c[2] === 100).length).toBe(4);
  expect(paint.points).toContainEqual(["moveTo", 100, 90]);
  expect(paint.points).toContainEqual(["moveTo", 110, 100]);
  expect(rects(paint)).toEqual([
    ["fillRect", 100, 99, 10, 2],
    ["fillRect", 90, 99, 10, 2],
    ["fillRect", 99, 100, 2, 10],
    ["fillRect", 99, 90, 2, 10],
  ]);
});
test("the crosshair is whole device pixels and centred, at every ratio", () => {
  // The five ratios that matter: a plain screen, Windows at 125% and 150%, a
  // retina laptop, and a phone — which the backing store caps at 2 anyway.
  for (const dpr of [1, 1.25, 1.5, 2, 3]) {
    // Both an even canvas, whose centre is a pixel boundary, and an odd one,
    // whose centre is the middle of the middle pixel.
    for (const width of [Math.round(1280 * dpr), Math.round(1280 * dpr) + 1]) {
      const height = width - 1;
      const { paint, o } = tools(width, height, dpr);
      o.crosshair(width / 2, height / 2, o.px(4), o.px(7), "#fff");
      const drawn = rects(paint);
      expect(drawn.length).toBe(4);
      for (const [, x, y, w, h] of drawn) {
        for (const n of [x, y, w, h]) expect(Number.isInteger(n)).toBe(true);
        expect(w as number).toBeGreaterThan(0);
        expect(h as number).toBeGreaterThan(0);
      }
      // Symmetry: the right arm's near edge and the left arm's far edge are the
      // same distance from the true centre, and so are the down and up arms.
      const [right, left, down, up] = drawn as [Call, Call, Call, Call];
      const cx = width / 2, cy = height / 2;
      expect((right[1] as number) - cx).toBe(cx - ((left[1] as number) + (left[3] as number)));
      expect((down[2] as number) - cy).toBe(cy - ((up[2] as number) + (up[4] as number)));
      // And the arms straddle the centre: as much of the bar on one side as the
      // other, so the cross does not lean at 1.25 the way a stroke did.
      expect((right[2] as number) + (right[4] as number) / 2).toBe(cy);
      expect((down[1] as number) + (down[3] as number) / 2).toBe(cx);
    }
  }
});
test("a crosshair is the same size on the glass whatever the screen is made of", () => {
  // Four CSS pixels of arm are four device pixels at 1 and eight at 2: the same
  // length of glass. Before this they were four pixels either way, so the whole
  // cross was half the size on the screen where each pixel is half as wide.
  expect(tools(1280, 720, 1).o.px(4)).toBe(4);
  expect(tools(1600, 900, 1.25).o.px(4)).toBe(5);
  expect(tools(1920, 1080, 1.5).o.px(4)).toBe(6);
  expect(tools(2560, 1440, 2).o.px(4)).toBe(8);
  // And the arms are thicker with the pixels: two CSS pixels, not two of them.
  const { paint, o } = tools(2560, 1440, 2);
  o.crosshair(o.width / 2, o.height / 2, 0, 8, "#fff");
  expect(rects(paint)[0]).toEqual(["fillRect", 1280, 718, 8, 4]);
});
test("a bar fills the fraction of its width, and only ever a fraction of it", () => {
@@ -12,12 +12,20 @@
 * than `string` because a real context's `fillStyle` is a string *or* a
 * gradient *or* a pattern, and a narrower type here would force a cast there.
 *
 * `overlay(paint, width, height)` is built once — on a resize, not in a frame —
 * and the tools it hands back allocate nothing per call. It holds no colour a
 * game chose beyond one neutral scrim, and no word from either game.
 * `overlay(paint, width, height, ratio)` is built once — on a resize, not in a
 * frame — and the tools it hands back allocate nothing per call. It holds no
 * colour a game chose beyond one neutral scrim, and no word from either game.
 *
 * `width` and `height` are **device** pixels, which is what a canvas's backing
 * store is measured in, and `ratio` says how many of those go to a CSS pixel.
 * There is no context transform anywhere here: a transform is how a 1.25
 * display resamples everything drawn through it. See `./pixels.ts` for the
 * grid and the rule — it is why a crosshair arm is a filled rectangle of whole
 * pixels and not a stroked line through a fractional centre.
 */
import { clamp } from "./math.ts";
import { bar as pixelBar, px as pixelsOf, ratioOf } from "./pixels.ts";
/** Everything these tools ask of the thing they draw on. Nothing else. */
export type Paint = {
@@ -64,6 +72,9 @@
const LEAD = 18;
/** The four ways a crosshair arm points, made once rather than once a frame. */
const ARMS: readonly (readonly [number, number])[] = [[1, 0], [-1, 0], [0, 1], [0, -1]];
/** How thick a crosshair's arms are, in CSS pixels, when the caller says nothing. */
const ARM_THICKNESS = 2;
/** What `text` is given when it is given nothing, so the default allocates nothing. */
const PLAIN: TextOptions = {};
@@ -85,21 +96,39 @@
export type ColumnsAt = { x: number; y: number; lead?: number };
export type Overlay = {
  readonly width: number;
  readonly height: number;
  /** `width / 1280`, clamped to 0.7..1.4: the number every size here is scaled by. */
  /** Device pixels to the CSS pixel: 1 on a plain screen, 1.25 on Windows at 125%. */
  readonly ratio: number;
  /**
   * The number every size here is scaled by: how wide the canvas is *in CSS
   * pixels* against 1280, clamped to 0.7..1.4, times the device pixel ratio.
   *
   * The two halves are two different questions and were one number before.
   * How wide the window is decides how big the furniture should look — a phone
   * gets smaller text because it has less room, not because of its screen. How
   * dense the screen is decides how many pixels that look costs. Multiplied
   * rather than clamped together, a 1280-wide window renders the same physical
   * HUD at 1, 1.25 and 2, which it did not before: at 2 the clamp bit and the
   * whole HUD came out at 70% of its size.
   */
  readonly scale: number;
  /** The margin from the edge of the canvas that everything is laid out inside. */
  readonly pad: number;
  /** `font(30)` is `"30px system-ui, sans-serif"` on a 1280-wide canvas, and less on a phone. */
  font(px: number): string;
  /** As many whole device pixels as `css` CSS pixels are here. Never fewer than one. */
  px(css: number): number;
  /** A scrim behind something else: a filled rectangle, in `fill` or the neutral one. */
  panel(x: number, y: number, w: number, h: number, fill?: string): void;
  /** One string, and `globalAlpha` back at 1 whatever it was drawn at. */
  text(s: string, x: number, y: number, options?: TextOptions): void;
  /**
   * Four arms around a centre, each stroked from its outer end in to the gap,
   * so a gap of zero is a plain cross and a wide one is an open sight.
   * Four arms around a centre, each reaching from the gap out to `gap + arm`,
   * so a gap of zero is a plain cross and a wide one is an open sight. `gap`,
   * `arm` and `thickness` are device pixels — `px()` turns a CSS size into
   * them — and every arm is filled on whole pixels, so the cross is exact at
   * 1.25 and 1.5 as well as at 1 and 2. `thickness` defaults to two CSS pixels.
   */
  crosshair(cx: number, cy: number, gap: number, arm: number, color: string): void;
  crosshair(cx: number, cy: number, gap: number, arm: number, color: string, thickness?: number): void;
  /** The filled part of a bar: `fraction` of `w`, with the fraction clamped to 0..1. */
  bar(x: number, y: number, w: number, h: number, fraction: number, fill: string): void;
  /**
@@ -113,17 +142,20 @@
export type Overlay = {
  clock(seconds: number): string;
};
export function overlay(paint: Paint, width: number, height: number): Overlay {
  const scale = clamp(width / REFERENCE, MIN_SCALE, MAX_SCALE);
  const pad = Math.max(MIN_PAD, Math.round(width * PAD_FRACTION));
export function overlay(paint: Paint, width: number, height: number, dpr = 1): Overlay {
  const ratio = ratioOf(dpr);
  const scale = clamp(width / ratio / REFERENCE, MIN_SCALE, MAX_SCALE) * ratio;
  const pad = Math.round(Math.max(MIN_PAD * ratio, width * PAD_FRACTION));
  const lead = Math.round(LEAD * scale);
  return {
    width,
    height,
    ratio,
    scale,
    pad,
    font: (px) => `${Math.round(px * scale)}px ${FAMILY}`,
    px: (css) => pixelsOf(css, ratio),
    panel(x, y, w, h, fill = SCRIM) {
      paint.fillStyle = fill;
      paint.fillRect(x, y, w, h);
@@ -141,15 +173,32 @@
export function overlay(paint: Paint, width: number, height: number): Overlay {
      // line that leaves the context faded is a bug in every later line.
      paint.globalAlpha = 1;
    },
    crosshair(cx, cy, gap, arm, color) {
      paint.strokeStyle = color;
      paint.lineWidth = 2;
      paint.beginPath();
    crosshair(cx, cy, gap, arm, color, thickness) {
      // Four filled rectangles and not four strokes: see `./pixels.ts`. The
      // thickness bends by a pixel where it has to so the centre does not, and
      // the gap and the arm are whole pixels so an arm's outer end is an edge
      // and not a fade. `bar` is asked once per axis, not once per arm, because
      // the four arms share two centre lines.
      const thick = Math.max(1, Math.round(thickness ?? pixelsOf(ARM_THICKNESS, ratio)));
      const inner = Math.max(0, Math.round(gap));
      const length = Math.max(1, Math.round(arm));
      const [left, wide] = pixelBar(cx, thick);
      const [top, tall] = pixelBar(cy, thick);
      // Where an arm starts along its own axis. A centre in the middle of a
      // pixel — an odd canvas — pushes both ends out by that half pixel, which
      // keeps the two arms of a pair the same distance from the centre and
      // both of their ends on a boundary.
      const near = (centre: number, sign: number): number => {
        const fraction = centre - Math.floor(centre);
        const half = fraction === 0.5 ? 0.5 : 0;
        const base = half === 0.5 ? centre : Math.round(centre);
        return sign > 0 ? base + inner + half : base - inner - half - length;
      };
      paint.fillStyle = color;
      for (const [dx, dy] of ARMS) {
        paint.moveTo(cx + dx * (gap + arm), cy + dy * (gap + arm));
        paint.lineTo(cx + dx * gap, cy + dy * gap);
        if (dx !== 0) paint.fillRect(near(cx, dx), top, length, tall);
        else paint.fillRect(left, near(cy, dy), wide, length);
      }
      paint.stroke();
    },
    bar(x, y, w, h, fraction, fill) {
      paint.fillStyle = fill;
@@ -234,7 +234,9 @@
test("the recorder is a Paint, so the engine's overlay draws onto one", () => {
  draw.crosshair(400, 225, 4, 10, "#fff");
  expect(paint.texts).toEqual(["tick 1"]);
  expect(paint.calls[0]).toEqual(["clearRect", 0, 0, 800, 450]);
  expect(paint.calls.some((call) => call[0] === "stroke")).toBe(true);
  // The crosshair is four filled rectangles, so this is what a recorder has to
  // have taken: the fills, in the order the arms are drawn.
  expect(paint.calls.filter((call) => call[0] === "fillRect").length).toBe(4);
});
test("a browser with no 2D context hands back null rather than a recorder", () => {
@@ -225,8 +225,27 @@
export type FakeCanvas = FakeElement & {
  gl: unknown;
  /** How many times something asked for the pointer. */
  locks: number;
  /**
   * What each of those asks carried, oldest first: Chromium's
   * `{ unadjustedMovement: true }` for a game that wants raw counts, and
   * `undefined` for one that asked plainly.
   */
  lockOptions: unknown[];
  /**
   * Set to have the next ask refused, the way Chromium refuses one made within
   * about a second of Escape letting the pointer go — the exact moment a paused
   * game asks for it back. The promise rejects; `pointerLockElement` stays
   * where it was, because this canvas never sets it: a test says when a lock
   * arrived.
   */
  refuseLock: boolean;
  getContext(kind: string): unknown;
  requestPointerLock(): void;
  /**
   * Chromium's shape: a promise, resolved when the ask was taken. A browser
   * older than that returns undefined, and `createControls` reads both — this
   * is the newer one because Chrome and Edge are where the refusal happens.
   */
  requestPointerLock(options?: unknown): Promise<void>;
};
function canvasElement(id: string, paint: boolean): FakeCanvas {
@@ -236,12 +255,18 @@
function canvasElement(id: string, paint: boolean): FakeCanvas {
    paint: paint ? paintRecorder() : null,
    gl: null,
    locks: 0,
    lockOptions: [],
    refuseLock: false,
    getContext(kind) {
      if (kind === "2d") return this.paint;
      return kind === "webgl2" ? this.gl : null;
    },
    requestPointerLock() {
    requestPointerLock(options?: unknown) {
      this.locks += 1;
      this.lockOptions.push(options);
      return this.refuseLock
        ? Promise.reject(new Error("the pointer was asked for too soon after it was let go"))
        : Promise.resolve();
    },
  };
}
@@ -264,6 +289,12 @@
export type FakeDocument = FakeTarget & {
  /** The element that is full screen right now, or null. The browser owns this. */
  fullscreenElement: unknown;
  getElementById(id: string): FakeElement | null;
  /**
   * One element by selector, and the one selector it understands is a meta by
   * name — `meta[name="build"]`, which is how a game reads what the server said
   * it built the page from. Anything else is null: this is a page, not a DOM.
   */
  querySelector(selector: string): FakeElement | null;
  /** The `[data-action]` buttons, whatever the selector says: there is one list. */
  querySelectorAll(selector: string): FakeElement[];
  createElement(tag: string): FakeElement;
@@ -301,6 +332,13 @@
export type PageOptions = {
  paint?: boolean;
  /** What `matchMedia` answers. True is a phone. */
  coarse?: boolean;
  /**
   * The `<meta name=…>` elements this page was served with, by name — the
   * server's own words about the deployment, which `pages/shell.ts` writes and
   * a game reads back. Left out is a page with none, which is what a local run
   * with no commit looks like.
   */
  metas?: Readonly<Record<string, string>>;
  /**
   * Whether this browser can put an element full screen. Default true: asking
   * sets `document.fullscreenElement` and fires `fullscreenchange` at once.
@@ -363,6 +401,16 @@
export function fakePage(options: PageOptions = {}): FakePage {
    .map((id) => elements.get(id))
    .filter((found): found is FakeCanvas => found !== undefined);
  const buttons = (options.actions ?? []).map((action) => element({ action }));
  // The metas, keyed by the selector that finds one, because that is the only
  // question anything asks of them: `meta[name="build"]` and its content.
  const metas = new Map<string, FakeElement>(
    Object.entries(options.metas ?? {}).map(([name, content]) => {
      const meta = element({ tag: "meta" });
      meta.setAttribute("name", name);
      meta.setAttribute("content", content);
      return [`meta[name="${name}"]`, meta];
    }),
  );
  const frames: ((now: number) => void)[] = [];
  let clock = START;
@@ -371,6 +419,7 @@
export function fakePage(options: PageOptions = {}): FakePage {
    readyState: "complete",
    pointerLockElement: null as unknown,
    getElementById: (id) => elements.get(id) ?? null,
    querySelector: (selector) => metas.get(selector) ?? null,
    querySelectorAll: (_selector) => buttons,
    createElement: (tag) => element({ tag }),
    fullscreenElement: null as unknown,
@@ -0,0 +1,94 @@
/**
 * The grid the overlay draws on. Every number here is a device pixel, and the
 * point of every test is the same: whatever the ratio, an edge lands on a pixel.
 */
import { expect, test } from "bun:test";
import { backing, bar, MAX_RATIO, px, ratioOf } from "./pixels.ts";
/** The ratios this has to be exact at: a Mac, Windows at 125% and 150%, and up. */
const RATIOS = [1, 1.25, 1.5, 2, 3];
test("a ratio is a positive finite number, capped, and 1 when the browser is odd", () => {
  expect(ratioOf(1)).toBe(1);
  expect(ratioOf(1.25)).toBe(1.25);
  expect(ratioOf(3)).toBe(MAX_RATIO);
  expect(ratioOf(undefined)).toBe(1);
  expect(ratioOf(0)).toBe(1);
  expect(ratioOf(-2)).toBe(1);
  expect(ratioOf(Number.NaN)).toBe(1);
  expect(ratioOf(Number.POSITIVE_INFINITY)).toBe(1);
});
test("a backing store is whole pixels, never none, and never more than the cap", () => {
  expect(backing(1280, 720, 1)).toEqual([1280, 720]);
  expect(backing(1280, 720, 1.25)).toEqual([1600, 900]);
  expect(backing(1281, 721, 1.25)).toEqual([1601, 901]);
  expect(backing(1280, 720, 1.5)).toEqual([1920, 1080]);
  // Past the cap the box is drawn at the cap, not at the ratio.
  expect(backing(400, 300, 3)).toEqual([800, 600]);
  // A canvas the layout has not measured yet is one pixel, not zero: a zero
  // viewport is a WebGL error and a zero-wide 2D canvas throws on `getContext`.
  expect(backing(0, 0, 2)).toEqual([1, 1]);
  expect(backing(Number.NaN, 10, 1)).toEqual([1, 10]);
});
test("a CSS length becomes whole device pixels, and the smallest is one", () => {
  expect(px(2, 1)).toBe(2);
  expect(px(2, 1.25)).toBe(3);
  expect(px(2, 1.5)).toBe(3);
  expect(px(2, 2)).toBe(4);
  // A hairline is a pixel wherever it is drawn: nothing here ever rounds away.
  expect(px(0.4, 1)).toBe(1);
  expect(px(0, 2)).toBe(1);
  expect(px(Number.NaN, 2)).toBe(1);
});
test("a bar's two edges are whole pixels at every ratio, centred on an even canvas", () => {
  for (const ratio of RATIOS) {
    const width = Math.round(1280 * ratio); // even at all five
    const [at, size] = bar(width / 2, px(2, ratio));
    expect(Number.isInteger(at)).toBe(true);
    expect(Number.isInteger(size)).toBe(true);
    // The centre did not move: as much of the bar is left of it as right.
    expect(at + size / 2).toBe(width / 2);
  }
});
test("an odd canvas keeps its centre too, by thickening the bar rather than blurring it", () => {
  // 1601 device pixels: the centre is 800.5, the middle of pixel 800, which is
  // where an *odd* bar belongs. A two-pixel ask becomes three rather than a
  // two-pixel smear across three columns.
  const [at, size] = bar(1601 / 2, 2);
  expect([at, size]).toEqual([799, 3]);
  expect(at + size / 2).toBe(800.5);
  // And a three-pixel ask on an even canvas becomes four, the same way round.
  expect(bar(800, 3)).toEqual([798, 4]);
  // An ask that already fits is left alone in both cases.
  expect(bar(800.5, 3)).toEqual([799, 3]);
  expect(bar(800, 2)).toEqual([799, 2]);
});
test("a bar anywhere else is snapped to the grid its thickness wants", () => {
  // A marker chasing a moving thing: no thickness fits, so the centre moves by
  // at most half a pixel and the edges stay exact.
  for (const centre of [100.2, 100.37, 99.8, 0.1, -3.4]) {
    for (const thickness of [1, 2, 3, 4]) {
      const [at, size] = bar(centre, thickness);
      expect(Number.isInteger(at)).toBe(true);
      expect(size).toBe(thickness);
      expect(Math.abs(at + size / 2 - centre)).toBeLessThanOrEqual(0.5);
    }
  }
});
test("a bar is at least one pixel thick and survives a number that is not one", () => {
  // Nothing rounds away to nothing: the least a bar can be asked for is one
  // pixel, and on a boundary that one is widened to two by the rule above
  // rather than being drawn half in each of the pixels either side of it.
  expect(bar(10, 0)).toEqual([9, 2]);
  expect(bar(10, -4)).toEqual([9, 2]);
  expect(bar(10, Number.NaN)).toEqual([9, 2]);
  expect(bar(10.5, 0)).toEqual([10, 1]);
  expect(bar(Number.NaN, 2)).toEqual([-1, 2]);
});
@@ -0,0 +1,95 @@
/**
 * The device pixel grid: how large a canvas's backing store is for the box it
 * was laid out in, and where a bar of pixels has to start so that both of its
 * edges land on a pixel rather than a quarter of the way through one.
 *
 * Both were arithmetic each game had its own copy of — the renderer's `resize`,
 * the shooter's HUD and its map plan, the range's two canvases, the example's —
 * and the second one nobody had written at all.
 *
 * **Why it matters, and why it never showed here.** Windows ships display
 * scaling at 125% and 150% far more often than anything else does, so
 * `devicePixelRatio` on the machine #307 was reported from is 1.25 or 1.5 and
 * not the 1 or 2 a Mac laptop hands out. At 1.25 a canvas 1281 CSS pixels wide
 * has a 1601-pixel backing store; its centre is 800.5; and a two-pixel
 * crosshair arm *stroked* through that centre covers three columns of pixels at
 * two thirds of its colour each. It is a smeared, dim cross that will not sit
 * still — "buggy on Windows" — and on a 1.0 display it is pixel-perfect, which
 * is why it survived this long.
 *
 * **The rule chosen.** The overlay draws in device pixels with no context
 * transform, so nothing it draws is ever resampled, and everything with an edge
 * is an axis-aligned rectangle filled on whole device pixels. A fill of whole
 * pixels is exact at every ratio; a stroke has to be offset by half a line
 * width, and whether that offset is a half or a zero depends on the parity of a
 * number the browser chose. Sizes are given in CSS pixels and turned into whole
 * device pixels here, so what is drawn is the same size on the glass at 1,
 * 1.25, 1.5, 2 and 3.
 */
/**
 * The ratio a backing store is capped at. Past two, the pixels cost memory and
 * fill rate and buy nothing an eye can find at arm's length — and a phone at 3
 * is exactly the machine that cannot afford them.
 */
export const MAX_RATIO = 2;
/** A usable pixel ratio out of whatever a browser's `devicePixelRatio` is. */
export function ratioOf(dpr: number | undefined): number {
  if (dpr === undefined || !Number.isFinite(dpr) || dpr <= 0) return 1;
  return Math.min(dpr, MAX_RATIO);
}
/**
 * The backing store for a box `clientWidth` × `clientHeight` CSS pixels at
 * `dpr`: whole pixels, at least one of each, and the ratio capped.
 *
 * The CSS size is never touched — the canvas keeps the box the layout gave it,
 * so there is no shift and no stretch beyond the half pixel `Math.round` can
 * cost on an odd width, which the browser resolves in the compositor and no
 * arithmetic here can do better.
 */
export function backing(clientWidth: number, clientHeight: number, dpr: number | undefined): [number, number] {
  const ratio = ratioOf(dpr);
  return [whole(clientWidth * ratio), whole(clientHeight * ratio)];
}
/** One dimension of a backing store: a whole number of pixels, and never none. */
const whole = (value: number): number =>
  Math.max(1, Math.round(Number.isFinite(value) ? value : 0));
/** As many whole device pixels as `css` CSS pixels are at `ratio`, and never none. */
export const px = (css: number, ratio: number): number =>
  Math.max(1, Math.round((Number.isFinite(css) ? css : 0) * ratio));
/**
 * Where a bar `thickness` device pixels thick, centred on `centre`, starts —
 * and how thick it ends up. Both numbers come back whole, so a `fillRect` of
 * them covers exactly that many pixels and no fraction of any other.
 *
 * A bar of **even** thickness has both edges on pixel boundaries when its
 * centre is on one; a bar of **odd** thickness when its centre is the middle of
 * a pixel. A crosshair's centre is always one or the other — a canvas with an
 * even width puts it on a boundary and an odd one in the middle of the middle
 * pixel — so there the thickness bends by a pixel to meet the centre and the
 * centre itself never moves. One device pixel of width is not something an eye
 * finds; half a pixel of blur, on the one thing a player stares at for an hour,
 * is.
 *
 * Anywhere else — a marker following a moving thing, which the example's plan
 * draws — no thickness fits, so the centre is snapped to the nearest grid this
 * thickness wants, which moves it by at most half a device pixel and leaves
 * every edge exact.
 */
export function bar(centre: number, thickness: number): [number, number] {
  const want = Math.max(1, Math.round(Number.isFinite(thickness) ? thickness : 1));
  const middle = Number.isFinite(centre) ? centre : 0;
  const fraction = middle - Math.floor(middle);
  if (fraction === 0 || fraction === 0.5) {
    const odd = want % 2 === 1;
    const size = (fraction === 0.5) === odd ? want : want + 1;
    return [middle - size / 2, size];
  }
  const grid = want % 2 === 0 ? Math.round(middle) : Math.floor(middle) + 0.5;
  return [grid - want / 2, want];
}
@@ -25,6 +25,7 @@
import { multiply, perspective, viewMatrix, modelMatrix, type Vec3 } from "./math.ts";
import type { Mesh } from "./mesh.ts";
import { backing } from "./pixels.ts";
import type { Scene, Tint } from "./scene.ts";
const SCENE_VS = `#version 300 es
@@ -180,9 +181,6 @@
type Buffers = { vao: WebGLVertexArrayObject; count: number; buffers: WebGLBuffe
/** The bytes an atlas of this shape must be: RGBA8, every layer, tightly packed. */
const atlasBytes = (size: number, layers: number): number => size * size * 4 * layers;
/** Past this the pixels cost more than they show, on a phone especially. */
const MAX_PIXEL_RATIO = 2;
/** The clip planes a game that says nothing gets: Source units, the shooter's. */
const NEAR = 6, FAR = 12000;
@@ -352,9 +350,13 @@
export function createRenderer(canvas: HTMLCanvasElement, assets: RendererAssets
  const far = assets.far ?? FAR;
  const resize = (): void => {
    const dpr = Math.min((pixelRatio === undefined ? 1 : pixelRatio()) || 1, MAX_PIXEL_RATIO);
    const width = Math.round(canvas.clientWidth * dpr);
    const height = Math.round(canvas.clientHeight * dpr);
    // One place says how large a backing store is, so the scene canvas and the
    // 2D canvas over it are the same grid: `./pixels.ts`.
    const [width, height] = backing(
      canvas.clientWidth,
      canvas.clientHeight,
      pixelRatio === undefined ? 1 : pixelRatio(),
    );
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
@@ -1,5 +1,5 @@
{
  "version": "0.3.0",
  "version": "0.6.0",
  "names": [
    "Activations",
    "Adam",
@@ -47,6 +47,7 @@
    "LockOwner",
    "Loop",
    "LoopOptions",
    "MAX_RATIO",
    "Mat4",
    "Mesh",
    "MouseEventish",
@@ -58,6 +59,7 @@
    "Paint",
    "Painter",
    "Pin",
    "PointerMode",
    "Policy",
    "QUANTUM",
    "Renderer",
@@ -77,6 +79,7 @@
    "Touchish",
    "UpdateStats",
    "Vec3",
    "WheelEventish",
    "Wish",
    "accelerate",
    "add",
@@ -87,7 +90,9 @@
    "applyGrads",
    "attachButtons",
    "attenuate",
    "backing",
    "backward",
    "bar",
    "builder",
    "cellAt",
    "clamp",
@@ -151,9 +156,11 @@
    "pushEffect",
    "pushLine",
    "pushShadow",
    "px",
    "quadMesh",
    "quantise",
    "rad",
    "ratioOf",
    "rayBox",
    "region",
    "resetEffects",
@@ -65,10 +65,15 @@
function drew(p: ExamplePage, ms: number): Call[] {
const aim = (calls: Call[]): string =>
  calls.filter((c) => c[0] === "fillRect" && c[3] === 2 && c[4] === 2).map((c) => `${c[1]},${c[2]}`).join(" ");
/** Where the player's crosshair was centred: the one path this page strokes. */
/**
 * Where the player's crosshair is, read off its first arm: the crosshair is
 * four filled rectangles of whole device pixels rather than a stroked path —
 * see `engine/pixels.ts` — and the first of them is the one reaching right,
 * eight pixels long and two thick, so its corner moves with the centre.
 */
const marker = (calls: Call[]): [number, number] => {
  const move = calls.find((c) => c[0] === "moveTo") as Call | undefined;
  return [Number(move?.[1] ?? 0), Number(move?.[2] ?? 0)];
  const arm = calls.find((c) => c[0] === "fillRect" && c[3] === 8 && c[4] === 2) as Call | undefined;
  return [Number(arm?.[1] ?? 0), Number(arm?.[2] ?? 0)];
};
test("the table it binds is the game's own, plus the two keys the page adds", () => {
@@ -124,7 +129,9 @@
test("it boots, asks for a frame, and draws the readout over the room", () => {
    // and the crosshair is the one thing the readout draws into the middle.
    expect(first.calls[0]).toEqual(["clearRect", 0, 0, 800, 450]);
    expect(first.calls.some((c) => c[0] === "fillRect" && c[3] === 800)).toBe(false);
    expect(first.calls.filter((c) => c[0] === "moveTo").length).toBe(4);
    expect(first.calls.filter((c) => c[0] === "fillRect" && (c[3] === 2 || c[4] === 2)).length)
      .toBeGreaterThanOrEqual(4);
    expect(first.calls.some((c) => c[0] === "stroke")).toBe(false);
    // A frame was asked for before this one ran, so the loop keeps going.
    expect(p.frames.length).toBe(1);
  } finally {
@@ -23,7 +23,7 @@
import { KEYS, TICK, assets, createExampleScene, createWorld, look, step, type World } from "../engine/example.ts";
import {
  attachButtons, createControls, createFullscreen, createLoop, createRenderer, type Paint,
  attachButtons, backing, createControls, createFullscreen, createLoop, createRenderer, type Paint,
} from "../engine/index.ts";
import { drawPlan, drawReadout, type Phase } from "./plan.ts";
@@ -110,12 +110,10 @@
export function boot(): void {
  let starting = false;
  let frameMs = 16.7;
  /** Match a canvas's backing store to its box, at most twice the CSS pixels.
  /** Match a canvas's backing store to its box, the way `engine/pixels.ts` says.
   * The renderer does this for the scene canvas itself; the HUD is the page's. */
  const size = (canvas: HTMLCanvasElement): [number, number] => {
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const width = Math.max(1, Math.round(canvas.clientWidth * dpr));
    const height = Math.max(1, Math.round(canvas.clientHeight * dpr));
    const [width, height] = backing(canvas.clientWidth, canvas.clientHeight, window.devicePixelRatio);
    if (canvas.width !== width) canvas.width = width;
    if (canvas.height !== height) canvas.height = height;
    return [width, height];
@@ -154,10 +152,10 @@
export function boot(): void {
    if (renderer !== null) renderer.draw(look(world, frameScene), elapsed);
    else if (plan !== null) {
      const [width, height] = size(scene);
      drawPlan(plan, width, height, frame);
      drawPlan(plan, width, height, frame, window.devicePixelRatio);
    }
    const [width, height] = size(hud);
    drawReadout(readout, width, height, frame);
    drawReadout(readout, width, height, frame, window.devicePixelRatio);
    $("fps").textContent = `${(1000 / Math.max(1, frameMs)).toFixed(0)} fps · ${frameMs.toFixed(1)} ms`;
  });
}
@@ -56,9 +56,11 @@
test("the plan is one background, one room, one plate and the aim", () => {
  expect(room[1] + room[3]).toBeLessThanOrEqual(HEIGHT);
  // The readout is the other canvas's: the plan itself says nothing.
  expect(paint.texts).toEqual([]);
  // The player is a crosshair: four arms, one path, one stroke.
  expect(paint.calls.filter((c) => c[0] === "moveTo").length).toBe(4);
  expect(paint.calls.filter((c) => c[0] === "stroke").length).toBe(1);
  // The player is a crosshair: four arms, each a filled rectangle of whole
  // device pixels — two pixels thick and eight long — and nothing stroked.
  const arms = all.filter((r) => (r[2] === 2 && r[3] === 8) || (r[2] === 8 && r[3] === 2));
  expect(arms.length).toBe(4);
  expect(paint.calls.filter((c) => c[0] === "stroke").length).toBe(0);
});
test("the aim walks out of the eye and stops at the wall", () => {
@@ -100,10 +102,13 @@
test("the readout says the score, the clock and the one line of help", () => {
  // The crosshair is the middle of the room, and only when there is a room:
  // on the plan the player is a crosshair where they stand instead.
  const middle = read({ drawn: true });
  expect(middle.calls.filter((c) => c[0] === "moveTo").length).toBe(4);
  expect(middle.calls.filter((c) => c[0] === "moveTo").map((c) => Number(c[1])))
    .toContain(WIDTH / 2);
  expect(read({ drawn: false }).calls.filter((c) => c[0] === "moveTo").length).toBe(0);
  // Four arms, filled: the two vertical ones are two pixels wide and straddle
  // the middle of the canvas, which is what "centred" has to mean in pixels.
  const arms = rects(middle).filter((r) => (r[2] === 2 && r[3] === 10) || (r[2] === 10 && r[3] === 2));
  expect(arms.length).toBe(4);
  const upright = arms.filter((r) => r[2] === 2);
  for (const arm of upright) expect(arm[0] + arm[2] / 2).toBe(WIDTH / 2);
  expect(rects(read({ drawn: false })).filter((r) => r[2] === 2 && r[3] === 10).length).toBe(0);
});
test("the clock reads the overlay's m:ss, and the last seconds are said differently", () => {
@@ -59,8 +59,14 @@
const lineOf = (o: Overlay): number => o.pad + Math.round(30 * o.scale);
 * cleared and no background is painted — this canvas sits over the scene, and
 * in WebGL2 the scene is the room itself, so the crosshair is drawn here too.
 */
export function drawReadout(paint: Paint, width: number, height: number, frame: Frame): void {
  const o = overlay(paint, width, height);
export function drawReadout(
  paint: Paint,
  width: number,
  height: number,
  frame: Frame,
  dpr = 1,
): void {
  const o = overlay(paint, width, height, dpr);
  const { world, clock } = frame;
  const late = clock <= HURRY;
  const line = lineOf(o);
@@ -72,13 +78,19 @@
export function drawReadout(paint: Paint, width: number, height: number, frame:
    frame.fraction, late ? WARN : AIM);
  // Where the shot goes, when the shot goes into a room you are standing in.
  // On the plan below it is the dots instead, which is what a plan can say.
  if (frame.drawn) o.crosshair(width / 2, height / 2, Math.round(4 * o.scale), Math.round(10 * o.scale), AIM);
  if (frame.drawn) o.crosshair(width / 2, height / 2, o.px(4), o.px(10), AIM);
  o.text(SAY[frame.phase], width / 2, height - o.pad, { align: "center", font: o.font(18), fill: DIM });
}
/** The room from above: the whole frame, for a browser that cannot draw it. */
export function drawPlan(paint: Paint, width: number, height: number, frame: Frame): void {
  const o = overlay(paint, width, height);
export function drawPlan(
  paint: Paint,
  width: number,
  height: number,
  frame: Frame,
  dpr = 1,
): void {
  const o = overlay(paint, width, height, dpr);
  const { world } = frame;
  o.panel(0, 0, width, height, BACK);
@@ -109,5 +121,5 @@
export function drawPlan(paint: Paint, width: number, height: number, frame: Fra
    if (x < ROOM.min[0] || x > ROOM.max[0] || y < ROOM.min[1] || y > ROOM.max[1]) break;
    o.panel(sx(x) - dot / 2, sy(y) - dot / 2, dot, dot, AIM);
  }
  o.crosshair(sx(world.pos[0]), sy(world.pos[1]), 0, Math.round(8 * o.scale), TEXT);
  o.crosshair(sx(world.pos[0]), sy(world.pos[1]), 0, o.px(8), TEXT);
}
@@ -103,8 +103,17 @@
export const GAMES: readonly Game[] = [
     * ends read. 115,156 raw and 44,864 gzipped, measured by
     * `bun run scripts/build.ts` — 1.8 kB of gzip for a round five people can
     * play together, and the rooms' own server half ships in no bundle at all.
     *
     * Raised again by #307's merge of that work with the Windows one — the engine's
     * pixel grid, the raw pointer ask and the keyboard lock, and the line a bug
     * report pastes — and with #279's contact shadows, which every game gets from
     * the renderer whether it casts one or not: 123,024 raw and 47,926 gzipped
     * measured together by `bun run scripts/build.ts`. Each of those pulls left
     * its own number a few hundred bytes clear, and three of them in a row is how
     * a ceiling ends up tighter than the rule above, so this one is measured plus
     * seven per cent again rather than a hair over today.
     */
    ceiling: { raw: 122_000, gzip: 47_500 },
    ceiling: { raw: 132_000, gzip: 51_500 },
    assets: [
      {
        name: "weights",
@@ -124,15 +133,27 @@
export const GAMES: readonly Game[] = [
    label: "range",
    entry: "src/range/main.ts",
    /**
     * Raised by #279, which gave the engine contact shadows and this game one
     * under every plate: a third program with its own two shaders, the blended
     * pass that draws it, and the pool and the height arithmetic behind it.
     * 38,690 raw and 16,050 gzipped, measured by `bun run scripts/build.ts` —
     * 2,631 and 881 bytes more than the ceiling #63 set, of which most is the
     * renderer's and arrives whether a game casts a shadow or not. Worth it
     * here: a plate hanging over the lane now says how far over it is hanging.
     * Raised by #63, which gave the range a person to be: its tuning, its hull
     * and the engine's solver. Raised again by #308 and #309, which put the
     * pointer lock, its fallback and the whole mouse — every button, and the
     * wheel counted in notches — inside the engine's controls: 37,663 raw and
     * 15,815 gzipped, measured by `bun run scripts/build.ts`. The range is the
     * smallest game here, so the engine's floor is the largest share of it.
     *
     * Raised again by #279, which gave the engine contact shadows and this game
     * one under every plate: a third program with its own two shaders, the
     * blended pass that draws it, and the pool and the height arithmetic behind
     * it — most of which is the renderer's and arrives whether a game casts a
     * shadow or not. Worth it here: a plate hanging over the lane now says how
     * far over it is hanging.
     *
     * And again by #311, whose `src/engine/pixels.ts` every canvas in every game
     * now sizes itself through, and by the pointer mode the same pull's line
     * reports. Measured with all of it together: 40,816 raw and 16,927 gzipped by
     * `bun run scripts/build.ts`. The range is the smallest game here, so nearly
     * all of that is the engine's floor and not the drills.
     */
    ceiling: { raw: 41_500, gzip: 17_200 },
    ceiling: { raw: 44_000, gzip: 18_200 },
    assets: [],
    blurb:
      "thirty seconds on the clock and two drills down one lane — plates that pop up, and plates that slide across it — a shot traced in three dimensions and a score, every line of it out of the engine and none of it out of the shooter.",
@@ -144,8 +165,14 @@
export const GAMES: readonly Game[] = [
    href: "/example",
    label: "example",
    entry: "src/example/main.ts",
    /** Raised by #216, which gave the example the WebGL2 renderer it advertises — a tool set ships whole. */
    ceiling: { raw: 23_500, gzip: 10_200 },
    /**
     * Raised by #216, which gave the example the WebGL2 renderer it advertises —
     * a tool set ships whole. Raised again by #311, whose pixel grid the
     * example's two canvases size themselves through like everything else here,
     * and again by #279's contact shadows, which arrive with the renderer:
     * 25,004 raw and 10,631 gzipped, measured by `bun run scripts/build.ts`.
     */
    ceiling: { raw: 26_800, gzip: 11_400 },
    assets: [],
    blurb:
      "the guide's own game, served: one room, one plate, thirty seconds and a score, drawn in WebGL2 through the engine's own renderer, with the plan from above for a browser that has none — the price tag on a third game.",
@@ -36,12 +36,12 @@
import { expect, test } from "bun:test";
import { mkdtempSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { CS_KEYS, CS_MOUSE } from "../client/binding.ts";
import { CS_KEYS, CS_MOUSE, CS_WHEEL } from "../client/binding.ts";
import type { Cost } from "../cost.ts";
import { openDatabase } from "../db.ts";
import { page as headless } from "../example/stage.test-helper.ts";
import { GAMES } from "../games.ts";
import { RANGE_KEYS, RANGE_MOUSE } from "../range/binding.ts";
import { RANGE_KEYS, RANGE_MOUSE, RANGE_WHEEL } from "../range/binding.ts";
import { examplePage } from "./example.ts";
import { gamePage } from "./game.ts";
import { rangePage } from "./range.ts";
@@ -146,7 +146,7 @@
const SURFACES: readonly Surface[] = [
  {
    game: "app",
    html: gamePage(db, { ...SHELL, who: { role: "anon" } }),
    bound: [...Object.values(CS_KEYS), ...Object.values(CS_MOUSE)],
    bound: [...Object.values(CS_KEYS), ...Object.values(CS_MOUSE), ...Object.values(CS_WHEEL)],
    elsewhere: [
      {
        why: "the left of the stage is a thumb stick, and it is analogue: `wishSpeed` in " +
@@ -174,6 +174,13 @@
const SURFACES: readonly Surface[] = [
          "phone reaches every one of them without a key.",
        actions: ["slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "slot7", "slot8", "slot9", "slot10", "slot11"],
      },
      {
        why: "the wheel pressed, which is where every other shooter keeps the knife. A phone reaches " +
          "the same pocket the same way it reaches the others — `src/client/economy.ts` equips what " +
          "was bought — and a knife button beside the six on the pad is the trade nobody has made " +
          "for `slot3` either.",
        actions: ["knife"],
      },
      {
        why: "the buy panel draws its own Rebuy control beside the tiles (`src/client/buy.ts`), which " +
          "is the button a thumb presses; X is that same call from the keyboard, for a hand that is " +
@@ -196,7 +203,9 @@
const SURFACES: readonly Surface[] = [
  {
    game: "range",
    html: rangePage(db, SHELL),
    bound: [...Object.values(RANGE_KEYS), ...Object.values(RANGE_MOUSE)],
    bound: [
      ...Object.values(RANGE_KEYS), ...Object.values(RANGE_MOUSE), ...Object.values(RANGE_WHEEL),
    ],
    elsewhere: [
      {
        why: "the same thumb stick, and the page says so in words above the board: on a touch screen " +
@@ -393,6 +393,11 @@
const menu = (visitor: Who, asked: Asked, daily: Daily): string => `
        number row buys the tile it is printed on and <kbd>X</kbd> buys last round's loadout again ·
        <kbd>1</kbd><kbd>2</kbd><kbd>3</kbd> guns · <kbd>Tab</kbd> scores · <kbd>F</kbd> full screen ·
        <kbd>Esc</kbd> or <kbd>P</kbd> pause</p>
      <p class="hint">The whole mouse is bound, not just its two big buttons: the wheel jumps
        either way it is turned, the wheel pressed pulls the knife, and the two under your thumb
        plant-or-defuse and throw an HE — which on Windows are the browser's Back and Forward, and
        while the game has the mouse they are the game's, so a thumb mid-round cannot leave the
        page.</p>
      <p class="hint">Full screen keeps the screen through a pause where a browser lets it:
        Chrome and Edge hand the game the <kbd>Esc</kbd> key, and hold it down to leave. Safari and
        Firefox leave full screen on <kbd>Esc</kbd> whatever the page asks, so Resume puts it back —
@@ -402,6 +407,16 @@
const menu = (visitor: Who, asked: Asked, daily: Daily): string => `
      <p class="hint">Every weapon's numbers — what it costs, what it fires and what one shot of it
        does to a person — are on <a href="${WEAPONS_HREF}">the weapons page</a>, rendered from the
        table the fight is tuned by. It is a page of its own so it is a link you can send.</p>
      <details id="support">
        <summary>What this browser is doing</summary>
        <p class="hint">One line for a bug report: the browser, the graphics driver behind the
          picture and the size it is drawn at. "Buggy on Windows" and this line are two different
          reports, and only one of them can be answered. Nothing is sent anywhere — it is text on
          this page until you copy it.</p>
        <p class="line" id="supportline">This line is filled in by the game, so a browser with
          scripts off has nothing to paste.</p>
        <button type="button" id="copysupport" hidden>Copy this line</button>
      </details>
    `;
/**
@@ -112,7 +112,9 @@
const NOTE = `
      <div class="row"><button type="button" class="primary" id="look">Capture the mouse</button></div>
      <p class="hint"><kbd>WASD</kbd> move · <kbd>Space</kbd> jump · <kbd>Ctrl</kbd> crouch ·
        <kbd>Shift</kbd> walk · <kbd>F</kbd> or the mouse fires · <kbd>R</kbd> reload ·
        <kbd>Enter</kbd> start · <kbd>T</kbd> the other drill · <kbd>G</kbd> full screen, which is
        <kbd>Enter</kbd> start · <kbd>T</kbd> the other drill · the wheel jumps and the two buttons
        under your thumb reload and switch drill, which on Windows are the browser's Back and
        Forward and are this page's while it has the mouse · <kbd>G</kbd> full screen, which is
        G here because F is the trigger · <kbd>Esc</kbd> gives the mouse back, and keeps the screen
        where a browser lets the page hold the key — Chrome and Edge do, and Safari and Firefox
        leave full screen with it, so Capture the mouse puts that back too. On a touch screen the left of the view is a stick, the right looks around, and the
@@ -109,9 +109,14 @@
test("text that carries markup comes out inert, wherever it enters", () => {
  expect(html.match(/<script/g)?.length).toBe(1);
  expect(html).not.toContain("<script>alert(1)</script>");
  expect(html).not.toContain("</script><script>");
  // Ten, not eight: the heading and the environment are each printed twice,
  // once in the header and once in the footer.
  expect(html.split("&lt;/script&gt;&lt;script&gt;alert(1)&lt;/script&gt;").length - 1).toBe(10);
  // Eleven, not eight: the heading and the environment are each printed twice,
  // once in the header and once in the footer, and the commit is printed twice
  // too — the header a person reads and the `<meta name=build>` the game reads
  // for the line a bug report pastes.
  expect(html.split("&lt;/script&gt;&lt;script&gt;alert(1)&lt;/script&gt;").length - 1).toBe(11);
  // Including in that meta, whose content is an attribute and is not a way out
  // of one.
  expect(html).toContain(`<meta name="build" content="&lt;/script&gt;`);
});
test("markup handed in as markup is written through, not escaped again", () => {
@@ -281,6 +281,12 @@
export type PageOptions = {
  nav: NavEntry[];
  env: string;
  pull: string | undefined;
  /**
   * The commit this deployment was built from. It is in the header for a person
   * to read and in a `<meta name=build>` for the game to read, because the line
   * a bug report pastes has to say whether it came from production or from a
   * preview — the same string, escaped in both places, and empty is neither.
   */
  commit: string;
  /**
   * The URL of the one module script. Nothing else runs — and a page that runs
@@ -331,6 +337,7 @@
export function page(options: PageOptions): string {
<link rel="icon" href="${FAVICON}">
${preloads(options.assets)}${endpoints(options.endpoints)}<title>${escape(options.title)}</title>
<meta name="description" content="${escape(options.description)}">
${options.commit ? `<meta name="build" content="${escape(options.commit)}">\n` : ""}
<style>${styleFor(options.extraStyle)}</style>
<header>
  <h1>${escape(options.heading)}</h1>
@@ -1,6 +1,6 @@
import { expect, test } from "bun:test";
import {
  heldActions, NO_INTENT, RANGE_ACTIONS, RANGE_KEYS, RANGE_MOUSE, RANGE_TAP, readIntent,
  heldActions, NO_INTENT, RANGE_ACTIONS, RANGE_KEYS, RANGE_MOUSE, RANGE_TAP, RANGE_WHEEL, readIntent,
} from "./binding.ts";
const NONE = { x: 0, y: 0 };
@@ -24,6 +24,15 @@
test("the range's bindings are its own, not the shooter's", () => {
  expect(RANGE_KEYS.KeyF).toBe("fire");
  expect(RANGE_MOUSE[0]).toBe("fire");
  expect(RANGE_MOUSE[2]).toBeUndefined();
  // The two under the thumb are bound because they are Back and Forward to a
  // browser on Windows, and the wheel presses nothing: this game has nothing
  // left worth a button, and an unbound button stays the browser's.
  expect(RANGE_MOUSE[3]).toBe("reload");
  expect(RANGE_MOUSE[4]).toBe("drill");
  expect(RANGE_MOUSE[1]).toBeUndefined();
  expect(RANGE_WHEEL.up).toBe("jump");
  expect(RANGE_WHEEL.down).toBe("jump");
  for (const action of Object.values(RANGE_WHEEL)) expect<readonly string[]>(RANGE_ACTIONS).toContain(action);
  expect([...RANGE_TAP]).toEqual(["jump", "reload", "start", "drill"]);
  // Nothing cs-shaped: no buy, no scoreboard, no weapon slots.
  for (const code of ["KeyB", "Tab", "Digit1", "Digit2", "Digit3"])
@@ -21,8 +21,18 @@
export const RANGE_KEYS: Record<string, string> = {
  KeyG: "fullscreen",
};
/** One weapon, one button: the left one. There is nothing to scope here. */
export const RANGE_MOUSE: Record<number, string> = { 0: "fire" };
/**
 * One weapon, one trigger: the left button. The two under the thumb reload and
 * switch drill — not because a range needs them, but because they are Back and
 * Forward to a browser on Windows, and a thumb that finds one mid-run would
 * otherwise leave the page. Bound here, their default is taken by the controls;
 * the wheel pressed is bound to nothing, because this game has nothing left
 * worth a button and an unbound button stays the browser's.
 */
export const RANGE_MOUSE: Record<number, string> = { 0: "fire", 3: "reload", 4: "drill" };
/** The wheel jumps, whichever way it is turned. */
export const RANGE_WHEEL: Record<string, string> = { up: "jump", down: "jump" };
/** On-screen buttons that are a tap, not a hold. */
export const RANGE_TAP = ["jump", "reload", "start", "drill"] as const;
@@ -35,6 +35,14 @@
function booted(
const hudTexts = (p: RangePage): string[] => p.hud.paint?.texts ?? [];
/**
 * Let the browser's answer to a pointer lock come back. Asking is a promise
 * now — a browser refuses one asked for too soon, and this page reads the
 * refusal rather than pretending the mouse arrived — so a click on Capture is
 * answered a turn of the loop later, not inside the click.
 */
const settled = (): Promise<void> => Bun.sleep(0);
test("G and the button put the lane on the whole screen, and a browser that will not is not lied about", () => {
  const { p, undo } = booted();
  try {
@@ -59,7 +67,7 @@
test("G and the button put the lane on the whole screen, and a browser that will
  }
});
test("Escape gives the mouse back, and the screen a browser took comes back with Capture", () => {
test("Escape gives the mouse back, and the screen a browser took comes back with Capture", async () => {
  // Bun has no Keyboard Lock API, so this is the browser where Escape keeps its
  // own meaning — Safari on a Mac — and the way back is the one this page owns.
  const { p, undo } = booted();
@@ -70,6 +78,7 @@
test("Escape gives the mouse back, and the screen a browser took comes back with
    p.by("look").fire("click");
    p.document.pointerLockElement = p.scene;
    p.document.fire("pointerlockchange");
    await settled();
    expect(p.document.fullscreenElement).toBe(stage);
    expect(p.by("note").hidden).toBe(true);
@@ -190,7 +199,7 @@
test("a phone gets there too: the left of the stage is a stick, the right looks
  }
});
test("the mouse turns the view once it is locked, and not before", () => {
test("the mouse turns the view once it is locked, and not before", async () => {
  const { p, undo } = booted();
  try {
    p.window.fire("mousemove", { movementX: 10, movementY: 0 });
@@ -198,8 +207,12 @@
test("the mouse turns the view once it is locked, and not before", () => {
    expect(hudTexts(p)).toContain("yaw 0.0° · pitch 0.0°");
    p.by("look").fire("click");
    await settled();
    expect(p.by("note").hidden).toBe(true);
    expect(p.scene.locks).toBe(1);
    // Raw counts, asked for by name: without this Windows hands the page its
    // own pointer acceleration and the same flick is worth a different angle.
    expect(p.scene.lockOptions).toEqual([{ unadjustedMovement: true }]);
    p.document.pointerLockElement = p.scene;
    p.document.fire("pointerlockchange");
    p.window.fire("mousemove", { movementX: 10, movementY: 10 });
@@ -221,6 +234,29 @@
test("the mouse turns the view once it is locked, and not before", () => {
  }
});
test("a refused pointer leaves the note up: the page never says captured when it is not", async () => {
  const { p, undo } = booted();
  try {
    // Chromium refusing a lock asked for within a second of the last one being
    // released — press Escape, press Capture, and this is what comes back.
    p.scene.refuseLock = true;
    p.by("look").fire("click");
    await settled();
    // Asked twice: once for raw counts and once plainly, in case the dictionary
    // was what this browser objected to. Both refused, so the note stays.
    expect(p.scene.locks).toBe(2);
    expect(p.by("note").hidden).toBe(false);
    // And pressing it again once the browser has calmed down works.
    p.scene.refuseLock = false;
    p.by("look").fire("click");
    await settled();
    expect(p.by("note").hidden).toBe(true);
  } finally {
    undo();
  }
});
test("a canvas with no context is a sentence on the page, not an exception", () => {
  const { p, undo } = booted({ has2d: false });
  try {
@@ -46,7 +46,7 @@
 */
import { createRangeAudio } from "./audio.ts";
import { RANGE_KEYS, RANGE_MOUSE, RANGE_TAP, heldActions, readIntent } from "./binding.ts";
import { RANGE_KEYS, RANGE_MOUSE, RANGE_TAP, RANGE_WHEEL, heldActions, readIntent } from "./binding.ts";
import { RANGE_ROOM } from "./level.ts";
import {
  RANGE_HULL, RANGE_MOVE, createRangeBody, createRangeWish, rangeEye, rangeWish,
@@ -59,8 +59,8 @@
import {
  type DrillName, type Target,
} from "./targets.ts";
import {
  angleVectors, attachButtons, clamp, createControls, createEscape, createFullscreen, createLoop,
  createRenderer, move, type KeyboardLock, type Vec3,
  angleVectors, attachButtons, backing, clamp, createControls, createEscape, createFullscreen,
  createLoop, createRenderer, move, type KeyboardLock, type Vec3,
} from "../engine/index.ts";
/** The range's own step: 50 Hz, deliberately not the shooter's 64. */
@@ -123,7 +123,7 @@
export function boot(): void {
  const controls = createControls(
    { surface: scene, window, document },
    { keys: RANGE_KEYS, mouse: RANGE_MOUSE },
    { keys: RANGE_KEYS, mouse: RANGE_MOUSE, wheel: RANGE_WHEEL },
  );
  attachButtons(document.querySelectorAll<HTMLElement>("[data-action]"), controls, { tap: RANGE_TAP });
  // The range's own recipes over the engine's device. Nothing is opened here:
@@ -199,17 +199,20 @@
export function boot(): void {
  // A phone has no pointer to lock, and says so by throwing or by rejecting:
  // either way the note gets out of the way and the touch look still works.
  $("look").addEventListener("click", () => {
    note.hidden = true;
    // The click is a gesture, so it is also the way back into a screen a browser
    // took: on a Mac, Escape hands the window back whether the page wanted it or
    // not, and `wantsFull` below is how this page remembers that it did.
    restoreFull();
    try {
      const asked: unknown = scene.requestPointerLock?.();
      if (asked instanceof Promise) asked.catch(() => {});
    } catch {
      // No pointer lock here. Nothing to do about it, and nothing to report.
    }
    // The note goes when the pointer actually arrives, and not before. A
    // refusal is a real answer here — Chromium will not grant a lock for about
    // a second after Escape released one, which is exactly how fast a person
    // presses Capture again — and the old code hid the note either way, leaving
    // a page that looked captured and did not turn. A phone is the other case:
    // no pointer to lock, the refusal is honest, and the finger still looks
    // around, so the note goes.
    void controls.lock().then((got) => {
      note.hidden = got || matchMedia("(pointer: coarse)").matches;
    });
  });
  controls.onUnlock = () => {
    note.hidden = false;
@@ -255,17 +258,23 @@
export function boot(): void {
  const escape = createEscape(
    { window, document, keyboard: (navigator as { keyboard?: KeyboardLock }).keyboard },
    full,
    // Every key this page binds, asked for by name while it has the screen: on
    // Windows the browser's own shortcuts are Ctrl and a letter, and Ctrl here
    // is crouch — Ctrl+W is close the tab, Ctrl+R is reload the run away.
    Object.keys(RANGE_KEYS),
  );
  escape.onPress = () => {
    if (controls.locked) document.exitPointerLock();
  };
  touch.hidden = !matchMedia("(pointer: coarse)").matches;
  /** Match a canvas's backing store to its box, at most twice the CSS pixels. */
  /**
   * Match a canvas's backing store to its box. The arithmetic — and the cap on
   * the ratio — is `engine/pixels.ts`, which is also where the overlay learns
   * to put an edge on a pixel at 125%.
   */
  const size = (canvas: HTMLCanvasElement): [number, number] => {
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const width = Math.max(1, Math.round(canvas.clientWidth * dpr));
    const height = Math.max(1, Math.round(canvas.clientHeight * dpr));
    const [width, height] = backing(canvas.clientWidth, canvas.clientHeight, window.devicePixelRatio);
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
@@ -372,7 +381,9 @@
export function boot(): void {
      renderer.draw(buildRangeScene(run, view, trail, time, frameScene), elapsed);
    } else if (sceneCtx !== null) {
      const [sw, sh] = size(scene);
      drawHorizon(sceneCtx, view, sw, sh, { eye: view.eye, targets: run.targets });
      drawHorizon(
        sceneCtx, view, sw, sh, { eye: view.eye, targets: run.targets }, window.devicePixelRatio,
      );
    }
    // No third branch: the guard above returned when both were null.
    const [hw, hh] = size(hud);
@@ -401,6 +412,7 @@
export function boot(): void {
      },
      hw,
      hh,
      window.devicePixelRatio,
    );
    $("fps").textContent = `${(1000 / Math.max(1, frameMs)).toFixed(0)} fps · ${frameMs.toFixed(1)} ms`;
  }
@@ -109,8 +109,14 @@
test("the HUD is cleared and every line is drawn once", () => {
  drawReadout(paint, READOUT, 960, 540);
  expect(paint.calls[0]?.[0]).toBe("clearRect");
  expect(paint.texts).toEqual(readoutLines(READOUT));
  // The crosshair: two strokes crossing at the centre.
  expect(paint.lines).toContainEqual(["moveTo", 480, 270 - Math.max(6, Math.round(960 / 90))]);
  // The crosshair: four filled arms of whole device pixels, meeting at the
  // centre of the canvas — 480, 270 — with no gap between them.
  const arm = Math.max(6, Math.round(960 / 90));
  const rects = paint.calls.filter((c) => c[0] === "fillRect");
  expect(rects).toContainEqual(["fillRect", 480, 269, arm, 2]);
  expect(rects).toContainEqual(["fillRect", 480 - arm, 269, arm, 2]);
  expect(rects).toContainEqual(["fillRect", 479, 270, 2, arm]);
  expect(rects).toContainEqual(["fillRect", 479, 270 - arm, 2, arm]);
});
test("the horizon follows the pitch and the compass follows the yaw", () => {
@@ -137,6 +143,33 @@
test("the horizon follows the pitch and the compass follows the yaw", () => {
  expect(turned.texts).not.toContain("0");
});
test("the fallback scene is the same size on the glass at every device ratio", () => {
  // This is the picture a machine whose driver refused the shaders gets — see
  // `client/support.ts` — so at 150% its lines cannot be two thirds of a pixel
  // and its compass numbers cannot be eight pixels tall.
  const tickHeight = (paint: ReturnType<typeof recorder>): number => {
    // The compass's first tick: the second moveTo/lineTo pair, after the horizon.
    const [, , up, down] = paint.lines;
    return Number(down?.[2]) - Number(up?.[2]);
  };
  for (const [dpr, ratio] of [[1, 1], [1.25, 1.25], [1.5, 1.5], [2, 2], [3, 2]] as const) {
    const paint = recorder();
    const side = Math.round(900 * ratio);
    drawHorizon(paint, { yaw: 0, pitch: 0 }, side, Math.round(450 * ratio), EMPTY, dpr);
    // Eight CSS pixels above the horizon and eight below, whatever a pixel is.
    expect(tickHeight(paint)).toBe(2 * Math.round(8 * ratio));
    // The last font and line width set are the compass's: twelve CSS pixels of
    // text and one of tick, in device pixels, and never rounded away to none.
    expect(paint.font).toBe(`${Math.round(12 * ratio)}px system-ui, sans-serif`);
    expect(paint.lineWidth).toBe(Math.max(1, Math.round(ratio)));
    // A 3× phone is drawn at the cap the backing store is capped at, not at 3.
    if (dpr === 3) expect(paint.font).toBe("24px system-ui, sans-serif");
  }
});
/** No plates: the scene a browser with no WebGL2 draws before a run starts. */
const EMPTY: Sight = { eye: EYE, targets: [] };
/** A plate at a place, so the projection below is arithmetic and not a seed. */
const plate = (at: [number, number, number], half = 16, left = 1): Target => ({
  id: 1,
@@ -17,7 +17,9 @@
 * changes nothing.
 */
import { angleDelta, clamp, deg, overlay, type Paint, type Vec3 } from "../engine/index.ts";
import {
  angleDelta, clamp, deg, overlay, px as pixelsOf, ratioOf, type Paint, type Vec3,
} from "../engine/index.ts";
import { EYE, type Report, type Target } from "./targets.ts";
/** The 2D calls this module makes: the engine's surface, re-exported so `main.ts` can name it. */
@@ -177,6 +179,14 @@
export function blips(view: View, sight: Sight, width: number, height: number):
 * Every part of it comes from the same two angles the panel prints, so what you
 * see and what it says cannot disagree — and a browser with no WebGL2 can still
 * find a plate, shoot it and read the score.
 *
 * `width` and `height` are device pixels, and `dpr` says how many go to a CSS
 * pixel, so the horizon's line and the compass's ticks and numbers are the same
 * size on the glass at 125% and on a retina screen as they are at 100% — this is
 * the picture a machine whose driver refused the shaders actually gets, and a
 * half-pixel hairline with six-pixel labels is not a picture. What it does *not*
 * snap is the horizon or a blip: both move with the view, and a moving line
 * snapped to the grid steps rather than slides.
 */
export function drawHorizon(
  paint: Paint,
@@ -184,8 +194,12 @@
export function drawHorizon(
  width: number,
  height: number,
  sight: Sight = EMPTY_SIGHT,
  dpr = 1,
): void {
  const px = perDegree(height);
  const ratio = ratioOf(dpr);
  /** A length written in CSS pixels, in the device pixels this canvas is in. */
  const size = (css: number): number => pixelsOf(css, ratio);
  // Pitch is positive downwards, so looking down lifts the horizon up the screen.
  const horizon = clamp(height / 2 - view.pitch * px, -height, height * 2);
  paint.fillStyle = SKY;
@@ -195,26 +209,27 @@
export function drawHorizon(
  paint.fillRect(0, top, width, height - top);
  paint.strokeStyle = LINE;
  paint.lineWidth = 2;
  paint.lineWidth = size(2);
  paint.beginPath();
  paint.moveTo(0, horizon);
  paint.lineTo(width, horizon);
  paint.stroke();
  // One tick per 15°, only the ones that fall on screen.
  const tick = size(8), margin = size(8);
  paint.strokeStyle = DIM;
  paint.lineWidth = 1;
  paint.font = "12px system-ui, sans-serif";
  paint.lineWidth = size(1);
  paint.font = `${size(12)}px system-ui, sans-serif`;
  paint.textBaseline = "top";
  for (let angle = 0; angle < 360; angle += 15) {
    const x = width / 2 + angleDelta(angle, view.yaw) * px;
    if (x < 8 || x > width - 8) continue;
    if (x < margin || x > width - margin) continue;
    paint.beginPath();
    paint.moveTo(x, horizon - 8);
    paint.lineTo(x, horizon + 8);
    paint.moveTo(x, horizon - tick);
    paint.lineTo(x, horizon + tick);
    paint.stroke();
    paint.fillStyle = DIM;
    paint.fillText(`${angle}`, x + 4, horizon + 10);
    paint.fillText(`${angle}`, x + size(4), horizon + tick + size(2));
  }
  // The plates. A square the size the angle says, dimmed once it is most of
@@ -226,12 +241,18 @@
export function drawHorizon(
}
/** The HUD: the panel of numbers, and the crosshair the view turns around. */
export function drawReadout(paint: Paint, r: Readout, width: number, height: number): void {
export function drawReadout(
  paint: Paint,
  r: Readout,
  width: number,
  height: number,
  dpr = 1,
): void {
  paint.clearRect(0, 0, width, height);
  // The tools are built here rather than kept, because this is the one place
  // the range knows its size: a frame is a few dozen calls, not a few thousand.
  const o = overlay(paint, width, height);
  const o = overlay(paint, width, height, dpr);
  // The engine's margin: a fiftieth of the width, as this always was, and never
  // under 12 px rather than under 10 — which is the same number above 600 px
  // wide and two pixels kinder to a phone below it.
@@ -251,5 +272,7 @@
export function drawReadout(paint: Paint, r: Readout, width: number, height: num
  // The crosshair marks the centre the angles are measured from: no gap, so the
  // four arms meet and it reads as the plain cross it always was.
  o.crosshair(Math.round(width / 2), Math.round(height / 2), 0, Math.max(6, Math.round(width / 90)), "#8ea");
  // The centre of the canvas and not a rounded one: `crosshair` puts the arms
  // on whole pixels around it, which a rounded centre would only move off.
  o.crosshair(width / 2, height / 2, 0, Math.max(o.px(6), Math.round(width / 90)), "#8ea");
}
		@@ -419,6 +419,56 @@ phone, where there is no keyboard and no pointer to lock. A browser that will no
419	419	put an element full screen — an iPhone will not — never shows that button rather
420	420	than showing one that does nothing.
421	421
	422	The whole mouse plays, not just its two big buttons. The wheel jumps either
	423	way it is turned — counted in notches, so one click of a wheel is one press
	424	whether the browser sends a hundred pixels, three lines or a page, and a
	425	trackpad's stream of small deltas has to travel a click's distance to be one —
	426	the wheel pressed pulls the knife, and the two buttons under your thumb plant or
	427	defuse and throw an HE. On Windows those two are the browser's Back and Forward:
	428	while the game has the mouse their `mousedown` and their `auxclick` are
	429	prevented, so a thumb mid-round cannot leave the page with the match on it. At
	430	`/range` the thumb pair reloads and switches drill and the middle button is left
	431	to the browser. A button no game binds keeps whatever meaning the browser gave it.
	432
	433	Windows is asked for the mouse the way Windows needs. `Controls.lock()` asks
	434	for `unadjustedMovement`, because without it Chromium on Windows hands the page
	435	a `movementX` with the OS's pointer speed and "enhance pointer precision"
	436	already applied — the same flick is worth a different angle than it is on a Mac,
	437	and non-linearly so — and falls back to a plain ask on a browser that will not
	438	take the dictionary. The answer is read rather than dropped: a refusal leaves the
	439	pause panel up with a sentence, instead of a match running with a dead mouse. The
	440	Keyboard Lock API is asked for every key each game binds, which on Windows
	441	matters twice over: crouch is <kbd>Ctrl</kbd>, so crouch-and-forward is Ctrl+W
	442	and crouch-and-reload is Ctrl+R, and out of full screen no browser hands those
	443	over — so a match in progress puts a `beforeunload` confirmation in the way.
	444
	445	And it is sharp at 125%. Windows ships display scaling at 125% and 150% far
	446	more often than anything else does, and a crosshair stroked through the centre
	447	of a 1601-pixel-wide backing store covers three columns of pixels at two thirds
	448	of its colour each: a dim, smeared cross that a 1.0 laptop never shows you.
	449	`src/engine/pixels.ts` is the one place that says how large a canvas's backing
	450	store is and where a bar of pixels has to start for both its edges to land on
	451	one; the overlay draws in device pixels with no context transform, and a
	452	crosshair arm is a rectangle filled on whole pixels whose thickness bends by a
	453	pixel rather than letting the centre move by half of one. Sizes are written in
	454	CSS pixels and turned into whole device pixels there, so the HUD is the same size
	455	on the glass at 1, 1.25, 1.5 and 2 instead of shrinking to 70% on a dense screen.
	456	All three games go through it, including the range's no-WebGL2 horizon, which is
	457	the picture a machine whose driver refused the shaders actually gets.
	458
	459	If it still misbehaves, there is a line to paste. The menu prints one: the
	460	browser and the platform, what the WebGL2 driver calls itself — on Windows the
	461	ANGLE string naming the Direct3D device — the stage's size, the pixel ratio,
	462	whether the pointer lock is raw and whether the keyboard lock was granted.
	463	`src/client/support.ts` is a pure function of those facts; every one of them
	464	comes from outside the page, so every one is flattened of control characters,
	465	stripped of the separator and cut to 120 characters, and it reaches the DOM
	466	through `textContent`. When the picture cannot be built at all — ANGLE on D3D11
	467	refuses shaders a desktop driver waves through — the boot catches the throw, the
	468	menu says so in words with the driver's own log on the end of that line, and the
	469	loop does not start. A black canvas with no sentence is the one bug report
	470	nobody can answer.
	471
422	472	Escape is the one key the browser reads before the page does, and on a Mac what
423	473	it means is give the window back: full screen drops with the whole animation,
424	474	mid-round. So the game asks for the key rather than obeying it. Where a browser
		@@ -49,9 +49,9 @@ function fixture(): { dir: string; entries: Entry[]; source: (n: string, t: stri
49	49
50	50	test("the entry table is what the app ships today, each with the size it may not pass", () => {
51	51	expect(ENTRIES).toEqual([
52		{ name: "app", entry: "src/client/main.ts", ceiling: { raw: 122_000, gzip: 47_500 } },
53		{ name: "range", entry: "src/range/main.ts", ceiling: { raw: 41_500, gzip: 17_200 } },
54		{ name: "example", entry: "src/example/main.ts", ceiling: { raw: 23_500, gzip: 10_200 } },
	52	{ name: "app", entry: "src/client/main.ts", ceiling: { raw: 132_000, gzip: 51_500 } },
	53	{ name: "range", entry: "src/range/main.ts", ceiling: { raw: 44_000, gzip: 18_200 } },
	54	{ name: "example", entry: "src/example/main.ts", ceiling: { raw: 26_800, gzip: 11_400 } },
55	55	]);
56	56	// And it is the registry projected, not a second list beside it: a game's
57	57	// source and its ceiling are written down once, in `src/games.ts`.
		@@ -1,5 +1,5 @@
1	1	import { expect, test } from "bun:test";
2		import { CS_KEYS, CS_MOUSE, CS_TAP, NUMBER_ROW, readIntent, slotAction, slotIndex } from "./binding.ts";
	2	import { CS_KEYS, CS_MOUSE, CS_TAP, CS_WHEEL, NUMBER_ROW, readIntent, slotAction, slotIndex } from "./binding.ts";
3	3
4	4	const NONE = { x: 0, y: 0 };
5	5	const intent = (actions: string[], stick = NONE) => readIntent(new Set(actions), stick);
		@@ -25,6 +25,16 @@ test("the bindings are the ones the keyboard has always had", () => {
25	25	expect(CS_KEYS.Digit3).toBe("slot3");
26	26	expect(CS_MOUSE[0]).toBe("fire");
27	27	expect(CS_MOUSE[2]).toBe("scope");
	28	// The whole mouse, because an unbound button is one the browser keeps: 3 and
	29	// 4 are Back and Forward on Windows, and the wheel pressed is the quick knife.
	30	expect(CS_MOUSE[1]).toBe("knife");
	31	expect(CS_MOUSE[3]).toBe("use");
	32	expect(CS_MOUSE[4]).toBe("grenade");
	33	// The wheel jumps whichever way it is turned, which is how half of this
	34	// game's players jump at all.
	35	expect(CS_WHEEL.up).toBe("jump");
	36	expect(CS_WHEEL.down).toBe("jump");
	37	expect(intent(["jump"]).input.jump).toBe(true);
28	38	expect([...CS_TAP]).toEqual(["jump", "reload", "buy", "grenade", "flash", "smoke"]);
29	39	// F is the page's, not the world's: `main.ts` hears it on `onAction` and asks
30	40	// the browser for the screen, and nothing about an `Input` changes for it.
		@@ -64,6 +74,15 @@ test("only the first three of the row are pockets: the rest are the panel's and
64	74	}
65	75	});
66	76
	77	test("the wheel pressed is the knife pocket, and it is not a tile of the buy panel", () => {
	78	// The same pocket `3` is, by a name no tile is printed with: with the shop
	79	// open a key of the number row buys, and a thumb on the wheel means the knife
	80	// rather than whatever the third tile happens to be.
	81	expect(intent(["knife"]).slotWanted).toBe(3);
	82	expect(slotIndex("knife")).toBeNull();
	83	expect(intent(["knife"]).input).toEqual(intent([]).input);
	84	});
	85
67	86	test("nothing held is nothing asked for", () => {
68	87	const { input, scoreboard, slotWanted } = intent([]);
69	88	expect(input.forward).toBe(0);
		@@ -59,8 +59,27 @@ export const CS_KEYS: Record<string, string> = {
59	59	KeyX: "rebuy",
60	60	};
61	61
62		/** Left fires, right scopes. */
63		export const CS_MOUSE: Record<number, string> = { 0: "fire", 2: "scope" };
	62	/**
	63	* Left fires, right scopes, and the three buttons a five-button mouse has as
	64	* well — all of them, because a bound button is a button the engine takes the
	65	* browser's meaning away from and an unbound one is left alone.
	66	*
	67	* That matters most for the two under the thumb: to a browser on Windows they
	68	* are Back and Forward, so a thumb that finds one mid-round in Edge leaves the
	69	* page and takes the match with it. Bound here, they are the game's. Which
	70	* actions they get is the pair a thumb reaches for: plant-or-defuse, and the HE.
	71	*
	72	* The wheel pressed is the quick knife every other shooter puts there — it is
	73	* `knife` rather than `slot3` on purpose, because the number row is also the
	74	* buy panel's and a middle click with the shop open would otherwise spend the
	75	* money on whatever tile is printed with a 3.
	76	*/
	77	export const CS_MOUSE: Record<number, string> = {
	78	0: "fire", 1: "knife", 2: "scope", 3: "use", 4: "grenade",
	79	};
	80
	81	/** The wheel jumps, both ways, which is the bind half this game plays with. */
	82	export const CS_WHEEL: Record<string, string> = { up: "jump", down: "jump" };
64	83
65	84	/** On-screen buttons that are a tap, not a hold. */
66	85	export const CS_TAP = ["jump", "reload", "buy", "grenade", "flash", "smoke"] as const;
		@@ -102,7 +121,9 @@ export function readIntent(held: ReadonlySet<string>, stick: { x: number; y: num
102	121	scoreboard: down("scoreboard"),
103	122	// Three pockets, and only three: the rest of the number row belongs to the
104	123	// buy panel, and a world that has never heard of `slot4` cannot be steered
105		// by the key that buys the fourth tile.
106		slotWanted: down("slot3") ? 3 : down("slot2") ? 2 : down("slot1") ? 1 : null,
	124	// by the key that buys the fourth tile. `knife` is the third pocket by
	125	// another name — the wheel pressed, which no tile is printed with.
	126	slotWanted:
	127	down("slot3") \|\| down("knife") ? 3 : down("slot2") ? 2 : down("slot1") ? 1 : null,
107	128	};
108	129	}
		@@ -83,12 +83,14 @@ const HEIGHT = 720;
83	83	*/
84	84	function draw(
85	85	world: World,
86		options: { width?: number; height?: number; scoreboard?: boolean; view?: Player } = {},
	86	options: {
	87	width?: number; height?: number; scoreboard?: boolean; view?: Player; dpr?: number;
	88	} = {},
87	89	): Recorder {
88	90	const paint = recorder();
89	91	drawHud(
90	92	paint, world, options.width ?? WIDTH, options.height ?? HEIGHT,
91		options.scoreboard ?? false, options.view ?? world.me,
	93	options.scoreboard ?? false, options.view ?? world.me, options.dpr ?? 1,
92	94	);
93	95	return paint;
94	96	}
		@@ -111,19 +113,28 @@ function line(paint: Recorder, text: string): Call {
111	113	// --- the crosshair ---------------------------------------------------------
112	114
113	115	/**
114		* The crosshair's first arm, as how far each of its two ends is from the middle
115		* of the screen. Which end is stroked first is not something anybody can see —
116		* the engine's `crosshair` draws an arm outer end inwards, the HUD used to draw
117		* it inner end out, and it is the same segment — so this reads near and far
118		* rather than first and second.
	116	* The crosshair's arm reaching right, as how far each of its two ends is from
	117	* the middle of the screen. An arm is a filled rectangle of whole device pixels
	118	* now rather than a stroked segment — see `engine/pixels.ts` — so it is found
	119	* as the first fill that starts right of the centre and straddles the middle
	120	* row, which nothing else on the HUD does.
119	121	*/
120		function armOf(paint: Recorder, width = WIDTH): { near: number; far: number } {
121		const start = paint.calls.findIndex((c) => c.op === "moveTo");
122		const ends = [paint.calls[start], paint.calls[start + 1]]
123		.map((c) => Math.abs(Number(c?.args[0]) - width / 2));
124		return { near: Math.min(...ends), far: Math.max(...ends) };
	122	function armOf(paint: Recorder, width = WIDTH, height = HEIGHT): { near: number; far: number } {
	123	const cx = width / 2, cy = height / 2;
	124	const arm = paint.calls.find((c) =>
	125	c.op === "fillRect" && Number(c.args[0]) > cx &&
	126	Number(c.args[1]) <= cy && Number(c.args[1]) + Number(c.args[3]) >= cy);
	127	if (arm === undefined) throw new Error("no crosshair arm was filled");
	128	const near = Number(arm.args[0]) - cx;
	129	return { near, far: near + Number(arm.args[2]) };
125	130	}
126	131
	132	/** Whether a crosshair was drawn at all: four arms, or none. */
	133	const aimed = (paint: Recorder, width = WIDTH, height = HEIGHT): boolean =>
	134	paint.calls.some((c) =>
	135	c.op === "fillRect" && Number(c.args[0]) > width / 2 &&
	136	Number(c.args[1]) <= height / 2 && Number(c.args[1]) + Number(c.args[3]) >= height / 2);
	137
127	138	/** How far the crosshair's first arm starts from the middle of the screen. */
128	139	const gapOf = (paint: Recorder, width = WIDTH): number => armOf(paint, width).near;
129	140
		@@ -138,14 +149,17 @@ const spreadOf = (world: World, moving: number): number =>
138	149	test("the crosshair opens exactly as far as the gun is inaccurate, and is gone when you are", () => {
139	150	const still = scene();
140	151	const rest = draw(still);
141		// At a standstill it is the gun's own spread and nothing else.
142		expect(gapOf(rest)).toBeCloseTo(4 + spreadOf(still, 0) * 14, 10);
	152	// At a standstill it is the gun's own spread and nothing else — in whole
	153	// device pixels, because half a pixel of crosshair is a grey smear and not a
	154	// finer aim. At a ratio of 1, which is what this file draws at, a device
	155	// pixel is a CSS pixel and the number is the one it always was, rounded.
	156	expect(gapOf(rest)).toBe(Math.round(4 + spreadOf(still, 0) * 14));
143	157	// Each arm is seven pixels long, from the gap outwards.
144		expect(armOf(rest).far).toBeCloseTo(gapOf(rest) + 7, 10);
	158	expect(armOf(rest).far).toBe(gapOf(rest) + 7);
145	159
146	160	// Running wide open: any speed at or over the walk cap counts as fully moving.
147	161	const running = scene((w) => { w.me.vel = [1000, 0, 0]; });
148		expect(gapOf(draw(running))).toBeCloseTo(4 + spreadOf(running, 1) * 14, 10);
	162	expect(gapOf(draw(running))).toBe(Math.round(4 + spreadOf(running, 1) * 14));
149	163	expect(gapOf(draw(running))).toBeGreaterThan(gapOf(rest));
150	164
151	165	// Scoped it draws tight, and darkens everything outside the sight.
		@@ -157,7 +171,54 @@ test("the crosshair opens exactly as far as the gun is inaccurate, and is gone w
157	171	// Dead players do not aim: no crosshair, no sight, nothing stroked at all.
158	172	const dead = draw(scene((w) => { w.me.alive = false; }));
159	173	expect(dead.calls.some((c) => c.op === "stroke")).toBe(false);
160		expect(dead.calls.some((c) => c.op === "moveTo")).toBe(false);
	174	expect(aimed(dead)).toBe(false);
	175	});
	176
	177	test("the crosshair is whole device pixels and centred, at every ratio Windows has", () => {
	178	// The report behind this: Windows ships display scaling at 125% and 150%, and
	179	// a crosshair stroked through a centre at 800.5 is a grey smear three columns
	180	// wide. Every arm is a filled rectangle of whole pixels now, and the four of
	181	// them are symmetrical about the true centre of the canvas.
	182	for (const dpr of [1, 1.25, 1.5, 2]) {
	183	// An even backing store and an odd one: 125% of an odd CSS width is where
	184	// the centre lands in the middle of a pixel rather than on a boundary.
	185	for (const width of [Math.round(1280 * dpr), Math.round(1280 * dpr) + 1]) {
	186	const height = width - 1;
	187	const paint = draw(scene(), { width, height, dpr });
	188	const arms = paint.calls.filter((c) =>
	189	c.op === "fillRect" && Number(c.args[2]) < width / 4 && Number(c.args[3]) < height / 4);
	190	expect(arms.length).toBeGreaterThanOrEqual(4);
	191	for (const arm of arms.slice(0, 4))
	192	for (const n of arm.args.slice(0, 4)) expect(Number.isInteger(Number(n))).toBe(true);
	193	// The arm reaching right and the one reaching left are the same distance
	194	// from the centre, so the cross does not lean at 125%.
	195	const { near, far } = armOf(paint, width, height);
	196	const left = paint.calls.filter((c) =>
	197	c.op === "fillRect" && Number(c.args[0]) + Number(c.args[2]) < width / 2 &&
	198	Number(c.args[1]) <= height / 2 && Number(c.args[1]) + Number(c.args[3]) >= height / 2);
	199	const mirror = left[0] as Call;
	200	expect(width / 2 - (Number(mirror.args[0]) + Number(mirror.args[2]))).toBe(near);
	201	expect(width / 2 - Number(mirror.args[0])).toBe(far);
	202	}
	203	}
	204	});
	205
	206	test("a crosshair is the same size on the glass however dense the screen is", () => {
	207	// Seven CSS pixels of arm is seven device pixels at 1 and fourteen at 2. It
	208	// used to be seven either way, so on a retina screen the cross was half the
	209	// size it is on a plain one — and at 125% it was four fifths of it.
	210	const at = (dpr: number): number => {
	211	const { near, far } = armOf(
	212	draw(scene(), { width: Math.round(1280 * dpr), height: Math.round(720 * dpr), dpr }),
	213	Math.round(1280 * dpr), Math.round(720 * dpr),
	214	);
	215	return far - near;
	216	};
	217	// Within half a device pixel of seven CSS pixels at each ratio, which is as
	218	// exact as whole pixels allow — and the point is that it scales at all.
	219	for (const dpr of [1, 1.25, 1.5, 2]) expect(Math.abs(at(dpr) - 7 * dpr)).toBeLessThanOrEqual(0.5);
	220	expect(at(1)).toBe(7);
	221	expect(at(2)).toBe(14);
161	222	});
162	223
163	224	test("a hit is marked white, a headshot red, and both are gone a quarter second later", () => {
		@@ -165,21 +226,26 @@ test("a hit is marked white, a headshot red, and both are gone a quarter second
165	226	w.time = 10;
166	227	w.effects = only({ kind: "hitmark", at: 9.9, headshot: false });
167	228	}));
	229	// One stroke, and it is the marker: the crosshair is filled, not stroked.
168	230	const body = hit.calls.filter((c) => c.op === "stroke");
169		expect(body.length).toBe(2); // the crosshair, then the marker
170		expect(body[1]?.stroke).toBe("rgba(255,255,255,0.9)");
	231	expect(body.length).toBe(1);
	232	expect(aimed(hit)).toBe(true);
	233	expect(body[0]?.stroke).toBe("rgba(255,255,255,0.9)");
171	234
172	235	const head = draw(scene((w) => {
173	236	w.time = 10;
174	237	w.effects = only({ kind: "hitmark", at: 9.9, headshot: true });
175	238	}));
176		expect(head.calls.filter((c) => c.op === "stroke")[1]?.stroke).toBe("rgba(255,90,90,0.95)");
	239	expect(head.calls.filter((c) => c.op === "stroke")[0]?.stroke).toBe("rgba(255,90,90,0.95)");
177	240
178	241	const old = draw(scene((w) => {
179	242	w.time = 10;
180	243	w.effects = only({ kind: "hitmark", at: 9.7, headshot: true });
181	244	}));
182		expect(old.calls.filter((c) => c.op === "stroke").length).toBe(1);
	245	// A quarter second later the marker is gone and nothing is stroked at all —
	246	// the crosshair, which is still drawn, is four fills.
	247	expect(old.calls.filter((c) => c.op === "stroke").length).toBe(0);
	248	expect(aimed(old)).toBe(true);
183	249	});
184	250
185	251	// --- health, money and armour ----------------------------------------------
		@@ -586,7 +652,9 @@ test("the same canvas turned sideways is drawn at the new size, not the one befo
586	652	// The clock bar is 240 units wide at the scale the new width says. It is
587	653	// the first filled rectangle that is not a full-screen wash — this world has
588	654	// somebody shooting back in it, and the pain flash goes on before anything.
589		const bar = after.find((c) => c.op === "fillRect" && c.args[2] !== 360) as Call;
	655	// (The four narrow rectangles before it are the crosshair's arms.)
	656	const bar = after.find((c) =>
	657	c.op === "fillRect" && c.args[2] !== 360 && Number(c.args[2]) > 100) as Call;
590	658	expect(bar.args[2]).toBe(Math.round(240 * 0.7));
591	659	});
592	660
		@@ -622,7 +690,9 @@ test("a flashed player gets white over the world, and the crosshair back before
622	690	expect(whiteout(0.45)).toBeLessThan(0.5);
623	691	const half = draw(scene((w) => { (w.me as Player).blind = 0.45; }));
624	692	const wash = washes(half)[0] as Call;
625		const crosshair = half.calls.findIndex((c) => c.op === "stroke");
	693	const crosshair = half.calls.findIndex((c) =>
	694	c.op === "fillRect" && Number(c.args[0]) > WIDTH / 2 &&
	695	Number(c.args[1]) <= HEIGHT / 2 && Number(c.args[1]) + Number(c.args[3]) >= HEIGHT / 2);
626	696	expect(crosshair).toBeGreaterThanOrEqual(0);
627	697	expect(half.calls.indexOf(wash)).toBeGreaterThan(crosshair);
628	698
		@@ -26,7 +26,7 @@
26	26	*/
27	27
28	28	import {
29		angleDelta, clamp, effectAt, overlay,
	29	angleDelta, clamp, effectAt, overlay, ratioOf,
30	30	type Overlay, type Paint as Surface, type Vec3,
31	31	} from "../engine/index.ts";
32	32	import { drawMinimap } from "./minimap.ts";
		@@ -77,9 +77,12 @@ const NOTHING: readonly string[] = [];
77	77	let tools: Overlay \| null = null;
78	78	let builtOn: Paint \| null = null;
79	79
80		function toolsFor(ctx: Paint, width: number, height: number): Overlay {
81		if (tools === null \|\| builtOn !== ctx \|\| tools.width !== width \|\| tools.height !== height) {
82		tools = overlay(ctx, width, height);
	80	function toolsFor(ctx: Paint, width: number, height: number, dpr: number): Overlay {
	81	if (
	82	tools === null \|\| builtOn !== ctx \|\|
	83	tools.width !== width \|\| tools.height !== height \|\| tools.ratio !== ratioOf(dpr)
	84	) {
	85	tools = overlay(ctx, width, height, dpr);
83	86	builtOn = ctx;
84	87	}
85	88	return tools;
		@@ -191,6 +194,11 @@ export const FOG = 0.9;
191	194	* round, the feed and the scoreboard belong to the match and are the same from
192	195	* anybody's eyes. Left out, the view is you, which is every frame of a round
193	196	* you are alive in.
	197	*
	198	* `width` and `height` are the canvas's backing store — device pixels, not CSS
	199	* pixels — and `dpr` is how many of those go to a CSS pixel, so that the
	200	* crosshair is the same size on the glass and exact on the grid at 125% and
	201	* 150% as well as at 100%. Left out it is 1, which is what every test draws at.
194	202	*/
195	203	export function drawHud(
196	204	ctx: Paint,
		@@ -199,8 +207,9 @@ export function drawHud(
199	207	height: number,
200	208	showScoreboard: boolean,
201	209	view: Player = world.me,
	210	dpr = 1,
202	211	): void {
203		const ui = toolsFor(ctx, width, height);
	212	const ui = toolsFor(ctx, width, height, dpr);
204	213	ctx.clearRect(0, 0, width, height);
205	214	ctx.textBaseline = "alphabetic";
206	215	const weapon = currentWeapon(view);
		@@ -236,7 +245,11 @@ export function drawHud(
236	245	ducking: view.duckAmount > 0.5,
237	246	scoped: view.scoped,
238	247	});
239		ui.crosshair(width / 2, height / 2, 4 + spread * 14, 7, CROSSHAIR);
	248	// The gap and the arm in CSS pixels, turned into whole device pixels here:
	249	// the cross is the same size on the glass at 100%, 125% and 200%, and every
	250	// edge of it is a pixel's edge. `px` never rounds down to nothing, so the
	251	// tightest scoped crosshair is still a cross.
	252	ui.crosshair(width / 2, height / 2, ui.px(4 + spread * 14), ui.px(7), CROSSHAIR);
240	253	if (view.scoped) {
241	254	ctx.fillStyle = "rgba(0,0,0,0.55)";
242	255	ctx.beginPath();
		@@ -254,8 +267,11 @@ export function drawHud(
254	267	const age = world.time - effect.at;
255	268	if (age > 0.25) continue;
256	269	ctx.strokeStyle = effect.headshot ? "rgba(255,90,90,0.95)" : "rgba(255,255,255,0.9)";
257		ctx.lineWidth = 2;
258		const r = 9 + age * 20;
	270	// On the diagonals, so there is no pixel grid to land on and no point
	271	// pretending there is — but it is still the same size on the glass at every
	272	// ratio, which is the half of this a dense screen used to lose.
	273	ctx.lineWidth = ui.px(2);
	274	const r = ui.px(9 + age * 20);
259	275	ctx.beginPath();
260	276	const arms: [number, number][] = [[1, 1], [-1, -1], [1, -1], [-1, 1]];
261	277	for (const [dx, dy] of arms) {
		@@ -32,6 +32,7 @@ import { expect, test } from "bun:test";
32	32	import { generateLevel, nameOf, seedFrom, seedOf } from "./generate.ts";
33	33	import type { Level } from "./level.ts";
34	34	import { boot, COPIED, gameMeshes, NOT_AN_ID, NOT_A_MAP, NOT_COPIED, type Frame } from "./main.ts";
	35	import { NO_PICTURE } from "./support.ts";
35	36	import { HINT } from "./buy.ts";
36	37	import { DE_FORGE } from "./map.ts";
37	38	import { endRound, SHORT } from "./match.ts";
		@@ -45,7 +46,7 @@ import { WEAPONS } from "./weapons.ts";
45	46	import { matchOf } from "../matchid.ts";
46	47	import { dailyOn, DAILY_LENGTH, saidToday } from "../daily.ts";
47	48	import { parseResult, type Result } from "../result.ts";
48		import { fakeStage, ORIGIN, type FakeStage } from "./stage.test-helper.ts";
	49	import { DRIVER, fakeStage, ORIGIN, type FakeStage } from "./stage.test-helper.ts";
49	50	import { parseSituation } from "../plan/situation.ts";
50	51	import { createWorld, type World } from "./world.ts";
51	52
		@@ -180,6 +181,12 @@ test("clicking play starts a match: the menu goes, the pointer is asked for, the
180	181	expect(stage.by("menu").hidden).toBe(true);
181	182	expect(stage.by("pause").hidden).toBe(true);
182	183	expect(stage.scene.locks).toBe(1);
	184	// Raw counts, asked for by name. Without the dictionary Windows applies its
	185	// own pointer speed and "enhance pointer precision" to `movementX` before the
	186	// page sees it: the same flick of the same mouse is worth a different angle
	187	// depending on how fast it was flicked, and the sensitivity in the menu is
	188	// not the sensitivity you get.
	189	expect(stage.scene.lockOptions).toEqual([{ unadjustedMovement: true }]);
183	190	expect(stage.ids.length).toBe(1);
184	191	expect(stage.sounds).toContain("resume");
185	192
		@@ -198,6 +205,25 @@ test("clicking play starts a match: the menu goes, the pointer is asked for, the
198	205	expect(stage.by("fps").textContent).toContain("ms");
199	206	});
200	207
	208	test("the HUD's backing store follows the screen's ratio, at 125% as well as at 100%", () => {
	209	// Windows at 125% is where #307 came from: the canvas box is still 800×450
	210	// CSS pixels and the backing store behind it is a quarter larger, so the HUD
	211	// and the scene under it are drawn on the same grid rather than two.
	212	const stage = playing();
	213	stage.window.devicePixelRatio = 1.25;
	214	stage.step(FRAME);
	215	expect([stage.hud.width, stage.hud.height]).toEqual([1000, 563]);
	216	// Every arm of the crosshair lands on a whole pixel: no smeared cross.
	217	const arms = stage.hud.paint.calls.filter((c) => c[0] === "fillRect" && Number(c[3]) < 250);
	218	expect(arms.length).toBeGreaterThanOrEqual(4);
	219	for (const arm of arms.slice(0, 4))
	220	for (const n of arm.slice(1, 5)) expect(Number.isInteger(Number(n))).toBe(true);
	221	// And a ratio past the cap is the cap: pixels past two cost and show nothing.
	222	stage.window.devicePixelRatio = 4;
	223	stage.step(FRAME);
	224	expect([stage.hud.width, stage.hud.height]).toEqual([1600, 900]);
	225	});
	226
201	227	test("nothing is heard before a match, and then your own boots are heard as your own", () => {
202	228	const stage = painted(start(fakeStage()));
203	229	// Nine frames of painting an atlas in front of a menu: the voice has not
		@@ -296,6 +322,29 @@ test("the mouse turns the view, and while scoped it turns it by the zoom's share
296	322	expect(world.me.yaw).toBeCloseTo(plainFrom - 0.484, 9);
297	323	});
298	324
	325	test("the whole mouse plays the game: the wheel jumps and the thumb buttons do not navigate", () => {
	326	const stage = playing();
	327	stage.lock(true);
	328	const world = (stage.step(FRAME), worldOf(stage)) as World;
	329	world.match.phase = "live";
	330	world.match.timer = 60;
	331	expect(world.me.vel[2]).toBe(0);
	332
	333	// A notch of the wheel is the jump a lot of people play with.
	334	stage.window.fire("wheel", { deltaY: -120 });
	335	stage.step(FRAME);
	336	expect(world.me.vel[2]).toBeGreaterThan(0);
	337
	338	// And the two buttons under a thumb are Back and Forward in Edge on Windows:
	339	// pressed here they are bound actions and the browser is told to do nothing,
	340	// so a five-button mouse mid-round cannot take the page away from the match.
	341	let navigated = 0;
	342	stage.scene.fire("mousedown", { button: 3, preventDefault: () => void (navigated += 1) });
	343	expect(navigated).toBe(1);
	344	stage.scene.fire("auxclick", { button: 3, preventDefault: () => void (navigated += 1) });
	345	expect(navigated).toBe(2);
	346	});
	347
299	348	test("B opens the buy overlay: it is drawn, it keeps the pointer and the shelf takes the focus", () => {
300	349	const stage = playing();
301	350	stage.lock(true);
		@@ -447,14 +496,16 @@ test("the buy overlay open suppresses fire, but not movement", () => {
447	496	expect(stage.sounds.some((s) => s.startsWith("shot:"))).toBe(true);
448	497	});
449	498
450		test("losing the pointer pauses a running match, buy panel open or not", () => {
	499	test("losing the pointer pauses a running match, buy panel open or not", async () => {
451	500	const stage = playing();
452	501	stage.lock(true);
453	502	stage.lock(false);
454	503	expect(stage.by("pause").hidden).toBe(false);
455	504
456		// Resume asks for the pointer back.
	505	// Resume asks for the pointer back — and the panel goes when the browser has
	506	// answered, which is a promise and so a turn of the loop later.
457	507	stage.by("resume").fire("click");
	508	await settled();
458	509	expect(stage.by("pause").hidden).toBe(true);
459	510	expect(stage.scene.locks).toBe(2);
460	511
		@@ -470,15 +521,47 @@ test("losing the pointer pauses a running match, buy panel open or not", () => {
470	521	expect(stage.by("pause").hidden).toBe(false);
471	522	});
472	523
	524	test("a refused Resume stays paused and says so, rather than a match with a dead mouse", async () => {
	525	const stage = playing();
	526	stage.lock(true);
	527	stage.lock(false);
	528	expect(stage.by("pause").hidden).toBe(false);
	529
	530	// Chromium — Edge included — will not grant a lock for about a second after
	531	// one was released, which is exactly how fast a person presses Resume after
	532	// Escape. The old code hid the panel on the way out and never read the
	533	// answer: the match ran on with no look, no trigger and nothing to click.
	534	stage.scene.refuseLock = true;
	535	stage.by("resume").fire("click");
	536	await settled();
	537	expect(stage.by("pause").hidden).toBe(false);
	538	expect(stage.by("esc").textContent).toContain("press Resume again");
	539	expect(stage.by("resume").focused).toBeGreaterThan(0);
	540
	541	// Pressed again a moment later, when the browser will give it: back in.
	542	stage.scene.refuseLock = false;
	543	stage.by("resume").fire("click");
	544	await settled();
	545	expect(stage.by("pause").hidden).toBe(true);
	546	});
	547
473	548	test("Escape pauses and keeps the screen where the browser hands the key over", async () => {
474	549	const stage = playing();
475	550	stage.press("KeyF");
476	551	stage.lock(true);
477	552	const box = stage.by("stage");
478	553	expect(stage.document.fullscreenElement).toBe(box);
479		// The key was asked for on the way into full screen, and granted a microtask
480		// later: from here on Escape is the page's and not the browser's.
481		expect(stage.keyboard.locked).toEqual(["Escape"]);
	554	// The keys were asked for on the way into full screen, and granted a microtask
	555	// later: from here on Escape is the page's and not the browser's — and so is
	556	// every key this game binds, because on Windows the browser's own shortcuts
	557	// are Ctrl and a letter, and Ctrl here is crouch: crouch-and-forward is
	558	// Ctrl+W, which closes the tab, and crouch-and-reload is Ctrl+R, which
	559	// reloads the match away.
	560	const locked = stage.keyboard.locked ?? [];
	561	expect(locked[0]).toBe("Escape");
	562	for (const code of ["KeyW", "KeyR", "KeyD", "Digit1", "Tab"]) expect(locked).toContain(code);
	563	// Asked for once each, however many tables name it.
	564	expect(new Set(locked).size).toBe(locked.length);
482	565	await Promise.resolve();
483	566
484	567	stage.window.fire("keydown", { code: "Escape" });
		@@ -493,6 +576,7 @@ test("Escape pauses and keeps the screen where the browser hands the key over",
493	576	// And Resume goes back into the match without asking for a screen it already
494	577	// has: one pointer lock, no second `requestFullscreen`.
495	578	stage.by("resume").fire("click");
	579	await settled();
496	580	expect(stage.by("pause").hidden).toBe(true);
497	581	expect(box.fullscreens).toBe(1);
498	582	expect(stage.scene.locks).toBe(2);
		@@ -958,6 +1042,47 @@ test("no WebGL2 is a sentence on the page, not an exception", () => {
958	1042	expect(stage.atlases.length).toBe(0);
959	1043	});
960	1044
	1045	test("a refused shader is a sentence and a line to paste, not a black canvas", () => {
	1046	const log = "ERROR: 0:7: 'texture' : no matching overloaded function found";
	1047	const stage = painted(start(fakeStage({ refuseShaders: log })));
	1048	// The driver took the context and then refused the program, which is what
	1049	// ANGLE on Direct3D does. The menu says so in words.
	1050	expect(stage.by("menu").innerHTML).toContain(NO_PICTURE);
	1051	expect(stage.by("menu").innerHTML).toContain("Nothing else on the page is affected");
	1052	// And the line under it carries the browser, the driver and what it said —
	1053	// which is the whole of what a bug report from a Windows machine was missing.
	1054	const line = stage.by("supportline").textContent ?? "";
	1055	expect(line).toContain("Edge 128 on Windows");
	1056	expect(line).toContain("Direct3D11");
	1057	expect(line).toContain("no matching overloaded function found");
	1058	// The page is alive: nothing is drawn, nothing throws on the next frame, and
	1059	// the atlas that was paid for is the one that was painted.
	1060	expect(stage.draws.length).toBe(0);
	1061	stage.step(FRAME);
	1062	expect(stage.by("menu").hidden).toBe(false);
	1063	});
	1064
	1065	test("the line says what this browser is, and says so before anything is built", () => {
	1066	const stage = start(fakeStage());
	1067	const line = stage.by("supportline").textContent ?? "";
	1068	expect(line).toBe("Edge 128 on Windows · " + DRIVER + " · 960×540 at 1× dpr");
	1069	// A browser that refuses `WEBGL_debug_renderer_info` is named as one.
	1070	const quiet = start(fakeStage({ driver: null }));
	1071	expect(quiet.by("supportline").textContent).toContain("driver not named");
	1072	// Even a browser with no WebGL2 at all has the line: it is the report that
	1073	// says which of the two happened.
	1074	const none = start(fakeStage({ webgl: false }));
	1075	expect(none.by("supportline").textContent).toContain("Edge 128 on Windows");
	1076	});
	1077
	1078	test("the copy control copies the line it is under, and hides where there is no clipboard", () => {
	1079	const stage = start(fakeStage());
	1080	const button = stage.by("copysupport");
	1081	expect(button.hidden).toBe(false);
	1082	button.fire("click");
	1083	expect(stage.copied).toEqual([stage.by("supportline").textContent ?? ""]);
	1084	});
	1085
961	1086	test("every mesh name a scene of this game can place is handed in at construction", () => {
962	1087	// The renderer keeps what it is given and resolves nothing, so a name this
963	1088	// table misses is an exception on the frame a player first holds that gun.
		@@ -67,10 +67,12 @@
67	67	*/
68	68
69	69	import { createAudio, type Audio } from "./audio.ts";
70		import { CS_KEYS, CS_MOUSE, CS_TAP, readIntent, slotIndex } from "./binding.ts";
	70	import { CS_KEYS, CS_MOUSE, CS_TAP, CS_WHEEL, readIntent, slotIndex } from "./binding.ts";
71	71	import { drawHud, type Paint } from "./hud.ts";
	72	import { NO_PICTURE, NO_PICTURE_SAYS, supportLine, type Facts, type Running } from "./support.ts";
72	73	import {
73		attachButtons, clamp, createControls, createEscape, createFullscreen, createLoop, createRenderer,
	74	attachButtons, backing, clamp, createControls, createEscape, createFullscreen, createLoop,
	75	createRenderer,
74	76	effectAt,
75	77	painter,
76	78	type Button, type Camera, type KeyboardLock, type Listens, type Mesh,
		@@ -155,6 +157,9 @@ export const NO_MAKE = "A room could not be made right now. Try again in a momen
155	157	export const COPIED = "Copied";
156	158	export const NOT_COPIED = "Copy failed — the link still works";
157	159
	160	/** The same, for the line about this browser: there is no link to fall back to. */
	161	export const NOT_COPIED_LINE = "Copy failed — the line above can be selected";
	162
158	163	// --- the host: what a page has to be for this frame to run on it -----------
159	164
160	165	/** One element on the page, as far as this file is concerned. */
		@@ -196,8 +201,14 @@ export type Link = Panel & { getAttribute(name: string): string \| null };
196	201	/** A button that says which of two states it is in — the full screen one does. */
197	202	export type Toggle = Panel & { setAttribute(name: string, value: string): void };
198	203
199		/** A canvas on the stage: the scene is drawn into, the HUD is painted on. */
200		export type Stage = Sheet & { requestPointerLock(): unknown };
	204	/**
	205	* A canvas on the stage: the scene is drawn into, the HUD is painted on.
	206	*
	207	* The pointer is asked for through `Controls.lock` rather than here, so this
	208	* says only that a browser may have the method — an iPhone has not, and a game
	209	* that called it blind would throw on the first press of Play.
	210	*/
	211	export type Stage = Sheet & { requestPointerLock?(options?: { unadjustedMovement?: boolean }): unknown };
201	212
202	213	export type PageDocument = Listens & {
203	214	readonly pointerLockElement: unknown;
		@@ -289,6 +300,13 @@ export type Host = {
289	300	now(): number;
290	301	/** Null when this browser has no WebGL2: the menu says so and nothing starts. */
291	302	createRenderer(canvas: Stage): BuildRenderer \| null;
	303	/**
	304	* What this browser is, for the one line a bug report pastes: the user agent,
	305	* the name the WebGL2 driver gives itself, the stage's size and the pixel
	306	* ratio. Gathered by the host because every one of those is a browser's, and
	307	* turned into a sentence by `./support.ts`, which is a pure function.
	308	*/
	309	facts(canvas: Stage): Facts;
292	310	createAudio(): Audio;
293	311	/**
294	312	* Where this page is, so a link to a map is a whole URL somebody can paste
		@@ -417,6 +435,47 @@ export function boot(host: Host): Frame {
417	435	const againButton = by("again");
418	436	const leaveButton = by("leave");
419	437
	438	// What this browser is, said once, in the one place a person can copy it. It
	439	// is gathered before anything is built, so a boot that fails still has it.
	440	const supportSays = by("supportline");
	441	const copySupport = by<Panel & { disabled: boolean }>("copysupport");
	442	const facts = host.facts(sceneCanvas);
	443	/**
	444	* The moving half of the line — how the pointer was granted, whose Escape it
	445	* is, what a frame costs — asked for at the moment the line is written rather
	446	* than kept up to date behind a closed panel. It answers nothing until the
	447	* engine's pieces exist, a few dozen lines below: the line is on the page
	448	* before the first press of Play, and a browser with no WebGL2 never gets past
	449	* the guard that follows.
	450	*/
	451	let doing: () => Running = () => ({});
	452	/**
	453	* The line, on the page. `failure` is what the picture died of, when it died:
	454	* `textContent` and never `innerHTML`, because every piece of this came from
	455	* a driver or a user agent and neither is this page's to trust.
	456	*/
	457	const saySupport = (failure?: string): void => {
	458	supportSays.textContent = supportLine(facts, { ...doing(), failure });
	459	};
	460	saySupport();
	461	// Written again each time the panel is opened, because half of it is only true
	462	// while a match is running and a person opens this after the trouble. A
	463	// closed panel costs nothing: no timer, no frame, no listener but this one.
	464	by("support").addEventListener("toggle", () => saySupport());
	465	// The copy control is hidden until a clipboard is known to be there: the line
	466	// is selectable text either way, and a button that copies nothing is worse
	467	// than no button.
	468	if (host.copy !== undefined) {
	469	copySupport.hidden = false;
	470	copySupport.addEventListener<{ preventDefault(): void }>("click", () => {
	471	const said = supportSays.textContent ?? "";
	472	void host.copy?.(said).then(
	473	() => void (copySupport.textContent = COPIED),
	474	() => void (copySupport.textContent = NOT_COPIED_LINE),
	475	);
	476	});
	477	}
	478
420	479	const maybeBuild = host.createRenderer(sceneCanvas);
421	480	if (maybeBuild === null) {
422	481	menu.innerHTML = "<h2>No WebGL2</h2><p>This browser cannot run the game. Everything else on the page still works.</p>";
		@@ -431,7 +490,7 @@ export function boot(host: Host): Frame {
431	490	const audio = host.createAudio();
432	491	const controls = createControls(
433	492	{ surface: sceneCanvas, window: win, document: doc },
434		{ keys: CS_KEYS, mouse: CS_MOUSE, sensitivity: Number(sensField.value) \|\| 2.2 },
	493	{ keys: CS_KEYS, mouse: CS_MOUSE, wheel: CS_WHEEL, sensitivity: Number(sensField.value) \|\| 2.2 },
435	494	);
436	495	attachButtons(doc.querySelectorAll("[data-action]"), controls, { tap: CS_TAP });
437	496
		@@ -478,7 +537,62 @@ export function boot(host: Host): Frame {
478	537	* gives back. `P` is the same press for a player who would rather not find out
479	538	* which browser they are on.
480	539	*/
481		const escape = createEscape({ window: win, document: doc, keyboard: host.keyboard }, full);
	540	const escape = createEscape(
	541	{ window: win, document: doc, keyboard: host.keyboard },
	542	full,
	543	// Every key this game binds, asked for by name. On Windows the browser owns
	544	// half of them the moment crouch is held — Ctrl+R reloads the round away,
	545	// Ctrl+W closes the tab, Ctrl+1 to Ctrl+9 change it — and full screen plus
	546	// this lock is the only place a browser hands them over. Out of full screen
	547	// they stay the browser's, which is what `guardUnload` below is for.
	548	Object.keys(CS_KEYS),
	549	);
	550
	551	/**
	552	* The other half of the same Windows problem, for the match that is not on
	553	* the whole screen: out of full screen no lock is granted, so Ctrl+R still
	554	* reloads and Ctrl+W still closes — and with crouch on Ctrl a player hits one
	555	* of them by playing. A match in progress is worth a confirmation, so the
	556	* browser is asked to put its own "leave this page?" in the way. Only while a
	557	* match is running: a page nobody is playing must not argue about being left.
	558	*/
	559	win.addEventListener("beforeunload", (event: { preventDefault(): void; returnValue?: unknown }) => {
	560	if (!running) return;
	561	event.preventDefault();
	562	// Chromium wants the old property set as well as the new call, and shows
	563	// its own sentence either way: the string is never read by anybody.
	564	event.returnValue = "";
	565	});
	566
	567	/** Whether the pointer this page is played with is a finger. */
	568	const coarse = (): boolean => win.matchMedia("(pointer: coarse)").matches;
	569
	570	/**
	571	* Take the pointer, inside the gesture that asked for it, and only leave the
	572	* pause once the browser has actually handed it over.
	573	*
	574	* A refusal is a real thing and not a rare one: Chromium — Edge included —
	575	* will not grant pointer lock for about a second after Escape released it,
	576	* which is exactly the moment a paused game asks for it back. The old code
	577	* asked, ignored the answer and hid the panel anyway, so a player pressing
	578	* Resume too soon after Esc landed in a running match with a dead mouse: no
	579	* look, no trigger, nothing to click. Now the panel stays, says so, and
	580	* Resume is still under the cursor.
	581	*
	582	* A phone is the other way round: there is no pointer to lock, the refusal is
	583	* the honest answer, and the touch controls are what the match is played
	584	* with — so a coarse pointer plays on.
	585	*/
	586	async function takePointer(): Promise<void> {
	587	const got = await controls.lock();
	588	if (!got && !coarse()) {
	589	escHint.textContent = "Paused. The browser kept the pointer just then — press Resume again.";
	590	show(pause, true);
	591	resumeButton.focus();
	592	return;
	593	}
	594	show(pause, false);
	595	}
482	596
483	597	const loop = createLoop({ tick: TICK }, {
484	598	requestAnimationFrame: (callback) => win.requestAnimationFrame(callback),
		@@ -544,10 +658,26 @@ export function boot(host: Host): Frame {
544	658	let roomBuy: Item \| null = null;
545	659	let lastSound = 0;
546	660	let frameAverage = 16.7;
	661	/** Whether a frame has actually been drawn, so the average above means something. */
	662	let painted = false;
547	663	let posted = -1;
548	664	/** Whether the post that said this match is finished has been made. */
549	665	let postedFinal = false;
550	666
	667	// Now there is a game to ask, the support line has its second half. Every
	668	// member is read at the moment the line is written: the pointer the player is
	669	// aiming with, whose Escape it is on this browser, whether full screen is
	670	// offered at all, the fixed step, and what a frame costs — left out until one
	671	// has been drawn, because 16.7 before the first frame is a number nobody
	672	// measured. A browser with no Keyboard Lock API says nothing rather than "no".
	673	doing = () => ({
	674	pointer: controls.pointer,
	675	keys: escape.supported ? escape.held : undefined,
	676	fullscreen: full.supported,
	677	hz: 1 / TICK,
	678	frameMs: painted ? frameAverage : undefined,
	679	});
	680
551	681	const show = (element: Panel, on: boolean): void => {
552	682	element.hidden = !on;
553	683	};
		@@ -910,14 +1040,12 @@ export function boot(host: Host): Frame {
910	1040	const level = levelOfChoice(choice, choice === "generated" ? seedFrom(nextMatch()) : 0);
911	1041	// Device pixels, like the HUD's canvas: the CSS box is a fixed square and
912	1042	// this is what the browser is actually giving us of it.
913		const dpr = Math.min(win.devicePixelRatio \|\| 1, 2);
914		const w = Math.round(planCanvas.clientWidth * dpr);
915		const h = Math.round(planCanvas.clientHeight * dpr);
	1043	const [w, h] = backing(planCanvas.clientWidth, planCanvas.clientHeight, win.devicePixelRatio);
916	1044	if (planCanvas.width !== w \|\| planCanvas.height !== h) {
917	1045	planCanvas.width = w;
918	1046	planCanvas.height = h;
919	1047	}
920		drawPreview(planCtx, level, w, h);
	1048	drawPreview(planCtx, level, w, h, win.devicePixelRatio);
921	1049	planAlt.textContent = previewText(level);
922	1050	}
923	1051
		@@ -1064,7 +1192,7 @@ export function boot(host: Host): Frame {
1064	1192	show(summaryPanel, false);
1065	1193	show(touchPanel, win.matchMedia("(pointer: coarse)").matches);
1066	1194	audio.resume();
1067		void sceneCanvas.requestPointerLock();
	1195	void takePointer();
1068	1196	host.storage.setItem("cs.name", name);
1069	1197	}
1070	1198
		@@ -1111,7 +1239,10 @@ export function boot(host: Host): Frame {
1111	1239	show(summaryPanel, false);
1112	1240	show(touchPanel, win.matchMedia("(pointer: coarse)").matches);
1113	1241	audio.resume();
1114		void sceneCanvas.requestPointerLock();
	1242	// The same ask as a match of your own: raw counts first, and the answer read
	1243	// — a room is exactly where a silently refused lock would be worst, because
	1244	// the round starts on the server whether this page took the mouse or not.
	1245	void takePointer();
1115	1246	}
1116	1247
1117	1248	joinRoom.addEventListener("click", () => {
		@@ -1162,9 +1293,10 @@ export function boot(host: Host): Frame {
1162	1293	// Resume is the gesture that puts back whatever the pause cost: the screen
1163	1294	// first, if a browser took it, and then the pointer.
1164	1295	resumeButton.addEventListener("click", () => {
1165		show(pause, false);
1166	1296	restoreFull();
1167		void sceneCanvas.requestPointerLock();
	1297	// The panel goes when the pointer comes back and not before: see
	1298	// `takePointer`. A browser that refuses leaves the pause where it was.
	1299	void takePointer();
1168	1300	});
1169	1301	/**
1170	1302	* Back to the page: the menu, nothing of the match left running, and the
		@@ -1318,12 +1450,25 @@ export function boot(host: Host): Frame {
1318	1450
1319	1451	function frame(elapsed: number): void {
1320	1452	frameAverage += (elapsed * 1000 - frameAverage) * 0.05;
	1453	painted = true;
1321	1454	// One layer of the atlas per frame, and the browser has the rest of it: the
1322	1455	// menu is clickable the whole way through. The last slice is what builds
1323	1456	// the renderer, before anything has been drawn with it.
1324	1457	if (renderer === null) {
1325	1458	if (!atlas.paint(TEX_SIZE)) return;
1326		renderer = build(atlas.bytes);
	1459	// A driver that refuses a shader throws here with its own info log —
	1460	// ANGLE on Direct3D rejects programs a desktop driver waves through, so
	1461	// this is the common way a Windows machine ends up with a black canvas.
	1462	// It is a sentence and a line to paste, not silence, and the rest of the
	1463	// page — the leaderboard, the map plan, the reference — is untouched.
	1464	try {
	1465	renderer = build(atlas.bytes);
	1466	} catch (failure) {
	1467	loop.stop();
	1468	menu.innerHTML = `<h2>${NO_PICTURE}</h2><p>${NO_PICTURE_SAYS}</p>`;
	1469	saySupport(failure instanceof Error ? failure.message : String(failure));
	1470	return;
	1471	}
1327	1472	ready();
1328	1473	return;
1329	1474	}
		@@ -1423,14 +1568,16 @@ export function boot(host: Host): Frame {
1423	1568
1424	1569	renderer.draw(buildScene(world, camera, frameScene, view), elapsed);
1425	1570
1426		const dpr = Math.min(win.devicePixelRatio \|\| 1, 2);
1427		const w = Math.round(hudCanvas.clientWidth * dpr);
1428		const h = Math.round(hudCanvas.clientHeight * dpr);
	1571	// The same backing store the renderer gives the scene canvas underneath —
	1572	// one function, so the HUD's pixels and the world's are the same pixels —
	1573	// and the ratio goes through to the HUD, which needs it to put the
	1574	// crosshair on the grid rather than across it. See `engine/pixels.ts`.
	1575	const [w, h] = backing(hudCanvas.clientWidth, hudCanvas.clientHeight, win.devicePixelRatio);
1429	1576	if (hudCanvas.width !== w \|\| hudCanvas.height !== h) {
1430	1577	hudCanvas.width = w;
1431	1578	hudCanvas.height = h;
1432	1579	}
1433		drawHud(hudCtx, world, w, h, scoreboard, view);
	1580	drawHud(hudCtx, world, w, h, scoreboard, view, win.devicePixelRatio);
1434	1581	by("fps").textContent = `${(1000 / Math.max(1, frameAverage)).toFixed(0)} fps · ${frameAverage.toFixed(1)} ms`;
1435	1582	}
1436	1583	loop.start(frame);
		@@ -1476,6 +1623,29 @@ export function gameMeshes(level: Level = DE_FORGE): Record<string, Mesh> {
1476	1623	* question and the answer — which is the only way the engine's `createRenderer`
1477	1624	* returns null, and why the line below says so rather than pretending.
1478	1625	*/
	1626	/**
	1627	* What the WebGL2 driver calls itself — on Windows the ANGLE line naming the
	1628	* Direct3D device, which is the single most useful thing in a report from that
	1629	* platform — or null for a browser that will not say.
	1630	*
	1631	* Every step of it is optional and every step is guarded: the extension is a
	1632	* browser's to refuse, a context stub in a test has no `getExtension` at all,
	1633	* and a driver that throws inside one is still a driver whose game must boot.
	1634	* A name nobody can read is worth less than a page that starts.
	1635	*/
	1636	function driverName(surface: HTMLCanvasElement): string \| null {
	1637	try {
	1638	const gl = surface.getContext("webgl2");
	1639	if (gl === null \|\| typeof gl.getExtension !== "function") return null;
	1640	const info = gl.getExtension("WEBGL_debug_renderer_info");
	1641	if (info === null) return null;
	1642	const name = gl.getParameter(info.UNMASKED_RENDERER_WEBGL);
	1643	return typeof name === "string" && name !== "" ? name : null;
	1644	} catch {
	1645	return null;
	1646	}
	1647	}
	1648
1479	1649	const browser = (): Host => ({
1480	1650	document,
1481	1651	window,
		@@ -1500,6 +1670,23 @@ const browser = (): Host => ({
1500	1670	// asked for: a browser without it has no such member, and the copy control
1501	1671	// stays the plain link it is rendered as.
1502	1672	copy: navigator.clipboard === undefined ? undefined : (text) => navigator.clipboard.writeText(text),
	1673	// Everything a browser will say about itself, asked for once. The driver's
	1674	// own name is behind `WEBGL_debug_renderer_info`, which a browser is entitled
	1675	// to refuse — Firefox does, in some configurations — and a refusal is null
	1676	// here and a plain "driver not named" in the line.
	1677	facts: (canvas) => {
	1678	const surface = canvas as unknown as HTMLCanvasElement;
	1679	return {
	1680	userAgent: navigator.userAgent,
	1681	renderer: driverName(surface),
	1682	stage: [surface.clientWidth, surface.clientHeight],
	1683	dpr: window.devicePixelRatio,
	1684	// What the server said it built this page from: `<meta name=build>`, which
	1685	// `pages/shell.ts` writes beside the commit in the header. A local run has
	1686	// no commit and so no meta, and the line simply does not mention one.
	1687	commit: document.querySelector('meta[name="build"]')?.getAttribute("content") ?? undefined,
	1688	};
	1689	},
1503	1690	createRenderer: (canvas) => {
1504	1691	const surface = canvas as unknown as HTMLCanvasElement;
1505	1692	if (surface.getContext("webgl2") === null) return null;
		@@ -96,13 +96,19 @@ function drawSpawns(ui: Overlay, at: Projection, points: readonly Vec3[], half:
96	96	* It clears first, because it is drawn once per choice rather than once a frame
97	97	* and the map before it was a different shape.
98	98	*/
99		export function drawPreview(ctx: Paint, level: Level, width: number, height: number): void {
	99	export function drawPreview(
	100	ctx: Paint,
	101	level: Level,
	102	width: number,
	103	height: number,
	104	dpr = 1,
	105	): void {
100	106	ctx.clearRect(0, 0, width, height);
101	107	const side = Math.min(width, height);
102	108	if (side <= 0) return;
103	109	const x = Math.round((width - side) / 2);
104	110	const y = Math.round((height - side) / 2);
105		const ui = overlay(ctx, side, side);
	111	const ui = overlay(ctx, side, side, dpr);
106	112	const at = drawPlan(ui, level, x, y, side);
107	113	// One cell of this map, in pixels of this square, and never under a pixel.
108	114	const half = Math.max(1, Math.round(side / Math.max(level.grid.width, level.grid.height) / 2));
		@@ -102,6 +102,16 @@ export type StageCanvas = FakeCanvas & { paint: FakePaint; gl: GlRecorder \| null
102	102	/** Where this stub page is, for the whole URL a copied link has to be. */
103	103	export const ORIGIN = "https://cs.example";
104	104
	105	/**
	106	* The browser this stub page says it is, and the driver behind its picture:
	107	* Edge on Windows over ANGLE's Direct3D, because that is the machine #307 was
	108	* reported from and the one the support line exists for.
	109	*/
	110	export const USER_AGENT =
	111	"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) " +
	112	"Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0";
	113	export const DRIVER = "ANGLE (NVIDIA, NVIDIA GeForce RTX 3060 Direct3D11 vs_5_0 ps_5_0, D3D11)";
	114
105	115	/**
106	116	* What this page's wall clock says until a test moves it: noon UTC on an
107	117	* ordinary day, so `src/daily.ts` has a day to derive the match of the day
		@@ -210,7 +220,7 @@ export type FakeStage = {
210	220	* contract between the page and this file, so `src/server.test.ts` checks the
211	221	* served page against this same list rather than a second copy of it.
212	222	*/
213		export const PAGE_IDS = ["weights", "stage", "scene", "hud", "menu", "pause", "summary", "buy", "buyshelf", "buysays", "touch", "stats", "saved", "name", "length", "side", "sens", "map", "mapseed", "matchid", "onid", "onmap", "today", "ontoday", "willplay", "plan", "planalt", "copymap", "play", "room", "joinroom", "makeroom", "roomsaid", "prep", "resume", "quit", "esc", "pauseid", "sumtitle", "sumscore", "sumyou", "sumboard", "sumsaved", "again", "leave", "playing", "mapname", "share", "fps", "full"];
	223	export const PAGE_IDS = ["weights", "stage", "scene", "hud", "menu", "pause", "summary", "buy", "buyshelf", "buysays", "touch", "stats", "saved", "name", "length", "side", "sens", "map", "mapseed", "matchid", "onid", "onmap", "today", "ontoday", "willplay", "plan", "planalt", "copymap", "play", "room", "joinroom", "makeroom", "roomsaid", "prep", "resume", "quit", "esc", "pauseid", "sumtitle", "sumscore", "sumyou", "sumboard", "sumsaved", "again", "leave", "playing", "mapname", "share", "fps", "full", "support", "supportline", "copysupport"];
214	224
215	225	/** The ones the server renders with `hidden` on them: the page starts at the menu. */
216	226	const HIDDEN = ["pause", "summary", "buy", "touch", "full"];
		@@ -251,6 +261,14 @@ export function fakeStage(
251	261	hold?: boolean;
252	262	/** Leave the `#weights` link off the page entirely: a page that named nothing. */
253	263	unlinked?: boolean;
	264	/**
	265	* A driver that takes the context and then refuses the shaders, which is
	266	* what ANGLE on Direct3D does with GLSL a desktop driver waves through: the
	267	* build throws with the driver's own info log, as `createRenderer` does.
	268	*/
	269	refuseShaders?: string;
	270	/** What `WEBGL_debug_renderer_info` names, and null for a browser that refuses it. */
	271	driver?: string \| null;
254	272	/**
255	273	* The endpoint meta a deployment with a TypeSafe key renders: where the page
256	274	* asks for a round to be planned. Absent is every other deployment, which
		@@ -357,10 +375,17 @@ export function fakeStage(
357	375	// The wall clock, which is only ever asked which day it is: a test sets
358	376	// `stage.wall` and the page is on that day, without waiting for one.
359	377	now: () => stub.wall,
	378	facts: (_canvas: Stage) => ({
	379	userAgent: USER_AGENT,
	380	renderer: options.driver === undefined ? DRIVER : options.driver,
	381	stage: [960, 540],
	382	dpr: 1,
	383	}),
360	384	createRenderer: (_canvas: Stage): BuildRenderer \| null =>
361	385	options.webgl === false
362	386	? null
363	387	: (bytes) => {
	388	if (options.refuseShaders !== undefined) throw new Error(options.refuseShaders);
364	389	// Every atlas the frame ever built a renderer out of, kept whole:
365	390	// a test says there was one of them and that it was finished.
366	391	atlases.push(bytes);