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

/**

 * The world, drawn from inside the player's head.

 *

 * One pass of rays across the screen builds the walls and a depth buffer;

 * everything else — bodies, the spike, ability zones, tracers — is a

 * billboard tested against that buffer, so a body behind a corner is not

 * drawn at all. Smoke is measured along each ray, not painted as a disc:

 * cross one and everything past it fogs.

 *

 * The ray loop allocates nothing and draws nothing: it writes a shade level,

 * a face and a slice into the column arrays, and `slices.js` collapses those

 * into runs so a flat wall costs one `fillRect` and not one a column.

 * Colours come out of a table built once, the depth and column buffers are

 * kept between frames, and the sprite list is sorted in a buffer the scene

 * owns.

 */

import { swell } from "./presence.js";

import { makeColumns, SKY, wallRuns } from "./slices.js";

import {

  castRay,

  columnOffset,

  hitResult,

  project,

  projection,

  projectResult,

  sliceHeight,

  smokeAlong,

  spriteColumnVisible,

  wallLight,

} from "./raycast.js";

const EYE = 40; // half a tile up: the horizon sits on the middle of the wall

const WALL = 80; // walls are one tile tall

const BODY = 58; // a person, in world units

const MAX_SIGHT = 1800;

const LEVELS = 48;

export const AGENT_COLOUR = {

  ember: "#f08a4b",

  veil: "#8f7fe8",

  sable: "#4fd6a0",

  mender: "#e0c060",

  rook: "#d96a8f",

};

// Wall colours, quantised into levels and built once, so the ray loop never

// builds a string. How dark a slice is comes from `wallLight`, which already

// knows about distance and which face was struck.

const SHADES = (() => {

  const out = [];

  for (let i = 0; i < LEVELS; i++) {

    const k = (i + 0.5) / LEVELS;

    out.push(`rgb(${Math.round(150 * k)},${Math.round(158 * k)},${Math.round(178 * k)})`);

  }

  return out;

})();

const FOG = "rgb(198,203,212)";

export function makeScene() {

  return {

    depth: new Float32Array(0),

    cols: makeColumns(0),

    runs: [],

    hit: hitResult(),

    proj: projectResult(),

    order: [],

    smokes: [],

    sky: null,

    skyKey: "",

  };

}

const levelOf = (light) => Math.min(LEVELS - 1, Math.max(0, (light * LEVELS) | 0));

/**

 * The walls, a rectangle a run rather than a rectangle a column. The runs

 * are stretches where the shade level, the face, the fog and the geometry

 * all agree — see `slices.js` — so this is the same picture the per-column

 * loop drew, in a fraction of the calls.

 */

function drawWalls(ctx, scene, step) {

  const runs = scene.runs;

  const used = wallRuns(scene.cols, runs);

  for (let r = 0; r < used; r++) {

    const run = runs[r];

    const x = run.from * step;

    const wide = (run.to - run.from + 1) * step + 1;

    ctx.fillStyle = SHADES[run.level];

    ctx.fillRect(x, run.top, wide, run.high);

    if (run.haze > 0.01) {

      ctx.globalAlpha = run.haze;

      ctx.fillStyle = FOG;

      ctx.fillRect(x, run.top, wide, run.high);

      ctx.globalAlpha = 1;

    }

  }

}

/**

 * Draw one frame.

 *

 * `world` carries the map (`solid`, `tile`), `eye` is where the camera

 * stands and looks, `snap` is the last snapshot the server sent, and `view`

 * is the frame: its pixel size, and `look(player)` for the smoothed position

 * to draw somebody at.

 */

export function drawScene(ctx, scene, world, eye, snap, view) {

  const W = view.width;

  const H = view.height;

  // One ray every other column of the buffer, and the wall slice two columns

  // wide: flat shading does not reward a ray a pixel, and the sprites are

  // still drawn at the buffer's own resolution. Below that width a picture

  // this coarse stops being one.

  const step = W >= 640 ? 2 : 1;

  const columns = Math.ceil(W / step);

  if (scene.depth.length !== columns) {

    scene.depth = new Float32Array(columns);

    scene.cols = makeColumns(columns);

  }

  const proj = projection(W);

  const horizon = H / 2;

  drawSky(ctx, scene, W, H, horizon);

  const smokes = scene.smokes;

  smokes.length = 0;

  for (const zone of snap.zones) if ((zone.k === "smoke" || zone.k === "wall") && zone.f <= 0) smokes.push(zone);

  const depth = scene.depth;

  const cols = scene.cols;

  const fog = cols.haze;

  const hit = scene.hit;

  for (let i = 0; i < columns; i++) {

    const offset = columnOffset(i * step + step / 2, W);

    const angle = eye.angle + offset;

    castRay(world.solid, eye.x, eye.y, angle, world.tile, MAX_SIGHT, hit);

    const perp = Math.max(1, hit.dist * Math.cos(offset));

    depth[i] = perp;

    let haze = 0;

    if (smokes.length) {

      const dx = Math.cos(angle);

      const dy = Math.sin(angle);

      for (let s = 0; s < smokes.length; s++) {

        const z = smokes[s];

        haze += smokeAlong(eye.x, eye.y, dx, dy, z.x, z.y, z.r, hit.dist);

        if (haze >= 1) break;

      }

      haze = Math.min(1, haze);

    }

    fog[i] = haze;

    if (!hit.wall) {

      cols.level[i] = SKY;

      continue;

    }

    const h = Math.min(H * 6, sliceHeight(perp, proj, WALL));

    cols.level[i] = levelOf(wallLight(perp, hit.side, world.tile));

    cols.side[i] = hit.side;

    cols.top[i] = horizon - h / 2;

    cols.high[i] = h;

  }

  drawWalls(ctx, scene, step);

  drawThings(ctx, scene, world, eye, snap, view, proj, horizon, step, columns);

}

/** The two bands: a dark ceiling above the horizon, a warmer floor below. */

function drawSky(ctx, scene, W, H, horizon) {

  const key = `${W}x${H}`;

  if (scene.skyKey !== key || !scene.sky) {

    const sky = ctx.createLinearGradient(0, 0, 0, H);

    sky.addColorStop(0, "#0a0c11");

    sky.addColorStop(0.49, "#23262f");

    sky.addColorStop(0.5, "#3a3026");

    sky.addColorStop(1, "#15120e");

    scene.sky = sky;

    scene.skyKey = key;

  }

  ctx.fillStyle = scene.sky;

  ctx.fillRect(0, 0, W, H);

  ctx.fillStyle = "rgba(255,255,255,0.09)";

  ctx.fillRect(0, horizon - 1, W, 2);

}

/**

 * Everything that is not a wall, far to near, each one clipped to the screen

 * columns where it beats the wall behind it.

 */

function drawThings(ctx, scene, world, eye, snap, view, proj, horizon, step, columns) {

  const W = view.width;

  const things = scene.order;

  things.length = 0;

  for (const zone of snap.zones) {

    if (zone.k === "smoke") continue;

    things.push({ kind: "zone", zone, x: zone.x, y: zone.y });

  }

  for (const orb of snap.orbs) things.push({ kind: "orb", x: orb.x, y: orb.y });

  if (snap.spike.x !== null && !snap.spike.carried)

    things.push({ kind: "spike", x: snap.spike.x, y: snap.spike.y });

  for (const player of snap.players) {

    if (player.id === snap.me.id) continue;

    const at = view.look(player);

    // How far into sight this body is: 0 the moment it appears, 1 solid.

    // See presence.js — a body that pops into existence reads as a bug.

    const shown = view.shown ? view.shown(player) : 1;

    things.push({ kind: "body", player, shown, x: at.x, y: at.y, angle: at.angle });

  }

  // Where somebody was last seen, dimming away. It stands where they were,

  // so a wall between you and that spot hides it like anything else.

  if (view.marks) for (const mark of view.marks) things.push({ kind: "mark", mark, x: mark.x, y: mark.y });

  const p = scene.proj;

  for (const thing of things) {

    project(eye.x, eye.y, eye.angle, thing.x, thing.y, W, proj, BODY, p);

    thing.perp = p.perp;

    thing.column = p.column;

    thing.size = p.size;

    thing.behind = p.behind;

  }

  things.sort((a, b) => b.perp - a.perp);

  for (const thing of things) {

    if (thing.behind) continue;

    const floorY = horizon + (EYE * proj) / thing.perp;

    const haze = hazeAt(scene, thing.column, step, columns);

    const arriving = thing.kind === "body" ? thing.shown : thing.kind === "mark" ? thing.mark.fade : 1;

    ctx.globalAlpha = Math.max(0, 1 - haze) * arriving;

    if (ctx.globalAlpha < 0.05) continue;

    if (thing.kind === "body") drawBody(ctx, scene, thing, floorY, step, columns);

    else if (thing.kind === "mark") drawMark(ctx, scene, thing, floorY, step, columns);

    else if (thing.kind === "spike") drawSpike(ctx, scene, thing, floorY, snap, step, columns);

    else if (thing.kind === "orb") drawBlob(ctx, scene, thing, floorY, "#c9a0ff", 0.35, step, columns);

    else drawZone(ctx, scene, thing, floorY, proj, step, columns);

    ctx.globalAlpha = 1;

  }

  ctx.globalAlpha = 1;

  drawTracers(ctx, scene, eye, snap, W, proj, horizon);

}

const hazeAt = (scene, column, step, columns) => {

  const i = Math.max(0, Math.min(columns - 1, Math.round(column / step)));

  return scene.cols.haze[i] ?? 0;

};

/**

 * The visible runs of a sprite: the stretches of screen column where it is

 * nearer than the wall. Two rectangles at most in practice, and the caller

 * clips its drawing to each.

 */

function withRuns(ctx, scene, left, right, perp, step, columns, draw) {

  let runStart = -1;

  const from = Math.max(0, Math.floor(left / step));

  const to = Math.min(columns - 1, Math.ceil(right / step));

  for (let i = from; i <= to + 1; i++) {

    const shown = i <= to && spriteColumnVisible(perp, scene.depth[i]);

    if (shown && runStart < 0) runStart = i;

    if (!shown && runStart >= 0) {

      ctx.save();

      ctx.beginPath();

      ctx.rect(runStart * step - 0.5, 0, (i - runStart) * step + 1, 1e5);

      ctx.clip();

      draw();

      ctx.restore();

      runStart = -1;

    }

  }

}

function drawBody(ctx, scene, thing, floorY, step, columns) {

  const p = thing.player;

  // A body arriving grows from its feet as it fades in, so it reads as

  // somebody coming round the corner rather than one appearing there.

  const h = thing.size * swell(thing.shown ?? 1);

  const w = h * 0.46;

  const cx = thing.column;

  const top = floorY - h;

  const mate = p.mate;

  // The dead lie down. No tag, no chevron, no agent colour: if something is

  // upright with a marker over it, it is alive and it can shoot you.

  if (!p.alive) {

    const lie = h * 0.16;

    withRuns(ctx, scene, cx - w * 1.1, cx + w * 1.1, thing.perp, step, columns, () => {

      ctx.fillStyle = "#4a4e57";

      ctx.beginPath();

      ctx.ellipse(cx, floorY - lie * 0.4, w * 1.05, lie, 0, 0, 7);

      ctx.fill();

      ctx.strokeStyle = "#23262d";

      ctx.lineWidth = Math.max(1, h * 0.02);

      ctx.stroke();

    });

    return;

  }

  const skin = mate ? "#3f9fd6" : "#d8483f";

  const trim = AGENT_COLOUR[p.agent] || "#999";

  const edge = Math.max(1.2, h * 0.05);

  withRuns(ctx, scene, cx - w * 1.2, cx + w * 1.5, thing.perp, step, columns, () => {

    // Body and head, each with a hard dark edge: the silhouette is what

    // carries across a dim room, where the colour does not.

    ctx.fillStyle = skin;

    ctx.fillRect(cx - w / 2, top + h * 0.28, w, h * 0.72);

    ctx.strokeStyle = "#0b0d11";

    ctx.lineWidth = edge;

    ctx.strokeRect(cx - w / 2, top + h * 0.28, w, h * 0.72);

    ctx.fillStyle = trim;

    ctx.fillRect(cx - w / 2, top + h * 0.34, w, h * 0.1);

    ctx.beginPath();

    ctx.arc(cx, top + h * 0.17, h * 0.15, 0, 7);

    ctx.fillStyle = skin;

    ctx.fill();

    ctx.strokeStyle = "#0b0d11";

    ctx.stroke();

    if (p.spike) {

      ctx.fillStyle = "#f0d060";

      ctx.fillRect(cx + w * 0.5, top + h * 0.4, w * 0.3, h * 0.3);

    }

    if (p.hp < 100) {

      ctx.fillStyle = "#000a";

      ctx.fillRect(cx - w / 2, top - h * 0.1, w, h * 0.06);

      ctx.fillStyle = mate ? "#6fcf6f" : "#e8b04a";

      ctx.fillRect(cx - w / 2, top - h * 0.1, w * (p.hp / 100), h * 0.06);

    }

    if (mate) tag(ctx, p, cx, top, h);

    else chevron(ctx, cx, top, h);

  });

}

/**

 * A mark where somebody was last seen: an empty outline and a scuff on the

 * floor, dimming away over a second. Deliberately not a body — nothing is

 * filled, there is no head and no chevron — because it is a memory of a

 * sighting and must never be mistaken for one.

 */

function drawMark(ctx, scene, thing, floorY, step, columns) {

  const h = thing.size * 0.9;

  const w = h * 0.46;

  const cx = thing.column;

  const top = floorY - h;

  withRuns(ctx, scene, cx - w * 1.2, cx + w * 1.2, thing.perp, step, columns, () => {

    ctx.strokeStyle = thing.mark.mate ? "rgba(120,180,230,0.85)" : "rgba(235,150,120,0.9)";

    ctx.lineWidth = Math.max(1, h * 0.035);

    ctx.strokeRect(cx - w / 2, top + h * 0.28, w, h * 0.72);

    ctx.fillStyle = "rgba(10,12,16,0.45)";

    ctx.fillRect(cx - w * 0.7, floorY - h * 0.04, w * 1.4, h * 0.05);

  });

}

/** An enemy wears a chevron: a shape, not a hue, for anyone whose eyes read

 * red and blue the same way. */

function chevron(ctx, cx, top, h) {

  const size = Math.max(4, h * 0.16);

  const y = top - h * 0.16;

  ctx.beginPath();

  ctx.moveTo(cx - size, y - size);

  ctx.lineTo(cx + size, y - size);

  ctx.lineTo(cx, y);

  ctx.closePath();

  ctx.fillStyle = "#ff6f5e";

  ctx.fill();

  ctx.lineWidth = Math.max(1, h * 0.02);

  ctx.strokeStyle = "#140a08";

  ctx.stroke();

}

/** A team mate wears their name and a pip of their health — never an enemy. */

function tag(ctx, p, cx, top, h) {

  const size = Math.max(9, Math.min(18, h * 0.16));

  const y = top - h * 0.34;

  ctx.font = `${size}px system-ui, sans-serif`;

  ctx.textAlign = "center";

  const width = ctx.measureText(p.name).width + size * 1.4;

  ctx.fillStyle = "rgba(10,12,16,0.65)";

  ctx.fillRect(cx - width / 2, y, width, size * 1.4);

  ctx.fillStyle = p.hp > 60 ? "#6fcf6f" : p.hp > 25 ? "#e0a040" : "#e05a4a";

  ctx.fillRect(cx - width / 2 + size * 0.25, y + size * 0.35, size * 0.45, size * 0.7);

  ctx.fillStyle = "#cfe8ff";

  ctx.fillText(p.name, cx + size * 0.4, y + size * 1.05);

  ctx.textAlign = "left";

}

function drawSpike(ctx, scene, thing, floorY, snap, step, columns) {

  const h = thing.size * 0.42;

  const cx = thing.column;

  const planted = snap.spike.planted;

  const blink = planted && Math.floor(Date.now() / 220) % 2 === 0;

  withRuns(ctx, scene, cx - h, cx + h, thing.perp, step, columns, () => {

    ctx.fillStyle = planted ? (blink ? "#ff5b4a" : "#7d2a22") : "#c8b45c";

    ctx.fillRect(cx - h * 0.28, floorY - h, h * 0.56, h);

    ctx.fillStyle = planted && blink ? "#ffd7a0" : "#2a2418";

    ctx.fillRect(cx - h * 0.14, floorY - h * 0.85, h * 0.28, h * 0.22);

  });

}

function drawBlob(ctx, scene, thing, floorY, colour, scale, step, columns) {

  const r = thing.size * scale;

  const cx = thing.column;

  withRuns(ctx, scene, cx - r, cx + r, thing.perp, step, columns, () => {

    ctx.fillStyle = colour;

    ctx.beginPath();

    ctx.arc(cx, floorY - r, r, 0, 7);

    ctx.fill();

  });

}

function drawZone(ctx, scene, thing, floorY, proj, step, columns) {

  const z = thing.zone;

  const wide = (z.r * proj) / thing.perp;

  const cx = thing.column;

  if (z.k === "wall") {

    const h = (WALL * proj) / thing.perp;

    withRuns(ctx, scene, cx - wide, cx + wide, thing.perp, step, columns, () => {

      ctx.fillStyle = "rgba(120,200,255,0.45)";

      ctx.fillRect(cx - wide, floorY - h, wide * 2, h);

      ctx.strokeStyle = "rgba(180,225,255,0.8)";

      ctx.strokeRect(cx - wide, floorY - h, wide * 2, h);

    });

    return;

  }

  const colour =

    z.k === "molly" ? "rgba(235,120,50,0.6)" : z.k === "flash" ? "rgba(255,235,170,0.9)" : z.k === "heal" ? "rgba(120,230,140,0.55)" : z.k === "trip" ? "rgba(230,200,90,0.75)" : "rgba(90,220,170,0.5)";

  withRuns(ctx, scene, cx - wide, cx + wide, thing.perp, step, columns, () => {

    ctx.fillStyle = colour;

    ctx.beginPath();

    ctx.ellipse(cx, floorY, wide, Math.max(2, wide * 0.3), 0, 0, 7);

    ctx.fill();

  });

}

/** Shots the server let us see, as a line through the world. */

function drawTracers(ctx, scene, eye, snap, W, proj, horizon) {

  if (!snap.shots.length) return;

  const p = scene.proj;

  ctx.lineWidth = 2;

  for (const shot of snap.shots) {

    project(eye.x, eye.y, eye.angle, shot.x1, shot.y1, W, proj, BODY, p);

    if (p.behind) continue;

    const x1 = p.column;

    const y1 = horizon + (EYE * proj) / p.perp - p.size * 0.6;

    project(eye.x, eye.y, eye.angle, shot.x2, shot.y2, W, proj, BODY, p);

    if (p.behind) continue;

    ctx.strokeStyle = shot.hit ? "rgba(255,140,120,0.5)" : "rgba(255,240,190,0.35)";

    ctx.beginPath();

    ctx.moveTo(x1, y1);

    ctx.lineTo(p.column, horizon + (EYE * proj) / p.perp - p.size * 0.6);

    ctx.stroke();

  }

}