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

/**

 * This game's first-person picture: the engine's renderer (`engine/scene.js`)

 * with the Valorant things in it — the spike, the ult orbs, the ability

 * zones, an agent's colour on a body and the spike on the carrier's back.

 * Smoke and a wall fog the rays; nothing else does.

 */

import { drawBlob, drawScene as drawWorld, makeScene, WALL } from "./engine/scene.js";

export { makeScene };

export const AGENT_COLOUR = {

  ember: "#f08a4b",

  veil: "#8f7fe8",

  sable: "#4fd6a0",

  mender: "#e0c060",

  rook: "#d96a8f",

};

/** What a ray fogs through: a smoke, or a wall an ability put up, once it has landed. */

function fog(snap, out) {

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

}

/** Everything on the floor that is not a body: zones, orbs, the spike. */

function props(snap, out) {

  for (const zone of snap.zones) {

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

    out.push({ kind: "zone", zone, x: zone.x, y: zone.y, draw: drawZone });

  }

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

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

    out.push({ kind: "spike", x: snap.spike.x, y: snap.spike.y, planted: snap.spike.planted, draw: drawSpike });

}

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

const badge = (p) => (p.spike ? "#f0d060" : null);

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

  drawWorld(ctx, scene, world, eye, snap, { ...view, fog, props, trim, badge });

}

function drawSpike(ctx, thing, floorY, proj, clip) {

  const h = thing.size * 0.42;

  const cx = thing.column;

  const planted = thing.planted;

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

  clip(thing, cx - h, cx + h, () => {

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

  });

}

const drawOrb = (ctx, thing, floorY, proj, clip) => drawBlob(ctx, thing, floorY, "#c9a0ff", 0.35, clip);

function drawZone(ctx, thing, floorY, proj, clip) {

  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;

    clip(thing, cx - wide, cx + wide, () => {

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

  clip(thing, cx - wide, cx + wide, () => {

    ctx.fillStyle = colour;

    ctx.beginPath();

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

    ctx.fill();

  });

}