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

/**

 * The banner: the one moment a round turns, said big, on the view itself.

 *

 * Somebody sitting down in front of the game for two minutes meets a round

 * ending before they meet anything else, and the view used to freeze with no

 * word of who took it or why — the answer was three lines below the canvas at

 * eighty percent opacity. So for the few seconds a round is over, the match is

 * over, or a round is starting, the view carries a title and one line under

 * it. A pure function decides the words; the drawing is a band and two texts.

 */

import { roundOutcome } from "./prompt.js";

/** The buy phase is fourteen seconds; the round card shows for its first three. */

const BUY_TIME = 14;

const CARD_FOR = 3;

const FADE = 0.5;

const secs = (n) => Math.max(0, Math.ceil(n));

/**

 * What the banner says right now, or null for nothing. `alpha` is how solid it

 * is: a card that leaves by fading is not a card that blinked off.

 */

export function banner(snap) {

  if (!snap) return null;

  if (snap.phase === "over")

    return {

      title: snap.result ? `${snap.result}` : "Match over",

      sub: `match over · a new match starts in ${secs(snap.clock)}s`,

      alpha: 1,

    };

  if (snap.phase === "end") {

    const outcome = roundOutcome(snap);

    const next = `next round in ${secs(snap.clock)}s`;

    if (!outcome) return { title: "Round over", sub: next, alpha: 1 };

    return { title: outcome.title, sub: `${outcome.why} · ${next}`, alpha: 1 };

  }

  if (snap.phase === "buy" && snap.me) {

    const shownFor = BUY_TIME - Number(snap.clock);

    if (!(shownFor < CARD_FOR)) return null;

    const alpha = Math.max(0, Math.min(1, (CARD_FOR - shownFor) / FADE));

    const side = snap.me.side === "atk" ? "you attack — plant the spike on A or B" : "you defend — hold A and B";

    return { title: `Round ${snap.round}`, sub: side, alpha };

  }

  return null;

}

/** A dark band across the view with the title and the line under it. */

export function drawBanner(ctx, words, width, height) {

  if (!words || words.alpha <= 0.01) return;

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

  const mid = width / 2;

  const top = height * 0.2;

  const band = 92 * unit;

  ctx.save();

  ctx.globalAlpha = words.alpha;

  ctx.fillStyle = "rgba(8,10,14,0.78)";

  ctx.fillRect(0, top, width, band);

  ctx.textAlign = "center";

  ctx.fillStyle = "#f2f3f6";

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

  ctx.fillText(words.title, mid, top + 44 * unit);

  ctx.fillStyle = "#b9c0cf";

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

  ctx.fillText(words.sub, mid, top + 74 * unit);

  ctx.restore();

}