b5db5bd
@@ -199,7 +199,13 @@
from the angle it subtends, and you turn on the spot.
  a match, one POST per round scored and a browser with no WebGL2 are all
  checked with no browser in the room. `hud` draws onto a `Paint` — the
  seventeen members of a 2D context it uses — which is how that stub can be a
  recorder and the page can still hand it a canvas.
  recorder and the page can still hand it a canvas. `hud.test.ts` drives it
  with a recorder of its own that writes down the brush as well as the call, so
  what is pinned is what a player reads: the health that goes red, the ammo, the
  clock that stops between rounds and reddens once the bomb is down, the
  crosshair that opens as far as the gun is inaccurate, the plant bar, the kill
  feed fading out over eight seconds, the scoreboard's order, and the whole
  readout fitting a 360px phone and a 1920px desk alike.
- `src/range/` — the second game, at `/range`, and the proof that the engine is a
  package: a module in here may import the engine through its door, `src/pages/shell.ts`
  and its own siblings, and nothing else. **It is a game with no renderer under
@@ -0,0 +1,505 @@
/**
 * This test exists so #18 can move the HUD onto the engine's overlay and prove
 * it drew the same thing.
 *
 * It says what a player reads off the screen — the number that goes red, the
 * clock that stops, the crosshair that opens, the feed that fades — and not how
 * `hud.ts` is arranged to draw it. Nothing here asserts a coordinate that only
 * means something to the current layout: a panel that moves two pixels left is
 * not a change a player sees, and a pin that fails on one is a pin someone
 * deletes rather than uses.
 *
 * The `Paint` it draws onto is the HUD's own, not the engine's: `hud.ts` types
 * its styles `string` where `src/engine/overlay.ts` types them `unknown`, so a
 * recorder declared as the engine's cannot be handed to `drawHud` today. A
 * recorder declared as the HUD's *can* be handed to `overlay()`, which is what
 * the move needs. The recorder is this file's own because it writes down the
 * brush as well as the call — the colour a line was drawn in is half of what is
 * pinned here, and neither of the two recorders already in the repository
 * (`stage.test-helper.ts`, `overlay.test.ts`) keeps it.
 *
 * No canvas, no document, no browser.
 */
import { expect, test } from "bun:test";
import { drawHud, type Paint } from "./hud.ts";
import { SHORT } from "./match.ts";
import { inaccuracy, WEAPONS } from "./weapons.ts";
import { createWorld, currentWeapon, type Ammo, type Player, type World } from "./world.ts";
// --- a paint that remembers ------------------------------------------------
/** One call the HUD made, and the state of the brush that made it. */
type Call = {
  op: string;
  args: readonly unknown[];
  fill: string;
  stroke: string;
  font: string;
  align: string;
  alpha: number;
};
type Recorder = Paint & { calls: Call[] };
function recorder(): Recorder {
  const calls: Call[] = [];
  const note = (op: string) => (...args: unknown[]): void => void calls.push({
    op,
    args,
    fill: paint.fillStyle,
    stroke: paint.strokeStyle,
    font: paint.font,
    align: paint.textAlign,
    alpha: paint.globalAlpha,
  });
  const paint: Recorder = {
    calls,
    fillStyle: "", strokeStyle: "", lineWidth: 0, font: "", textAlign: "", textBaseline: "", globalAlpha: 1,
    clearRect: note("clearRect"), fillRect: note("fillRect"), fillText: note("fillText"),
    beginPath: note("beginPath"), moveTo: note("moveTo"), lineTo: note("lineTo"), rect: note("rect"),
    arc: note("arc"), fill: note("fill"), stroke: note("stroke"),
  };
  return paint;
}
// --- the world this suite draws --------------------------------------------
/**
 * One match, built once for the whole file: `createWorld` lays out ten players,
 * spawns, bots and a bomb, and doing that per test is seconds nobody needs.
 * Every test draws a *copy* of it instead, so a test that spends a magazine or
 * kills a bot does not reach the next one.
 */
const BASE = createWorld(SHORT, "you", "ct", 5, 64);
const copyAmmo = (ammo: Record<string, Ammo>): Record<string, Ammo> =>
  Object.fromEntries(Object.entries(ammo).map(([id, a]) => [id, { ...a }]));
/** A copy of the base world, changed the one way this test is about. */
function scene(change: (world: World) => void = () => {}): World {
  const players = BASE.players.map((p) => ({ ...p, ammo: copyAmmo(p.ammo) }));
  const world: World = {
    ...BASE,
    match: { ...BASE.match, score: { ...BASE.match.score }, losses: { ...BASE.match.losses } },
    players,
    me: players[0] as Player,
    bomb: { ...BASE.bomb, defuser: null },
    effects: [],
    feed: [],
    messages: [],
  };
  change(world);
  return world;
}
const WIDTH = 1280;
const HEIGHT = 720;
/** Draw one frame of the HUD onto a fresh recorder. */
function draw(
  world: World,
  options: { width?: number; height?: number; scoreboard?: boolean } = {},
): Recorder {
  const paint = recorder();
  drawHud(paint, world, options.width ?? WIDTH, options.height ?? HEIGHT, options.scoreboard ?? false);
  return paint;
}
/** Every line on the screen a player could actually read: alpha zero is not on it. */
const readable = (paint: Recorder): Call[] =>
  paint.calls.filter((c) => c.op === "fillText" && c.alpha > 0);
const words = (paint: Recorder): string[] => readable(paint).map((c) => String(c.args[0]));
const says = (paint: Recorder, text: string): boolean => words(paint).includes(text);
/** The one readable line that reads exactly this, and the brush that drew it. */
function line(paint: Recorder, text: string): Call {
  const hits = readable(paint).filter((c) => c.args[0] === text);
  expect(hits.length).toBe(1);
  return hits[0] as Call;
}
// --- the crosshair ---------------------------------------------------------
/** How far the crosshair's first arm starts from the middle of the screen. */
const gapOf = (paint: Recorder, width = WIDTH): number => {
  const first = paint.calls.find((c) => c.op === "moveTo");
  return Number(first?.args[0]) - width / 2;
};
const spreadOf = (world: World, moving: number): number =>
  inaccuracy(currentWeapon(world.me), {
    moving,
    inAir: !world.me.onGround,
    ducking: world.me.duckAmount > 0.5,
    scoped: world.me.scoped,
  });
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);
  // Each arm is seven pixels long, from the gap outwards.
  const arm = rest.calls.find((c) => c.op === "lineTo");
  expect(Number(arm?.args[0]) - WIDTH / 2).toBeCloseTo(gapOf(rest) + 7, 10);
  // 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))).toBeGreaterThan(gapOf(rest));
  // Scoped it draws tight, and darkens everything outside the sight.
  const scoped = draw(scene((w) => { w.me.scoped = true; }));
  expect(gapOf(scoped)).toBeLessThan(gapOf(rest));
  expect(scoped.calls.some((c) => c.op === "arc")).toBe(true);
  expect(scoped.calls.find((c) => c.op === "fill")?.args[0]).toBe("evenodd");
  // 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);
});
test("a hit is marked white, a headshot red, and both are gone a quarter second later", () => {
  const hit = draw(scene((w) => {
    w.time = 10;
    w.effects = [{ kind: "hitmark", at: 9.9, headshot: false }];
  }));
  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)");
  const head = draw(scene((w) => {
    w.time = 10;
    w.effects = [{ kind: "hitmark", at: 9.9, headshot: true }];
  }));
  expect(head.calls.filter((c) => c.op === "stroke")[1]?.stroke).toBe("rgba(255,90,90,0.95)");
  const old = draw(scene((w) => {
    w.time = 10;
    w.effects = [{ kind: "hitmark", at: 9.7, headshot: true }];
  }));
  expect(old.calls.filter((c) => c.op === "stroke").length).toBe(1);
});
// --- health, money and armour ----------------------------------------------
test("health reads white while you are standing and red when you are nearly gone", () => {
  expect(line(draw(scene()), "100").fill).toBe("#f3f5f8");
  expect(line(draw(scene((w) => { w.me.health = 31; })), "31").fill).toBe("#f3f5f8");
  // Thirty itself is already the red one: the HUD asks `health > 30`.
  expect(line(draw(scene((w) => { w.me.health = 30; })), "30").fill).toBe("#ff6b5b");
  expect(line(draw(scene((w) => { w.me.health = 9; })), "9").fill).toBe("#ff6b5b");
  // It is a whole number, and never a negative one.
  expect(says(draw(scene((w) => { w.me.health = 45.6; })), "46")).toBe(true);
  expect(says(draw(scene((w) => { w.me.health = -12; })), "0")).toBe(true);
});
test("the wallet, the armour and the kit say what you bought", () => {
  const poor = draw(scene());
  expect(says(poor, "$800")).toBe(true);
  expect(says(poor, "no armour")).toBe(true);
  expect(says(poor, "defuse kit")).toBe(false);
  const kitted = draw(scene((w) => {
    w.me.money = 4250;
    w.me.armor = 100;
    w.me.helmet = true;
    w.me.defuseKit = true;
  }));
  expect(says(kitted, "$4250")).toBe(true);
  expect(says(kitted, "armour 100 + helmet")).toBe(true);
  expect(says(kitted, "defuse kit")).toBe(true);
  // A terrorist with a kit in the inventory is still a terrorist: no kit line.
  const t = draw(scene((w) => { w.me.team = "t"; w.me.defuseKit = true; }));
  expect(says(t, "defuse kit")).toBe(false);
});
// --- ammo ------------------------------------------------------------------
test("ammo reads mag / reserve, the knife reads a dash, and reloading says so", () => {
  const loaded = draw(scene((w) => {
    w.me.weapon = "usp";
    w.me.ammo.usp = { mag: 5, reserve: 20 };
  }));
  expect(says(loaded, "5 / 20")).toBe(true);
  expect(says(loaded, WEAPONS.usp.name)).toBe(true);
  expect(says(loaded, "reloading")).toBe(false);
  const knife = draw(scene((w) => { w.me.weapon = "knife"; }));
  expect(says(knife, "—")).toBe(true);
  expect(says(knife, WEAPONS.knife.name)).toBe(true);
  // Mid-reload the magazine still reads empty, and the word is on the screen.
  const reloading = draw(scene((w) => {
    w.time = 10;
    w.me.reloadUntil = 10.5;
    w.me.ammo.usp = { mag: 0, reserve: 24 };
  }));
  expect(says(reloading, "0 / 24")).toBe(true);
  expect(line(reloading, "reloading").fill).toBe("#f0c060");
  // The instant it finishes the word goes.
  expect(says(draw(scene((w) => { w.time = 10; w.me.reloadUntil = 10; })), "reloading")).toBe(false);
  // Carrying the bomb is written beside the gun's name.
  const carrier = draw(scene((w) => { w.me.team = "t"; w.me.hasBomb = true; }));
  expect(says(carrier, `${WEAPONS.usp.name}  ·  bomb`)).toBe(true);
});
// --- the clock and the score -----------------------------------------------
test("the clock counts the phase down, goes red when the bomb is down, and stops between rounds", () => {
  const freeze = draw(scene((w) => { w.match.phase = "freeze"; w.match.timer = 8; }));
  expect(line(freeze, "0:08").fill).toBe("#f3f5f8");
  const live = draw(scene((w) => { w.match.phase = "live"; w.match.timer = 95; }));
  expect(line(live, "1:35").fill).toBe("#f3f5f8");
  const planted = draw(scene((w) => { w.match.phase = "planted"; w.match.timer = 40; }));
  expect(line(planted, "0:40").fill).toBe("#ff6b5b");
  // Nothing is being counted between rounds or after the match: no clock to read.
  for (const phase of ["over", "match_over"] as const) {
    const paint = draw(scene((w) => { w.match.phase = phase; w.match.timer = 5; }));
    expect(says(paint, "--:--")).toBe(true);
    expect(says(paint, "0:05")).toBe(false);
  }
});
test("the score sits either side of the clock, each in its team's colour, and so do the survivors", () => {
  const paint = draw(scene((w) => {
    w.match.score = { t: 7, ct: 11 };
    for (const p of w.players) if (p.team === "t" && p !== w.me) p.alive = false;
  }));
  expect(line(paint, "7").fill).toBe("#e2b04a");
  expect(line(paint, "11").fill).toBe("#6fa8e8");
  // Five terrorists, all of them down; five counter-terrorists, all still up.
  expect(line(paint, "T 0").fill).toBe("#e2b04a");
  expect(line(paint, "CT 5").fill).toBe("#6fa8e8");
});
// --- the kill feed ---------------------------------------------------------
const kill = (at: number, over: Partial<World["feed"][number]> = {}): World["feed"][number] => ({
  at, killer: "Kestrel", victim: "Pike", weapon: "ak47", headshot: false, killerTeam: "t", ...over,
});
test("a kill is named with the gun that made it, fades for eight seconds and is then gone", () => {
  const fresh = draw(scene((w) => { w.time = 100; w.feed = [kill(100)]; }));
  const entry = line(fresh, `Kestrel  ${WEAPONS.ak47.name}  Pike`);
  expect(entry.alpha).toBe(1);
  expect(entry.fill).toBe("#e2b04a");
  // Halfway out it is half there, and a CT's kill is the other colour.
  const fading = draw(scene((w) => {
    w.time = 100;
    w.feed = [kill(92.5, { killerTeam: "ct", headshot: true })];
  }));
  const faded = line(fading, `Kestrel  ${WEAPONS.ak47.name} ⌖  Pike`);
  expect(faded.alpha).toBeCloseTo(0.5, 10);
  expect(faded.fill).toBe("#6fa8e8");
  // Eight seconds old is the end of it: nothing readable, and nothing at all after.
  const spent = draw(scene((w) => { w.time = 100; w.feed = [kill(92)]; }));
  expect(readable(spent).some((c) => String(c.args[0]).includes("Kestrel"))).toBe(false);
  const gone = draw(scene((w) => { w.time = 100; w.feed = [kill(91.9)]; }));
  expect(gone.calls.some((c) => c.op === "fillText" && String(c.args[0]).includes("Kestrel"))).toBe(false);
  // The feed shows the last five kills, newest last, oldest dropped.
  const busy = draw(scene((w) => {
    w.time = 100;
    w.feed = [1, 2, 3, 4, 5, 6].map((n) => kill(99, { victim: `Down ${n}` }));
  }));
  expect(words(busy).filter((s) => s.includes("Down")).length).toBe(5);
  expect(words(busy).some((s) => s.includes("Down 1"))).toBe(false);
  expect(words(busy).some((s) => s.includes("Down 6"))).toBe(true);
});
test("the round's last word is on the screen for four seconds", () => {
  const said = draw(scene((w) => {
    w.time = 100;
    w.messages = [{ at: 99.9, text: "The bomb has been planted at A." }];
  }));
  expect(says(said, "The bomb has been planted at A.")).toBe(true);
  const stale = draw(scene((w) => {
    w.time = 100;
    w.messages = [{ at: 96, text: "The bomb has been planted at A." }];
  }));
  expect(says(stale, "The bomb has been planted at A.")).toBe(false);
});
// --- planting and defusing -------------------------------------------------
/** The filled fraction of the use bar: the bar's width over the panel behind it. */
function useBar(paint: Recorder): { fraction: number; fill: string } {
  const rects = paint.calls.filter((c) => c.op === "fillRect");
  const bar = rects[rects.length - 1] as Call;
  const panel = rects[rects.length - 2] as Call;
  return { fraction: Number(bar.args[2]) / (Number(panel.args[2]) - 4), fill: bar.fill };
}
test("the use bar fills as far as the plant or the defuse has got", () => {
  const nothing = draw(scene());
  expect(says(nothing, "Planting")).toBe(false);
  const planting = draw(scene((w) => {
    w.me.team = "t";
    w.me.hasBomb = true;
    w.bomb.plantProgress = SHORT.plantTime / 2;
  }));
  expect(says(planting, "Planting")).toBe(true);
  expect(useBar(planting).fraction).toBeCloseTo(0.5, 10);
  expect(useBar(planting).fill).toBe("#e2b04a");
  const defusing = draw(scene((w) => {
    w.bomb.state = "planted";
    w.bomb.defuser = w.me;
    w.bomb.defuseProgress = SHORT.defuseTime * 0.25;
  }));
  expect(says(defusing, "Defusing")).toBe(true);
  expect(useBar(defusing).fraction).toBeCloseTo(0.25, 10);
  expect(useBar(defusing).fill).toBe("#6fa8e8");
  // A kit is faster, and says so, and the bar is full when the wire is cut.
  const kit = draw(scene((w) => {
    w.me.defuseKit = true;
    w.bomb.state = "planted";
    w.bomb.defuser = w.me;
    w.bomb.defuseProgress = SHORT.defuseTimeWithKit;
  }));
  expect(says(kit, "Defusing (kit)")).toBe(true);
  expect(useBar(kit).fraction).toBeCloseTo(1, 10);
});
// --- dead, and the scoreboard ----------------------------------------------
const WATCHING = "You are dead — watching the round out";
test("a dead player is told they are watching, until the match itself is over", () => {
  expect(says(draw(scene()), WATCHING)).toBe(false);
  expect(says(draw(scene((w) => { w.me.alive = false; })), WATCHING)).toBe(true);
  expect(says(draw(scene((w) => {
    w.me.alive = false;
    w.match.phase = "match_over";
  })), WATCHING)).toBe(false);
});
test("the scoreboard ranks by kills, then by damage, marks you, and dims the dead", () => {
  const world = scene((w) => {
    const [me, second, third, fourth] = w.players as Player[];
    me.kills = 2; me.deaths = 1; me.headshots = 1; me.damage = 310.4; me.money = 3200;
    second.kills = 5; second.damage = 700;
    third.kills = 2; third.damage = 480; // same kills as me, more damage: above me
    fourth.kills = 0; fourth.alive = false;
  });
  const paint = draw(world, { scoreboard: true });
  const rows = readable(paint).filter((c) => c.align === "left" && String(c.args[0]).includes("  "));
  const names = rows.map((c) => String(c.args[0]));
  expect(names[0]).toContain(world.players[1]?.name);
  expect(names[1]).toContain(world.players[2]?.name);
  expect(names[2]).toContain("you");
  // Your own row is the white one, and it is the only one that says so.
  const mine = rows[2] as Call;
  expect(mine.fill).toBe("#ffffff");
  expect(names.filter((n) => n.includes("(you)")).length).toBe(1);
  expect(rows.filter((r) => r.fill === "#ffffff").length).toBe(1);
  // Every other row wears its team's colour, and a dead one is dimmed.
  expect(rows.filter((r) => r.fill === "#e2b04a" || r.fill === "#6fa8e8").length).toBe(9);
  const down = rows.find((r) => String(r.args[0]).includes(world.players[3]?.name ?? "")) as Call;
  expect(down.alpha).toBeCloseTo(0.45, 10);
  expect(mine.alpha).toBe(1);
  // The columns are there, and your figures are under them, rounded.
  expect(words(paint)).toContain("kills");
  expect(words(paint)).toContain("damage");
  const figures = readable(paint).filter((c) => c.align === "right");
  expect(figures.map((c) => String(c.args[0]))).toContain("310");
  expect(figures.map((c) => String(c.args[0]))).toContain("$3200");
  // It is drawn over everything: its scrim comes after the health it covers.
  const scrim = paint.calls.findIndex((c) => c.fill === "rgba(10, 12, 16, 0.88)");
  const health = paint.calls.findIndex((c) => c.op === "fillText" && c.args[0] === "100");
  expect(scrim).toBeGreaterThan(health);
  // And nothing of it is on the screen when it is not being held open.
  expect(says(draw(world), "kills")).toBe(false);
});
// --- both ends of the screen -----------------------------------------------
/** A frame with every panel on it at once, so a layout test has something to lay out. */
const busyWorld = (): World => scene((w) => {
  w.time = 100;
  w.match.phase = "planted";
  w.match.timer = 37;
  w.match.score = { t: 9, ct: 12 };
  w.me.health = 24;
  w.me.armor = 100;
  w.me.helmet = true;
  w.me.defuseKit = true;
  w.me.money = 12450;
  w.me.reloadUntil = 101;
  w.bomb.state = "planted";
  w.bomb.defuser = w.me;
  w.bomb.defuseProgress = 1;
  w.effects = [{ kind: "hitmark", at: 99.95, headshot: true }];
  w.feed = [kill(99), kill(97, { killerTeam: "ct" }), kill(94, { headshot: true })];
  w.messages = [{ at: 99.5, text: "The bomb has been planted at B." }];
  for (const p of w.players) p.kills = p.id;
  (w.players[4] as Player).alive = false;
});
/** Every call that put something over the edge of the canvas. */
function offCanvas(paint: Recorder, width: number, height: number): Call[] {
  const on = (x: number, y: number): boolean => x >= 0 && y >= 0 && x <= width && y <= height;
  return paint.calls.filter((c) => {
    const [a, b, c3, d] = c.args.map(Number);
    if (c.op === "fillText") return !on(Number(c.args[1]), Number(c.args[2]));
    if (c.op === "moveTo" || c.op === "lineTo") return !on(a as number, b as number);
    if (c.op === "arc") return !on((a as number) - (c3 as number), (b as number) - (c3 as number)) ||
      !on((a as number) + (c3 as number), (b as number) + (c3 as number));
    if (c.op === "fillRect" || c.op === "rect" || c.op === "clearRect")
      return !on(a as number, b as number) || !on((a as number) + (c3 as number), (b as number) + (d as number));
    return false;
  });
}
const fontsUsed = (paint: Recorder): string[] =>
  [...new Set(paint.calls.filter((c) => c.op === "fillText").map((c) => c.font))].sort();
test("the whole readout fits a phone and a desk, and says the same amount at both", () => {
  const world = busyWorld();
  const phone = draw(world, { width: 360, height: 640, scoreboard: true });
  const desk = draw(world, { width: 1920, height: 1080, scoreboard: true });
  expect(offCanvas(phone, 360, 640)).toEqual([]);
  expect(offCanvas(desk, 1920, 1080)).toEqual([]);
  // The scale is `width / 1280`, clamped to 0.7 .. 1.4: 21/13/11 px on a phone,
  // 42/27/21 on a desk, and no other size on either.
  expect(fontsUsed(phone)).toEqual([
    "11px system-ui, sans-serif", "13px system-ui, sans-serif", "21px system-ui, sans-serif",
  ]);
  expect(fontsUsed(desk)).toEqual([
    "21px system-ui, sans-serif", "27px system-ui, sans-serif", "42px system-ui, sans-serif",
  ]);
  // The same world reads the same on both: every line of it, in the same order.
  expect(words(phone)).toEqual(words(desk));
  expect(phone.calls.length).toBe(desk.calls.length);
  expect(phone.calls.map((c) => c.op)).toEqual(desk.calls.map((c) => c.op));
  // And the frame starts by clearing the one it is drawn on, whatever its size.
  expect(phone.calls[0]?.op).toBe("clearRect");
  expect(phone.calls[0]?.args).toEqual([0, 0, 360, 640]);
});
		@@ -199,7 +199,13 @@ from the angle it subtends, and you turn on the spot.
199	199	a match, one POST per round scored and a browser with no WebGL2 are all
200	200	checked with no browser in the room. `hud` draws onto a `Paint` — the
201	201	seventeen members of a 2D context it uses — which is how that stub can be a
202		recorder and the page can still hand it a canvas.
	202	recorder and the page can still hand it a canvas. `hud.test.ts` drives it
	203	with a recorder of its own that writes down the brush as well as the call, so
	204	what is pinned is what a player reads: the health that goes red, the ammo, the
	205	clock that stops between rounds and reddens once the bomb is down, the
	206	crosshair that opens as far as the gun is inaccurate, the plant bar, the kill
	207	feed fading out over eight seconds, the scoreboard's order, and the whole
	208	readout fitting a 360px phone and a 1920px desk alike.
203	209	- `src/range/` — the second game, at `/range`, and the proof that the engine is a
204	210	package: a module in here may import the engine through its door, `src/pages/shell.ts`
205	211	and its own siblings, and nothing else. **It is a game with no renderer under