fable/val Public Public: anyone can read this; nobody can change it.

/**

 * The client, played.

 *

 * The bundle the browser is served is loaded here against a stub document

 * and a canvas that only writes down what it was told to draw, and pointed

 * at the running server over a real socket. It is not a browser, but it is

 * the whole path a person takes: connect, take a snapshot, paint the HUD,

 * draw a frame, press a key, send an input back.

 */

import { expect, test } from "bun:test";

import { mkdtempSync } from "node:fs";

import { tmpdir } from "node:os";

import { join } from "node:path";

process.env.FORGE_APP_DATA ??= mkdtempSync(join(tmpdir(), "app-"));

process.env.PORT ??= "0";

const { server } = await import("./server.ts");

const base = `http://${server.hostname}:${server.port}`;

// ------------------------------------------------------------ the stub DOM

const drawn: string[] = [];

const listeners = new Map<string, ((event: unknown) => void)[]>();

const frames: ((now: number) => void)[] = [];

const noop = () => {};

const context = () =>

  new Proxy(

    {

      measureText: (text: string) => ({ width: text.length * 6 }),

      createLinearGradient: () => ({ addColorStop: noop }),

    } as Record<string, unknown>,

    {

      get(target, prop: string) {

        if (prop in target) return target[prop];

        if (prop === "fillStyle" || prop === "strokeStyle" || prop === "font" || prop === "textAlign") return "";

        if (prop === "globalAlpha" || prop === "lineWidth") return 1;

        return (...args: unknown[]) => drawn.push(`${prop}(${args.length})`);

      },

      set: () => true,

    },

  );

function element(id: string, attrs: Record<string, string> = {}) {

  const node: Record<string, unknown> = {

    id,

    dataset: { ...attrs },

    style: {},

    textContent: "",

    title: "",

    disabled: false,

    type: "",

    children: [] as unknown[],

    classList: {

      on: new Set<string>(),

      add(name: string) {

        (this.on as Set<string>).add(name);

      },

      remove(name: string) {

        (this.on as Set<string>).delete(name);

      },

      toggle(name: string, force?: boolean) {

        const on = force ?? !(this.on as Set<string>).has(name);

        if (on) (this.on as Set<string>).add(name);

        else (this.on as Set<string>).delete(name);

        return on;

      },

      contains(name: string) {

        return (this.on as Set<string>).has(name);

      },

    },

    events: new Map<string, ((event: unknown) => void)[]>(),

    addEventListener(kind: string, fn: (event: unknown) => void) {

      const map = node.events as Map<string, ((event: unknown) => void)[]>;

      map.set(kind, [...(map.get(kind) ?? []), fn]);

    },

    append(...kids: unknown[]) {

      (node.children as unknown[]).push(...kids);

    },

    replaceChildren(...kids: unknown[]) {

      node.children = kids;

    },

    getBoundingClientRect: () => ({ left: 0, top: 0, width: 900, height: 570 }),

    getContext: () => context(),

    requestPointerLock: noop,

    setPointerCapture: noop,

    width: 900,

    height: 570,

  };

  return node;

}

const click = (node: Record<string, unknown>) => {

  for (const fn of (node.events as Map<string, ((e: unknown) => void)[]>).get("click") ?? []) fn({});

};

const press = (code: string, key = "") => {

  for (const fn of listeners.get("keydown") ?? []) fn({ code, key, target: {}, preventDefault: noop });

};

const nodes = new Map<string, Record<string, unknown>>();

for (const id of [

  "view", "conn", "clock", "phase", "hp", "gun", "creds", "ultmeter", "kit", "buy", "buytoggle",

  "viewtoggle", "helptoggle", "helpclose", "help", "prompt", "flash", "dead", "aimhint", "stage",

  "log", "atkboard", "defboard", "helpagents", "roster", "feed",

])

  nodes.set(id, element(id));

const buys = [

  element("b1", { buy: "vandal", cost: "2900" }),

  element("b2", { buy: "c", cost: "0" }),

  element("b3", { buy: "q", cost: "0" }),

];

const agentButtons = [element("a1", { agent: "veil" })];

const scoreRed = element("red");

const scoreBlue = element("blue");

Object.assign(globalThis, {

  document: {

    getElementById: (id: string) => nodes.get(id) ?? null,

    querySelector: (sel: string) => (sel.includes("red") ? scoreRed : scoreBlue),

    querySelectorAll: (sel: string) => (sel.includes("data-buy") ? buys : agentButtons),

    createElement: (tag: string) => element(tag),

    addEventListener: noop,

    pointerLockElement: null,

    exitPointerLock: noop,

  },

  HTMLInputElement: class {},

  matchMedia: () => ({ matches: false }),

  devicePixelRatio: 1,

  localStorage: {

    store: new Map<string, string>(),

    getItem(key: string) {

      return this.store.get(key) ?? null;

    },

    setItem(key: string, value: string) {

      this.store.set(key, value);

    },

  },

  requestAnimationFrame: (fn: (now: number) => void) => frames.push(fn),

  addEventListener: (kind: string, fn: (event: unknown) => void) => {

    listeners.set(kind, [...(listeners.get(kind) ?? []), fn]);

  },

  location: new URL(base),

});

// Relative fetches, the way a page makes them.

const realFetch = globalThis.fetch;

globalThis.fetch = ((input: string, init?: RequestInit) =>

  realFetch(typeof input === "string" && input.startsWith("/") ? base + input : input, init)) as typeof fetch;

const runFrame = () => {

  const pending = frames.splice(0, frames.length);

  for (const fn of pending) fn(performance.now());

};

const until = async (what: () => boolean, ms = 4000) => {

  const stop = Date.now() + ms;

  while (Date.now() < stop) {

    runFrame();

    if (what()) return true;

    await Bun.sleep(20);

  }

  return false;

};

// ------------------------------------------------------------------ the run

test("the bundled client connects, paints the HUD and draws a frame", async () => {

  const page = await (await fetch(base + "/")).text();

  const src = /src="(\/static\/val\.[0-9a-f]+\.js)"/.exec(page)![1]!;

  const script = await (await fetch(base + src)).text();

  const path = join(process.env.FORGE_APP_DATA!, "client.mjs");

  await Bun.write(path, script);

  await import(path);

  expect(await until(() => nodes.get("conn")!.textContent === "live")).toBe(true);

  expect(await until(() => String(nodes.get("hp")!.textContent).includes("hp"))).toBe(true);

  // The HUD says what the match says.

  expect(String(nodes.get("phase")!.textContent)).toContain("round");

  expect(String(nodes.get("creds")!.textContent)).toContain("cr");

  // The kit is four buttons, each named after the ability it casts.

  expect((nodes.get("kit")!.children as unknown[]).length).toBe(4);

  // One prompt, in words, about the round that is running.

  expect(String(nodes.get("prompt")!.textContent).length).toBeGreaterThan(8);

  // And the buy panel prices itself off the agent's real kit.

  expect(String(buys[1]!.title)).toContain("charge");

  // The team is on screen whether anybody is in sight or not: five slots.

  const slots = nodes.get("roster")!.children as { className: string }[];

  expect(slots.length).toBe(5);

  expect(slots.filter((slot) => slot.className.includes("mine")).length).toBe(1);

  // A frame of the first-person view actually draws walls: a slice a column,

  // far more rectangles than the map has tiles.

  drawn.length = 0;

  runFrame();

  expect(drawn.filter((op) => op.startsWith("fillRect")).length).toBeGreaterThan(800);

  // Tab swaps that frame for the whole map — many fewer rectangles.

  for (const fn of listeners.get("keydown") ?? []) fn({ code: "Tab", key: "", target: {}, preventDefault: noop });

  drawn.length = 0;

  runFrame();

  expect(drawn.filter((op) => op.startsWith("fillRect")).length).toBeLessThan(800);

  for (const fn of listeners.get("keyup") ?? []) fn({ code: "Tab" });

  drawn.length = 0;

  runFrame();

  expect(drawn.filter((op) => op.startsWith("fillRect")).length).toBeGreaterThan(800);

  // Holding W reaches the server as a direction, and it is the way we face.

  const seat = (await import("./arena.ts")).match().players.find((p) => !p.bot)!;

  press("KeyW");

  await Bun.sleep(160);

  expect(Math.hypot(seat.input.mx, seat.input.my)).toBeGreaterThan(0.9);

  expect(Math.atan2(seat.input.my, seat.input.mx)).toBeCloseTo(seat.input.angle, 4);

  // V falls back to the top-down view, and it draws too.

  press("KeyV");

  drawn.length = 0;

  runFrame();

  expect(drawn.some((op) => op.startsWith("fillRect"))).toBe(true);

  expect(nodes.get("stage")!.dataset).toMatchObject({ mode: "top" });

  press("KeyV");

  expect(nodes.get("stage")!.dataset).toMatchObject({ mode: "fp" });

  // H toggles the card either way, and the button closes it for good.

  const help = nodes.get("help")!.style as Record<string, string>;

  const before = help.display;

  press("KeyH");

  expect(help.display).not.toBe(before);

  if (help.display !== "grid") press("KeyH");

  expect(help.display).toBe("grid");

  click(nodes.get("helpclose")!);

  expect((nodes.get("help")!.style as Record<string, string>).display).toBe("none");

  expect((globalThis as unknown as { localStorage: Storage }).localStorage.getItem("val.help.seen")).toBe("1");

  // B works the buy panel either way — it opens itself in the buy phase.

  const panel = nodes.get("buy")!.classList as { contains: (n: string) => boolean };

  const wasOpen = panel.contains("on");

  press("KeyB");

  expect(panel.contains("on")).toBe(!wasOpen);

  // And the socket really took a seat in the running match.

  expect(seat.bot).toBe(false);

}, 15000);