dev.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>one · dev</title>
    <meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
    <!-- Linked, since this page has no build step; a built page has the same
         file written into it. -->
    <link rel="stylesheet" href="./assets/fonts/vera.css">
    <style>
    html,
    body {
      margin: 0;
      height: 100%;
      overflow: hidden;
    }
    body {
      --pad: 0px;
      background: #f2f0e5;
      color: #212123;
      font-family: var(--sans);
      display: flex;
      align-items: center;
      justify-content: center;
      touch-action: none;
    }
    /* The square the game draws in, min(100vw, 100vh). one.js paints meta.bg
       on this element and the script below puts that colour a shade off on the
       body, so the board's edge is visible; the built page has the gallery's
       colour around its board. */
    main {
      width: 100vmin;
      height: 100vmin;
    }
    canvas {
      display: block;
      cursor: pointer;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    /* The pad below the board on a screen with no mouse on it, the rules the
       built page has: input.js adds the `dpad` class for a game whose meta asks
       for a pad, then binds .dirs and .act, names the directions it is reading
       in data-held and puts `on` on the button. Outlines in currentColor, which
       the script sets from the game, since the page around the board here is a
       shade of the board itself. */
    .pad {
      display: none;
      box-sizing: border-box;
      flex: none;
      width: 100%;
      height: var(--pad);
      padding: 0 26px;
      align-items: center;
      justify-content: space-between;
      touch-action: none;
    }
    .pad svg {
      display: block;
      aspect-ratio: 1;
    }
    .dirs {
      width: min(42vw, 26dvh);
    }
    .act {
      width: min(26vw, 16dvh);
    }
    .pad path,
    .pad circle {
      fill: none;
      stroke: currentColor;
      stroke-width: 4;
      stroke-linejoin: round;
      opacity: .35;
    }
    .dirs[data-held~="up"] .up,
    .dirs[data-held~="right"] .right,
    .dirs[data-held~="down"] .down,
    .dirs[data-held~="left"] .left,
    .act.on circle {
      fill: currentColor;
      opacity: .8;
    }
    /* The board gives the bottom third of the page to the pad. */
    @media (pointer: coarse) and (hover: none) {
      body.dpad {
        --pad: 32dvh;
        flex-direction: column;
      }
      body.dpad main {
        width: min(100vw, calc(100dvh - var(--pad)));
        height: auto;
        aspect-ratio: 1;
        margin: auto;
      }
      body.dpad .pad {
        display: flex;
      }
    }
    /* A phone on its side has no height to give away and width to spare, so
       the two go in the margins either side of the board and the board keeps
       its size. Fixed, and transparent to a pointer between them, so a press
       in the middle is the board's. */
    @media (pointer: coarse) and (hover: none) and (orientation: landscape) {
      body.dpad {
        --pad: 0px;
      }
      body.dpad .pad {
        position: fixed;
        inset: 26px;
        width: auto;
        height: auto;
        padding: 0;
        pointer-events: none;
      }
      body.dpad .pad > * {
        pointer-events: auto;
      }
    }
    /* The cards, when there is no ?game=: the front page's, in three groups
       that open and close, the src/_<name>.js ideas, the drafts the build
       skips and the games it ships, plus the label only dev shows, on a module
       that threw on import.
       The body is the scroller here, and border-box so that it is: at
       content-box its 100% height plus the padding runs 52px past the window,
       and html's overflow: hidden cuts that off the bottom of the last row. */
    body.index {
      display: block;
      overflow: auto;
      box-sizing: border-box;
      padding: 26px;
      font: 14px/1.45 var(--sans);
      touch-action: auto;
    }
    .index header {
      display: flex;
      align-items: baseline;
      gap: 12px;
      height: 28px;
      margin: 0 0 24px;
    }
    .index h1 {
      margin: 0;
      font: bold 19px/1.45 var(--sans);
      letter-spacing: -.02em;
    }
    .index .by {
      margin: 0;
      font-size: 11px;
      color: #21212399;
    }
    .index details + details {
      margin-top: 30px;
    }
    /* The heading is what opens the group, so the gap under it belongs to the
       cards: a closed group is its one line and nothing else. */
    .index summary {
      width: fit-content;
      cursor: pointer;
      list-style: none;
    }
    .index summary::-webkit-details-marker {
      display: none;
    }
    .index h2 {
      display: inline;
      margin: 0;
      font: bold 13px/1.45 var(--sans);
      letter-spacing: .04em;
      text-transform: uppercase;
      color: #21212399;
    }
    /* Flex and not grid, and the count sizes the card, so a row of n fills the
       width exactly. The five queries are the gallery's. */
    .cards {
      --gap: 14px;
      --n: 2;
      --card: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
      display: flex;
      flex-wrap: wrap;
      gap: var(--gap);
      list-style: none;
      margin: 12px 0 0;
      padding: 0;
    }
    @media (min-width: 560px) {
      .cards {
        --n: 3;
      }
    }
    @media (min-width: 820px) {
      .cards {
        --n: 4;
      }
    }
    @media (min-width: 1080px) {
      .cards {
        --n: 5;
      }
    }
    @media (min-width: 1340px) {
      .cards {
        --n: 6;
      }
    }
    /* A container, so the title and the label are the same fraction of the
       square at every card count. */
    .cards li {
      flex: 0 0 var(--card);
      position: relative;
      aspect-ratio: 1;
      overflow: hidden;
      background: var(--bg);
      color: var(--fg);
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      container-type: inline-size;
    }
    .cards a {
      position: absolute;
      inset: 0;
      color: inherit;
      text-decoration: none;
    }
    /* A game with no clip is flat --bg, which is the clip's own background too,
       so the title is readable either way. */
    .cards video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .title {
      position: absolute;
      left: 0;
      bottom: 0;
      margin: 0;
      padding: 0 4.5cqw 4cqw;
      font: bold 10cqw/1.1 var(--sans);
      letter-spacing: -.02em;
    }
    .title time {
      margin-left: 2.8cqw;
      letter-spacing: 0;
      font: 4.5cqw var(--sans);
      opacity: .55;
      font-variant-numeric: tabular-nums;
    }
    /* A module that threw on import. Red here and on the card's edge below,
       rather than the card's own text colour, which the title uses. */
    .state {
      position: absolute;
      right: 0;
      top: 0;
      margin: 0;
      padding: 3.5cqw 4.5cqw;
      font: bold 4.5cqw var(--sans);
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #c22;
    }
    /* The same red at the card's edge, so it is visible from across the page.
       Inside the square and not around it: a border would take 4px off every
       card, labelled or not. A pseudo-element and not an outline, because the
       clip is positioned and draws over an outline. */
    .cards li.error::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 4px solid #c22;
      pointer-events: none;
    }
    p.help {
      font-size: 14px;
      line-height: 1.8;
      text-align: center;
    }
    code {
      background: #0001;
      padding: 2px 6px;
    }
    /* The recorder's buttons and preview, which src/dev/rec.js builds and only
       a ?game= page loads. */
    #rec-bar {
      position: fixed;
      left: 8px;
      bottom: 8px;
      z-index: 9;
      display: flex;
      gap: 10px;
      align-items: center;
      font: 12px var(--sans);
      color: #0009;
    }
    #rec-bar[data-on] {
      color: #c22;
    }
    #rec-bar button,
    #rec-preview button {
      font: inherit;
      padding: 4px 10px;
      cursor: pointer;
      border: 1px solid #0003;
      border-radius: 4px;
      background: #fff8;
      color: inherit;
    }
    #rec-preview {
      position: fixed;
      inset: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      justify-content: center;
      background: #000c;
      font: 13px var(--sans);
      color: #fff;
    }
    #rec-preview[hidden] {
      display: none;
    }
    /* Square and inside the window: a flex column shrinks the canvas on the main
       axis alone and stretches the frames. */
    #rec-preview canvas {
      flex: none;
      width: 72vmin;
      height: 72vmin;
    }
    #rec-preview p {
      margin: 0;
      opacity: .7;
    }
    #rec-preview div {
      display: flex;
      gap: 8px;
    }
    #rec-preview button {
      background: #fff;
      color: #000;
      padding: 6px 18px;
    }
    #rec-preview button:disabled {
      opacity: .35;
      cursor: not-allowed;
    }
    </style>
  </head>
  <body>
    <!--
      Runs a game straight from src/, with no build step: the browser loads the
      same ES modules the bundler does. Needs ~/web served, not a file:// open.

        dev.html               every game in src/, in three groups that open
                               and close, and stay how they were left: the
                               ideas, the drafts, then the games the build
                               ships, as the front page shows them
        dev.html?game=wow      that game, running, like the built page
        &rec=0                 without the recorder, for an embedded iframe

      A game page also loads src/dev/rec.js, the recorder the "rec" button runs.
    -->
    <script type="module">
    const params = new URLSearchParams(location.search);
    const name = params.get("game") ?? location.hash.slice(1);

    if (name) {
      const board = document.createElement("main");
      const canvas = document.createElement("canvas");
      canvas.id = "canvas";
      board.append(canvas);
      document.body.append(board);
      // The pad input.js binds on a touch screen, the built page's markup.
      document.body.insertAdjacentHTML(
        "beforeend",
        `<div class=pad><svg class=dirs viewBox="0 0 100 100">` +
          `<path class=up d="M50 4 L64 27 L36 27 Z"/>` +
          `<path class=right d="M96 50 L73 64 L73 36 Z"/>` +
          `<path class=down d="M50 96 L36 73 L64 73 Z"/>` +
          `<path class=left d="M4 50 L27 36 L27 64 Z"/></svg>` +
          `<svg class=act viewBox="0 0 100 100">` +
          `<circle cx="50" cy="50" r="46"/></svg></div>`,
      );

      const game = await import(`./src/${name}.js`);
      const { run, meta } = await import("./src/lib/one.js");
      const { theme } = await import("./src/lib/overlay.js");
      const screen = await run(game);
      // run() has painted meta.bg on the board, and meta is the merged one, so
      // a game that names no colour has the default in both places. The pad
      // draws in the page's ink, which is the board's, since the page around
      // the board is a shade of it.
      document.body.style.backgroundColor = shade(meta.bg);
      document.body.style.color = theme(meta);

      // After run(), so the recorder's frame callback runs after the game's.
      let rec = null;
      if (params.get("rec") !== "0") {
        rec = await import("./src/dev/rec.js");
        rec.init(screen, name);
        // tools/record.js calls rec.auto() over CDP, which has no other way to
        // reach a module's exports.
        window.rec = rec;
      }

      // Escape leaves for the index here, the way it leaves a built page for
      // the gallery. The recorder answers the key first while it is busy:
      // there Escape cancels a countdown and closes the preview.
      const home = new URL(location.pathname, location.href).href;
      addEventListener("keydown", (ev) => {
        if (ev.key !== "Escape" || rec?.busy()) return;
        // Back, when the index is where this page came from, so its scroll
        // position and its playing clips come back with it from the
        // back/forward cache. Anything else loads it.
        if (globalThis.navigation?.activation?.from?.url === home) {
          history.back();
        } else {
          location.href = home;
        }
      });
    } else {
      await index();
    }

    /*
     * The front page, with no build step: Caddy's `file_server browse` answers
     * a directory with JSON when the request asks for it, so src/ names the
     * games and media/ says which have a card, and meta comes from importing
     * each module the way build.js does. It shows what the front page will
     * show, one commit early.
     *
     * An idea is src/_<name>.js, and its card shows the name without the
     * underscore. Serving one needs the `handle /one/*` block in the Caddyfile:
     * boxer's rules 404 any path segment starting with an underscore.
     */
    async function index() {
      document.body.className = "index";
      // Which groups the reader leaves open, by title.
      const KEY = "one#dev.groups";
      const groups = JSON.parse(localStorage.getItem(KEY) ?? "{}");

      let names;
      try {
        names = await list("./src/", (e) => !e.is_dir && e.name.endsWith(".js"));
      } catch (err) {
        document.body.innerHTML = `<p class=help>no directory listing here: ` +
          `${esc(err.message)}<br>pick a game: ` +
          `<code>dev.html?game=&lt;name&gt;</code></p>`;
        return;
      }
      const found = names.map((n) => {
        const file = n.slice(0, -3);
        const scratch = file.startsWith("_");
        return { file, name: scratch ? file.slice(1) : file, scratch };
      });

      // A game whose clip is missing is a flat card, so this is not fatal.
      const shots = new Set(
        await list("./media/", (e) => e.is_dir).catch(() => []),
      );

      const { theme } = await import("./src/lib/overlay.js");

      const games = await Promise.all(found.map(async (g) => {
        try {
          const { meta } = await import(`./src/${g.file}.js`);
          return { ...g, ...meta, shot: shots.has(g.file) };
        } catch (err) {
          return { ...g, error: String(err) };
        }
      }));
      // Newest work first: the ideas, then the drafts, which are the games
      // without `release`, then the released ones. A module that threw has no
      // meta, so its name is what places it.
      const newest = (a, b) =>
        (b.date ?? "").localeCompare(a.date ?? "") ||
        a.name.localeCompare(b.name);

      document.body.innerHTML = `<header>
        <h1>one · dev</h1>
        <p class=by>${games.length} games from src/</p>
      </header>` +
        section("scratch", games.filter((g) => g.scratch), theme, false) +
        section("drafts", games.filter((g) => !g.scratch && !g.release), theme) +
        section("games", games.filter((g) => !g.scratch && g.release), theme);

      for (const d of document.querySelectorAll("details[data-group]")) {
        d.addEventListener("toggle", () => {
          groups[d.dataset.group] = d.open;
          localStorage.setItem(KEY, JSON.stringify(groups));
        });
      }

      play([...document.querySelectorAll(".cards video")]);

      // One heading and its cards, newest first; nothing at all when the group
      // is empty, which is how a tree with no draft in it reads. What the
      // reader last left the group at wins over `open`, the group's default.
      function section(title, group, theme, open = true) {
        if (!group.length) return "";
        return `<details data-group=${title}${(groups[title] ?? open) ? " open" : ""}>
          <summary><h2>${title}</h2></summary>
          <ul class=cards>${
          group.sort(newest).map((g) => card(g, theme)).join("")
        }</ul></details>`;
      }
    }

    // One directory off the server's listing, as names; a directory comes back
    // as "media/" and the trailing slash is not part of the name.
    async function list(path, keep) {
      const res = await fetch(path, {
        headers: { accept: "application/json" },
      });
      if (!res.ok) throw new Error(`${path} gave ${res.status}`);
      const entries = await res.json();
      return entries.filter(keep).map((e) => e.name.replace(/\/$/, ""));
    }

    function card(g, theme) {
      const m = { bg: "#f2f0e5", ...g };
      // Nothing is filled behind the title, so it is chosen against the board
      // exactly as the built card's is.
      const fg = theme(m);
      const clip = g.shot
        ? `<video src="./media/${g.file}/card.mp4" ` +
          `poster="./media/${g.file}/card.png" loop muted playsinline ` +
          `preload=none></video>`
        : "";
      // A broken game says why on hover; a working one has no hover text,
      // the way the front page's cards have none.
      const tip = g.error ?? "";
      return `<li${g.error ? " class=error" : ""} ` +
        `style="--bg:${esc(m.bg)};--fg:${esc(fg)}">
        <a href="?game=${encodeURIComponent(g.file)}"${
          tip ? ` title="${esc(tip)}"` : ""
        }>
          ${clip}
          <p class="title"><b>${esc(g.name)}</b><time>${
          esc((g.date ?? "").slice(0, 4))
        }</time></p>
          ${g.error ? `<p class=state>error</p>` : ""}
        </a>
      </li>`;
    }

    // The gallery's rule, so this page behaves the way that one does: the card
    // under the pointer plays and the rest stay on the frame they stopped on.
    function play(videos) {
      if (!matchMedia("(hover: hover)").matches) {
        const onscreen = new IntersectionObserver((es) => {
          for (const e of es) {
            if (e.isIntersecting) e.target.play().catch(() => {});
            else e.target.pause();
          }
        }, { rootMargin: "200px" });
        for (const v of videos) onscreen.observe(v);
        return;
      }
      for (const v of videos) {
        const li = v.closest("li");
        // pointermove and not pointerenter: coming back from a game restores
        // this page under a pointer that moved over no card's edge.
        li.addEventListener("pointermove", () => {
          if (v.paused) v.play().catch(() => {});
        });
        li.addEventListener("pointerleave", () => v.pause());
      }
      // A clip restored from the back/forward cache is playing if that card was
      // the one pressed.
      addEventListener("pageshow", () => videos.forEach((v) => v.pause()));
    }

    // The colour of the page around the board: meta.bg, six-digit hex, each
    // channel down by 26 of 255. A board already near black goes up instead,
    // since darker than #000000 is #000000.
    function shade(hex) {
      const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
      const d = (c[0] + c[1] + c[2]) / 3 < 40 ? 26 : -26;
      const v = c.map((x) => Math.max(0, Math.min(255, x + d)));
      return `rgb(${v[0]} ${v[1]} ${v[2]})`;
    }

    function esc(s) {
      return String(s).replace(
        /[&<>"]/g,
        (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c],
      );
    }
    </script>
  </body>
</html>