Earthquake location from three seismograms: circles, S minus P, and the misfit

// game.js: locate an earthquake under the San Francisco Bay Area from the S minus P delays on
// three or four seismograms. Units: km and s. The notebook writes the coastline, the stations,
// the records, and the answers into the #data element.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const {vp, vs} = DATA.speeds;
const K = (vp * vs) / (vp - vs);    // km of distance per s of S minus P: 8.4
const CELL = 6;                     // CSS px per cell of the misfit landscape
const LEVELS = [1, 2, 5];           // km, the landscape's contours
const FONT = "14px system-ui, sans-serif";
const $ = (id) => document.getElementById(id);
const stationsOf = (r) => DATA.rounds[r - 1].stations.map((code) => DATA.stations[code]);

// ---- the state: everything that changes, in one object; a round starts from its defaults
function defaults(r) {
  const S = stationsOf(r), mean = (key) => S.reduce((sum, s) => sum + s[key], 0) / S.length;
  return {round: r, clock: DATA.rounds[r - 1].record.length, playing: false, radius: S.map(() => 10),
    epi: [mean("x"), mean("y")], depth: 0, landscape: false, answer: false};
}
const state = defaults(1);
const R = () => DATA.rounds[state.round - 1];

// ---- one tick: the record clock follows real time, capped so that a background tab does not jump
function tick(dt) {
  state.clock += Math.min(dt, 0.05);
  if (state.clock >= R().record.length) {
    state.clock = R().record.length;
    state.playing = false;
  }
}

// ---- the misfit: RMS gap in km between a trial epicenter and the circles
const surfaceRadius = (r, z) => Math.sqrt(Math.max(r * r - z * z, 0));   // the circle on the map
function misfit(epi, radius, depth, stations) {
  let sum = 0;
  stations.forEach((s, i) => {
    const d = Math.hypot(epi[0] - s.x, epi[1] - s.y, depth);           // hypocentral distance
    sum += (radius[i] - d) ** 2;
  });
  return Math.sqrt(sum / stations.length);
}

// ---- layout: map and records sized to the frame; upright, wide, or short (a phone held sideways)
const mapCanvas = $("map"), recCanvas = $("rec");
const mctx = mapCanvas.getContext("2d"), rctx = recCanvas.getContext("2d");
let view = {};                      // sizes and the map's km-to-px transform, set by layout()
let landLayer = null;               // the land, drawn once per layout
let fog = {key: null};              // the landscape, kept until a circle, the depth, or the size changes

function fit(canvas, w, h) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = Math.round(w * dpr);
  canvas.height = Math.round(h * dpr);
  canvas.style.width = `${w}px`;
  canvas.style.height = `${h}px`;
  canvas.getContext("2d").setTransform(dpr, 0, 0, dpr, 0, 0);
}

function layout() {
  const W = document.documentElement.clientWidth, H = document.documentElement.clientHeight;
  const mode = H > W ? "upright" : H < 420 && W >= 600 ? "short" : "wide";
  const n = R().stations.length, axis = 24, box = $("mapbox"), rec = $("recbox"), side = $("side");
  document.body.className = `${mode}${R().depth ? " deep" : ""}`;
  const mw = mode === "upright" ? W : Math.round(Math.min(H, 0.56 * W));
  box.style.width = `${mw}px`;
  view.mode = mode;
  view.narrow = side.clientWidth < 420;               // a narrow side panel: shorter words, more lines
  const lines = mode === "upright" ? 1 : R().depth && view.narrow ? 3 : 2;
  $("answer-line").style.minHeight = `${1.3 * lines}em`;   // kept free: no jump when the answer shows
  updateControls();
  drawNumbers();                                      // the text in place before measuring
  let mh, rh;
  if (mode === "upright") {
    rh = n * 36 + axis;
    rec.style.height = `${rh}px`;
    mh = Math.max(200, H - side.offsetHeight);
  } else {
    mh = H;
    rec.style.height = "0px";                        // measure the rest, then give the records what is left
    const used = Math.max(...[...side.children].map((c) => c.getBoundingClientRect().bottom));
    rh = Math.min(n * 140 + axis, Math.max(n * 30 + axis, H - used - 10));
    rec.style.height = `${rh}px`;
  }
  box.style.height = `${mh}px`;
  fit(mapCanvas, mw, mh);
  fit(recCanvas, rec.clientWidth, rh);
  const [x0, x1, y0, y1] = R().view;
  const scale = Math.min(mw / (x1 - x0), mh / (y1 - y0));   // px per km: the round's view box fits
  rctx.font = FONT;
  const col = Math.ceil(rctx.measureText("000.00 s").width) + 10;   // the readouts' column
  view = {...view, mw, mh, rw: rec.clientWidth, rh, axis, col, scale, cx: (x0 + x1) / 2, cy: (y0 + y1) / 2};
  landLayer = drawLand();
  fog.key = null;
  render();
}

const toPx = (x, y) => [view.mw / 2 + (x - view.cx) * view.scale, view.mh / 2 - (y - view.cy) * view.scale];
const toKm = (px, py) => [view.cx + (px - view.mw / 2) / view.scale, view.cy - (py - view.mh / 2) / view.scale];
const color = (name) => getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();

function layer() {                                    // an offscreen canvas the size of the map
  const c = document.createElement("canvas"), dpr = window.devicePixelRatio || 1;
  c.width = mapCanvas.width;
  c.height = mapCanvas.height;
  const ctx = c.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  return [c, ctx];
}

function drawLand() {                                 // water a muted tint, land the page, coast in ink
  const [c, ctx] = layer();
  ctx.fillStyle = color("bg");
  ctx.fillRect(0, 0, view.mw, view.mh);
  ctx.globalAlpha = 0.18;
  ctx.fillStyle = color("muted");
  ctx.fillRect(0, 0, view.mw, view.mh);
  ctx.globalAlpha = 1;
  ctx.beginPath();
  for (const ring of DATA.land) {
    for (let k = 0; k < ring.length; k += 2) ctx[k ? "lineTo" : "moveTo"](...toPx(ring[k], ring[k + 1]));
    ctx.closePath();
  }
  ctx.fillStyle = color("bg");
  ctx.fill();
  ctx.strokeStyle = color("ink");
  ctx.lineWidth = 1;
  ctx.stroke();
  return c;
}

// The landscape: the misfit at the center of every cell, a fog that thickens away from the floor,
// and contours by marching squares (in each square of four cell centers, join the edge crossings).
const CORNER = [[0, 0], [1, 0], [1, 1], [0, 1]];
function drawFog() {
  const cols = Math.ceil(view.mw / CELL), rows = Math.ceil(view.mh / CELL), S = stationsOf(state.round);
  const m = new Float64Array(cols * rows);
  for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) {
    m[j * cols + i] = misfit(toKm((i + 0.5) * CELL, (j + 0.5) * CELL), state.radius, state.depth, S);
  }
  // the fog: one pixel per cell, then stretched with smoothing, so that it has no steps
  const floor = Math.min(...m), [c, ctx] = layer(), small = document.createElement("canvas");
  small.width = cols;
  small.height = rows;
  const img = new ImageData(cols, rows), ink = color("ink").match(/[0-9a-f]{2}/gi).map((h) => parseInt(h, 16));
  for (let k = 0; k < m.length; k++) img.data.set([...ink, 255 * Math.min(0.55, 0.14 * Math.log1p(m[k] - floor))], 4 * k);
  small.getContext("2d").putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = true;
  ctx.drawImage(small, 0, 0, cols * CELL, rows * CELL);
  ctx.strokeStyle = color("muted");
  ctx.lineWidth = 1.2;
  ctx.beginPath();
  const labels = LEVELS.map((level) => ({level, x0: Infinity, x1: -Infinity, at: null}));
  for (const label of labels) for (let j = 0; j < rows - 1; j++) for (let i = 0; i < cols - 1; i++) {
    const level = label.level;
    const v = CORNER.map(([di, dj]) => m[(j + dj) * cols + i + di]), pts = [];
    for (let e = 0; e < 4; e++) {
      const a = v[e], b = v[(e + 1) % 4], [xa, ya] = CORNER[e], [xb, yb] = CORNER[(e + 1) % 4];
      if ((a < level) === (b < level)) continue;
      const f = (level - a) / (b - a);
      pts.push([(i + 0.5 + xa + f * (xb - xa)) * CELL, (j + 0.5 + ya + f * (yb - ya)) * CELL]);
    }
    for (let k = 0; k + 1 < pts.length; k += 2) {
      ctx.moveTo(...pts[k]);
      ctx.lineTo(...pts[k + 1]);
    }
    for (const [x, y] of pts) {                     // the label goes where the contour reaches farthest to the lower left
      label.x0 = Math.min(label.x0, x);
      label.x1 = Math.max(label.x1, x);
      if (!label.at || y - x > label.at[1] - label.at[0]) label.at = [x, y];
    }
  }
  ctx.stroke();
  return {layer: c, labels: labels.filter((l) => l.x1 - l.x0 >= 60)};   // too small a contour stays unlabeled
}

// ---- drawing the map
function knob(s, rho, epi) {                          // the visible rim point farthest from the cross
  let best = null;
  for (let k = 0; k < 120; k++) {
    const t = (k * Math.PI) / 60, [px, py] = toPx(s.x + rho * Math.cos(t), s.y + rho * Math.sin(t));
    const far = Math.hypot(px - epi[0], py - epi[1]);
    if (px > 10 && px < view.mw - 10 && py > 10 && py < view.mh - 10 && (!best || far > best[2])) best = [px, py, far];
  }
  return best;
}

function text(ctx, str, x, y, fill, align = "left") {   // text with a halo in the page color
  ctx.textAlign = align;
  ctx.lineWidth = 3;
  ctx.strokeStyle = color("bg");
  ctx.strokeText(str, x, y);
  ctx.fillStyle = fill;
  ctx.fillText(str, x, y);
}

function drawMap() {
  const ctx = mctx, S = stationsOf(state.round), A = R().answer, rec = R().record;
  const ink = color("ink"), second = color("second"), accent = color("accent"), muted = color("muted");
  ctx.drawImage(landLayer, 0, 0, view.mw, view.mh);
  if (state.landscape) {
    const key = [state.round, state.depth, ...state.radius, view.mw, view.mh].join();
    if (fog.key !== key) fog = {key, ...drawFog()};
    ctx.drawImage(fog.layer, 0, 0, view.mw, view.mh);
  }
  ctx.font = FONT;
  ctx.lineJoin = "round";
  const bar = 10 * view.scale;                        // the scale bar
  ctx.fillStyle = color("bg");                        // a halo, so that the bar shows in the fog
  ctx.fillRect(10, view.mh - 16, bar + 4, 6);
  ctx.fillStyle = muted;
  ctx.fillRect(12, view.mh - 14, bar, 2);
  text(ctx, "10 km", 12 + bar / 2, view.mh - 20, muted, "center");
  if (view.mw >= 400) for (const p of DATA.places) {   // place names, kept inside the map
    const [px, py] = toPx(p.x, p.y), half = ctx.measureText(p.name).width / 2 + 4;
    text(ctx, p.name, Math.min(view.mw - half, Math.max(half, px)), py, muted, "center");
  }

  // stations, and a ring that grows and fades as the replay passes each onset, small for P, large for S
  S.forEach((s, i) => {
    const [px, py] = toPx(s.x, s.y);
    for (const [onset, size] of [[rec.p[i], 16], [A.s[i], 30]]) {
      const age = state.clock - onset;
      if (age < 0 || age > 1) continue;
      ctx.globalAlpha = 1 - age;
      ctx.strokeStyle = ink;
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(px, py, 6 + size * age, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.globalAlpha = 1;
    }
    ctx.fillStyle = ink;
    ctx.beginPath();
    ctx.moveTo(px, py - 8);
    ctx.lineTo(px + 7, py + 5);
    ctx.lineTo(px - 7, py + 5);
    ctx.fill();
    const right = px < view.mw - 50;                  // codes beside the station, inside the map
    text(ctx, R().stations[i], right ? px + 9 : px - 9, py - 6, ink, right ? "left" : "right");
  });

  // the circles at their surface radius, each with a knob; a circle smaller than the depth is a ring
  const [ex, ey] = toPx(...state.epi);
  view.knobs = S.map((s, i) => {
    const rho = surfaceRadius(state.radius[i], state.depth), [px, py] = toPx(s.x, s.y);
    ctx.strokeStyle = second;
    ctx.lineWidth = 1.6;
    ctx.beginPath();
    ctx.arc(px, py, rho > 0 ? rho * view.scale : 11, 0, 2 * Math.PI);
    ctx.stroke();
    const k = rho > 0 ? knob(s, rho, [ex, ey]) : null;
    if (k) {
      ctx.fillStyle = second;
      ctx.beginPath();
      ctx.arc(k[0], k[1], 7, 0, 2 * Math.PI);
      ctx.fill();
    }
    return k;
  });
  if (state.landscape) for (const {level, at: [x, y]} of fog.labels) {   // over the circles, under the answer
    text(ctx, `${level} km`, Math.min(view.mw - 24, Math.max(24, x)), Math.min(view.mh - 6, Math.max(18, y + 5)), muted, "center");
  }

  if (state.answer) {                                 // least squares, its 95 % ellipse, and the truth
    const [lx, ly] = toPx(A.ls[0], A.ls[1]), th = (A.ellipse.angle_deg * Math.PI) / 180;
    ctx.strokeStyle = accent;
    ctx.lineWidth = 1.6;
    ctx.beginPath();
    for (let k = 0; k <= 72; k++) {
      const t = (k * Math.PI) / 36, u = A.ellipse.a * Math.cos(t), v = A.ellipse.b * Math.sin(t);
      ctx.lineTo(...toPx(A.ls[0] + u * Math.cos(th) - v * Math.sin(th), A.ls[1] + u * Math.sin(th) + v * Math.cos(th)));
    }
    ctx.stroke();
    ctx.fillStyle = accent;
    ctx.beginPath();
    ctx.arc(lx, ly, 4, 0, 2 * Math.PI);
    ctx.fill();
    text(ctx, "least squares", lx + 8, ly + 18, accent);
    const [tx, ty] = toPx(A.truth[0], A.truth[1]);
    ctx.strokeStyle = muted;
    ctx.setLineDash([3, 3]);
    ctx.beginPath();
    ctx.arc(tx, ty, 7, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.setLineDash([]);
    text(ctx, "true", tx - 10, ty - 8, muted, "right");
  }

  ctx.lineCap = "round";                              // the cross: a halo, then the line
  for (const [w, c] of [[5, color("bg")], [2.2, second]]) {
    ctx.strokeStyle = c;
    ctx.lineWidth = w;
    ctx.beginPath();
    ctx.moveTo(ex - 9, ey - 9); ctx.lineTo(ex + 9, ey + 9);
    ctx.moveTo(ex - 9, ey + 9); ctx.lineTo(ex + 9, ey - 9);
    ctx.stroke();
  }
  ctx.lineCap = "butt";
}

// ---- drawing the records: one row per station on the round's clock, P tick, S mark, and in a
// column of their own at the right the readouts, S minus P and the radius it gives
const GUTTER = 48;
const traceWidth = () => view.rw - GUTTER - view.col;
const timeToPx = (t) => GUTTER + (t / R().record.length) * traceWidth();
const rowHeight = () => (view.rh - view.axis) / R().stations.length;

function drawRecords() {
  const ctx = rctx, rec = R().record, A = R().answer, h = rowHeight();
  const ink = color("ink"), second = color("second"), muted = color("muted");
  ctx.clearRect(0, 0, view.rw, view.rh);
  ctx.font = FONT;
  ctx.lineJoin = "round";
  const upto = Math.round(state.clock * rec.rate);
  rec.traces.forEach((trace, i) => {
    const mid = (i + 0.5) * h, amp = 0.42 * h;
    text(ctx, R().stations[i], 4, mid + 5, ink);
    ctx.strokeStyle = ink;
    ctx.lineWidth = 1;
    ctx.beginPath();
    for (let k = 0; k < Math.min(upto, trace.length); k++) ctx.lineTo(timeToPx(k / rec.rate), mid - amp * trace[k]);
    ctx.stroke();
    const tick = (t, c, label, w) => {
      const x = timeToPx(t);
      ctx.fillStyle = c;
      ctx.fillRect(x - w / 2, i * h + 3, w, h - 6);
      text(ctx, label, x + 3, i * h + 15, c);
    };
    tick(rec.p[i], muted, "P", 1);
    if (state.answer) tick(A.s[i], muted, "", 1);
    const sMark = Math.min(rec.length, rec.p[i] + state.radius[i] / K);
    tick(sMark, second, "S", 2.5);
    text(ctx, `${(state.radius[i] / K).toFixed(2)} s`, view.rw - 4, mid - 2, second, "right");
    text(ctx, `${state.radius[i].toFixed(1)} km`, view.rw - 4, mid + 12, second, "right");
  });
  if (state.clock < rec.length) {                     // the replay's present
    ctx.fillStyle = muted;
    ctx.fillRect(timeToPx(state.clock), 0, 1, view.rh - view.axis);
  }
  const y = view.rh - view.axis + 2;                  // the time axis
  ctx.fillStyle = muted;
  ctx.fillRect(GUTTER, y, traceWidth(), 1);
  for (let t = 0; t <= rec.length; t++) {
    ctx.fillRect(timeToPx(t), y, 1, t % 2 ? 3 : 5);
    if (t % 2 === 0 && timeToPx(t) < view.rw - 70) text(ctx, String(t), timeToPx(t), y + 18, muted, "center");
  }
  text(ctx, "time / s", view.rw - 4, y + 18, muted, "right");
}

// ---- the numbers and the controls
function insideEllipse(p, A) {
  const th = (A.ellipse.angle_deg * Math.PI) / 180, dx = p[0] - A.ls[0], dy = p[1] - A.ls[1];
  const u = dx * Math.cos(th) + dy * Math.sin(th), v = -dx * Math.sin(th) + dy * Math.cos(th);
  return (u / A.ellipse.a) ** 2 + (v / A.ellipse.b) ** 2 <= 1;
}

// A button whose label changes holds all its labels, the spare ones hidden but as wide as they are,
// so that no label moves a control: "Pause" is wider than "Play"
function labels(button, texts, shown) {
  if (button.dataset.texts !== texts.join("|")) {
    button.replaceChildren(...texts.map((t) => Object.assign(document.createElement("span"), {textContent: t})));
    button.dataset.texts = texts.join("|");
  }
  [...button.children].forEach((span, k) => { span.className = k === shown ? "" : "spare"; });
}

function updateControls() {
  const compact = view.mode !== "wide" || view.narrow;
  labels($("play"), ["Play", "Pause"], Number(state.playing));
  $("land").setAttribute("aria-pressed", String(state.landscape));
  labels($("ans"), compact ? ["Answer", "Hide"] : ["Show answer", "Hide answer"], Number(state.answer));
  document.querySelectorAll("[data-round]").forEach((b) => b.setAttribute("aria-pressed", String(+b.dataset.round === state.round)));
  $("title").textContent = R().name;
  $("depth").value = state.depth;
  $("depth-val").textContent = `${state.depth.toFixed(1)} km`;
}

function drawNumbers() {                             // the answer line: one line upright, else two or three
  const S = stationsOf(state.round), A = R().answer;
  $("misfit").textContent = `misfit ${misfit(state.epi, state.radius, state.depth, S).toFixed(2)} km`;
  let lines = [];
  if (state.answer) {
    const d = Math.hypot(state.epi[0] - A.ls[0], state.epi[1] - A.ls[1]).toFixed(1);
    const where = insideEllipse(state.epi, A) ? "inside" : "outside";
    const depth = `depth ${A.ls[2].toFixed(1)} ± ${A.depth95.toFixed(1)} km`;
    const cross = `cross ${d} km from least squares`, ellipse = `${where} the 95 % ellipse`;
    if (view.mode === "upright") {
      lines = [R().depth ? `${depth} · cross ${d} km off, ${where}` : `${d} km from least squares · ${where}`];
    } else if (R().depth) {
      lines = view.narrow ? [`${depth}, true ${A.truth[2]} km`, cross, ellipse] : [`${cross} · ${ellipse}`, `${depth}, true ${A.truth[2]} km`];
    } else {
      lines = view.narrow ? [cross, ellipse] : [`${cross} · ${ellipse}`, `semi-axes ${A.ellipse.a.toFixed(1)} and ${A.ellipse.b.toFixed(1)} km`];
    }
  }
  $("answer-line").textContent = lines.join("\n");
}

function render() {
  updateControls();
  drawMap();
  drawRecords();
  drawNumbers();
}

// ---- set: merge a partial state; a new round loads its defaults first
function set(partial) {
  const newRound = partial.round !== undefined && partial.round !== state.round;
  if (newRound) Object.assign(state, defaults(partial.round));
  Object.assign(state, partial);
  if (newRound) layout();
  else render();
}
const togglePlay = () => set({playing: !state.playing, clock: state.clock >= R().record.length ? 0 : state.clock});
const reset = () => { Object.assign(state, defaults(state.round)); render(); };
const deepen = (dz) => { if (R().depth) set({depth: Math.min(25, Math.max(0, state.depth + dz))}); };

$("play").addEventListener("click", togglePlay);
$("land").addEventListener("click", () => set({landscape: !state.landscape}));
$("ans").addEventListener("click", () => set({answer: !state.answer}));
$("reset").addEventListener("click", reset);
document.querySelectorAll("[data-round]").forEach((b) => b.addEventListener("click", () => set({round: +b.dataset.round})));
$("depth").addEventListener("input", (e) => set({depth: Number(e.target.value)}));
$("shallower").addEventListener("click", () => deepen(-0.5));
$("deeper").addEventListener("click", () => deepen(0.5));
document.addEventListener("keydown", (e) => {
  const actions = {" ": togglePlay, l: () => set({landscape: !state.landscape}), a: () => set({answer: !state.answer}),
    r: reset, 1: () => set({round: 1}), 2: () => set({round: 2}), 3: () => set({round: 3}),
    "-": () => deepen(-0.5), "+": () => deepen(0.5), "=": () => deepen(0.5)};
  const act = actions[e.key.toLowerCase()];
  const native = e.target instanceof HTMLButtonElement && e.key === " ";   // the focused button handles it
  if (act && !native && !e.ctrlKey && !e.metaKey) {
    e.preventDefault();
    act();
  }
});

// ---- dragging, by finger or mouse: a handle moves by the pointer's motion, so the finger
// never covers the point it places; the cross wins over a circle where both are within reach
let drag = null;
const at = (e, canvas) => {
  const box = canvas.getBoundingClientRect();
  return [e.clientX - box.left, e.clientY - box.top];
};

mapCanvas.addEventListener("pointerdown", (e) => {
  const p = at(e, mapCanvas), coarse = e.pointerType !== "mouse", S = stationsOf(state.round);
  const [ex, ey] = toPx(...state.epi);
  if (Math.hypot(p[0] - ex, p[1] - ey) <= (coarse ? 22 : 12)) {
    drag = {kind: "epi", start: p, epi: [...state.epi]};
  } else {
    let best = null;                                  // the nearest rim within the band
    S.forEach((s, i) => {
      const rho = surfaceRadius(state.radius[i], state.depth), [px, py] = toPx(s.x, s.y);
      const gap = Math.abs(Math.hypot(p[0] - px, p[1] - py) - rho * view.scale);
      if (rho > 0 && gap <= (coarse ? 14 : 8) && (!best || gap < best.gap)) best = {i, gap};
    });
    if (!best) return;
    const [x, y] = toKm(...p), s = S[best.i];
    drag = {kind: "circle", i: best.i, offset: surfaceRadius(state.radius[best.i], state.depth) - Math.hypot(x - s.x, y - s.y)};
  }
  mapCanvas.setPointerCapture(e.pointerId);
  e.preventDefault();
});

mapCanvas.addEventListener("pointermove", (e) => {
  if (!drag) return;
  const p = at(e, mapCanvas);
  if (drag.kind === "epi") {
    state.epi = [drag.epi[0] + (p[0] - drag.start[0]) / view.scale, drag.epi[1] - (p[1] - drag.start[1]) / view.scale];
  } else {
    const s = stationsOf(state.round)[drag.i], [x, y] = toKm(...p);
    const rho = Math.max(0, Math.hypot(x - s.x, y - s.y) + drag.offset);
    state.radius[drag.i] = Math.hypot(rho, state.depth);     // r² = ρ² + z²
  }
  render();
});

recCanvas.addEventListener("pointerdown", (e) => {
  const p = at(e, recCanvas), i = Math.floor(p[1] / rowHeight()), rec = R().record;
  if (i >= rec.p.length) return;
  const s0 = rec.p[i] + state.radius[i] / K;
  if (Math.abs(p[0] - timeToPx(s0)) > (e.pointerType === "mouse" ? 8 : 22)) return;   // not on an S mark: let it scroll
  drag = {kind: "s", i, start: p[0], s0};
  recCanvas.setPointerCapture(e.pointerId);
});

recCanvas.addEventListener("pointermove", (e) => {
  if (!drag || drag.kind !== "s") return;
  const rec = R().record, pOnset = rec.p, i = drag.i, pxPerS = traceWidth() / rec.length;
  const sMark = Math.min(rec.length, Math.max(pOnset[i], drag.s0 + (at(e, recCanvas)[0] - drag.start) / pxPerS));
  state.radius[i] = K * (sMark - pOnset[i]);                  // r = 8.4 km/s × (t_S − t_P)
  render();
});

for (const canvas of [mapCanvas, recCanvas]) {
  for (const type of ["pointerup", "pointercancel"]) canvas.addEventListener(type, () => { drag = null; });
}

// ---- the loop: only a replay moves by itself; everything else redraws when it changes
let last = null;
function frame(now) {
  const dt = last === null ? 0 : (now - last) / 1000;
  last = now;
  if (state.playing) {
    tick(dt);
    render();
  }
  requestAnimationFrame(frame);
}

window.addEventListener("resize", layout);
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", layout);
layout();
requestAnimationFrame(frame);
window.game = {state, set, render};