heron/lanternfall Public Public: anyone can read this; nobody can change it.

/**

 * The screen. One committed look — a lit room at the bottom of a hole — so

 * the page paints its own dark ground rather than borrowing the browser's.

 *

 * The map is the whole design: lit tiles are warm, remembered tiles are cold

 * and thin, and everything else is the dark. That difference is the game's

 * only real information, so nothing else on the page is allowed to be as

 * bright as the lantern.

 */

import { DEPTHS, HEIGHT, WIDTH, xy } from "./dungeon.ts";

import { breedOf, type View } from "./game.ts";

import { ordinal } from "./names.ts";

import type { Delver, Grave, Score } from "./db.ts";

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

  s.replace(

    /[&<>"']/g,

    (c) =>

      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ??

      c,

  );

const STYLE = `

  :root {

    --dark: #0a0b0e;

    --stone: #14161c;

    --rule: #242832;

    --ink: #d9d4c7;

    --dim: #6d6a63;

    --memory: #3b414d;

    --lantern: #e8c07a;

    --floor-lit: #8a7a5c;

    --wall-lit: #5d5344;

    --gold: #e0b341;

    --blood: #c4513f;

    --bone: #b9a8d4;

    --stair: #6fae86;

    --you: #f3ece0;

    color-scheme: dark;

  }

  * { box-sizing: border-box; }

  body {

    margin: 0; background: var(--dark); color: var(--ink);

    font: 15px/1.6 ui-monospace, "SF Mono", Menlo, monospace;

    padding: 1.25rem 1rem 3rem;

  }

  .wrap { max-width: 63rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.1rem; }

  header { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: baseline; }

  h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin: 0; color: var(--lantern); }

  h1 a { color: inherit; text-decoration: none; }

  .tag { color: var(--dim); font-size: .82rem; }

  a { color: var(--stair); }

  .board { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-start; }

  .glass { flex: 1 1 32rem; min-width: 0; background: #06070a; border: 1px solid var(--rule); border-radius: 3px; padding: .7rem; overflow-x: auto; }

  .map { display: grid; grid-template-columns: repeat(${WIDTH}, 1ch); line-height: 1.05; font-size: clamp(9px, 2.1vw, 15px); white-space: pre; }

  .map span { display: block; text-align: center; }

  .u { color: #0d0e12; }                 /* never seen */

  .m { color: var(--memory); }           /* remembered */

  .f { color: var(--floor-lit); }        /* lit floor */

  .w { color: var(--wall-lit); }         /* lit wall */

  .s { color: var(--stair); font-weight: 700; }

  .c { color: var(--gold); }

  .g { color: var(--bone); }

  .e { color: var(--blood); font-weight: 700; }

  .o { color: #7fa7c4; font-weight: 700; }

  .y { color: var(--you); font-weight: 700; text-shadow: 0 0 6px var(--lantern); }

  aside { flex: 1 1 15rem; display: flex; flex-direction: column; gap: 1rem; min-width: 13rem; }

  .panel { background: var(--stone); border: 1px solid var(--rule); border-radius: 3px; padding: .8rem .9rem; }

  .panel h2 { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0 0 .5rem; font-weight: 600; }

  .stat { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }

  .stat b { font-weight: 600; color: var(--ink); }

  .hp { height: 7px; background: #241a18; border-radius: 2px; overflow: hidden; margin: .45rem 0 .2rem; }

  .hp div { height: 100%; background: linear-gradient(90deg, var(--blood), #d98b5f); }

  .entry { font-size: .82rem; color: var(--dim); padding: .3rem 0; border-top: 1px solid var(--rule); }

  .entry:first-of-type { border-top: 0; }

  .entry b { color: var(--bone); font-weight: 600; }

  .entry i { color: var(--gold); font-style: normal; }

  .log { background: #06070a; border: 1px solid var(--rule); border-radius: 3px; padding: .7rem .9rem; min-height: 6.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .1rem; }

  .log p { margin: 0; font-size: .86rem; color: var(--dim); }

  .log p:last-child { color: var(--ink); }

  .controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

  .pad { display: grid; grid-template-columns: repeat(3, 3rem); grid-template-rows: repeat(2, 3rem); gap: .35rem; }

  form.inline { display: contents; }

  button {

    font: inherit; min-height: 44px; min-width: 3rem; padding: .4rem .7rem; cursor: pointer;

    color: var(--ink); background: #171a21; border: 1px solid var(--rule); border-radius: 3px;

  }

  button:hover { border-color: var(--lantern); color: var(--lantern); }

  button:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; }

  .pad .n { grid-column: 2; grid-row: 1; }

  .pad .w { grid-column: 1; grid-row: 2; }

  .pad .s { grid-column: 2; grid-row: 2; }

  .pad .e { grid-column: 3; grid-row: 2; }

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

  .keys { color: var(--dim); font-size: .78rem; }

  .legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--dim); font-size: .78rem; }

  .dead { text-align: center; padding: 2rem 1rem; }

  .dead h2 { color: var(--blood); letter-spacing: .1em; font-size: 1rem; }

  .dead p { color: var(--dim); max-width: 34rem; margin: .5rem auto; }

  footer { color: var(--dim); font-size: .76rem; border-top: 1px solid var(--rule); padding-top: .8rem; }

`;

export interface Chrome {

  env: string;

  pull: string | undefined;

  commit: string;

  ssh: string | undefined;

}

const where = (c: Chrome): string =>

  c.env === "preview" ? `preview of pull #${c.pull ?? "?"}` : c.env;

function layout(chrome: Chrome, title: string, body: string): string {

  return `<!doctype html>

<meta charset="utf-8">

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

<title>${escape(title)}</title>

<style>${STYLE}</style>

<div class="wrap">

<header>

  <h1><a href="/">lanternfall</a></h1>

  <span class="tag">one dungeon · five floors · everyone's map</span>

</header>

${body}

<footer>

  <p>${escape(where(chrome))}${chrome.commit ? ` · ${escape(chrome.commit)}` : ""}${chrome.ssh ? ` · terminal: ${escape(chrome.ssh)}` : ""}</p>

  <p>The floors are generated from a seed, so they are the same for everyone and always will be. Only what has happened is written down.</p>

</footer>

</div>

<script src="/static/keys.v1.js" defer></script>

`;

}

/** The dungeon as the delver currently understands it. */

function mapOf(view: View, delver: Delver, caches: Set<number>): string {

  const cells: string[] = [];

  for (let cell = 0; cell < WIDTH * HEIGHT; cell += 1) {

    const tile = view.floor.tiles[cell] ?? "#";

    const lit = view.visible.has(cell);

    const known = view.seen.has(cell);

    let glyph = tile === "#" ? "#" : tile === "." ? "·" : tile;

    let cls = lit ? (tile === "#" ? "w" : "f") : known ? "m" : "u";

    if (!lit && !known) {

      cells.push(`<span class="u"> </span>`);

      continue;

    }

    if (tile === ">" || tile === "<") cls = lit ? "s" : "m";

    // Things are only there when you can see them; the map remembers rooms,

    // not what is standing in them.

    if (lit) {

      if (caches.has(cell)) {

        glyph = "$";

        cls = "c";

      }

      const monster = view.monsters.find((m) => m.cell === cell);

      if (monster) {

        glyph = breedOf(monster.kind).glyph;

        cls = "e";

      } else if (view.others.has(cell)) {

        glyph = "@";

        cls = "o";

      }

    }

    if (view.graves.has(cell) && (lit || known)) {

      glyph = "†";

      cls = lit ? "g" : "m";

    }

    if (cell === delver.cell) {

      glyph = "@";

      cls = "y";

    }

    cells.push(`<span class="${cls}">${glyph}</span>`);

  }

  return `<div class="glass"><div class="map" role="img" aria-label="the dungeon floor, drawn in ascii">${cells.join("")}</div></div>`;

}

const button = (action: string, label: string, extra = ""): string =>

  `<form class="inline" method="post" action="/act"><button class="${extra}" name="action" value="${action}">${label}</button></form>`;

export function gamePage(

  chrome: Chrome,

  delver: Delver,

  view: View,

  caches: Set<number>,

  log: readonly string[],

  graves: readonly Grave[],

  scores: readonly Score[],

  known: number,

): string {

  const tile = view.floor.tiles[delver.cell];

  const stairs =

    (tile === ">" ? button("descend", "descend ›") : "") +

    (tile === "<" ? button("ascend", delver.depth === 1 ? "climb out ↑" : "climb up ↑") : "");

  return layout(

    chrome,

    `floor ${delver.depth} — lanternfall`,

    `<div class="board">

${mapOf(view, delver, caches)}

<aside>

  <div class="panel">

    <h2>${escape(delver.name)}</h2>

    <div class="stat"><span>health</span><b>${delver.hp} / ${delver.max_hp}</b></div>

    <div class="hp"><div style="width:${Math.max(0, Math.round((delver.hp / delver.max_hp) * 100))}%"></div></div>

    <div class="stat"><span>carrying</span><b>${delver.gold} gold</b></div>

    <div class="stat"><span>depth</span><b>${ordinal(delver.depth)} floor</b></div>

    <div class="stat"><span>turns</span><b>${delver.turns}</b></div>

  </div>

  <div class="panel">

    <h2>the dead</h2>

    ${graves.length === 0 ? `<p class="entry">Nobody yet.</p>` : graves

      .slice(0, 5)

      .map(

        (g) =>

          `<p class="entry"><b>${escape(g.name)}</b> · floor ${g.depth} · <i>${g.gold}g</i><br>${escape(g.epitaph)}</p>`,

      )

      .join("")}

  </div>

  <div class="panel">

    <h2>climbed out</h2>

    ${scores.length === 0 ? `<p class="entry">Nobody has come back up yet.</p>` : scores

      .slice(0, 5)

      .map(

        (s) => `<p class="entry"><b>${escape(s.name)}</b> · <i>${s.gold}g</i> · floor ${s.depth}</p>`,

      )

      .join("")}

  </div>

  <div class="panel">

    <h2>the dungeon remembers</h2>

    <div class="stat"><span>tiles lit, ever</span><b>${known}</b></div>

    <div class="stat"><span>floors</span><b>${DEPTHS}</b></div>

  </div>

</aside>

</div>

<div class="log">${log.length === 0 ? `<p>You are at the mouth of the dungeon. Your lantern throws about four paces.</p>` : log.map((line) => `<p>${escape(line)}</p>`).join("")}</div>

<div class="controls">

  <div class="pad">

    ${button("north", "↑", "n")}${button("west", "←", "w")}${button("south", "↓", "s")}${button("east", "→", "e")}

  </div>

  <div class="others">

    ${button("wait", "wait / rest")}

    ${stairs}

  </div>

  <p class="keys">arrows or wasd move · <b>.</b> waits · <b>&gt;</b> descends · <b>&lt;</b> climbs</p>

</div>

<p class="legend">

  <span><b class="y">@</b> you</span><span><b style="color:#7fa7c4">@</b> another delver</span>

  <span><b style="color:var(--blood)">r g G S W</b> what lives here</span><span><b style="color:var(--gold)">$</b> a cache</span>

  <span><b style="color:var(--bone)">†</b> a grave</span><span><b style="color:var(--stair)">&gt; &lt;</b> stairs</span>

</p>`,

  );

}

export function endPage(

  chrome: Chrome,

  delver: Delver,

  climbedOut: boolean,

  log: readonly string[],

): string {

  return layout(

    chrome,

    climbedOut ? "climbed out — lanternfall" : "died — lanternfall",

    `<div class="dead">

  <h2>${climbedOut ? "You climbed out." : "You died."}</h2>

  <p>${escape(delver.name)} ${climbedOut ? `banked ${delver.gold} gold` : `fell on the ${ordinal(delver.depth)} floor with ${delver.gold} gold`} after ${delver.turns} turns.</p>

  ${delver.epitaph ? `<p>${escape(delver.epitaph)}</p>` : ""}

  ${climbedOut ? "" : `<p>Your grave is where you fell, and whoever finds it takes half of what you were carrying.</p>`}

  <div class="log" style="max-width:34rem;margin:1.2rem auto;">${log.map((l) => `<p>${escape(l)}</p>`).join("")}</div>

  <form method="post" action="/act"><button name="action" value="wait">send someone else down</button></form>

</div>`,

  );

}

export function notFoundPage(chrome: Chrome): string {

  return layout(

    chrome,

    "not found — lanternfall",

    `<div class="dead"><h2>There is nothing here.</h2><p><a href="/">Back to the dungeon.</a></p></div>`,

  );

}