tera/scripts/brand-assets/harness.mjs

/**
 * The bits of "photograph the running app" that both `capture.mjs` and
 * `shots.mjs` need.
 *
 * This file exists because the second consumer arrived. `capture.mjs` shot the
 * app to make two share cards; `shots.mjs` shoots it to make the product
 * imagery on lumbridgecorp.com. Everything below — the static server, the
 * SwiftShader flags, the two-hostnames-one-dist trick, the clock shim — was
 * already load-bearing for the first one, and copying it would have meant two
 * capture pipelines drifting apart while both claimed to photograph the same
 * app. There is one pipeline. The two scripts differ only in what they frame.
 */

import { chromium } from "playwright";
import { createServer } from "node:http";
import { readFile } from "node:fs/promises";
import { join, extname } from "node:path";

const MIME = {
  ".html": "text/html; charset=utf-8",
  ".js": "text/javascript",
  ".css": "text/css",
  ".png": "image/png",
  ".webp": "image/webp",
  ".svg": "image/svg+xml",
  ".json": "application/json",
  ".webmanifest": "application/manifest+json",
};

/** A static server over one directory, with the SPA fallback the app expects. */
export function serve(dir, port, { spa = false } = {}) {
  const server = createServer(async (req, res) => {
    const path = decodeURIComponent((req.url ?? "/").split("?")[0]);
    for (const candidate of [path, `${path}/index.html`, spa ? "/index.html" : null]) {
      if (!candidate) continue;
      try {
        const body = await readFile(join(dir, candidate));
        res.writeHead(200, {
          "content-type": MIME[extname(candidate)] ?? "application/octet-stream",
        });
        res.end(body);
        return;
      } catch {
        /* try the next candidate */
      }
    }
    res.writeHead(404).end("not found");
  });
  return new Promise((resolve) => server.listen(port, "127.0.0.1", () => resolve(server)));
}

export const CHROME_ARGS = [
  "--no-sandbox",
  "--disable-dev-shm-usage",
  // Software GL, so this runs on a box with no display and no GPU.
  "--use-gl=angle",
  "--use-angle=swiftshader",
  // The app reads its own hostname to decide which door it is. Resolving both
  // names at the local server is what makes one `dist/` produce both shots.
  "--host-resolver-rules=MAP office.lumbridgecorp.com 127.0.0.1, MAP tera.lumbridgecorp.com 127.0.0.1",
];

export function launch() {
  return chromium.launch({ channel: "chrome", args: CHROME_ARGS });
}

/**
 * Move the page's clock to a fixed instant.
 *
 * The sun is real — `solar.ts` computes it from `new Date()` — so a shot taken
 * at two in the morning is an honest photograph of a black rectangle. The clock
 * is *shifted* rather than frozen because the app drives everything else off
 * `requestAnimationFrame`, and a stopped clock stalls the frame loop the
 * screenshot is waiting on.
 *
 * This is also the only time control available here. Scrubbing the date from
 * the godmode panel needs `can.debug`, which needs a signed-in admin; shifting
 * `Date` needs nothing, and produces the same sun.
 */
export function clockShim(iso) {
  return `{
  const target = new Date(${JSON.stringify(iso)}).getTime();
  const skew = target - Date.now();
  const Real = Date;
  globalThis.Date = class extends Real {
    constructor(...a) { super(...(a.length ? a : [Real.now() + skew])); }
    static now() { return Real.now() + skew; }
  };
}`;
}

/**
 * What a shot leaves out, by kind of shot.
 *
 * `BARE` is the share card's answer: the card supplies its own typography, and
 * the app's panels shrunk to 1200×630 are unreadable furniture.
 *
 * `CLUTTER` is the product screenshot's, and it is deliberately much shorter.
 * The left panel and the plan view are not chrome over the product, they *are*
 * the product; a picture of the engine with its instruments cropped off is a
 * stock photo of a landscape. What goes is only what is untrue outside the
 * capture, or unreadable inside it:
 *
 * - `#tier` reads "Full view" here because the capture runs against a local
 *   `dist/` with no API to say otherwise. On the deployed site an anonymous
 *   visitor gets "Public view". Shipping the local answer as marketing art
 *   would be a picture of a permission nobody browsing the site actually has.
 * - `#rail` is the keyboard hint strip, which is advice for a person holding a
 *   keyboard, not information about the city.
 */
export const FURNITURE = {
  /** Never wanted in a photograph: the boot curtain and the phone's panel scrim. */
  transient: ["#boot", "#scrim"],
  BARE: ["#panel", "#panel-toggle", "#corner", "#rail", "#source", "#tier"],
  CLUTTER: ["#rail", "#tier", "#source", "#panel-toggle"],
};

/** Hide selectors, and wait a beat for the layout to settle before shooting. */
export async function hide(page, selectors) {
  await page.evaluate((sels) => {
    for (const sel of sels) {
      document.querySelectorAll(sel).forEach((el) => (el.style.display = "none"));
    }
  }, selectors);
  await page.waitForTimeout(600);
}