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, Message, 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.now { color: var(--ink); }

  .log p.now::before { content: "▸ "; color: var(--lantern); }

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

}

/**

 * What a stranger reads before anything has happened to them: where they

 * are, what they are here for, and the two rules the buttons do not explain.

 * It stays until the dungeon has something of its own to say.

 */

export const WELCOME_LINES: readonly string[] = [

  "You are at the mouth of the dungeon, standing on the way out. Your lantern throws about four paces.",

  "The gold is below. It is yours only once you climb back out through this stair; die and it stays where you fell.",

  "Walk into a thing to fight it. Wait to heal, which works only when nothing can see you.",

];

const WELCOME = WELCOME_LINES.map((line) => `<p class="now">${escape(line)}</p>`).join("");

/** The log, with what happened this turn told apart from what is remembered. */

const logOf = (log: readonly Message[], turn: number): string =>

  log

    .map((line) => `<p${line.turn === turn ? ' class="now"' : ""}>${escape(line.text)}</p>`)

    .join("");

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 Message[],

  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 ? WELCOME : logOf(log, delver.turns)}</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 Message[],

): 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;">${logOf(log, delver.turns)}</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>`,

  );

}