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

/**

 * Watching.

 *

 * A connection the server gave no seat — one that carried no session the page

 * minted, or a second client from an address that already holds a seat — is

 * sent a snapshot with no `me` and no players: the score, the round, the

 * clock and the kill feed, and nothing at all that says where anybody is.

 * That is the whole point of it, so this view draws no map and no bodies. It

 * says what the match is doing and why this connection is only watching.

 */

/** Is this a snapshot for a connection that has no seat? */

export const watching = (snap) => Boolean(snap) && (snap.spectator === true || !snap.me);

// Why the server handed this connection no seat. It says which, because the

// two have different answers: open the tab that is playing, or let the page

// keep its cookie.

const WHY = {

  address: "Somebody at this address is already playing — that tab holds the seat, and this one watches.",

  cookie: "This browser did not send the session cookie the page sets, so there is no seat to give it.",

};

const WHY_UNSAID = "This connection has no seat, so it is watching the match.";

const PHASE = { buy: "buy phase", live: "live", end: "round over" };

/** What the watching view says, in order. Plain strings, nothing drawn. */

export function watchLines(snap) {

  const score = snap.score ?? { red: 0, blue: 0 };

  return {

    title: "watching",

    why: WHY[snap.why] ?? WHY_UNSAID,

    phase: `round ${snap.round ?? 1} · ${PHASE[snap.phase] ?? "match over"} · ${snap.attackers ?? "—"} attacking${snap.result ? " · " + snap.result : ""}`,

    score: `red ${score.red ?? 0} — ${score.blue ?? 0} blue`,

    clock: `${Math.ceil(Math.max(0, Number(snap.clock) || 0))}s`,

    note: "No map and no bodies: a watching connection is never told where anybody is.",

  };

}

/** Break a line at the last space that still fits, measured by the canvas. */

export function wrap(ctx, text, maxWidth) {

  const lines = [];

  let line = "";

  for (const word of String(text).split(" ")) {

    const tried = line ? `${line} ${word}` : word;

    if (line && ctx.measureText(tried).width > maxWidth) {

      lines.push(line);

      line = word;

    } else line = tried;

  }

  if (line) lines.push(line);

  return lines;

}

/**

 * The view itself: the score, the round, the clock, and the sentence that

 * says why this connection is watching. Centred on a flat panel, because

 * there is no world here to stand it on.

 */

export function drawWatching(ctx, snap, width, height) {

  const lines = watchLines(snap);

  const mid = width / 2;

  const unit = Math.min(width / 900, height / 570);

  ctx.fillStyle = "#0b0d11";

  ctx.fillRect(0, 0, width, height);

  ctx.textAlign = "center";

  ctx.fillStyle = "#8b93a5";

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

  ctx.fillText(lines.title, mid, height * 0.3);

  ctx.fillStyle = "#e7e9ee";

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

  ctx.fillText(lines.score, mid, height * 0.42);

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

  ctx.fillText(lines.clock, mid, height * 0.52);

  ctx.fillStyle = "#b9c0cf";

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

  ctx.fillText(lines.phase, mid, height * 0.6);

  ctx.fillStyle = "#8b93a5";

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

  let y = height * 0.7;

  for (const line of [...wrap(ctx, lines.why, width * 0.8), ...wrap(ctx, lines.note, width * 0.8)]) {

    ctx.fillText(line, mid, y);

    y += 24 * unit;

  }

  ctx.textAlign = "left";

  return lines;

}