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

/**

 * The board from above — the drawing this game started as.

 *

 * It is three things now: the minimap in the corner, the full-screen map Tab

 * holds open, and the view a phone plays in, where a raycaster with touch

 * look would be miserable. One function, drawn into whatever box it is given.

 */

import { AGENT_COLOUR } from "./scene.js";

const TILE_COLOUR = {

  "#": "#20242d",

  A: "#2c2a22",

  B: "#2c2a22",

  a: "#2a2024",

  d: "#1e2630",

  ".": "#171a21",

};

/**

 * Draw the whole map into `box` (canvas pixels). `look(player)` gives the

 * smoothed position; `opts.labels` draws site letters and names, which only

 * fit on the big version.

 */

export function drawTopdown(ctx, map, snap, look, box, opts = {}) {

  const cols = map.rows[0].length;

  const s = box.w / (cols * map.tile);

  const labels = opts.labels !== false;

  ctx.save();

  ctx.beginPath();

  ctx.rect(box.x, box.y, box.w, box.h);

  ctx.clip();

  ctx.translate(box.x, box.y);

  const t = map.tile * s;

  for (let row = 0; row < map.rows.length; row++)

    for (let col = 0; col < map.rows[row].length; col++) {

      const cell = map.rows[row][col];

      ctx.fillStyle = TILE_COLOUR[cell] ?? "#171a21";

      ctx.fillRect(col * t, row * t, t + 0.6, t + 0.6);

      if (labels && (cell === "A" || cell === "B")) {

        ctx.fillStyle = "#6b5f3a";

        ctx.font = `${Math.round(t * 0.5)}px system-ui, sans-serif`;

        ctx.fillText(cell, col * t + t * 0.3, row * t + t * 0.68);

      }

    }

  if (!snap) {

    ctx.restore();

    return;

  }

  for (const orb of snap.orbs) {

    ctx.fillStyle = "#c9a0ff";

    ctx.beginPath();

    ctx.arc(orb.x * s, orb.y * s, Math.max(2, 9 * s), 0, 7);

    ctx.fill();

  }

  for (const zone of snap.zones) if (zone.k !== "smoke") drawZone(ctx, zone, s);

  if (snap.spike.x !== null) {

    const x = snap.spike.x * s;

    const y = snap.spike.y * s;

    const r = Math.max(2.5, 7 * s);

    ctx.fillStyle = snap.spike.planted ? (Math.floor(Date.now() / 250) % 2 ? "#ff5b4a" : "#8a2a22") : "#c8b45c";

    ctx.fillRect(x - r, y - r, r * 2, r * 2);

    if (snap.spike.planted && snap.spike.defuse > 0) {

      ctx.fillStyle = "#4fd6a0";

      ctx.fillRect(x - 20 * s, y + 12 * s, 40 * s * (snap.spike.defuse / 7), 3);

    }

  }

  for (const shot of snap.shots) {

    ctx.strokeStyle = shot.hit ? "rgba(255,120,110,0.85)" : "rgba(255,240,180,0.5)";

    ctx.lineWidth = Math.max(1, 2 * s);

    ctx.beginPath();

    ctx.moveTo(shot.x1 * s, shot.y1 * s);

    ctx.lineTo(shot.x2 * s, shot.y2 * s);

    ctx.stroke();

  }

  for (const player of snap.players) drawPlayer(ctx, player, look(player), s, snap.me, labels);

  // Smoke last: on this view it hides what is under it, as it should.

  for (const zone of snap.zones) if (zone.k === "smoke" && zone.f <= 0) drawZone(ctx, zone, s);

  ctx.restore();

}

function drawZone(ctx, z, s) {

  const x = z.x * s;

  const y = z.y * s;

  const r = z.r * s;

  ctx.lineWidth = Math.max(1, s);

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

    ctx.fillStyle = "rgba(190,195,205,0.72)";

    disc(ctx, x, y, r, true);

  } else if (z.k === "molly") {

    ctx.fillStyle = "rgba(230,110,50,0.45)";

    ctx.strokeStyle = "#f08a4b";

    disc(ctx, x, y, r, true, true);

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

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

    disc(ctx, x, y, r, true);

  } else if (z.k === "flash") {

    ctx.fillStyle = z.f > 0 ? "#ffe9a8" : "rgba(255,255,255,0.9)";

    disc(ctx, x, y, z.f > 0 ? 5 * s : 30 * s, true);

  } else if (z.k === "dart") {

    ctx.strokeStyle = "rgba(90,220,170,0.7)";

    disc(ctx, x, y, r, false, true);

  } else if (z.k === "trip") {

    ctx.strokeStyle = "rgba(230,200,90,0.8)";

    disc(ctx, x, y, r, false, true);

  } else if (z.k === "heal") {

    ctx.fillStyle = "rgba(120,230,140,0.5)";

    disc(ctx, x, y, 14 * s, true);

  }

}

function disc(ctx, x, y, r, fill, stroke) {

  ctx.beginPath();

  ctx.arc(x, y, r, 0, 7);

  if (fill) ctx.fill();

  if (stroke) ctx.stroke();

}

/** Everybody is a dot; you are an arrow, so you can tell at a glance where you face. */

function drawPlayer(ctx, p, pos, s, me, labels) {

  const x = pos.x * s;

  const y = pos.y * s;

  const r = Math.max(2.5, 16 * s);

  const mine = p.id === me.id;

  const body = !p.alive ? "#555a63" : p.mate ? (mine ? "#eaeaea" : "#4fb3d9") : "#e35d5b";

  if (mine) {

    ctx.save();

    ctx.translate(x, y);

    ctx.rotate(pos.angle);

    ctx.fillStyle = body;

    ctx.beginPath();

    ctx.moveTo(r * 1.5, 0);

    ctx.lineTo(-r, r * 0.9);

    ctx.lineTo(-r * 0.4, 0);

    ctx.lineTo(-r, -r * 0.9);

    ctx.closePath();

    ctx.fill();

    ctx.restore();

    return;

  }

  ctx.fillStyle = body;

  ctx.beginPath();

  ctx.arc(x, y, r, 0, 7);

  ctx.fill();

  ctx.strokeStyle = AGENT_COLOUR[p.agent] || "#888";

  ctx.lineWidth = Math.max(1, 3 * s);

  ctx.stroke();

  if (p.alive) {

    ctx.strokeStyle = body;

    ctx.beginPath();

    ctx.moveTo(x, y);

    ctx.lineTo(x + Math.cos(pos.angle) * r * 2, y + Math.sin(pos.angle) * r * 2);

    ctx.stroke();

  }

  if (p.spike) {

    ctx.fillStyle = "#f0d060";

    ctx.fillRect(x - r * 0.4, y - r * 1.8, r * 0.8, r * 0.8);

  }

  if (p.blind) {

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

    disc(ctx, x, y - r * 1.6, r * 0.35, true);

  }

  if (labels) {

    ctx.fillStyle = "rgba(235,235,235,0.75)";

    ctx.font = `${Math.round(11 * Math.max(1, s * 2))}px system-ui, sans-serif`;

    ctx.textAlign = "center";

    ctx.fillText(p.name, x, y - r * 1.9);

    ctx.textAlign = "left";

  }

  if (p.alive && p.hp < 100) {

    ctx.fillStyle = "#0008";

    ctx.fillRect(x - r, y + r * 1.2, r * 2, 3);

    ctx.fillStyle = "#6fcf6f";

    ctx.fillRect(x - r, y + r * 1.2, r * 2 * (p.hp / 100), 3);

  }

}