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

/**

 * The page. The first paint is the match as it stands right now — score,

 * round, phase, scoreboard — server-rendered HTML, so somebody arriving with

 * a cold cache or no JavaScript still sees a live match. The client script

 * then takes the same state over a socket and draws it.

 */

import { AGENTS } from "../abilities.ts";

import type { Result } from "../db.ts";

import type { MatchState } from "../state.ts";

import { WEAPONS, weaponIds } from "../weapons.ts";

export const escape = (s: string): string =>

  s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ?? c);

const phaseWord = (state: MatchState): string =>

  state.phase === "buy"

    ? "buy phase"

    : state.phase === "live"

      ? state.spike.planted

        ? `spike down · ${Math.ceil(state.spike.fuse)}s`

        : "live"

      : state.phase === "end"

        ? "round over"

        : "match over";

export function gamePage(opts: {

  state: MatchState;

  script: string;

  name: string;

  env: string;

  commit: string;

  ssh: string | undefined;

  results: Result[];

}): string {

  const { state } = opts;

  const board = [...state.players].sort((a, b) => b.kills - a.kills);

  const row = (side: "atk" | "def"): string =>

    board

      .filter((p) => p.side === side)

      .map(

        (p) =>

          `<tr><td>${escape(p.name)}${p.bot ? " <small>bot</small>" : ""}</td><td>${escape(p.agent)}</td><td>${p.kills}</td><td>${p.deaths}</td></tr>`,

      )

      .join("");

  return `<!doctype html>

<html lang="en">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<title>val — attack, defend, plant the spike</title>

<link rel="icon" href="data:,">

<style>

  :root { color-scheme: dark; --atk: #e35d5b; --def: #4fb3d9; --ink: #e8e6e3; }

  * { box-sizing: border-box; }

  body { margin: 0; background: #0e0f12; color: var(--ink);

         font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }

  .wrap { max-width: 1100px; margin: 0 auto; padding: .6rem; }

  h1 { font-size: 1.1rem; margin: 0; letter-spacing: .12em; text-transform: uppercase; }

  header.top { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

  .env { font-size: .7rem; padding: .1rem .5rem; border-radius: 99px; background: #2a2d34; }

  #scoreline { display: flex; align-items: center; justify-content: center; gap: .6rem;

               font-variant-numeric: tabular-nums; margin: .4rem 0; font-size: 1.05rem; }

  .red { color: var(--atk); font-weight: 700; } .blue { color: var(--def); font-weight: 700; }

  #clock { font-size: 1.5rem; font-weight: 700; min-width: 3ch; text-align: center; }

  #phase { opacity: .75; font-size: .85rem; }

  #stage { position: relative; width: 100%; aspect-ratio: 30 / 19; background: #14161b;

           border: 1px solid #262a33; border-radius: .6rem; overflow: hidden; touch-action: none; }

  #view { width: 100%; height: 100%; display: block; }

  #flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

  #dead { position: absolute; inset: 0; display: none; place-items: center; background: #0008;

          font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; }

  #hud { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0;

         font-variant-numeric: tabular-nums; }

  .chip { background: #1b1e25; border: 1px solid #2a2f3a; border-radius: .4rem; padding: .3rem .55rem;

          font-size: .85rem; }

  .kit { display: flex; gap: .4rem; flex-wrap: wrap; }

  .kit button, .buys button, .agents button { min-height: 44px; min-width: 44px; padding: .4rem .6rem;

          background: #1b1e25; color: var(--ink); border: 1px solid #333a47; border-radius: .45rem;

          font: inherit; font-size: .8rem; cursor: pointer; }

  .kit button[disabled], .buys button[disabled] { opacity: .35; cursor: not-allowed; }

  .kit b { display: block; font-size: .7rem; opacity: .7; }

  #buy { display: none; margin: .5rem 0; padding: .6rem; background: #151820; border: 1px solid #2a2f3a;

         border-radius: .6rem; }

  #buy.on { display: block; }

  .buys, .agents { display: flex; gap: .4rem; flex-wrap: wrap; margin: .35rem 0; }

  #log { margin: .5rem 0; font-size: .82rem; opacity: .8; min-height: 3.2em; }

  #log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  table { width: 100%; border-collapse: collapse; font-size: .85rem; }

  th, td { text-align: left; padding: .25rem .4rem; border-bottom: 1px solid #23262e; }

  td small { opacity: .5; }

  .boards { display: grid; gap: .8rem; grid-template-columns: 1fr; }

  @media (min-width: 720px) { .boards { grid-template-columns: 1fr 1fr; } }

  footer { margin: 1.2rem 0 3rem; font-size: .82rem; opacity: .72; }

  code { background: #1b1e25; padding: .1rem .35rem; border-radius: .3rem; }

  form.name { display: flex; gap: .4rem; margin: .5rem 0; }

  form.name input { flex: 1; min-height: 44px; padding: .4rem .6rem; background: #1b1e25; color: var(--ink);

          border: 1px solid #333a47; border-radius: .45rem; font: inherit; }

  form.name button { min-height: 44px; padding: 0 1rem; background: #3a4356; color: var(--ink);

          border: 0; border-radius: .45rem; font: inherit; cursor: pointer; }

  #touch { display: none; }

  @media (pointer: coarse) { #touch { display: block; } }

</style>

<div class="wrap">

<header class="top">

  <h1>val</h1>

  <span class="env">${escape(opts.env)}${opts.commit ? " @ " + escape(opts.commit) : ""}</span>

  <span class="env" id="conn">connecting…</span>

</header>

<div id="scoreline">

  <span class="red">red ${state.score.red}</span>

  <span id="clock">${Math.max(0, Math.ceil(state.clock))}</span>

  <span class="blue">${state.score.blue} blue</span>

</div>

<div id="phase">round ${state.round} · ${escape(phaseWord(state))} · ${escape(state.attackers)} attacking${state.result ? ` · ${escape(state.result)}` : ""}</div>

<div id="stage">

  <canvas id="view" width="900" height="570"></canvas>

  <div id="flash"></div>

  <div id="dead">waiting for the next round</div>

</div>

<div id="hud">

  <span class="chip" id="hp">100 hp</span>

  <span class="chip" id="gun">Classic 12</span>

  <span class="chip" id="creds">800 cr</span>

  <span class="chip" id="ultmeter">ult 0/6</span>

  <span class="kit" id="kit"></span>

  <button id="buytoggle" class="chip" type="button">buy (B)</button>

</div>

<div id="buy">

  <div><strong>Buy phase</strong> — credits are refused server-side if you cannot afford them.</div>

  <div class="agents" id="agents">${AGENTS.map(

    (a) => `<button type="button" data-agent="${escape(a.id)}" title="${escape(a.blurb)}">${escape(a.name)} <small>${escape(a.role)}</small></button>`,

  ).join("")}</div>

  <div class="buys" id="guns">${weaponIds()

    .map((id) => `<button type="button" data-buy="${id}">${escape(WEAPONS[id].name)} <b>${WEAPONS[id].cost}</b></button>`)

    .join("")}</div>

  <div class="buys" id="gear">

    <button type="button" data-buy="light">Light shield <b>400</b></button>

    <button type="button" data-buy="heavy">Heavy shield <b>1000</b></button>

    <button type="button" data-buy="c">Ability C</button>

    <button type="button" data-buy="q">Ability Q</button>

  </div>

</div>

<div id="log">${state.events

    .slice(0, 3)

    .map((e) => `<div>${escape(e.text)}</div>`)

    .join("")}</div>

<form class="name" method="post" action="/join">

  <input name="name" maxlength="16" placeholder="Your name" value="${escape(opts.name)}" aria-label="Your name">

  <button>Take a seat</button>

</form>

<div class="boards">

  <div><h2 class="env">attackers</h2><table><thead><tr><th>player</th><th>agent</th><th>k</th><th>d</th></tr></thead><tbody id="atkboard">${row("atk")}</tbody></table></div>

  <div><h2 class="env">defenders</h2><table><thead><tr><th>player</th><th>agent</th><th>k</th><th>d</th></tr></thead><tbody id="defboard">${row("def")}</tbody></table></div>

</div>

<footer>

  <p><strong>Controls.</strong> WASD move · mouse aims · click fires · R reloads ·

     <strong>F</strong> plants and defuses (hold it) · C / Q / E / X cast · B opens the buy.

     On a phone: left thumb walks, right thumb aims and fires, the buttons under the map do the rest.</p>

  <p>Five attackers carry the spike, five defenders stop them. 100s round, 4s plant, 45s fuse,

     7s defuse with a checkpoint at half. First to 13, sides swap at 12. Bots fill every seat

     nobody is in, and they use their kit.</p>

  <p>Terminal: ${opts.ssh ? `<code>${escape(opts.ssh)}</code>` : "off in this environment."}</p>

  ${opts.results.length ? `<p>Last matches: ${opts.results.map((r) => `${escape(r.summary)} <small>(${escape(r.ended_at)})</small>`).join(" · ")}</p>` : ""}

</footer>

</div>

<script src="${escape(opts.script)}" defer></script>

</html>

`;

}