benjivers/val Public Public: anyone can read this; the crew 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. Colours come out of a table built once,

 * the depth and fog buffers are kept between frames, and the sprite list is

 * sorted in a buffer the scene owns.

 */

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),

    fog: new Float32Array(0),

    hit: hitResult(),

    proj: projectResult(),

    order: [],

    smokes: [],

    sky: null,

    skyKey: "",

  };

}

const shadeOf = (light) => SHADES[Math.min(LEVELS - 1, Math.max(0, (light * LEVELS) | 0))];

/**

 * 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;

  const step = W > 1100 ? 2 : 1;

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

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

    scene.depth = new Float32Array(columns);

    scene.fog = new Float32Array(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 fog = scene.fog;

  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) continue;

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

    const top = horizon - h / 2;

    ctx.fillStyle = shadeOf(wallLight(perp, hit.side, world.tile));

    ctx.fillRect(i * step, top, step + 1, h);

    if (haze > 0.01) {

      ctx.globalAlpha = haze;

      ctx.fillStyle = FOG;

      ctx.fillRect(i * step, top, step + 1, h);

      ctx.globalAlpha = 1;

    }

  }

  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);

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

  }

  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);

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

    if (ctx.globalAlpha < 0.05) continue;

    if (thing.kind === "body") drawBody(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.fog[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;

  const h = thing.size;

  const w = h * 0.46;

  const cx = thing.column;

  const top = floorY - h;

  const mate = p.mate;

  const skin = !p.alive ? "#555a63" : mate ? "#3f9fd6" : "#d8483f";

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

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

    // Body, head, and a shoulder band in the agent's colour.

    ctx.fillStyle = skin;

    ctx.fillRect(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.lineWidth = Math.max(1, h * 0.03);

    ctx.strokeStyle = trim;

    ctx.stroke();

    if (!p.alive) return;

    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);

    }

    // A name tag over team mates only: an enemy is a shape, never a label.

    if (mate) {

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

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

      ctx.textAlign = "center";

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

      const tw = ctx.measureText(p.name).width + 8;

      ctx.fillRect(cx - tw / 2, top - h * 0.34, tw, size * 1.4);

      ctx.fillStyle = "#cfe8ff";

      ctx.fillText(p.name, cx, top - h * 0.34 + 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();

  }

}