5.1 规格内联进单文件 HTML

// file: web/build_mech05.mjs
// tier: W
// verify: NODE_PATH=/opt/homebrew/lib/node_modules node web/build_mech05.mjs
//
// 5.1 规格内联进单文件 HTML：把 core/src/ashdeck/ 的确定性内核与 config/play_spec.json
// 一起塞进**一个** HTML。产物零外部依赖：无 CDN、无 import、无网络、离线双击可跑。
// 页面暴露 globalThis.__ashdeck = { run(seq?) -> digest, snapshot(), canvasDrawn }。
// 擦类型复用 web/pack.mjs 的 bundle()，本章不重写任何擦除逻辑。

import { bundle, page, writePage, inlineConfig } from "./pack.mjs";
import { readFileSync } from "node:fs";
import { fileURLToPath } from "node:url";
import { dirname, join } from "node:path";

const HERE = dirname(fileURLToPath(import.meta.url));
const ROOT = join(HERE, ".."); // $HOME/.gdbook/ashdeck

// 手工拓扑序：先声明后使用。去掉跨文件 import 后同一作用域内不得重名。
const MODULES = [
  "core/src/ashdeck/types.ts",
  "core/src/ashdeck/rng.ts",
  "core/src/ashdeck/cards.ts",
  "core/src/ashdeck/combat.ts",
  "core/src/ashdeck/digest.ts",
];

const spec = JSON.parse(readFileSync(join(ROOT, "config/play_spec.json"), "utf8"));
const core = bundle(ROOT, MODULES);
const OUT = join(ROOT, "out", "mech05.html");

const script = core + `

const SPEC = ` + inlineConfig(spec) + `;
const cv = document.getElementById("cv");
const ctx = cv.getContext("2d");
let snap = null;
let frames = 0;

function bar(x, y, w, h, num, den, color) {
  ctx.fillStyle = "#334155";
  ctx.fillRect(x, y, w, h);
  const fw = den === 0 ? 0 : Math.floor((w * num) / den);
  ctx.fillStyle = color;
  ctx.fillRect(x, y, fw, h);
}

function render(s) {
  const W = cv.width;
  const H = cv.height;
  ctx.fillStyle = "#111827";
  ctx.fillRect(0, 0, W, H);
  bar(20, 22, W - 40, 16, s.enemyHp, SPEC.params.enemyHp, "#f87171");
  ctx.fillStyle = "#e2e8f0";
  ctx.font = "13px system-ui, sans-serif";
  ctx.fillText("敌方 HP " + s.enemyHp + " / " + SPEC.params.enemyHp, 20, 58);
  const n = s.hand.length;
  const cw = 92;
  const ch = 118;
  const gap = 12;
  const x0 = Math.floor((W - (n * cw + (n - 1) * gap)) / 2);
  for (let i = 0; i < n; i += 1) {
    const x = x0 + i * (cw + gap);
    const y = 92;
    ctx.fillStyle = "#1e293b";
    ctx.fillRect(x, y, cw, ch);
    ctx.strokeStyle = "#38bdf8";
    ctx.strokeRect(x + 0.5, y + 0.5, cw - 1, ch - 1);
    ctx.fillStyle = "#e2e8f0";
    ctx.fillText(s.hand[i], x + 10, y + 26);
    ctx.fillStyle = "#94a3b8";
    ctx.fillText("第 " + i + " 张", x + 10, y + ch - 12);
  }
  bar(20, H - 38, W - 40, 16, s.playerHp, SPEC.params.playerHp, "#34d399");
  ctx.fillStyle = "#e2e8f0";
  ctx.fillText("我方 HP " + s.playerHp + " / " + SPEC.params.playerHp + "   回合 " + s.turn + "   能量 " + s.energy, 20, H - 46);
  document.getElementById("out").textContent = digestSnap(s);
  document.getElementById("turn").textContent = String(s.turn);
  document.getElementById("php").textContent = String(s.playerHp);
  document.getElementById("ehp").textContent = String(s.enemyHp);
  frames += 1;
}

globalThis.__ashdeck = {
  spec: SPEC,
  run(seq) {
    const sp = JSON.parse(JSON.stringify(SPEC));
    if (seq) sp.strategy = seq;
    snap = runSpec(sp);
    render(snap);
    return digestSnap(snap);
  },
  snapshot() {
    return snap;
  },
  frames() {
    return frames;
  },
  canvasDrawn: false,
};

globalThis.__ashdeck.run();
globalThis.__ashdeck.canvasDrawn = true;
`;

const body = `<h1>《灰烬牌库》· 单文件可玩原型</h1>
<div class="sub">内核与规格都内联在这一个 HTML 里：无 CDN、无外部模块、离线可跑</div>
<canvas id="cv" width="640" height="360"></canvas>
<div class="row">
  <div class="card"><div class="k">回合</div><div class="big" id="turn">—</div></div>
  <div class="card"><div class="k">我方 HP</div><div class="big" id="php">—</div></div>
  <div class="card"><div class="k">敌方 HP</div><div class="big" id="ehp">—</div></div>
</div>
<div class="card"><div class="k">digest（应与 S / P 层逐字相同）</div><div id="out" class="k">—</div></div>`;

const html = page({
  title: "《灰烬牌库》· 第 5 章 W 层可玩原型",
  subtitle: "一份规格，四处消费：这是 W 层",
  body,
  script,
});

const bytes = writePage(OUT, html);
console.log("modules=" + MODULES.length + " kernelChars=" + core.length);
console.log("built " + OUT + "  " + bytes + " B");

modules=5 kernelChars=4123
built /Users/bingrong.yan/.gdbook/ashdeck/out/mech05.html  9448 B