8b26790
@@ -95,15 +95,21 @@
whatever the name field said, and a result posted without one is a **guest**.
<kbd>Shift</kbd> walk, mouse aims and fires, <kbd>R</kbd> reload,
<kbd>E</kbd> plants or defuses, <kbd>B</kbd> opens the buy menu in the freeze
time, <kbd>1</kbd>/<kbd>2</kbd>/<kbd>3</kbd> switch guns, <kbd>Tab</kbd> shows
the scoreboard, <kbd>Esc</kbd> pauses. On a touch screen the left of the view
is a thumb stick, the right looks around, and the buttons along the bottom do
the rest.
the scoreboard, <kbd>F</kbd> puts the stage on the whole screen and
<kbd>Esc</kbd> pauses. On a touch screen the left of the view is a thumb stick,
the right looks around, and the buttons along the bottom do the rest — including
the one in the top corner, which is full screen and is how you get one on a
phone, where there is no keyboard and no pointer to lock. A browser that will not
put an element full screen — an iPhone will not — never shows that button rather
than showing one that does nothing.
At `/range` the same controls drive the second game, on its own bindings:
<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> starts a thirty second run and <kbd>T</kbd> chooses the drill
between runs. There are two. **Pop-up** is the one the range shipped with: three
<kbd>Enter</kbd> starts a thirty second run, <kbd>T</kbd> chooses the drill
between runs and <kbd>G</kbd> is full screen — G rather than F here, because F is
this game's trigger, and at `/example` it is <kbd>F</kbd> again. There are two
drills. **Pop-up** is the one the range shipped with: three
plates at a time, standing still down the lane, each worth 100 to 200 points by
how far away it stood. **Tracking** is the second: two at a time, nearer and
longer-lived, each sliding across the lane at 90 to 260 units a second until its
@@ -170,7 +176,9 @@
renderer, no atlas, no mesh and no sound ship in that bundle, and
  knows nothing about de_forge's alphabet), `mesh` (a box builder), `texture`
  (hashed value noise, fbm and an atlas painter), `sound` (a lazy `AudioContext`
  with noise bursts and tones), `loop` (a fixed step with a clamp on a long
  frame), `controls` (a bindings table in, held actions out), `overlay` (the
  frame), `controls` (a bindings table in, held actions out), `fullscreen` (the stage on
  the whole screen: whether this browser will, whether it is right now, the way
  in and out, and a refusal swallowed rather than thrown), `overlay` (the
  2D over the scene: a scale and a pad off the canvas width, scaled fonts,
  panels, aligned and faded text, a crosshair, a bar, right-aligned columns and
  a `m:ss` clock, drawn onto the seventeen members of a 2D context it uses and
@@ -228,7 +236,8 @@
renderer, no atlas, no mesh and no sound ship in that bundle, and
  `sound` `attenuate`, `createSoundDevice`, `Burst`, `Tone`, `SoundDevice` and
  `Ctor`; from `loop` `createLoop`, `Frames`, `Loop` and `LoopOptions`; from
  `controls` `createControls`, `attachButtons` and the event and option types
  they are driven with; from `overlay` `overlay`, `Overlay` and the `Paint`
  they are driven with; from `fullscreen` `createFullscreen` with `Fullscreen`,
  `FullscreenHost`, `FullscreenTarget` and `FullscreenOwner`; from `overlay` `overlay`, `Overlay` and the `Paint`
  a 2D game draws onto; from `scene` the frame and its pool — `createScene`,
  `resetScene`, `nextInstance`, `pushLine`, `Scene`, `SceneCapacity`, `Camera`
  and `Instance`; from `renderer` `createRenderer` with `Renderer` and
@@ -38,8 +38,8 @@
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: 75_400, gzip: 34_900 } },
    { name: "range", entry: "src/range/main.ts", ceiling: { raw: 29_400, gzip: 12_700 } },
    { name: "example", entry: "src/example/main.ts", ceiling: { raw: 9_700, gzip: 4_700 } },
    { name: "range", entry: "src/range/main.ts", ceiling: { raw: 33_000, gzip: 14_000 } },
    { name: "example", entry: "src/example/main.ts", ceiling: { raw: 10_800, gzip: 5_100 } },
  ]);
  // 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`.
@@ -23,6 +23,10 @@
test("the bindings are the ones the keyboard has always had", () => {
  expect(CS_MOUSE[0]).toBe("fire");
  expect(CS_MOUSE[2]).toBe("scope");
  expect([...CS_TAP]).toEqual(["jump", "reload", "buy"]);
  // 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.
  expect(CS_KEYS.KeyF).toBe("fullscreen");
  expect(intent(["fullscreen"])).toEqual(intent([]));
});
test("nothing held is nothing asked for", () => {
@@ -15,6 +15,9 @@
export const CS_KEYS: Record<string, string> = {
  Space: "jump", ControlLeft: "duck", KeyC: "duck", ShiftLeft: "walk",
  KeyR: "reload", KeyE: "use", KeyB: "buy", Tab: "scoreboard",
  Digit1: "slot1", Digit2: "slot2", Digit3: "slot3",
  // Not a thing the world knows about: `main.ts` hears it on `onAction` and
  // asks the browser for the screen, which `readIntent` below never sees.
  KeyF: "fullscreen",
};
/** Left fires, right scopes. */
@@ -362,6 +362,52 @@
test("a leaderboard that cannot be reached is not a reason to stop playing", asy
  expect(stage.by("menu").hidden).toBe(true);
});
test("F and the button put the stage on the whole screen, and take it back", () => {
  const stage = start(fakeStage());
  const full = stage.by("full");
  const box = stage.by("stage");
  // Shown by the entry, not by the server: a control that needs a script is
  // rendered hidden and revealed by the script that makes it work.
  expect(full.hidden).toBe(false);
  expect(full.getAttribute("aria-pressed")).toBe(null);
  stage.press("KeyF");
  expect(stage.document.fullscreenElement).toBe(box);
  expect(box.fullscreens).toBe(1);
  expect(full.getAttribute("aria-pressed")).toBe("true");
  expect(full.getAttribute("aria-label")).toBe("Leave full screen");
  stage.press("KeyF");
  expect(stage.document.fullscreenElement).toBe(null);
  expect(full.getAttribute("aria-pressed")).toBe("false");
  expect(full.getAttribute("aria-label")).toBe("Full screen");
  // The button says the same thing with a thumb, which is the only way in on a
  // phone: there is no keyboard there and the pointer cannot be locked either.
  full.fire("click");
  expect(stage.document.fullscreenElement).toBe(box);
  expect(box.fullscreens).toBe(2);
  full.fire("click");
  expect(stage.document.fullscreenElement).toBe(null);
});
test("the screen is the browser's: Escape is heard, and a browser that will not is not lied about", () => {
  const stage = start(fakeStage());
  stage.press("KeyF");
  // Escape, which no code of ours ran. The page hears it from the event.
  stage.document.fullscreenElement = null;
  stage.document.fire("fullscreenchange");
  expect(stage.by("full").getAttribute("aria-pressed")).toBe("false");
  // And a browser with no fullscreen at all keeps the button hidden rather than
  // showing one that does nothing.
  const cannot = start(fakeStage({ fullscreen: false }));
  expect(cannot.by("full").hidden).toBe(true);
  cannot.press("KeyF");
  expect(cannot.document.fullscreenElement).toBe(null);
  expect(cannot.by("stage").fullscreens).toBe(0);
});
test("no WebGL2 is a sentence on the page, not an exception", () => {
  const stage = start(fakeStage({ webgl: false }));
  expect(stage.by("menu").innerHTML).toContain("No WebGL2");
@@ -25,8 +25,8 @@
import { createAudio, type Audio } from "./audio.ts";
import { CS_KEYS, CS_MOUSE, CS_TAP, readIntent } from "./binding.ts";
import { drawHud, type Paint } from "./hud.ts";
import {
  attachButtons, clamp, createControls, createLoop, createRenderer, painter, type Button,
  type Camera, type Listens, type Mesh,
  attachButtons, clamp, createControls, createFullscreen, createLoop, createRenderer, painter,
  type Button, type Camera, type Listens, type Mesh,
} from "../engine/index.ts";
import { DE_FORGE } from "./map.ts";
import type { Level } from "./level.ts";
@@ -60,6 +60,12 @@
export type Field = Panel & { value: string };
/** A button this file makes rather than finds. */
export type Pressable = Listens & { type: string; textContent: string | null; disabled: boolean };
/** The box the canvases sit in: what goes full screen, when a browser will. */
export type Box = Panel & { requestFullscreen?(): unknown };
/** 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 = Panel & {
  readonly clientWidth: number;
@@ -72,10 +78,13 @@
export type Stage = Panel & {
export type PageDocument = Listens & {
  readonly pointerLockElement: unknown;
  /** Whose element is on the screen right now — the engine's `createFullscreen` reads it. */
  readonly fullscreenElement: unknown;
  getElementById(id: string): unknown;
  querySelectorAll(selectors: string): ArrayLike<Button>;
  createElement(tag: "button"): Pressable;
  exitPointerLock(): void;
  exitFullscreen?(): unknown;
};
/** The window: the frame clock, the pixel ratio and the media query. */
@@ -139,8 +148,10 @@
export function boot(host: Host): Frame {
  const win = host.window;
  const by = <T extends Panel>(id: string): T => doc.getElementById(id) as T;
  const stageBox = by<Box>("stage");
  const sceneCanvas = by<Stage>("scene");
  const hudCanvas = by<Stage>("hud");
  const fullButton = by<Toggle>("full");
  const menu = by("menu");
  const pause = by("pause");
  const buyPanel = by("buy");
@@ -165,6 +176,25 @@
export function boot(host: Host): Frame {
    { keys: CS_KEYS, mouse: CS_MOUSE, sensitivity: Number(sensField.value) || 2.2 },
  );
  attachButtons(doc.querySelectorAll("[data-action]"), controls, { tap: CS_TAP });
  // The stage on the whole screen: the button over it, and F, which is bound to
  // the "fullscreen" action below like every other key this game reads. Both
  // arrive inside a gesture, which is the only time a browser says yes. A
  // browser that will not do it at all leaves the button hidden rather than
  // showing one that does nothing, and the state is the browser's — Escape
  // leaves and `onChange` is how this page hears about it.
  const full = createFullscreen({ element: stageBox, document: doc });
  const paintFull = (on: boolean): void => {
    const label = on ? "Leave full screen" : "Full screen";
    fullButton.setAttribute("aria-pressed", on ? "true" : "false");
    fullButton.setAttribute("aria-label", label);
    fullButton.setAttribute("title", label);
    fullButton.textContent = on ? "⤡" : "⛶";
  };
  full.onChange = paintFull;
  fullButton.hidden = !full.supported;
  fullButton.addEventListener("click", () => full.toggle());
  const loop = createLoop({ tick: TICK }, {
    requestAnimationFrame: (callback) => win.requestAnimationFrame(callback),
    cancelAnimationFrame: (handle) => win.cancelAnimationFrame(handle),
@@ -246,7 +276,9 @@
export function boot(host: Host): Frame {
  }
  controls.onAction = (action, down) => {
    if (down && action === "buy") openBuy(buyPanel.hidden);
    if (!down) return;
    if (action === "buy") openBuy(buyPanel.hidden);
    else if (action === "fullscreen") full.toggle();
  };
  controls.onUnlock = () => {
    if (running && buyPanel.hidden) show(pause, true);
@@ -150,10 +150,10 @@
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 = ["scene", "hud", "menu", "pause", "buy", "touch", "stats", "name", "length", "side", "sens", "play", "prep", "resume", "quit", "fps"];
export const PAGE_IDS = ["stage", "scene", "hud", "menu", "pause", "buy", "touch", "stats", "name", "length", "side", "sens", "play", "prep", "resume", "quit", "fps", "full"];
/** The ones the server renders with `hidden` on them: the page starts at the menu. */
const HIDDEN = ["pause", "buy", "touch"];
const HIDDEN = ["pause", "buy", "touch", "full"];
/** The `[data-action]` buttons the shell renders for this game. */
export const PAGE_ACTIONS = ["duck", "jump", "use", "reload", "buy", "fire"];
@@ -168,16 +168,20 @@
const GLOBALS = ["document", "window", "localStorage", "fetch"];
/**
 * The whole page the shooter's entry expects, plus the host around it. Pass
 * `webgl: false` for a browser that cannot give the renderer a context, and
 * `coarse: true` for a phone.
 * `webgl: false` for a browser that cannot give the renderer a context,
 * `coarse: true` for a phone, and `fullscreen: false` for a browser that will
 * not put an element on the whole screen.
 */
export function fakeStage(options: { webgl?: boolean; coarse?: boolean } = {}): FakeStage {
export function fakeStage(
  options: { webgl?: boolean; coarse?: boolean; fullscreen?: boolean } = {},
): FakeStage {
  const page = fakePage({
    ids: PAGE_IDS,
    canvases: ["scene", "hud"],
    hidden: HIDDEN,
    actions: PAGE_ACTIONS,
    coarse: options.coarse,
    fullscreen: options.fullscreen,
  });
  // Asked for with `paint` left on, so both canvases have their 2D recorder.
  const [scene, hud] = page.canvases as [StageCanvas, StageCanvas];
@@ -326,6 +326,27 @@
export function step(world: World, dt: number, held: ReadonlySet<string>): World
  const on = (action: string): number => (held.has(action) ? 1 : 0);
```
### fullscreen
The stage on the whole screen, which is three calls with four ways to be
absent. `createFullscreen` takes a `FullscreenHost` — the `FullscreenTarget`
that goes full screen, usually the box the canvases sit in, and the
`FullscreenOwner` that owns `fullscreenElement`, which a document is — and hands
back a `Fullscreen`: `Fullscreen.supported`, which is false on a browser that
will not do it at all and is how a page hides the button rather than shipping
one that does nothing; `Fullscreen.on`, read from the document every time it is
asked rather than remembered, because a person leaves with Escape and no code of
yours runs; `Fullscreen.enter`, `Fullscreen.exit` and `Fullscreen.toggle`; the
`Fullscreen.onChange` callback, which is that event; and a `Fullscreen.detach`
for when the game is over.
A refusal is not an error a game can act on — no user gesture, a policy, an
iframe — so a rejected promise and a browser that throws instead are both
swallowed: nothing changed, and `Fullscreen.on` still reads false. Ask from
inside a click or a keydown, which is the only time a browser says yes. The
`:fullscreen` half is CSS: the element keeps whatever aspect ratio and maximum
height it had unless a rule says otherwise.
### overlay
The 2D a game draws over its scene. `overlay` takes the surface, the width and
@@ -284,6 +284,9 @@
test("the example imports the door and nothing else, which is what it is for", (
 *   physics — `Body`, `Wish`, `MoveTuning`, `Hull`, `accelerate`,
 *   `airAccelerate`, `move`, `groundUnder`, `stuck`, `eyeHeight`, `hullHeight`.
 *
 *   fullscreen — `Fullscreen`, `FullscreenHost`, `FullscreenOwner`,
 *   `FullscreenTarget`, `createFullscreen`.
 *
 * Exported because `guide.test.ts` holds `GUIDE.md` against the same list: one
 * copy of the surface, read twice, rather than two that drift.
 */
@@ -291,7 +294,8 @@
export const SURFACE = [
  "Activations", "Adam", "Body", "Box", "Builder", "Burst", "Button", "ButtonOptions",
  "CHECKPOINT_CHARS", "Camera", "Complaint", "Controls", "Ctor", "DEFAULT_HYPER", "FakeCanvas",
  "FakeDocument", "FakeElement", "FakePage", "FakePaint", "FakeTarget", "FakeWindow", "Fold",
  "Folded", "Frames", "Grads", "Grid", "Hit", "Host", "Hull", "Hyper", "Instance", "KeyEventish",
  "Folded", "Frames", "Fullscreen", "FullscreenHost", "FullscreenOwner", "FullscreenTarget",
  "Grads", "Grid", "Hit", "Host", "Hull", "Hyper", "Instance", "KeyEventish",
  "Listens", "LockOwner", "Loop", "LoopOptions", "Mat4", "Mesh", "MouseEventish", "MoveTuning", "Options",
  "Overlay", "Packed", "PageOptions", "Paint", "Painter", "Pin", "Policy", "QUANTUM",
  "Renderer", "RendererAssets", "Rollout", "Scene", "SceneCapacity", "Shader", "Shape",
@@ -299,8 +303,9 @@
export const SURFACE = [
  "Wish", "accelerate", "add", "addBox", "airAccelerate", "angleDelta", "angleVectors",
  "applyGrads", "attachButtons", "attenuate",
  "backward", "builder", "cellAt", "clamp", "clearGrads", "colOf", "compare",
  "computeAdvantages", "copyPolicy", "createAdam", "createControls", "createLoop",
  "createPolicy", "createRenderer", "createRollout", "createScene", "createSoundDevice",
  "computeAdvantages", "copyPolicy", "createAdam", "createControls", "createFullscreen",
  "createLoop", "createPolicy", "createRenderer", "createRollout", "createScene",
  "createSoundDevice",
  "cross", "deg", "dist", "dist2d", "dot", "eyeHeight", "fakePage", "fbm", "findPath", "finish",
  "fold", "forward", "greedy", "groundUnder", "hash", "headOffset", "hullHeight", "inside",
  "length", "length2d", "lerp",
@@ -0,0 +1,106 @@
/**
 * Full screen, driven against the headless page next door: asking, leaving,
 * a browser that will not, and the three ways a real one refuses. Nothing in
 * here is a browser — `fakePage`'s document is the one that owns
 * `fullscreenElement`, and it fires `fullscreenchange` the way a browser does.
 */
import { expect, test } from "bun:test";
import { createFullscreen, type FullscreenOwner, type FullscreenTarget } from "./fullscreen.ts";
import { fakePage } from "./page.ts";
/** A page with a stage on it, and the fullscreen around that stage. */
function stage(options: { fullscreen?: boolean } = {}) {
  const page = fakePage({ ids: ["stage", "other"], fullscreen: options.fullscreen });
  const element = page.by("stage");
  const changes: boolean[] = [];
  const full = createFullscreen({ element, document: page.document });
  full.onChange = (on) => void changes.push(on);
  return { page, element, full, changes };
}
test("asking puts the stage on the screen, and leaving takes it back", () => {
  const { page, element, full, changes } = stage();
  expect(full.supported).toBe(true);
  expect(full.on).toBe(false);
  full.enter();
  expect(full.on).toBe(true);
  expect(element.fullscreens).toBe(1);
  expect(page.document.fullscreenElement).toBe(element);
  expect(changes).toEqual([true]);
  full.exit();
  expect(full.on).toBe(false);
  expect(page.document.fullscreenElement).toBe(null);
  expect(changes).toEqual([true, false]);
});
test("toggle is the same two verbs, and neither is asked for twice", () => {
  const { element, full, changes } = stage();
  full.toggle();
  expect(full.on).toBe(true);
  // Already there: asking again is not a second request.
  full.enter();
  expect(element.fullscreens).toBe(1);
  full.toggle();
  expect(full.on).toBe(false);
  // Not there: leaving is not a call either, so nothing is fired.
  full.exit();
  expect(changes).toEqual([true, false]);
});
test("the state is read from the document, never remembered", () => {
  const { page, full, changes } = stage();
  full.enter();
  // Escape, which no code of ours ran: the browser dropped it and said so.
  page.document.fullscreenElement = null;
  page.document.fire("fullscreenchange");
  expect(full.on).toBe(false);
  expect(changes).toEqual([true, false]);
  // Somebody else's element is not ours, whatever the document says.
  page.document.fullscreenElement = page.by("other");
  expect(full.on).toBe(false);
});
test("a browser that will not do it says so before anything is drawn", () => {
  const { page, element, full, changes } = stage({ fullscreen: false });
  expect(full.supported).toBe(false);
  full.enter();
  full.toggle();
  expect(full.on).toBe(false);
  expect(element.fullscreens).toBe(0);
  expect(page.document.fullscreenElement).toBe(null);
  expect(changes).toEqual([]);
});
test("a refusal is not a crash, whichever way the browser refuses", () => {
  const listening = new Set<string>();
  const owner: FullscreenOwner = {
    fullscreenElement: null,
    exitFullscreen: () => Promise.reject(new Error("no")),
    addEventListener: (type) => void listening.add(type),
    removeEventListener: (type) => void listening.delete(type),
  };
  // A promise that rejects, and a browser that throws where it should reject.
  const rejects: FullscreenTarget = { requestFullscreen: () => Promise.reject(new Error("no gesture")) };
  const throws: FullscreenTarget = {
    requestFullscreen: () => {
      throw new Error("not allowed");
    },
  };
  expect(() => createFullscreen({ element: rejects, document: owner }).enter()).not.toThrow();
  expect(() => createFullscreen({ element: throws, document: owner }).enter()).not.toThrow();
  // And the same on the way out, where we are the element holding the screen.
  const held: FullscreenOwner = { ...owner, fullscreenElement: rejects };
  expect(() => createFullscreen({ element: rejects, document: held }).exit()).not.toThrow();
});
test("detach leaves the document as it found it", () => {
  const { page, full, changes } = stage();
  expect(page.document.listening.has("fullscreenchange")).toBe(true);
  full.detach();
  expect(page.document.listening.has("fullscreenchange")).toBe(false);
  page.document.fire("fullscreenchange");
  expect(changes).toEqual([]);
});
@@ -0,0 +1,103 @@
/**
 * Full screen: the stage handed to the whole screen, and back again. It is the
 * smallest module behind this door on purpose — one element, one question
 * ("are we there right now?") and three verbs — because the Fullscreen API is
 * three calls with four ways to be absent, and every game here wants the same
 * three lines around it.
 *
 * It knows no game and it knows no browser: the element it puts full screen and
 * whatever owns `fullscreenElement` arrive as parameters, typed by the members
 * this file actually touches, so `page.ts`'s headless double drives the whole
 * thing with no browser in the room.
 *
 * Three things a real browser does that this file takes seriously:
 *
 *   - It may not offer the API at all. An iPhone will not put a `<div>` full
 *     screen, so `requestFullscreen` is simply missing there; `supported` says
 *     so before anything is drawn and a page can hide the button rather than
 *     ship one that does nothing.
 *   - The request is a promise that rejects when the browser says no — no user
 *     gesture, a policy, an iframe without the permission — and older ones
 *     throw instead. Neither is an error a game can act on, so both are
 *     swallowed here: nothing changed, and `on` still reads false.
 *   - The state is the browser's, not ours. A person leaves full screen with
 *     Escape and no code of ours runs, so `on` is read from the document every
 *     time it is asked rather than remembered, and `onChange` is the event.
 */
import type { Listens } from "./controls.ts";
/**
 * The element that goes full screen. `requestFullscreen` is optional because a
 * browser that will not do it is a browser where the method is not there.
 */
export type FullscreenTarget = { requestFullscreen?: () => unknown };
/** Whatever owns the full screen element — a `Document` fits. */
export type FullscreenOwner = Listens & {
  readonly fullscreenElement: unknown;
  exitFullscreen?: () => unknown;
};
export type FullscreenHost = { element: FullscreenTarget; document: FullscreenOwner };
export type Fullscreen = {
  /** Whether this browser offers it at all. False hides a button rather than lying. */
  readonly supported: boolean;
  /** Whether `element` is the full screen element right now. Live: read it any time. */
  readonly on: boolean;
  /** Ask for it. A browser that refuses is not an error: nothing changes. */
  enter(): void;
  /** Give it back, if we are the one holding it. */
  exit(): void;
  toggle(): void;
  /** It changed, however it changed — our call, or a person pressing Escape. */
  onChange: (on: boolean) => void;
  detach(): void;
};
/** A promise nobody awaits still rejects loudly; a refusal here is not news. */
function swallow(result: unknown): void {
  if (result instanceof Promise) result.catch(() => {});
}
export function createFullscreen(host: FullscreenHost): Fullscreen {
  const supported = typeof host.element.requestFullscreen === "function" &&
    typeof host.document.exitFullscreen === "function";
  const isOn = (): boolean => host.document.fullscreenElement === host.element;
  const changed = (): void => fullscreen.onChange(isOn());
  const fullscreen: Fullscreen = {
    supported,
    get on() {
      return isOn();
    },
    enter() {
      if (!supported || isOn()) return;
      try {
        swallow(host.element.requestFullscreen?.());
      } catch {
        // A browser that throws instead of rejecting. The page is unchanged.
      }
    },
    exit() {
      if (!isOn()) return;
      try {
        swallow(host.document.exitFullscreen?.());
      } catch {
        // The same, from the other side.
      }
    },
    toggle() {
      if (isOn()) fullscreen.exit();
      else fullscreen.enter();
    },
    onChange: () => {},
    detach() {
      host.document.removeEventListener("fullscreenchange", changed);
    },
  };
  host.document.addEventListener("fullscreenchange", changed);
  return fullscreen;
}
@@ -62,8 +62,8 @@
const BARE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
 */
const NOT_THE_ENGINES = new Set([
  "AudioContext", "Float32Array", "Int32Array", "TEXTURE_2D_ARRAY", "addEventListener",
  "cancelAnimationFrame", "de_forge", "pointerLockElement", "removeEventListener",
  "requestAnimationFrame", "uniformMatrix4fv",
  "cancelAnimationFrame", "de_forge", "fullscreenElement", "pointerLockElement",
  "removeEventListener", "requestAnimationFrame", "uniformMatrix4fv",
]);
const guide = (): string => readFileSync(GUIDE, "utf8");
@@ -58,6 +58,10 @@
export type {
  Options, Stick, Surface, TouchEventish, Touchish,
} from "./controls.ts";
/** The stage on the whole screen: whether this browser will, whether it is, and the way in and out. */
export { createFullscreen } from "./fullscreen.ts";
export type { Fullscreen, FullscreenHost, FullscreenOwner, FullscreenTarget } from "./fullscreen.ts";
/** The 2D over the scene: panels, scaled text, a crosshair, a bar and a clock. */
export { overlay } from "./overlay.ts";
export type { Overlay, Paint } from "./overlay.ts";
@@ -12,9 +12,12 @@
 * committed bundles to say so.
 *
 * Everything here records rather than does. An element remembers what was
 * hidden, written and focused; a canvas's 2D context writes down every call it
 * was asked for, in order, with its arguments; a target remembers what is
 * listening on it and delivers an event to exactly those handlers. It is honest
 * hidden, written, focused, set as an attribute and put full screen; a canvas's
 * 2D context writes down every call it was asked for, in order, with its
 * arguments; a target remembers what is listening on it and delivers an event
 * to exactly those handlers. The two pieces of state a browser owns rather than
 * a page — the pointer lock and the full screen element — live on the document
 * here too, and asking for either fires the event a page hears it from. It is honest
 * about being a double: it has no timer, it touches no global, it throws for
 * nothing, and it knows what neither a renderer nor an `AudioContext` is —
 * `canvas.gl` is a slot a game fills with its own recorder, because what a
@@ -92,10 +95,22 @@
export type FakeElement = FakeTarget & {
  dataset: { action?: string };
  /** How many times something asked for the focus. */
  focused: number;
  /** How many times something asked for the screen. See `fakePage`'s `fullscreen`. */
  fullscreens: number;
  readonly children: FakeElement[];
  /** Every attribute set on this element, by name: `aria-pressed` is one. */
  readonly attributes: Record<string, string>;
  focus(): void;
  setAttribute(name: string, value: string): void;
  getAttribute(name: string): string | null;
  appendChild(child: FakeElement): void;
  querySelector(selector: string): FakeElement | null;
  /**
   * Put this element full screen. Absent on a page asked for with
   * `fullscreen: false`, which is a browser that will not — an iPhone does not
   * put a `<div>` full screen and does not carry the method either.
   */
  requestFullscreen?(): Promise<void>;
};
/**
@@ -108,6 +123,7 @@
const CLASS = /class="([a-z-]+)"/g;
function element(options: { id?: string; tag?: string; action?: string; className?: string } = {}): FakeElement {
  const children: FakeElement[] = [];
  const attributes: Record<string, string> = {};
  let html = "";
  const self: FakeElement = {
    ...target(),
@@ -121,7 +137,9 @@
function element(options: { id?: string; tag?: string; action?: string; classNam
    disabled: false,
    type: "",
    focused: 0,
    fullscreens: 0,
    children,
    attributes,
    get innerHTML() {
      return html;
    },
@@ -133,6 +151,12 @@
function element(options: { id?: string; tag?: string; action?: string; classNam
    focus() {
      self.focused += 1;
    },
    setAttribute(name, value) {
      attributes[name] = value;
    },
    getAttribute(name) {
      return attributes[name] ?? null;
    },
    appendChild(child) {
      children.push(child);
    },
@@ -235,11 +259,15 @@
export type FakeDocument = FakeTarget & {
  /** `"complete"`, so an entry boots on import; set `"loading"` for the other path. */
  readyState: string;
  pointerLockElement: unknown;
  /** The element that is full screen right now, or null. The browser owns this. */
  fullscreenElement: unknown;
  getElementById(id: string): FakeElement | null;
  /** The `[data-action]` buttons, whatever the selector says: there is one list. */
  querySelectorAll(selector: string): FakeElement[];
  createElement(tag: string): FakeElement;
  exitPointerLock(): void;
  /** Absent on a page asked for with `fullscreen: false`, like the method above. */
  exitFullscreen?(): Promise<void>;
};
/** What a game brings: its own ids, its own buttons, and the browser it is on. */
@@ -256,6 +284,13 @@
export type PageOptions = {
  paint?: boolean;
  /** What `matchMedia` answers. True is a phone. */
  coarse?: boolean;
  /**
   * Whether this browser can put an element full screen. Default true: asking
   * sets `document.fullscreenElement` and fires `fullscreenchange` at once.
   * False takes `requestFullscreen` off every element and `exitFullscreen` off
   * the document, which is what an iPhone looks like from the inside.
   */
  fullscreen?: boolean;
};
export type FakePage = {
@@ -313,11 +348,32 @@
export function fakePage(options: PageOptions = {}): FakePage {
    getElementById: (id) => elements.get(id) ?? null,
    querySelectorAll: (_selector) => buttons,
    createElement: (tag) => element({ tag }),
    fullscreenElement: null as unknown,
    exitPointerLock(): void {
      document.pointerLockElement = null;
    },
  };
  // The browser's half of full screen: asking puts the element there and fires
  // the one event a page learns about it from, and leaving fires it again. A
  // page asked for with `fullscreen: false` has neither method at all, because
  // that is how a browser that will not do it says so.
  if (options.fullscreen !== false) {
    document.exitFullscreen = (): Promise<void> => {
      document.fullscreenElement = null;
      document.fire("fullscreenchange");
      return Promise.resolve();
    };
    for (const found of elements.values()) {
      found.requestFullscreen = (): Promise<void> => {
        found.fullscreens += 1;
        document.fullscreenElement = found;
        document.fire("fullscreenchange");
        return Promise.resolve();
      };
    }
  }
  const window: FakeWindow = {
    ...target(),
    devicePixelRatio: 1,
@@ -24,7 +24,9 @@
const { BINDINGS, RUN, boot } = await import("./main.ts");
undoLoading();
/** A booted page, and the undo that puts the globals back. */
function booted(options: { has2d?: boolean; coarse?: boolean } = {}): { p: ExamplePage; undo: () => void } {
function booted(
  options: { has2d?: boolean; coarse?: boolean; fullscreen?: boolean } = {},
): { p: ExamplePage; undo: () => void } {
  const p = page(options);
  const undo = p.install();
  boot();
@@ -59,14 +61,44 @@
const marker = (calls: Call[]): [number, number] => {
  return [Number(move?.[1] ?? 0), Number(move?.[2] ?? 0)];
};
test("the table it binds is the game's own, plus the one key the page adds", () => {
  // The game says what a key does; the page says what starts a run, because a
  // run is the page's idea and not the game's.
  expect(BINDINGS).toEqual({ ...KEYS, Enter: "start" });
test("the table it binds is the game's own, plus the two keys the page adds", () => {
  // The game says what a key does; the page says what starts a run and what puts
  // the stage on the screen, because neither is the game's idea.
  expect(BINDINGS).toEqual({ ...KEYS, Enter: "start", KeyF: "fullscreen" });
  expect(KEYS.Enter).toBeUndefined();
  expect(KEYS.KeyF).toBeUndefined();
  expect(TICK).toBe(1 / 60);
});
test("F and the button put the room on the whole screen, and neither lies about a browser that will not", () => {
  const { p, undo } = booted();
  try {
    const full = p.by("full");
    const stage = p.by("stage");
    expect(full.hidden).toBe(false);
    p.window.fire("keydown", { code: "KeyF" });
    expect(p.document.fullscreenElement).toBe(stage);
    expect(full.getAttribute("aria-pressed")).toBe("true");
    p.window.fire("keyup", { code: "KeyF" });
    full.fire("click");
    expect(p.document.fullscreenElement).toBe(null);
    expect(full.getAttribute("aria-pressed")).toBe("false");
  } finally {
    undo();
  }
  const cannot = booted({ fullscreen: false });
  try {
    expect(cannot.p.by("full").hidden).toBe(true);
    cannot.p.window.fire("keydown", { code: "KeyF" });
    expect(cannot.p.document.fullscreenElement).toBe(null);
  } finally {
    cannot.undo();
  }
});
test("it boots, asks for a frame, and draws the room and the readout", () => {
  const { p, undo } = booted();
  try {
@@ -16,11 +16,15 @@
 */
import { KEYS, TICK, createWorld, step, type World } from "../engine/example.ts";
import { attachButtons, createControls, createLoop, type Paint } from "../engine/index.ts";
import { attachButtons, createControls, createFullscreen, createLoop, type Paint } from "../engine/index.ts";
import { drawPlan, type Phase } from "./plan.ts";
/** The game's own table, and the one key the page adds to start a run with. */
export const BINDINGS: Record<string, string> = { ...KEYS, Enter: "start" };
/**
 * The game's own table, and the two keys the page adds: the one that starts a
 * run, and the one that puts the stage on the whole screen. Neither is the
 * game's — `step` never sees either — and both are the page's to bind.
 */
export const BINDINGS: Record<string, string> = { ...KEYS, Enter: "start", KeyF: "fullscreen" };
/** Seconds a run lasts, and the actions a button press releases by itself. */
export const RUN = 30;
@@ -51,6 +55,24 @@
export function boot(): void {
  const controls = createControls({ surface: scene, window, document }, { keys: BINDINGS, requireLock: false });
  attachButtons(document.querySelectorAll<HTMLElement>("[data-action]"), controls, { tap: TAPS });
  // The room on the whole screen: the button over the stage, and <kbd>F</kbd>.
  // Both arrive inside a gesture, which is when a browser says yes; one that
  // will not do it at all leaves the button hidden rather than lying.
  const fullButton = $("full");
  const full = createFullscreen({ element: $("stage"), document });
  full.onChange = (on) => {
    const label = on ? "Leave full screen" : "Full screen";
    fullButton.setAttribute("aria-pressed", on ? "true" : "false");
    fullButton.setAttribute("aria-label", label);
    fullButton.setAttribute("title", label);
    fullButton.textContent = on ? "\u2921" : "\u26F6";
  };
  fullButton.hidden = !full.supported;
  fullButton.addEventListener("click", () => full.toggle());
  controls.onAction = (action, down) => {
    if (down && action === "fullscreen") full.toggle();
  };
  $("touch").hidden = !matchMedia("(pointer: coarse)").matches;
  const loop = createLoop({ tick: TICK }, {
    requestAnimationFrame: (callback) => requestAnimationFrame(callback),
@@ -16,7 +16,7 @@
import { fakePage, type FakeCanvas, type FakeDocument, type FakeElement, type FakeWindow } from "../engine/index.ts";
/** Every id `src/pages/example.ts` puts on the page that the entry looks up. */
export const EXAMPLE_IDS = ["scene", "hud", "fps", "touch", "note"];
export const EXAMPLE_IDS = ["stage", "scene", "hud", "fps", "touch", "note", "full"];
/** The `[data-action]` buttons the page renders: the touch pads, and Start. */
export const EXAMPLE_ACTIONS = ["turnLeft", "turnRight", "forward", "fire", "start"];
@@ -41,13 +41,17 @@
export type ExamplePage = {
};
/** The whole page this game's entry expects. `has2d: false` gives no context. */
export function page(options: { has2d?: boolean; coarse?: boolean } = {}): ExamplePage {
export function page(
  options: { has2d?: boolean; coarse?: boolean; fullscreen?: boolean } = {},
): ExamplePage {
  const fake = fakePage({
    ids: EXAMPLE_IDS,
    canvases: ["scene", "hud"],
    hidden: ["full"],
    actions: EXAMPLE_ACTIONS,
    paint: options.has2d ?? true,
    coarse: options.coarse,
    fullscreen: options.fullscreen,
  });
  const [scene, hud] = fake.canvases as [FakeCanvas, FakeCanvas];
@@ -149,6 +149,20 @@
export type Game = {
 * `duckRate`, `jumpVelocity` and `stopSpeed` and finds none of them, while
 * `src/client/bundle.test.ts` finds all four and the jump velocity itself.
 * Measured 2026-09-20 after #123, on the bundles this branch commits.
 * #132 put the stage on the whole screen — `src/engine/fullscreen.ts` behind the
 * door, and in each of the three entries the button over the stage, the key
 * that toggles it and the label that follows the state — and all three bundles
 * grew, because unlike the modules above this one is code a browser runs: app
 * 72,132 → 73,130 raw and 33,552 → 33,948 gzipped, range 28,980 → 29,975 and
 * 12,323 → 12,704, example 8,754 → 9,735 and 4,228 → 4,620. About a kilobyte
 * each, and it is the same kilobyte three times: roughly 300 bytes of the
 * engine's module and the rest the wiring — `aria-pressed`, `aria-label`, the
 * title and the two glyphs are strings a minifier cannot shorten. The app fits
 * today's ceiling. The range's and the example's did not, and both are raised
 * here to today's size plus about 10%, which is what every other number on this
 * page is: range 29,400/12,700 → 33,000/14,000 (it had 42 bytes of headroom
 * after #52 and 587 after #88, so this was the raise those two lines said was
 * coming), example 9,700/4,700 → 10,800/5,100.
 * The range's numbers here are #121's moving plates and #125's painter at once:
 * both landed a range bundle and neither swept the other's, so static/ held two
 * and every reader of it failed until a plain `bun run build` resolved them.
@@ -168,7 +182,7 @@
export const GAMES: readonly Game[] = [
    href: "/range",
    label: "range",
    entry: "src/range/main.ts",
    ceiling: { raw: 29_400, gzip: 12_700 },
    ceiling: { raw: 33_000, gzip: 14_000 },
    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.",
  },
@@ -177,7 +191,7 @@
export const GAMES: readonly Game[] = [
    href: "/example",
    label: "example",
    entry: "src/example/main.ts",
    ceiling: { raw: 9_700, gzip: 4_700 },
    ceiling: { raw: 10_800, gzip: 5_100 },
    blurb:
      "the guide's own game, served: one room, one plate, thirty seconds and a score, drawn in 2D through the engine's overlay and nothing else — the price tag on a third game.",
  },
@@ -20,7 +20,8 @@
const NOTE = `
      <h2>The smallest game this engine can run</h2>
      <p>One room seen from above, one plate on the far wall, thirty seconds and a score. The arrow
        keys turn you, <kbd>WASD</kbd> walks, <kbd>Space</kbd> fires one shot a press, and the blue
        dots are where that shot goes.</p>
        dots are where that shot goes. <kbd>F</kbd>, or the button in the corner of the stage, puts
        it on the whole screen.</p>
      <div class="row"><button type="button" class="primary" data-action="start">Start</button></div>
    `;
@@ -86,7 +86,8 @@
const menu = (visitor: Who): string => `
      <p class="hint" id="prep">Preparing textures…</p>
      <p class="hint"><kbd>WASD</kbd> move · <kbd>Space</kbd> jump · <kbd>Ctrl</kbd> crouch · <kbd>Shift</kbd> walk ·
        mouse to aim and fire · <kbd>R</kbd> reload · <kbd>E</kbd> plant or defuse · <kbd>B</kbd> buy ·
        <kbd>1</kbd><kbd>2</kbd><kbd>3</kbd> guns · <kbd>Tab</kbd> scores · <kbd>Esc</kbd> pause</p>
        <kbd>1</kbd><kbd>2</kbd><kbd>3</kbd> guns · <kbd>Tab</kbd> scores · <kbd>F</kbd> full screen ·
        <kbd>Esc</kbd> pause</p>
    `;
const PAUSE = `
@@ -30,8 +30,8 @@
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>Esc</kbd> gives the mouse
        back. On a touch screen the left of the view is a stick, the right looks around, and the
        <kbd>Enter</kbd> start · <kbd>T</kbd> the other drill · <kbd>G</kbd> full screen, which is
        G here because F is the trigger · <kbd>Esc</kbd> gives the mouse back. On a touch screen the left of the view is a stick, the right looks around, and the
        buttons do the rest.</p>
      <p class="hint">It makes its own noise, through the engine's sound device and the range's own
        recipes: a short dry crack, a clean tone for a hit, a knock as a plate stands up — quieter
@@ -158,6 +158,27 @@
test("the stage keeps the ids the client finds it by", () => {
  expect(html).toContain(`<div class="overlay" id="pause" hidden></div>`);
});
test("the stage carries the full screen button, hidden, over everything else", () => {
  const html = stage({
    touch: [[{ action: "fire", label: "fire" }]],
    overlays: [{ id: "menu", html: "<h2>go</h2>" }],
  });
  // Hidden in the first paint: it is the one control here that does nothing
  // without a script, so the entry reveals it once it knows the browser will.
  expect(html).toContain(
    `<button type="button" id="full" hidden aria-pressed="false" aria-label="Full screen" title="Full screen">⛶</button>`,
  );
  // Last, so it paints over the overlays rather than under them.
  expect(html.indexOf(`id="full"`)).toBeGreaterThan(html.indexOf(`id="menu"`));
  expect(html.indexOf(`id="full"`)).toBeLessThan(html.lastIndexOf("</div>"));
  // And it is a 44px target like every other button, with the rule that undoes
  // the stage's 16:9 box when the stage is the whole screen.
  const document = page({ ...options, stageHtml: html });
  expect(document).toContain("button { min-height:44px; min-width:44px;");
  expect(document).toContain("#stage:fullscreen");
  expect(document).toContain("aspect-ratio:auto");
});
test("a touch label and an action are text, not markup", () => {
  const html = stage({ touch: [[{ action: XSS, label: XSS }]], overlays: [{ id: XSS, html: "" }] });
  expect(html).not.toContain("<script>");
@@ -62,6 +62,16 @@
button.primary { background:#2563eb; border-color:#2563eb; font-weight:600; }
#buy .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.5rem; width:min(40rem,100%); }
#buy .hint, .overlay .hint { font-size:.78rem; }
#fps { position:absolute; right:.5rem; bottom:.4rem; font-size:.7rem; color:#8ea; opacity:.7; pointer-events:none; }
/* Over the overlays, not under them: the menu covers the stage, and the screen
   is a thing you ask for from the menu as much as from the game. */
#full { position:absolute; right:.5rem; top:.5rem; z-index:2; padding:.4rem; font-size:1.15rem;
        line-height:1; background:#0f131acc; opacity:.72; }
#full:hover, #full:focus-visible { opacity:1; }
#full[hidden] { display:none; }
/* The stage is a 16:9 box on the page and the whole screen off it: every rule
   that sized it has to be put back, including the phone's 4:3 below. */
#stage:fullscreen { width:100%; height:100%; max-width:none; max-height:none; aspect-ratio:auto;
        margin:0; border:0; border-radius:0; }
#touch { position:absolute; inset:auto 0 0 0; display:flex; justify-content:space-between; padding:.6rem; pointer-events:none; }
#touch[hidden] { display:none; }
#touch .pad { display:flex; gap:.4rem; flex-wrap:wrap; pointer-events:auto; }
@@ -93,9 +103,15 @@
export type StageOptions = {
/**
 * The stage: the two canvases the renderer draws into, the fps readout, the
 * touch pads and the overlays. Every id in here is found by `getElementById`
 * in `src/client/main.ts` — `scene`, `hud`, `fps`, `touch` and each overlay's —
 * so they are the contract, not decoration.
 * touch pads, the overlays and the full screen button. Every id in here is
 * found by `getElementById` in a game's entry — `stage`, `scene`, `hud`, `fps`,
 * `touch`, `full` and each overlay's — so they are the contract, not decoration.
 *
 * `#full` is rendered last, so it paints over the overlays rather than under
 * them, and `hidden`, because it is the one control on this page that does
 * nothing without a script: a game's entry shows it on the frame it has asked
 * its browser whether full screen is a thing here at all. It is absolutely
 * positioned, so revealing it moves nothing.
 */
export function stage({ overlays, touch }: StageOptions): string {
  const pads = touch
@@ -113,6 +129,7 @@
${pad.map((b) => `        <button type="button" data-action="${escape(b.action)}
${pads}
    </div>
${overlays.map((o) => `    <div class="overlay" id="${escape(o.id)}"${o.hidden === true ? " hidden" : ""}>${o.html}</div>`).join("\n")}
    <button type="button" id="full" hidden aria-pressed="false" aria-label="Full screen" title="Full screen">⛶</button>
  </div>`;
}
@@ -28,8 +28,13 @@
test("the range's bindings are its own, not the shooter's", () => {
  // Nothing cs-shaped: no buy, no scoreboard, no weapon slots.
  for (const code of ["KeyB", "Tab", "Digit1", "Digit2", "Digit3"])
    expect(RANGE_KEYS[code]).toBeUndefined();
  // Every key is bound to an action this game actually knows.
  for (const action of Object.values(RANGE_KEYS)) expect(RANGE_ACTIONS).toContain(action);
  // G is the screen, and it is G rather than F because F is the trigger here.
  expect(RANGE_KEYS.KeyG).toBe("fullscreen");
  // Every key is bound to an action this game actually knows, or to the one the
  // page owns: full screen is the browser's and the range's game never sees it.
  expect(RANGE_ACTIONS).not.toContain("fullscreen");
  for (const action of Object.values(RANGE_KEYS))
    if (action !== "fullscreen") expect(RANGE_ACTIONS).toContain(action);
  for (const action of Object.values(RANGE_MOUSE)) expect(RANGE_ACTIONS).toContain(action);
});
@@ -16,6 +16,9 @@
export const RANGE_KEYS: Record<string, string> = {
  ArrowUp: "forward", ArrowDown: "back", ArrowLeft: "left", ArrowRight: "right",
  Space: "jump", ControlLeft: "duck", KeyC: "duck", ShiftLeft: "walk",
  KeyF: "fire", KeyR: "reload", Enter: "start", KeyT: "drill",
  // Not the range's game: `main.ts` hears it on `onAction` and asks the browser
  // for the screen. It is G rather than F because F is the trigger here.
  KeyG: "fullscreen",
};
/** One weapon, one button: the left one. There is nothing to scope here. */
@@ -24,7 +24,9 @@
const { boot } = await import("./main.ts");
undoLoading();
/** A booted page, and the undo that puts the globals back. */
function booted(options: { has2d?: boolean; webgl?: boolean } = {}): { p: RangePage; undo: () => void } {
function booted(
  options: { has2d?: boolean; webgl?: boolean; fullscreen?: boolean } = {},
): { p: RangePage; undo: () => void } {
  const p = page(options);
  const undo = p.install();
  boot();
@@ -33,6 +35,42 @@
function booted(options: { has2d?: boolean; webgl?: boolean } = {}): { p: RangeP
const hudTexts = (p: RangePage): string[] => p.hud.paint?.texts ?? [];
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 {
    const full = p.by("full");
    const stage = p.by("stage");
    // Revealed by the entry, not by the server: a control that needs a script
    // is rendered hidden and shown by the script that makes it work.
    expect(full.hidden).toBe(false);
    p.window.fire("keydown", { code: "KeyG" });
    expect(p.document.fullscreenElement).toBe(stage);
    expect(stage.fullscreens).toBe(1);
    expect(full.getAttribute("aria-pressed")).toBe("true");
    p.window.fire("keyup", { code: "KeyG" });
    full.fire("click");
    expect(p.document.fullscreenElement).toBe(null);
    expect(full.getAttribute("aria-pressed")).toBe("false");
    expect(full.getAttribute("aria-label")).toBe("Full screen");
  } finally {
    undo();
  }
});
test("a browser with no full screen keeps the button hidden rather than shipping a dead one", () => {
  const { p, undo } = booted({ fullscreen: false });
  try {
    expect(p.by("full").hidden).toBe(true);
    p.window.fire("keydown", { code: "KeyG" });
    expect(p.document.fullscreenElement).toBe(null);
    expect(p.by("stage").fullscreens).toBe(0);
  } finally {
    undo();
  }
});
test("it boots, asks for a frame, and draws the readout the loop produced", () => {
  const { p, undo } = booted();
  try {
@@ -39,7 +39,7 @@
import {
  type DrillName, type Target,
} from "./targets.ts";
import {
  angleVectors, attachButtons, clamp, createControls, createLoop, createRenderer,
  angleVectors, attachButtons, clamp, createControls, createFullscreen, createLoop, createRenderer,
} from "../engine/index.ts";
/** The range's own step: 50 Hz, deliberately not the shooter's 64. */
@@ -63,6 +63,8 @@
export function boot(): void {
  const hud = $<HTMLCanvasElement>("hud");
  const note = $("note");
  const touch = $("touch");
  const stage = $("stage");
  const fullButton = $("full");
  // A canvas that gives no context is a sentence on the page, never a throw:
  // everything else here — the text, the links, the terminal line — still works.
@@ -157,6 +159,24 @@
export function boot(): void {
  controls.onUnlock = () => {
    note.hidden = false;
  };
  // The lane on the whole screen: the button over the stage, and <kbd>G</kbd>,
  // which is this game's table's — F is the trigger here, so it could not also
  // be the screen. Both arrive inside a gesture, which is when a browser says
  // yes; one that will not do it at all leaves the button hidden.
  const full = createFullscreen({ element: stage, document });
  full.onChange = (on) => {
    const label = on ? "Leave full screen" : "Full screen";
    fullButton.setAttribute("aria-pressed", on ? "true" : "false");
    fullButton.setAttribute("aria-label", label);
    fullButton.setAttribute("title", label);
    fullButton.textContent = on ? "\u2921" : "\u26F6";
  };
  fullButton.hidden = !full.supported;
  fullButton.addEventListener("click", () => full.toggle());
  controls.onAction = (action, down) => {
    if (down && action === "fullscreen") full.toggle();
  };
  touch.hidden = !matchMedia("(pointer: coarse)").matches;
  /** Match a canvas's backing store to its box, at most twice the CSS pixels. */
@@ -14,7 +14,7 @@
import { fakePage, type FakeCanvas, type FakeDocument, type FakeElement, type FakeWindow } from "../engine/index.ts";
/** Every id `src/pages/range.ts` puts on the page that the entry looks up. */
export const RANGE_IDS = ["scene", "hud", "note", "touch", "look", "fps"];
export const RANGE_IDS = ["stage", "scene", "hud", "note", "touch", "look", "fps", "full"];
/** The `[data-action]` buttons the shell renders for this game. */
export const RANGE_ACTIONS = ["duck", "jump", "fire"];
@@ -183,12 +183,16 @@
const GLOBALS = [
 * the draw, and because a browser with no WebGL2 is a real browser this page has
 * to keep working on; `has2d: false` is a canvas that gives no context at all.
 */
export function page(options: { has2d?: boolean; webgl?: boolean } = {}): RangePage {
export function page(
  options: { has2d?: boolean; webgl?: boolean; fullscreen?: boolean } = {},
): RangePage {
  const fake = fakePage({
    ids: RANGE_IDS,
    canvases: ["scene", "hud"],
    hidden: ["full"],
    actions: RANGE_ACTIONS,
    paint: options.has2d ?? true,
    fullscreen: options.fullscreen,
  });
  const [scene, hud] = fake.canvases as [FakeCanvas, FakeCanvas];
  if (options.webgl === true) scene.gl = glRecorder();
		@@ -95,15 +95,21 @@ whatever the name field said, and a result posted without one is a guest.
95	95	<kbd>Shift</kbd> walk, mouse aims and fires, <kbd>R</kbd> reload,
96	96	<kbd>E</kbd> plants or defuses, <kbd>B</kbd> opens the buy menu in the freeze
97	97	time, <kbd>1</kbd>/<kbd>2</kbd>/<kbd>3</kbd> switch guns, <kbd>Tab</kbd> shows
98		the scoreboard, <kbd>Esc</kbd> pauses. On a touch screen the left of the view
99		is a thumb stick, the right looks around, and the buttons along the bottom do
100		the rest.
	98	the scoreboard, <kbd>F</kbd> puts the stage on the whole screen and
	99	<kbd>Esc</kbd> pauses. On a touch screen the left of the view is a thumb stick,
	100	the right looks around, and the buttons along the bottom do the rest — including
	101	the one in the top corner, which is full screen and is how you get one on a
	102	phone, where there is no keyboard and no pointer to lock. A browser that will not
	103	put an element full screen — an iPhone will not — never shows that button rather
	104	than showing one that does nothing.
101	105
102	106	At `/range` the same controls drive the second game, on its own bindings:
103	107	<kbd>WASD</kbd> move, <kbd>Space</kbd> jump, <kbd>Ctrl</kbd> crouch,
104	108	<kbd>Shift</kbd> walk, <kbd>F</kbd> or the mouse fires, <kbd>R</kbd> reload,
105		<kbd>Enter</kbd> starts a thirty second run and <kbd>T</kbd> chooses the drill
106		between runs. There are two. Pop-up is the one the range shipped with: three
	109	<kbd>Enter</kbd> starts a thirty second run, <kbd>T</kbd> chooses the drill
	110	between runs and <kbd>G</kbd> is full screen — G rather than F here, because F is
	111	this game's trigger, and at `/example` it is <kbd>F</kbd> again. There are two
	112	drills. Pop-up is the one the range shipped with: three
107	113	plates at a time, standing still down the lane, each worth 100 to 200 points by
108	114	how far away it stood. Tracking is the second: two at a time, nearer and
109	115	longer-lived, each sliding across the lane at 90 to 260 units a second until its
		@@ -170,7 +176,9 @@ renderer, no atlas, no mesh and no sound ship in that bundle, and
170	176	knows nothing about de_forge's alphabet), `mesh` (a box builder), `texture`
171	177	(hashed value noise, fbm and an atlas painter), `sound` (a lazy `AudioContext`
172	178	with noise bursts and tones), `loop` (a fixed step with a clamp on a long
173		frame), `controls` (a bindings table in, held actions out), `overlay` (the
	179	frame), `controls` (a bindings table in, held actions out), `fullscreen` (the stage on
	180	the whole screen: whether this browser will, whether it is right now, the way
	181	in and out, and a refusal swallowed rather than thrown), `overlay` (the
174	182	2D over the scene: a scale and a pad off the canvas width, scaled fonts,
175	183	panels, aligned and faded text, a crosshair, a bar, right-aligned columns and
176	184	a `m:ss` clock, drawn onto the seventeen members of a 2D context it uses and
		@@ -228,7 +236,8 @@ renderer, no atlas, no mesh and no sound ship in that bundle, and
228	236	`sound` `attenuate`, `createSoundDevice`, `Burst`, `Tone`, `SoundDevice` and
229	237	`Ctor`; from `loop` `createLoop`, `Frames`, `Loop` and `LoopOptions`; from
230	238	`controls` `createControls`, `attachButtons` and the event and option types
231		they are driven with; from `overlay` `overlay`, `Overlay` and the `Paint`
	239	they are driven with; from `fullscreen` `createFullscreen` with `Fullscreen`,
	240	`FullscreenHost`, `FullscreenTarget` and `FullscreenOwner`; from `overlay` `overlay`, `Overlay` and the `Paint`
232	241	a 2D game draws onto; from `scene` the frame and its pool — `createScene`,
233	242	`resetScene`, `nextInstance`, `pushLine`, `Scene`, `SceneCapacity`, `Camera`
234	243	and `Instance`; from `renderer` `createRenderer` with `Renderer` and
		@@ -38,8 +38,8 @@ function fixture(): { dir: string; entries: Entry[]; source: (n: string, t: stri
38	38	test("the entry table is what the app ships today, each with the size it may not pass", () => {
39	39	expect(ENTRIES).toEqual([
40	40	{ name: "app", entry: "src/client/main.ts", ceiling: { raw: 75_400, gzip: 34_900 } },
41		{ name: "range", entry: "src/range/main.ts", ceiling: { raw: 29_400, gzip: 12_700 } },
42		{ name: "example", entry: "src/example/main.ts", ceiling: { raw: 9_700, gzip: 4_700 } },
	41	{ name: "range", entry: "src/range/main.ts", ceiling: { raw: 33_000, gzip: 14_000 } },
	42	{ name: "example", entry: "src/example/main.ts", ceiling: { raw: 10_800, gzip: 5_100 } },
43	43	]);
44	44	// And it is the registry projected, not a second list beside it: a game's
45	45	// source and its ceiling are written down once, in `src/games.ts`.
		@@ -23,6 +23,10 @@ test("the bindings are the ones the keyboard has always had", () => {
23	23	expect(CS_MOUSE[0]).toBe("fire");
24	24	expect(CS_MOUSE[2]).toBe("scope");
25	25	expect([...CS_TAP]).toEqual(["jump", "reload", "buy"]);
	26	// F is the page's, not the world's: `main.ts` hears it on `onAction` and asks
	27	// the browser for the screen, and nothing about an `Input` changes for it.
	28	expect(CS_KEYS.KeyF).toBe("fullscreen");
	29	expect(intent(["fullscreen"])).toEqual(intent([]));
26	30	});
27	31
28	32	test("nothing held is nothing asked for", () => {
		@@ -15,6 +15,9 @@ export const CS_KEYS: Record<string, string> = {
15	15	Space: "jump", ControlLeft: "duck", KeyC: "duck", ShiftLeft: "walk",
16	16	KeyR: "reload", KeyE: "use", KeyB: "buy", Tab: "scoreboard",
17	17	Digit1: "slot1", Digit2: "slot2", Digit3: "slot3",
	18	// Not a thing the world knows about: `main.ts` hears it on `onAction` and
	19	// asks the browser for the screen, which `readIntent` below never sees.
	20	KeyF: "fullscreen",
18	21	};
19	22
20	23	/** Left fires, right scopes. */
		@@ -362,6 +362,52 @@ test("a leaderboard that cannot be reached is not a reason to stop playing", asy
362	362	expect(stage.by("menu").hidden).toBe(true);
363	363	});
364	364
	365	test("F and the button put the stage on the whole screen, and take it back", () => {
	366	const stage = start(fakeStage());
	367	const full = stage.by("full");
	368	const box = stage.by("stage");
	369	// Shown by the entry, not by the server: a control that needs a script is
	370	// rendered hidden and revealed by the script that makes it work.
	371	expect(full.hidden).toBe(false);
	372	expect(full.getAttribute("aria-pressed")).toBe(null);
	373
	374	stage.press("KeyF");
	375	expect(stage.document.fullscreenElement).toBe(box);
	376	expect(box.fullscreens).toBe(1);
	377	expect(full.getAttribute("aria-pressed")).toBe("true");
	378	expect(full.getAttribute("aria-label")).toBe("Leave full screen");
	379
	380	stage.press("KeyF");
	381	expect(stage.document.fullscreenElement).toBe(null);
	382	expect(full.getAttribute("aria-pressed")).toBe("false");
	383	expect(full.getAttribute("aria-label")).toBe("Full screen");
	384
	385	// The button says the same thing with a thumb, which is the only way in on a
	386	// phone: there is no keyboard there and the pointer cannot be locked either.
	387	full.fire("click");
	388	expect(stage.document.fullscreenElement).toBe(box);
	389	expect(box.fullscreens).toBe(2);
	390	full.fire("click");
	391	expect(stage.document.fullscreenElement).toBe(null);
	392	});
	393
	394	test("the screen is the browser's: Escape is heard, and a browser that will not is not lied about", () => {
	395	const stage = start(fakeStage());
	396	stage.press("KeyF");
	397	// Escape, which no code of ours ran. The page hears it from the event.
	398	stage.document.fullscreenElement = null;
	399	stage.document.fire("fullscreenchange");
	400	expect(stage.by("full").getAttribute("aria-pressed")).toBe("false");
	401
	402	// And a browser with no fullscreen at all keeps the button hidden rather than
	403	// showing one that does nothing.
	404	const cannot = start(fakeStage({ fullscreen: false }));
	405	expect(cannot.by("full").hidden).toBe(true);
	406	cannot.press("KeyF");
	407	expect(cannot.document.fullscreenElement).toBe(null);
	408	expect(cannot.by("stage").fullscreens).toBe(0);
	409	});
	410
365	411	test("no WebGL2 is a sentence on the page, not an exception", () => {
366	412	const stage = start(fakeStage({ webgl: false }));
367	413	expect(stage.by("menu").innerHTML).toContain("No WebGL2");
		@@ -25,8 +25,8 @@ import { createAudio, type Audio } from "./audio.ts";
25	25	import { CS_KEYS, CS_MOUSE, CS_TAP, readIntent } from "./binding.ts";
26	26	import { drawHud, type Paint } from "./hud.ts";
27	27	import {
28		attachButtons, clamp, createControls, createLoop, createRenderer, painter, type Button,
29		type Camera, type Listens, type Mesh,
	28	attachButtons, clamp, createControls, createFullscreen, createLoop, createRenderer, painter,
	29	type Button, type Camera, type Listens, type Mesh,
30	30	} from "../engine/index.ts";
31	31	import { DE_FORGE } from "./map.ts";
32	32	import type { Level } from "./level.ts";
		@@ -60,6 +60,12 @@ export type Field = Panel & { value: string };
60	60	/** A button this file makes rather than finds. */
61	61	export type Pressable = Listens & { type: string; textContent: string \| null; disabled: boolean };
62	62
	63	/** The box the canvases sit in: what goes full screen, when a browser will. */
	64	export type Box = Panel & { requestFullscreen?(): unknown };
	65
	66	/** A button that says which of two states it is in — the full screen one does. */
	67	export type Toggle = Panel & { setAttribute(name: string, value: string): void };
	68
63	69	/** A canvas on the stage: the scene is drawn into, the HUD is painted on. */
64	70	export type Stage = Panel & {
65	71	readonly clientWidth: number;
		@@ -72,10 +78,13 @@ export type Stage = Panel & {
72	78
73	79	export type PageDocument = Listens & {
74	80	readonly pointerLockElement: unknown;
	81	/** Whose element is on the screen right now — the engine's `createFullscreen` reads it. */
	82	readonly fullscreenElement: unknown;
75	83	getElementById(id: string): unknown;
76	84	querySelectorAll(selectors: string): ArrayLike<Button>;
77	85	createElement(tag: "button"): Pressable;
78	86	exitPointerLock(): void;
	87	exitFullscreen?(): unknown;
79	88	};
80	89
81	90	/** The window: the frame clock, the pixel ratio and the media query. */
		@@ -139,8 +148,10 @@ export function boot(host: Host): Frame {
139	148	const win = host.window;
140	149	const by = <T extends Panel>(id: string): T => doc.getElementById(id) as T;
141	150
	151	const stageBox = by<Box>("stage");
142	152	const sceneCanvas = by<Stage>("scene");
143	153	const hudCanvas = by<Stage>("hud");
	154	const fullButton = by<Toggle>("full");
144	155	const menu = by("menu");
145	156	const pause = by("pause");
146	157	const buyPanel = by("buy");
		@@ -165,6 +176,25 @@ export function boot(host: Host): Frame {
165	176	{ keys: CS_KEYS, mouse: CS_MOUSE, sensitivity: Number(sensField.value) \|\| 2.2 },
166	177	);
167	178	attachButtons(doc.querySelectorAll("[data-action]"), controls, { tap: CS_TAP });
	179
	180	// The stage on the whole screen: the button over it, and F, which is bound to
	181	// the "fullscreen" action below like every other key this game reads. Both
	182	// arrive inside a gesture, which is the only time a browser says yes. A
	183	// browser that will not do it at all leaves the button hidden rather than
	184	// showing one that does nothing, and the state is the browser's — Escape
	185	// leaves and `onChange` is how this page hears about it.
	186	const full = createFullscreen({ element: stageBox, document: doc });
	187	const paintFull = (on: boolean): void => {
	188	const label = on ? "Leave full screen" : "Full screen";
	189	fullButton.setAttribute("aria-pressed", on ? "true" : "false");
	190	fullButton.setAttribute("aria-label", label);
	191	fullButton.setAttribute("title", label);
	192	fullButton.textContent = on ? "⤡" : "⛶";
	193	};
	194	full.onChange = paintFull;
	195	fullButton.hidden = !full.supported;
	196	fullButton.addEventListener("click", () => full.toggle());
	197
168	198	const loop = createLoop({ tick: TICK }, {
169	199	requestAnimationFrame: (callback) => win.requestAnimationFrame(callback),
170	200	cancelAnimationFrame: (handle) => win.cancelAnimationFrame(handle),
		@@ -246,7 +276,9 @@ export function boot(host: Host): Frame {
246	276	}
247	277
248	278	controls.onAction = (action, down) => {
249		if (down && action === "buy") openBuy(buyPanel.hidden);
	279	if (!down) return;
	280	if (action === "buy") openBuy(buyPanel.hidden);
	281	else if (action === "fullscreen") full.toggle();
250	282	};
251	283	controls.onUnlock = () => {
252	284	if (running && buyPanel.hidden) show(pause, true);
		@@ -150,10 +150,10 @@ export type FakeStage = {
150	150	* contract between the page and this file, so `src/server.test.ts` checks the
151	151	* served page against this same list rather than a second copy of it.
152	152	*/
153		export const PAGE_IDS = ["scene", "hud", "menu", "pause", "buy", "touch", "stats", "name", "length", "side", "sens", "play", "prep", "resume", "quit", "fps"];
	153	export const PAGE_IDS = ["stage", "scene", "hud", "menu", "pause", "buy", "touch", "stats", "name", "length", "side", "sens", "play", "prep", "resume", "quit", "fps", "full"];
154	154
155	155	/** The ones the server renders with `hidden` on them: the page starts at the menu. */
156		const HIDDEN = ["pause", "buy", "touch"];
	156	const HIDDEN = ["pause", "buy", "touch", "full"];
157	157
158	158	/** The `[data-action]` buttons the shell renders for this game. */
159	159	export const PAGE_ACTIONS = ["duck", "jump", "use", "reload", "buy", "fire"];
		@@ -168,16 +168,20 @@ const GLOBALS = ["document", "window", "localStorage", "fetch"];
168	168
169	169	/**
170	170	* The whole page the shooter's entry expects, plus the host around it. Pass
171		* `webgl: false` for a browser that cannot give the renderer a context, and
172		* `coarse: true` for a phone.
	171	* `webgl: false` for a browser that cannot give the renderer a context,
	172	* `coarse: true` for a phone, and `fullscreen: false` for a browser that will
	173	* not put an element on the whole screen.
173	174	*/
174		export function fakeStage(options: { webgl?: boolean; coarse?: boolean } = {}): FakeStage {
	175	export function fakeStage(
	176	options: { webgl?: boolean; coarse?: boolean; fullscreen?: boolean } = {},
	177	): FakeStage {
175	178	const page = fakePage({
176	179	ids: PAGE_IDS,
177	180	canvases: ["scene", "hud"],
178	181	hidden: HIDDEN,
179	182	actions: PAGE_ACTIONS,
180	183	coarse: options.coarse,
	184	fullscreen: options.fullscreen,
181	185	});
182	186	// Asked for with `paint` left on, so both canvases have their 2D recorder.
183	187	const [scene, hud] = page.canvases as [StageCanvas, StageCanvas];
		@@ -326,6 +326,27 @@ export function step(world: World, dt: number, held: ReadonlySet<string>): World
326	326	const on = (action: string): number => (held.has(action) ? 1 : 0);
327	327	```
328	328
	329	### fullscreen
	330
	331	The stage on the whole screen, which is three calls with four ways to be
	332	absent. `createFullscreen` takes a `FullscreenHost` — the `FullscreenTarget`
	333	that goes full screen, usually the box the canvases sit in, and the
	334	`FullscreenOwner` that owns `fullscreenElement`, which a document is — and hands
	335	back a `Fullscreen`: `Fullscreen.supported`, which is false on a browser that
	336	will not do it at all and is how a page hides the button rather than shipping
	337	one that does nothing; `Fullscreen.on`, read from the document every time it is
	338	asked rather than remembered, because a person leaves with Escape and no code of
	339	yours runs; `Fullscreen.enter`, `Fullscreen.exit` and `Fullscreen.toggle`; the
	340	`Fullscreen.onChange` callback, which is that event; and a `Fullscreen.detach`
	341	for when the game is over.
	342
	343	A refusal is not an error a game can act on — no user gesture, a policy, an
	344	iframe — so a rejected promise and a browser that throws instead are both
	345	swallowed: nothing changed, and `Fullscreen.on` still reads false. Ask from
	346	inside a click or a keydown, which is the only time a browser says yes. The
	347	`:fullscreen` half is CSS: the element keeps whatever aspect ratio and maximum
	348	height it had unless a rule says otherwise.
	349
329	350	### overlay
330	351
331	352	The 2D a game draws over its scene. `overlay` takes the surface, the width and
		@@ -284,6 +284,9 @@ test("the example imports the door and nothing else, which is what it is for", (
284	284	* physics — `Body`, `Wish`, `MoveTuning`, `Hull`, `accelerate`,
285	285	* `airAccelerate`, `move`, `groundUnder`, `stuck`, `eyeHeight`, `hullHeight`.
286	286	*
	287	* fullscreen — `Fullscreen`, `FullscreenHost`, `FullscreenOwner`,
	288	* `FullscreenTarget`, `createFullscreen`.
	289	*
287	290	* Exported because `guide.test.ts` holds `GUIDE.md` against the same list: one
288	291	* copy of the surface, read twice, rather than two that drift.
289	292	*/
		@@ -291,7 +294,8 @@ export const SURFACE = [
291	294	"Activations", "Adam", "Body", "Box", "Builder", "Burst", "Button", "ButtonOptions",
292	295	"CHECKPOINT_CHARS", "Camera", "Complaint", "Controls", "Ctor", "DEFAULT_HYPER", "FakeCanvas",
293	296	"FakeDocument", "FakeElement", "FakePage", "FakePaint", "FakeTarget", "FakeWindow", "Fold",
294		"Folded", "Frames", "Grads", "Grid", "Hit", "Host", "Hull", "Hyper", "Instance", "KeyEventish",
	297	"Folded", "Frames", "Fullscreen", "FullscreenHost", "FullscreenOwner", "FullscreenTarget",
	298	"Grads", "Grid", "Hit", "Host", "Hull", "Hyper", "Instance", "KeyEventish",
295	299	"Listens", "LockOwner", "Loop", "LoopOptions", "Mat4", "Mesh", "MouseEventish", "MoveTuning", "Options",
296	300	"Overlay", "Packed", "PageOptions", "Paint", "Painter", "Pin", "Policy", "QUANTUM",
297	301	"Renderer", "RendererAssets", "Rollout", "Scene", "SceneCapacity", "Shader", "Shape",
		@@ -299,8 +303,9 @@ export const SURFACE = [
299	303	"Wish", "accelerate", "add", "addBox", "airAccelerate", "angleDelta", "angleVectors",
300	304	"applyGrads", "attachButtons", "attenuate",
301	305	"backward", "builder", "cellAt", "clamp", "clearGrads", "colOf", "compare",
302		"computeAdvantages", "copyPolicy", "createAdam", "createControls", "createLoop",
303		"createPolicy", "createRenderer", "createRollout", "createScene", "createSoundDevice",
	306	"computeAdvantages", "copyPolicy", "createAdam", "createControls", "createFullscreen",
	307	"createLoop", "createPolicy", "createRenderer", "createRollout", "createScene",
	308	"createSoundDevice",
304	309	"cross", "deg", "dist", "dist2d", "dot", "eyeHeight", "fakePage", "fbm", "findPath", "finish",
305	310	"fold", "forward", "greedy", "groundUnder", "hash", "headOffset", "hullHeight", "inside",
306	311	"length", "length2d", "lerp",
		@@ -0,0 +1,106 @@
	1	/**
	2	* Full screen, driven against the headless page next door: asking, leaving,
	3	* a browser that will not, and the three ways a real one refuses. Nothing in
	4	* here is a browser — `fakePage`'s document is the one that owns
	5	* `fullscreenElement`, and it fires `fullscreenchange` the way a browser does.
	6	*/
	7
	8	import { expect, test } from "bun:test";
	9	import { createFullscreen, type FullscreenOwner, type FullscreenTarget } from "./fullscreen.ts";
	10	import { fakePage } from "./page.ts";
	11
	12	/** A page with a stage on it, and the fullscreen around that stage. */
	13	function stage(options: { fullscreen?: boolean } = {}) {
	14	const page = fakePage({ ids: ["stage", "other"], fullscreen: options.fullscreen });
	15	const element = page.by("stage");
	16	const changes: boolean[] = [];
	17	const full = createFullscreen({ element, document: page.document });
	18	full.onChange = (on) => void changes.push(on);
	19	return { page, element, full, changes };
	20	}
	21
	22	test("asking puts the stage on the screen, and leaving takes it back", () => {
	23	const { page, element, full, changes } = stage();
	24	expect(full.supported).toBe(true);
	25	expect(full.on).toBe(false);
	26
	27	full.enter();
	28	expect(full.on).toBe(true);
	29	expect(element.fullscreens).toBe(1);
	30	expect(page.document.fullscreenElement).toBe(element);
	31	expect(changes).toEqual([true]);
	32
	33	full.exit();
	34	expect(full.on).toBe(false);
	35	expect(page.document.fullscreenElement).toBe(null);
	36	expect(changes).toEqual([true, false]);
	37	});
	38
	39	test("toggle is the same two verbs, and neither is asked for twice", () => {
	40	const { element, full, changes } = stage();
	41	full.toggle();
	42	expect(full.on).toBe(true);
	43	// Already there: asking again is not a second request.
	44	full.enter();
	45	expect(element.fullscreens).toBe(1);
	46	full.toggle();
	47	expect(full.on).toBe(false);
	48	// Not there: leaving is not a call either, so nothing is fired.
	49	full.exit();
	50	expect(changes).toEqual([true, false]);
	51	});
	52
	53	test("the state is read from the document, never remembered", () => {
	54	const { page, full, changes } = stage();
	55	full.enter();
	56	// Escape, which no code of ours ran: the browser dropped it and said so.
	57	page.document.fullscreenElement = null;
	58	page.document.fire("fullscreenchange");
	59	expect(full.on).toBe(false);
	60	expect(changes).toEqual([true, false]);
	61	// Somebody else's element is not ours, whatever the document says.
	62	page.document.fullscreenElement = page.by("other");
	63	expect(full.on).toBe(false);
	64	});
	65
	66	test("a browser that will not do it says so before anything is drawn", () => {
	67	const { page, element, full, changes } = stage({ fullscreen: false });
	68	expect(full.supported).toBe(false);
	69	full.enter();
	70	full.toggle();
	71	expect(full.on).toBe(false);
	72	expect(element.fullscreens).toBe(0);
	73	expect(page.document.fullscreenElement).toBe(null);
	74	expect(changes).toEqual([]);
	75	});
	76
	77	test("a refusal is not a crash, whichever way the browser refuses", () => {
	78	const listening = new Set<string>();
	79	const owner: FullscreenOwner = {
	80	fullscreenElement: null,
	81	exitFullscreen: () => Promise.reject(new Error("no")),
	82	addEventListener: (type) => void listening.add(type),
	83	removeEventListener: (type) => void listening.delete(type),
	84	};
	85	// A promise that rejects, and a browser that throws where it should reject.
	86	const rejects: FullscreenTarget = { requestFullscreen: () => Promise.reject(new Error("no gesture")) };
	87	const throws: FullscreenTarget = {
	88	requestFullscreen: () => {
	89	throw new Error("not allowed");
	90	},
	91	};
	92	expect(() => createFullscreen({ element: rejects, document: owner }).enter()).not.toThrow();
	93	expect(() => createFullscreen({ element: throws, document: owner }).enter()).not.toThrow();
	94	// And the same on the way out, where we are the element holding the screen.
	95	const held: FullscreenOwner = { ...owner, fullscreenElement: rejects };
	96	expect(() => createFullscreen({ element: rejects, document: held }).exit()).not.toThrow();
	97	});
	98
	99	test("detach leaves the document as it found it", () => {
	100	const { page, full, changes } = stage();
	101	expect(page.document.listening.has("fullscreenchange")).toBe(true);
	102	full.detach();
	103	expect(page.document.listening.has("fullscreenchange")).toBe(false);
	104	page.document.fire("fullscreenchange");
	105	expect(changes).toEqual([]);
	106	});