benjivers/val Public Public: anyone can read this; the crew can change it.

/**

 * The renderer, run for real against a canvas that writes down what it was

 * asked to draw. No browser, but every line of the draw path is executed —

 * which is what catches a typo in a frame nobody can see from a unit test.

 */

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

import { drawGun, makeGun } from "../static/gun.js";

import { GHOST, makePresence, shown, sighted } from "../static/presence.js";

import { drawScene, makeScene } from "../static/scene.js";

import { drawTopdown } from "../static/topdown.js";

import { gridRows, TILE } from "./map.ts";

type Op = { op: string; args: unknown[]; alpha: number };

/** A canvas that records. Every call the renderer makes has to exist here. */

function fakeContext() {

  const ops: Op[] = [];

  const note =

    (op: string) =>

    (...args: unknown[]) => {

      // The opacity in force when the call was made: how faded a body

      // arriving into sight is, and how far a last-seen mark has dimmed.

      ops.push({ op, args, alpha: ctx.globalAlpha });

    };

  const ctx = {

    ops,

    fillStyle: "",

    strokeStyle: "",

    lineWidth: 1,

    font: "",

    textAlign: "left",

    globalAlpha: 1,

    clearRect: note("clearRect"),

    fillRect: note("fillRect"),

    strokeRect: note("strokeRect"),

    beginPath: note("beginPath"),

    closePath: note("closePath"),

    moveTo: note("moveTo"),

    lineTo: note("lineTo"),

    arc: note("arc"),

    ellipse: note("ellipse"),

    fill: note("fill"),

    stroke: note("stroke"),

    clip: note("clip"),

    rect: note("rect"),

    save: note("save"),

    restore: note("restore"),

    translate: note("translate"),

    rotate: note("rotate"),

    fillText: note("fillText"),

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

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

  };

  return ctx;

}

// A room three tiles deep running east, with a pillar standing in it at

// column 5 — enough geometry for a body to hide behind.

const room = (col: number, row: number): boolean =>

  col < 1 || col > 12 || row < 1 || row > 3 || col === 5;

const world = { solid: room, tile: TILE };

const snapshot = (players: unknown[], zones: unknown[] = []) => ({

  phase: "live",

  clock: 40,

  result: null,

  me: { id: "me", x: 120, y: 200, angle: 0, alive: true, side: "atk", hp: 100, blind: 0, ammo: 25, reloading: false, planting: 0, spike: false, agent: "ember" },

  players,

  zones,

  orbs: [],

  shots: [],

  spike: { planted: false, carried: false, fuse: 0, defuse: 0, x: null, y: null },

});

const body = (over: Record<string, unknown> = {}) => ({

  id: "them",

  name: "Sable",

  agent: "sable",

  x: 280,

  y: 200,

  angle: 3.1,

  hp: 100,

  alive: true,

  mate: false,

  spike: false,

  blind: false,

  ...over,

});

const view = { width: 900, height: 570, look: (p: { x: number; y: number; angle: number }) => p };

const eye = { x: 120, y: 200, angle: 0 };

test("a frame draws walls in runs: the whole width covered, far fewer fills", () => {

  const ctx = fakeContext();

  drawScene(ctx as never, makeScene(), world, eye, snapshot([]), view);

  const rects = ctx.ops.filter((o) => o.op === "fillRect");

  // The bands are the full width; the rest are wall runs.

  const walls = rects

    .map((o) => ({ x: Number(o.args[0]), w: Number(o.args[2]) }))

    .filter((r) => r.w < view.width)

    .sort((a, b) => a.x - b.x);

  // This room is closed, so every column of the picture is wall: the runs

  // start at the left edge, meet end to end and reach the right one. That is

  // the same picture the old one-fill-a-column loop drew.

  expect(walls[0]!.x).toBe(0);

  let reach = 0;

  for (const rect of walls) {

    expect(rect.x).toBeLessThanOrEqual(reach);

    reach = Math.max(reach, rect.x + rect.w);

  }

  expect(reach).toBeGreaterThanOrEqual(view.width);

  // And it costs a fraction of the fills: one a column would be 900.

  expect(walls.length).toBeLessThan(view.width / 2);

});

test("a body in the open is drawn; the same body behind the pillar is not", () => {

  const open = fakeContext();

  drawScene(open as never, makeScene(), world, eye, snapshot([body()]), view);

  // The head is the only arc in this scene, so it stands for the body.

  expect(open.ops.some((o) => o.op === "arc")).toBe(true);

  const hidden = fakeContext();

  drawScene(hidden as never, makeScene(), world, eye, snapshot([body({ x: 700 })]), view);

  expect(hidden.ops.some((o) => o.op === "arc")).toBe(false);

});

test("a team mate gets a name tag and an enemy never does", () => {

  const mate = fakeContext();

  drawScene(mate as never, makeScene(), world, eye, snapshot([body({ mate: true })]), view);

  expect(mate.ops.some((o) => o.op === "fillText" && o.args[0] === "Sable")).toBe(true);

  const enemy = fakeContext();

  drawScene(enemy as never, makeScene(), world, eye, snapshot([body()]), view);

  expect(enemy.ops.some((o) => o.op === "fillText")).toBe(false);

});

test("the dead lie on the floor and wear no markers at all", () => {

  const ctx = fakeContext();

  drawScene(ctx as never, makeScene(), world, eye, snapshot([body({ mate: true, alive: false, hp: 0 })]), view);

  // Flat on the ground: an ellipse, not an upright body with a head.

  expect(ctx.ops.some((o) => o.op === "ellipse")).toBe(true);

  // No name tag, and no chevron — the chevron is the only closed path here.

  expect(ctx.ops.some((o) => o.op === "fillText")).toBe(false);

  expect(ctx.ops.some((o) => o.op === "closePath")).toBe(false);

});

test("an enemy wears a chevron and a team mate does not", () => {

  const enemy = fakeContext();

  drawScene(enemy as never, makeScene(), world, eye, snapshot([body()]), view);

  expect(enemy.ops.some((o) => o.op === "closePath")).toBe(true);

  const mate = fakeContext();

  drawScene(mate as never, makeScene(), world, eye, snapshot([body({ mate: true })]), view);

  expect(mate.ops.some((o) => o.op === "closePath")).toBe(false);

  expect(mate.ops.some((o) => o.op === "fillText")).toBe(true);

});

test("a body has a hard dark edge, whichever side it is on", () => {

  const ctx = fakeContext();

  drawScene(ctx as never, makeScene(), world, eye, snapshot([body()]), view);

  expect(ctx.ops.some((o) => o.op === "strokeRect")).toBe(true);

});

test("a smoke between the eye and a body hides it", () => {

  const smoke = [{ k: "smoke", x: 200, y: 200, r: 90, f: 0, l: 8 }];

  const ctx = fakeContext();

  drawScene(ctx as never, makeScene(), world, eye, snapshot([body()], smoke), view);

  expect(ctx.ops.some((o) => o.op === "arc")).toBe(false);

  // A smoke that is not on the line does not hide anything.

  const aside = [{ k: "smoke", x: 200, y: 900, r: 90, f: 0, l: 8 }];

  const clear = fakeContext();

  drawScene(clear as never, makeScene(), world, eye, snapshot([body()], aside), view);

  expect(clear.ops.some((o) => o.op === "arc")).toBe(true);

});

test("every kind of zone, the spike and a tracer draw without falling over", () => {

  const zones = ["smoke", "molly", "wall", "trip", "dart", "flash", "heal"].map((k, i) => ({

    k,

    x: 300 + i * 20,

    y: 200,

    r: 90,

    f: k === "flash" ? 0.3 : 0,

    l: 5,

  }));

  const snap = snapshot([body(), body({ id: "mate", mate: true, alive: false, hp: 0 })], zones);

  snap.orbs = [{ x: 360, y: 200 }] as never;

  snap.shots = [{ x1: 130, y1: 200, x2: 380, y2: 200, hit: true, age: 0 }] as never;

  snap.spike = { planted: true, carried: false, fuse: 12, defuse: 0, x: 330, y: 200 } as never;

  const ctx = fakeContext();

  drawScene(ctx as never, makeScene(), world, eye, snap, view);

  expect(ctx.ops.length).toBeGreaterThan(100);

  expect(ctx.globalAlpha).toBe(1);

});

test("the top-down view draws the real map, small or large", () => {

  const map = { rows: gridRows(), tile: TILE };

  const snap = snapshot([body({ mate: true })]);

  const big = fakeContext();

  drawTopdown(big as never, map, snap, (p: never) => p, { x: 0, y: 0, w: 900, h: 570 });

  const small = fakeContext();

  drawTopdown(small as never, map, snap, (p: never) => p, { x: 8, y: 8, w: 260, h: 165 }, { labels: false });

  expect(big.ops.some((o) => o.op === "fillText")).toBe(true);

  expect(small.ops.some((o) => o.op === "fillText")).toBe(false);

  expect(small.ops.some((o) => o.op === "translate")).toBe(true);

});

test("on the map a dead team mate is crossed out and a dead enemy is not there", () => {

  const map = { rows: gridRows(), tile: TILE };

  const box = { x: 0, y: 0, w: 900, h: 570 };

  const look = (p: never) => p;

  const mate = fakeContext();

  drawTopdown(mate as never, map, snapshot([body({ mate: true, alive: false })]), look, box);

  // Two strokes through the dot, and no dot: a cross is not a live player.

  expect(mate.ops.filter((o) => o.op === "moveTo").length).toBe(2);

  expect(mate.ops.some((o) => o.op === "arc")).toBe(false);

  const enemy = fakeContext();

  drawTopdown(enemy as never, map, snapshot([body({ alive: false })]), look, box);

  const empty = fakeContext();

  drawTopdown(empty as never, map, snapshot([]), look, box);

  expect(enemy.ops.length).toBe(empty.ops.length);

});

test("a living team mate carries their initial on the big map", () => {

  const map = { rows: gridRows(), tile: TILE };

  const big = fakeContext();

  drawTopdown(big as never, map, snapshot([body({ mate: true, name: "Wren" })]), (p: never) => p, {

    x: 0,

    y: 0,

    w: 900,

    h: 570,

  });

  expect(big.ops.some((o) => o.op === "fillText" && o.args[0] === "W")).toBe(true);

});

test("the gun and the crosshair draw, and the hit marker only when there is one", () => {

  const gun = makeGun();

  const ctx = fakeContext();

  drawGun(ctx as never, gun, 900, 570, snapshot([]));

  const quiet = ctx.ops.length;

  gun.mark = 1;

  gun.kick = 1;

  const loud = fakeContext();

  drawGun(loud as never, gun, 900, 570, snapshot([]));

  expect(loud.ops.length).toBeGreaterThan(quiet);

});

// ------------------------------------------- coming into sight, and leaving

test("a body arriving is drawn faded and small, and solid once it is in", () => {

  const edgeOf = (ctx: ReturnType<typeof fakeContext>) => ctx.ops.find((o) => o.op === "strokeRect")!;

  const arriving = fakeContext();

  drawScene(arriving as never, makeScene(), world, eye, snapshot([body()]), { ...view, shown: () => 0.4 });

  const solid = fakeContext();

  drawScene(solid as never, makeScene(), world, eye, snapshot([body()]), { ...view, shown: () => 1 });

  expect(edgeOf(arriving).alpha).toBeCloseTo(0.4, 5);

  expect(edgeOf(solid).alpha).toBe(1);

  // And smaller: it grows from its feet as it comes in.

  expect(Number(edgeOf(arriving).args[2])).toBeLessThan(Number(edgeOf(solid).args[2]));

  expect(Number(edgeOf(arriving).args[2])).toBeGreaterThan(Number(edgeOf(solid).args[2]) * 0.7);

});

test("a body the presence store has only just seen is the one being faded", () => {

  const seen = makePresence();

  const them = body();

  sighted(seen, [them], 100);

  const draw = (at: number) => {

    const ctx = fakeContext();

    drawScene(ctx as never, makeScene(), world, eye, snapshot([them]), {

      ...view,

      shown: (p: { id: string }) => shown(seen, p.id, at),

    });

    return ctx.ops.find((o) => o.op === "strokeRect")!;

  };

  expect(draw(100.03).alpha).toBeGreaterThan(0);

  expect(draw(100.03).alpha).toBeLessThan(1);

  expect(draw(100.5).alpha).toBe(1);

});

test("a last-seen mark is an outline, dimming, and never a body", () => {

  const marks = [{ id: "them", x: 280, y: 200, angle: 0, mate: false, fade: 0.6 }];

  const ctx = fakeContext();

  drawScene(ctx as never, makeScene(), world, eye, snapshot([]), { ...view, marks });

  const edge = ctx.ops.find((o) => o.op === "strokeRect");

  expect(edge).toBeDefined();

  expect(edge!.alpha).toBeCloseTo(0.6, 5);

  // No head, no chevron, no name: a memory of a sighting, not a sighting.

  expect(ctx.ops.some((o) => o.op === "arc")).toBe(false);

  expect(ctx.ops.some((o) => o.op === "closePath")).toBe(false);

  expect(ctx.ops.some((o) => o.op === "fillText")).toBe(false);

  expect(GHOST).toBeGreaterThan(0);

});

test("a mark where the wall now stands between you and it is not drawn", () => {

  const marks = [{ id: "them", x: 700, y: 200, angle: 0, mate: false, fade: 1 }];

  const ctx = fakeContext();

  drawScene(ctx as never, makeScene(), world, eye, snapshot([]), { ...view, marks });

  expect(ctx.ops.some((o) => o.op === "strokeRect")).toBe(false);

});

test("on the map a last-seen ring is hollow, and dims with the mark", () => {

  const map = { rows: gridRows(), tile: TILE };

  const box = { x: 0, y: 0, w: 900, h: 570 };

  const look = (p: never) => p;

  const marks = [{ id: "them", x: 400, y: 400, angle: 0, mate: false, fade: 0.5 }];

  const plain = fakeContext();

  drawTopdown(plain as never, map, snapshot([]), look, box);

  const marked = fakeContext();

  drawTopdown(marked as never, map, snapshot([]), look, box, { marks });

  const count = (ctx: ReturnType<typeof fakeContext>, op: string) => ctx.ops.filter((o) => o.op === op).length;

  // Hollow: the ring adds strokes and not one fill.

  expect(count(marked, "fill")).toBe(count(plain, "fill"));

  expect(count(marked, "stroke")).toBeGreaterThan(count(plain, "stroke"));

  const ring = marked.ops.find((o) => o.op === "arc")!;

  expect(ring).toBeDefined();

  expect(ring.alpha).toBeCloseTo(0.4, 5);

});