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"

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

  #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 { opacity: .6; font-size: .66rem; }

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

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

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

  <div id="feed"></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.</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>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">

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

  <div 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>

    <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>

  </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.

     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>

`;

}