/**
 * val, in a browser. It draws what the server sends and sends what the
 * person does — nothing else. There is no position here the server did not
 * hand over, and no enemy in a snapshot the server decided you cannot see,
 * so a patched client learns nothing a plain one does not.
 */
"use strict";

const $ = (id) => document.getElementById(id);
const view = $("view");
const ctx = view.getContext("2d");

const KEY_SLOT = { KeyC: "c", KeyQ: "q", KeyE: "e", KeyX: "x" };
const AGENT_COLOUR = { ember: "#f08a4b", veil: "#8f7fe8", sable: "#4fd6a0", mender: "#e0c060", rook: "#d96a8f" };

let map = null;
let snap = null;
let socket = null;
const shown = new Map(); // smoothed positions, so 15 frames a second look like 60
const keys = new Set();
let pointer = null; // aim target in canvas pixels
let firing = false;
let stick = null; // { id, ox, oy, mx, my }
let aimTouch = null;

// ------------------------------------------------------------------ socket

function connect() {
  const url = (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/ws";
  socket = new WebSocket(url);
  socket.onopen = () => ($("conn").textContent = "live");
  socket.onclose = () => {
    $("conn").textContent = "reconnecting…";
    setTimeout(connect, 1500);
  };
  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.t === "s") {
      snap = data;
      paintHud(data);
    }
  };
}

const send = (message) => {
  if (socket && socket.readyState === 1) socket.send(JSON.stringify(message));
};

// ------------------------------------------------------------------- input

addEventListener("keydown", (event) => {
  if (event.target instanceof HTMLInputElement) return;
  if (event.code === "KeyB") {
    toggleBuy();
    event.preventDefault();
    return;
  }
  if (KEY_SLOT[event.code]) {
    send({ t: "i", c: KEY_SLOT[event.code] });
    event.preventDefault();
    return;
  }
  keys.add(event.code);
  if (["KeyW", "KeyA", "KeyS", "KeyD", "Space", "KeyF", "KeyR"].includes(event.code)) event.preventDefault();
});
addEventListener("keyup", (event) => keys.delete(event.code));
addEventListener("blur", () => keys.clear());

view.addEventListener("pointermove", (event) => {
  if (event.pointerType === "touch") return;
  const box = view.getBoundingClientRect();
  pointer = { x: ((event.clientX - box.left) / box.width) * view.width, y: ((event.clientY - box.top) / box.height) * view.height };
});
view.addEventListener("pointerdown", (event) => {
  view.setPointerCapture(event.pointerId);
  const box = view.getBoundingClientRect();
  const x = event.clientX - box.left;
  if (event.pointerType === "touch") {
    if (x < box.width / 2) stick = { id: event.pointerId, ox: event.clientX, oy: event.clientY, mx: 0, my: 0 };
    else {
      aimTouch = { id: event.pointerId, x: ((event.clientX - box.left) / box.width) * view.width, y: ((event.clientY - box.top) / box.height) * view.height };
      firing = true;
    }
    event.preventDefault();
    return;
  }
  pointer = { x: ((event.clientX - box.left) / box.width) * view.width, y: ((event.clientY - box.top) / box.height) * view.height };
  firing = true;
});
view.addEventListener("pointermove", (event) => {
  if (stick && event.pointerId === stick.id) {
    const dx = event.clientX - stick.ox;
    const dy = event.clientY - stick.oy;
    const len = Math.hypot(dx, dy) || 1;
    const reach = Math.min(len, 48) / 48;
    stick.mx = (dx / len) * reach;
    stick.my = (dy / len) * reach;
  }
  if (aimTouch && event.pointerId === aimTouch.id) {
    const box = view.getBoundingClientRect();
    aimTouch.x = ((event.clientX - box.left) / box.width) * view.width;
    aimTouch.y = ((event.clientY - box.top) / box.height) * view.height;
  }
});
const endPointer = (event) => {
  if (stick && event.pointerId === stick.id) stick = null;
  else if (aimTouch && event.pointerId === aimTouch.id) {
    aimTouch = null;
    firing = false;
  } else firing = false;
};
view.addEventListener("pointerup", endPointer);
view.addEventListener("pointercancel", endPointer);
view.addEventListener("contextmenu", (event) => event.preventDefault());

// The buy opens itself every buy phase; closing it is remembered until the
// next one, so nobody has to fight the panel to watch the round start.
function toggleBuy() {
  const open = $("buy").classList.toggle("on");
  $("buy").dataset.closed = open ? "" : "1";
}
$("buytoggle").addEventListener("click", toggleBuy);
for (const button of document.querySelectorAll("[data-buy]"))
  button.addEventListener("click", () => send({ t: "buy", what: button.dataset.buy }));
for (const button of document.querySelectorAll("[data-agent]"))
  button.addEventListener("click", () => send({ t: "agent", id: button.dataset.agent }));

// Twenty times a second the server hears what this person is doing.
setInterval(() => {
  if (!snap || !map) return;
  let mx = 0;
  let my = 0;
  if (keys.has("KeyW")) my -= 1;
  if (keys.has("KeyS")) my += 1;
  if (keys.has("KeyA")) mx -= 1;
  if (keys.has("KeyD")) mx += 1;
  if (stick) {
    mx = stick.mx;
    my = stick.my;
  }
  const aim = aimTouch || pointer;
  const me = worldToScreen(snap.me);
  const angle = aim ? Math.atan2(aim.y - me.y, aim.x - me.x) : snap.me.angle;
  send({
    t: "i",
    mx,
    my,
    a: angle,
    f: firing || keys.has("Space"),
    u: keys.has("KeyF"),
    r: keys.has("KeyR"),
  });
}, 50);

// ------------------------------------------------------------------ drawing

function resize() {
  const box = view.getBoundingClientRect();
  const dpr = Math.min(devicePixelRatio || 1, 2);
  view.width = Math.round(box.width * dpr);
  view.height = Math.round(box.height * dpr);
}
addEventListener("resize", resize);

const scale = () => (map ? view.width / (map.rows[0].length * map.tile) : 1);
const worldToScreen = (p) => ({ x: p.x * scale(), y: p.y * scale() });

function smooth(id, x, y, angle) {
  const now = shown.get(id);
  if (!now) {
    shown.set(id, { x, y, angle });
    return { x, y, angle };
  }
  now.x += (x - now.x) * 0.35;
  now.y += (y - now.y) * 0.35;
  let turn = ((angle - now.angle + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
  now.angle += turn * 0.4;
  return now;
}

function drawMap(s) {
  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 =
        cell === "#" ? "#20242d" : cell === "A" || cell === "B" ? "#2c2a22" : cell === "a" ? "#2a2024" : cell === "d" ? "#1e2630" : "#171a21";
      ctx.fillRect(col * t, row * t, t + 0.6, t + 0.6);
      if (cell === "A" || cell === "B") {
        ctx.fillStyle = "#6b5f3a";
        ctx.font = `${Math.round(t * 0.5)}px system-ui`;
        ctx.fillText(cell, col * t + t * 0.3, row * t + t * 0.68);
      }
    }
}

function drawZone(z, s) {
  const x = z.x * s;
  const y = z.y * s;
  const r = z.r * s;
  ctx.save();
  if (z.k === "smoke") {
    ctx.fillStyle = "rgba(190,195,205,0.72)";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 7);
    ctx.fill();
  } else if (z.k === "molly") {
    ctx.fillStyle = "rgba(230,110,50,0.45)";
    ctx.strokeStyle = "#f08a4b";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 7);
    ctx.fill();
    ctx.stroke();
  } else if (z.k === "wall") {
    ctx.fillStyle = "rgba(120,200,255,0.55)";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 7);
    ctx.fill();
  } else if (z.k === "flash") {
    ctx.fillStyle = z.f > 0 ? "#ffe9a8" : "rgba(255,255,255,0.9)";
    ctx.beginPath();
    ctx.arc(x, y, z.f > 0 ? 5 * s : 30 * s, 0, 7);
    ctx.fill();
  } else if (z.k === "dart") {
    ctx.strokeStyle = "rgba(90,220,170,0.7)";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 7);
    ctx.stroke();
  } else if (z.k === "trip") {
    ctx.strokeStyle = "rgba(230,200,90,0.8)";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 7);
    ctx.stroke();
  } else if (z.k === "heal") {
    ctx.fillStyle = "rgba(120,230,140,0.5)";
    ctx.beginPath();
    ctx.arc(x, y, 14 * s, 0, 7);
    ctx.fill();
  }
  ctx.restore();
}

function drawPlayer(p, s, me) {
  const pos = smooth(p.id, p.x, p.y, p.angle);
  const x = pos.x * s;
  const y = pos.y * s;
  const r = 16 * s;
  const mine = p.id === me.id;
  ctx.fillStyle = p.mate ? (mine ? "#eaeaea" : "#4fb3d9") : "#e35d5b";
  if (!p.alive) ctx.fillStyle = "#555a63";
  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 = mine ? "#fff" : ctx.fillStyle;
    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)";
    ctx.beginPath();
    ctx.arc(x, y - r * 1.6, r * 0.35, 0, 7);
    ctx.fill();
  }
  if (!mine) {
    ctx.fillStyle = "rgba(235,235,235,0.75)";
    ctx.font = `${Math.round(11 * Math.max(1, s * 2))}px system-ui`;
    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);
  }
}

function frame() {
  requestAnimationFrame(frame);
  if (!map) return;
  const s = scale();
  ctx.clearRect(0, 0, view.width, view.height);
  drawMap(s);
  if (!snap) return;

  for (const orb of snap.orbs) {
    ctx.fillStyle = "#c9a0ff";
    ctx.beginPath();
    ctx.arc(orb.x * s, orb.y * s, 9 * s, 0, 7);
    ctx.fill();
  }
  for (const zone of snap.zones) if (zone.k !== "smoke") drawZone(zone, s);

  if (snap.spike.x !== null) {
    const x = snap.spike.x * s;
    const y = snap.spike.y * s;
    ctx.fillStyle = snap.spike.planted ? (Math.floor(Date.now() / 250) % 2 ? "#ff5b4a" : "#8a2a22") : "#c8b45c";
    ctx.fillRect(x - 7 * s, y - 7 * s, 14 * s, 14 * s);
    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), 4);
    }
  }

  for (const shot of snap.shots) {
    ctx.strokeStyle = shot.hit ? "rgba(255,120,110,0.85)" : "rgba(255,240,180,0.55)";
    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(player, s, snap.me);
  // Smoke goes on last: it hides what is behind it on screen too.
  for (const zone of snap.zones) if (zone.k === "smoke") drawZone(zone, s);

  if (snap.me.planting > 0) bar(snap.me.planting / 4, "#e0a040", "planting");
  else if (snap.spike.planted && snap.spike.defuse > 0 && snap.me.side === "def") bar(snap.spike.defuse / 7, "#4fd6a0", "defusing");
  $("flash").style.opacity = Math.min(0.95, snap.me.blind * 0.8);
  $("dead").style.display = snap.me.alive ? "none" : "grid";
}

function bar(fraction, colour, label) {
  const w = view.width * 0.4;
  const x = view.width / 2 - w / 2;
  const y = view.height * 0.86;
  ctx.fillStyle = "#0009";
  ctx.fillRect(x, y, w, 16);
  ctx.fillStyle = colour;
  ctx.fillRect(x, y, w * Math.min(1, fraction), 16);
  ctx.fillStyle = "#fff";
  ctx.font = "12px system-ui";
  ctx.textAlign = "center";
  ctx.fillText(label, view.width / 2, y + 12);
  ctx.textAlign = "left";
}

// --------------------------------------------------------------------- hud

const KITS = {};

function paintHud(s) {
  $("clock").textContent = Math.ceil(s.phase === "live" && s.spike.planted ? s.spike.fuse : s.clock);
  document.querySelector("#scoreline .red").textContent = "red " + s.score.red;
  document.querySelector("#scoreline .blue").textContent = s.score.blue + " blue";
  $("phase").textContent =
    `round ${s.round} · ${s.phase === "buy" ? "buy phase" : s.phase === "live" ? (s.spike.planted ? "spike down" : "live") : s.phase === "end" ? "round over" : "match over"} · ${s.attackers} attacking · you are ${s.me.side === "atk" ? "attacking" : "defending"}${s.result ? " · " + s.result : ""}`;
  $("hp").textContent = `${s.me.hp} hp${s.me.armour ? " +" + s.me.armour : ""}`;
  $("gun").textContent = `${s.me.weapon}${s.me.reloading ? " reloading" : " " + s.me.ammo}`;
  $("creds").textContent = `${s.me.credits} cr`;
  $("ultmeter").textContent = `ult ${s.me.ult}/${s.me.ultNeeds}`;
  $("buy").classList.toggle("on", s.phase === "buy" && $("buy").dataset.closed !== "1");
  if (s.phase !== "buy") $("buy").dataset.closed = "";

  const kit = $("kit");
  const shape = ["c", "q", "e", "x"].map((slot) => `${slot}${s.me.charges[slot]}${Math.ceil(s.me.cooldown[slot])}`).join("|") + s.me.agent + s.me.ult;
  if (KITS.shape !== shape) {
    KITS.shape = shape;
    kit.innerHTML = "";
    for (const slot of ["c", "q", "e", "x"]) {
      const button = document.createElement("button");
      const ready = slot === "x" ? s.me.ult >= s.me.ultNeeds : s.me.charges[slot] > 0 && s.me.cooldown[slot] <= 0;
      button.disabled = !ready;
      const count = slot === "x" ? `${s.me.ult}/${s.me.ultNeeds}` : s.me.cooldown[slot] > 0 ? `${Math.ceil(s.me.cooldown[slot])}s` : s.me.charges[slot];
      button.innerHTML = `${slot.toUpperCase()} <b>${count}</b>`;
      button.type = "button";
      button.addEventListener("click", () => send({ t: "i", c: slot }));
      kit.append(button);
    }
  }

  const log = $("log");
  const text = s.events.slice(0, 3).join("\n");
  if (log.dataset.text !== text) {
    log.dataset.text = text;
    log.innerHTML = "";
    for (const line of s.events.slice(0, 3)) {
      const div = document.createElement("div");
      div.textContent = line;
      log.append(div);
    }
  }

  for (const side of ["atk", "def"]) {
    const body = $(side + "board");
    const rows = s.board.filter((p) => p.side === side).sort((a, b) => b.kills - a.kills);
    const key = rows.map((p) => `${p.name}${p.kills}${p.deaths}${p.alive}${p.credits}`).join();
    if (body.dataset.key === key) continue;
    body.dataset.key = key;
    body.innerHTML = "";
    for (const player of rows) {
      const tr = document.createElement("tr");
      const cells = [
        player.name + (player.bot ? " (bot)" : "") + (player.alive ? "" : " ✕"),
        player.agent + (player.credits !== null ? ` · ${player.credits}cr` : ""),
        String(player.kills),
        String(player.deaths),
      ];
      for (const value of cells) {
        const td = document.createElement("td");
        td.textContent = value;
        tr.append(td);
      }
      if (player.id === s.me.id) tr.style.fontWeight = "700";
      body.append(tr);
    }
  }
}

fetch("/map.json")
  .then((r) => r.json())
  .then((data) => {
    map = data;
    resize();
    connect();
  });
requestAnimationFrame(frame);