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

/**

 * The board from above.

 *

 * It is three things: 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.

 *

 * Nothing here knows what the game is. The tiles, the shots the server let

 * us see, the last-seen marks and the bodies are generic; what a letter on

 * the grid is coloured, what else lies on the floor and what a body wears

 * for a badge, the game says through `opts` — see `drawTopdown`.

 */

const WALL_COLOUR = "#20242d";

const FLOOR_COLOUR = "#171a21";

const plainTile = (cell) => (cell === "#" ? WALL_COLOUR : FLOOR_COLOUR);

const never = () => false;

const nothing = () => {};

const grey = () => "#888";

/**

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

 * smoothed position; `opts.labels` draws the grid's letters and names, which

 * only fit on the big version; `opts.marks` are the last-seen rings from

 * `presence.js`, which answer "where did they go" without claiming anybody

 * is there now; `opts.tiles: false` leaves out the map itself, for a caller

 * that has already drawn it once and kept it.

 *

 * The game's holes, each optional: `opts.tile(cell)` colours a letter,

 * `opts.label(cell)` says whether the letter is written on the big map,

 * `opts.under(ctx, snap, s)` draws what lies on the floor beneath the bodies,

 * `opts.over(ctx, snap, s)` what hides them from above, `opts.trim(player)`

 * is the ring round a body and `opts.badges(ctx, player, x, y, r)` whatever it

 * wears. `s` is world units to canvas pixels.

 *

 * Called with no snapshot it draws the tiles and stops, which is exactly

 * that layer.

 */

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;

  const tiles = opts.tiles !== false;

  const tileColour = opts.tile || plainTile;

  const label = opts.label || never;

  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;

  if (tiles)

    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 = tileColour(cell);

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

        if (labels && label(cell)) {

          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;

  }

  (opts.under || nothing)(ctx, snap, s);

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

  }

  // Under the living: a ring where somebody was last seen is never allowed

  // to sit on top of a body that is actually in sight.

  if (opts.marks) for (const mark of opts.marks) drawMark(ctx, mark, s);

  const trim = opts.trim || grey;

  const badges = opts.badges || nothing;

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

  (opts.over || nothing)(ctx, snap, s);

  ctx.restore();

}

/**

 * Where somebody was last seen: a hollow ring and the way they were facing,

 * dimming away. Hollow because a filled dot on this map means a body, and

 * this is a memory of one.

 */

function drawMark(ctx, m, s) {

  const x = m.x * s;

  const y = m.y * s;

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

  ctx.save();

  ctx.globalAlpha = 0.8 * m.fade;

  ctx.strokeStyle = m.mate ? "#4fb3d9" : "#e35d5b";

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

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

  ctx.beginPath();

  ctx.moveTo(x, y);

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

  ctx.stroke();

  ctx.restore();

}

export 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 and you are an arrow — but a team mate is on the map

 * whether you can see them or not, with their initial in the dot and a cross

 * when they are down, and an enemy is only ever drawn while they are alive

 * and in sight. The map stays honest about vision and legible about your own.

 */

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

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

  if (!p.alive && !p.mate) return; // a corpse is not a threat and not a call-out

  const x = pos.x * s;

  const y = pos.y * s;

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

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

  if (mine && p.alive) {

    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;

  }

  // The dead of your own team keep their place on the map, crossed out.

  if (!p.alive) {

    ctx.strokeStyle = "#6a707c";

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

    ctx.beginPath();

    ctx.moveTo(x - r * 0.8, y - r * 0.8);

    ctx.lineTo(x + r * 0.8, y + r * 0.8);

    ctx.moveTo(x + r * 0.8, y - r * 0.8);

    ctx.lineTo(x - r * 0.8, y + r * 0.8);

    ctx.stroke();

    if (labels) {

      ctx.fillStyle = "rgba(180,185,195,0.6)";

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

    }

    return;

  }

  ctx.fillStyle = body;

  ctx.beginPath();

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

  ctx.fill();

  ctx.strokeStyle = trim(p);

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

  ctx.stroke();

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

  // The initial inside the dot, when the dot is big enough to hold one.

  if (p.mate && r >= 6) {

    ctx.fillStyle = "#0c1016";

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

    ctx.textAlign = "center";

    ctx.fillText((p.name[0] || "?").toUpperCase(), x, y + r * 0.45);

    ctx.textAlign = "left";

  }

  badges(ctx, p, x, y, r);

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

  }

}