fable/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"

        ? state.last

          ? `round over — ${state.last.winner} took it, ${state.last.why.charAt(0).toLowerCase()}${state.last.why.slice(1)}`

          : "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; }

  #prompt { position: absolute; left: 50%; transform: translateX(-50%); bottom: .6rem;

            max-width: 92%; padding: .35rem .7rem; border-radius: .4rem; background: #0b0d11cc;

            border: 1px solid #2f3541; font-size: .9rem; text-align: center; pointer-events: none; }

  #aimhint { position: absolute; inset: auto 0 45% 0; display: none; place-items: center;

             font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;

             text-shadow: 0 1px 4px #000; pointer-events: none; }

  #perf { position: absolute; left: .5rem; bottom: 2.6rem; display: none; pointer-events: none;

          padding: .2rem .45rem; border-radius: .3rem; background: #0b0d11cc; border: 1px solid #2f3541;

          font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap;

          max-width: calc(100% - 1rem); overflow: hidden; text-overflow: ellipsis; }

  #help { position: fixed; inset: 0; z-index: 10; display: none; place-items: center;

          background: #080a0ef2; padding: .8rem; overflow: auto; }

  #help > div { max-width: 40rem; }

  #help h2 { font-size: 1rem; margin: 0 0 .4rem; letter-spacing: .1em; text-transform: uppercase; }

  #help p, #help ul { margin: .4rem 0; font-size: .88rem; }

  #help ul { padding-left: 1.1rem; }

  #help kbd { background: #222732; border: 1px solid #39404e; border-radius: .25rem;

              padding: 0 .3rem; font: inherit; font-size: .82rem; }

  #helpclose { min-height: 44px; padding: 0 1.1rem; margin-top: .5rem; background: #3a4356;

               color: var(--ink); border: 0; border-radius: .45rem; font: inherit; cursor: pointer; }

  #roster { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; margin: .5rem 0;

            min-height: 3.1rem; }

  .slot { background: #171a21; border: 1px solid #262b35; border-left: 3px solid #4a5162;

          border-radius: .35rem; padding: .2rem .35rem; font-size: .72rem; overflow: hidden; }

  .slot .who { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .slot .agent { display: block; opacity: .6; font-size: .66rem; white-space: nowrap;

                 overflow: hidden; text-overflow: ellipsis; }

  .slot .hp { display: block; height: 5px; margin-top: .2rem; border-radius: 3px; background: #2a2f3a; }

  .slot .hp i { display: block; height: 100%; border-radius: 3px; background: #6fcf6f; }

  .slot.mine { border-color: #6f8ecf; background: #1b2130; }

  .slot.down { opacity: .42; filter: grayscale(1); }

  .slot.down .who { text-decoration: line-through; }

  .slot .spike { color: #f0d060; }

  #feed { position: absolute; top: .5rem; right: .5rem; width: min(17rem, 52%); display: grid;

          gap: .18rem; justify-items: end; pointer-events: none; font-size: .76rem; }

  #feed div { background: #0b0d11cc; border: 1px solid #2f3541; border-radius: .3rem;

              padding: .1rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

              max-width: 100%; }

  #feed .k { color: #8ef0c4; } #feed .v { color: #e39a95; } #feed .w { opacity: .65; }

  #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; }

  .buys button.owned { outline: 2px solid #6fcf9f; opacity: 1; }

  .buys button.owned[disabled] { cursor: default; }

  .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; }

  #buy p { margin: 0 0 .3rem; font-size: .85rem; opacity: .85; }

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

  .lbl { min-width: 4.2rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }

  #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="aimhint">click to aim · esc releases</div>

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

  <div id="feed"></div>

  <div id="perf" aria-live="off"></div>

  <div id="prompt">Click the map to aim, then press <b>H</b> for how to play.</div>

  <div id="help" role="dialog" aria-label="How to play val"><div>

    <h2>How to play</h2>

    <p><strong>The round.</strong> Attackers carry the spike to site A or B and plant it;

       defenders stop them, or defuse it once it is down. Plant and it runs a 45s fuse.

       First team to 13 rounds wins, and the sides swap at 12.</p>

    <p><strong>The teams.</strong> You are <span class="red">red</span> or

       <span class="blue">blue</span>; each round one team attacks and the other defends.

       Team mates carry a name tag over their head, enemies never do.</p>

    <p><strong>Controls.</strong> <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> move ·

       click the view to capture the mouse and look, <kbd>Esc</kbd> releases ·

       click to fire · <kbd>R</kbd> reload · hold <kbd>F</kbd> to plant, defuse or pick up ·

       <kbd>Tab</kbd> holds the big map open · <kbd>V</kbd> swaps to the top-down view ·

       <kbd>B</kbd> opens the buy · <kbd>H</kbd> brings this card back ·

       <kbd>F3</kbd> or <kbd>\`</kbd> shows the frame readout.</p>

    <p><strong>Abilities.</strong> <kbd>C</kbd> and <kbd>Q</kbd> are bought in the buy phase and

       last the round, <kbd>E</kbd> is free and comes back on a cooldown, and <kbd>X</kbd> is

       the ultimate, paid for in ult points you earn by playing.</p>

    <p><strong>Telling people apart.</strong> Your five are always listed under the view with their

       health — struck through when they are down — and the last few kills scroll in the top right.

       In the world an enemy wears a red chevron over their head and a hard dark outline, a team mate

       wears their name and a health pip, and anybody lying flat on the floor is dead. On the map your

       team is always shown (crossed out when down) and enemies appear only while you can see them.</p>

    <p><strong>On a phone</strong> the view stays top-down: the left thumb walks, the right

       thumb aims and fires, and the buttons under the map buy and cast.</p>

    <ul id="helpagents"></ul>

    <button id="helpclose" type="button">Got it — play</button>

  </div></div>

</div>

<div id="roster" aria-label="your team">${["", "", "", "", ""]

  .map(() => `<div class="slot"><span class="who">—</span><span class="hp"><i style="width:0"></i></span></div>`)

  .join("")}</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>

  <button id="viewtoggle" class="chip" type="button">view (V)</button>

  <button id="helptoggle" class="chip" type="button">how to play (H)</button>

</div>

<div id="buy">

  <p><strong>Buy phase.</strong> Spend your credits on a gun and armour for this round;

     a greyed price is more than you have, and the outlined one is what you hold.

     Two abilities are bought here too, and your agent can be swapped until you buy one.</p>

  <div class="agents"><span class="lbl">agent</span><span 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("")}</span></div>

  <div class="buys"><span class="lbl">gun</span><span class="buys" id="guns">${weaponIds()

    .map(

      (id) =>

        `<button type="button" data-buy="${id}" data-cost="${WEAPONS[id].cost}" title="${escape(WEAPONS[id].name)} — ${WEAPONS[id].cost} credits, ${WEAPONS[id].magazine} rounds, ${WEAPONS[id].auto ? "automatic" : "semi-automatic"}">${escape(WEAPONS[id].name)} <b>${WEAPONS[id].cost}</b></button>`,

    )

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

  <div class="buys"><span class="lbl">armour</span><span class="buys" id="gear">

    <button type="button" data-buy="light" data-cost="400" title="25 armour that soaks a quarter of what hits you">Light shield <b>400</b></button>

    <button type="button" data-buy="heavy" data-cost="1000" title="50 armour that soaks half of what hits you">Heavy shield <b>1000</b></button>

  </span></div>

  <div class="buys"><span class="lbl">abilities</span><span class="buys" id="basics">

    <button type="button" data-buy="c" data-cost="0">C ability <b>—</b></button>

    <button type="button" data-buy="q" data-cost="0">Q ability <b>—</b></button>

  </span></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 · click the view to capture the mouse, move to look,

     Esc releases · click fires · R reloads · <strong>F</strong> plants and defuses (hold it) ·

     C / Q / E / X cast · Tab holds the map open · V swaps to the top-down view ·

     B opens the buy · H shows how to play · F3 or \` prints the frame numbers:

     frame rate, mean frame, snapshots a second, the interpolation delay and how

     wide the world is being drawn before it is scaled onto the canvas.

     On a phone it stays top-down: left thumb walks, right thumb aims and fires.</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>

`;

}