9.2 选择界面与状态显示

  const aff = document.getElementById("aff");
  aff.textContent = "";
  for (const k of Object.keys(state.aff).sort()) {
    const s = document.createElement("span");
    s.className = "pill";
    s.setAttribute("data-aff-" + k, String(state.aff[k]));
    s.textContent = k + " " + state.aff[k];
    aff.appendChild(s);
  }
  document.getElementById("flags").textContent =
    Object.keys(state.flags).sort().filter((k) => state.flags[k]).join(" ") || "（无）";
  document.getElementById("items").textContent =
    Object.keys(state.items).sort().filter((k) => state.items[k]).join(" ") || "（无）";

// file: web/verify_ne09.mjs
// tier: W
// verify: NODE_PATH=/opt/homebrew/lib/node_modules node web/verify_ne09.mjs
// 卷二 9.2 / 9.3：Playwright 无头打开单文件原型，断言 DOM 已绘制、按钮数 = 当前可用
// 选项数、点击推进节点；再走「总是选第一个可用选项」的确定性路径（25 事件），把终局
// canonical 与 FNV-1a 摘要与 Python 侧（out/ne_01_3_py.json 的 first 策略）逐位比对。
// NODE_PATH 对 ESM import 无效 → 必须 createRequire。

import { createRequire } from "node:module";
import { readFileSync, mkdirSync } from "node:fs";
import { join, dirname } from "node:path";
import { fileURLToPath, pathToFileURL } from "node:url";

const require = createRequire(import.meta.url);
const { chromium } = require("playwright");

const HERE = dirname(fileURLToPath(import.meta.url));
const ROOT = join(HERE, "..");
const SHOTS = join(ROOT, "out/shots");
mkdirSync(SHOTS, { recursive: true });

const py = JSON.parse(readFileSync(join(ROOT, "out/ne_01_3_py.json"), "utf8"));
const ref = py.find((r) => r.strategy === "first");
const url = pathToFileURL(join(HERE, "dist/ne09.html")).href;

const browser = await chromium.launch();
const ctx = await browser.newContext({ viewport: { width: 820, height: 900 } });
const page = await ctx.newPage();

// 冷启动预热页：首个 page 读像素恒为空白，先画一次 8x8 再丢弃
const warm = await ctx.newPage();
await warm.setContent('<canvas id="w" width="8" height="8"></canvas>');
await warm.evaluate(() => {
  const g = document.getElementById("w").getContext("2d");
  g.fillStyle = "#38bdf8";
  g.fillRect(0, 0, 8, 8);
});
await warm.close();

let fail = 0;
function check(name, got, want) {
  const ok = got === want;
  if (!ok) fail += 1;
  console.log(`${ok ? "OK  " : "FAIL"} ${name}: ${got}${ok ? "" : " != " + want}`);
}

await page.goto(url);
const start = await page.evaluate(() => ({
  node: window.__ne09.node, choices: window.__ne09.choices, available: window.__ne09.available,
}));
check("起始节点", start.node, "d_pier_1");
check("按钮数 = 当前可用选项数", start.choices, start.available);
const firstId = await page.getAttribute("[data-choice-id]", "data-choice-id");
await page.click(`[data-choice-id="${firstId}"]`);
check("点击后节点推进", await page.evaluate(() => window.__ne09.node) !== start.node, true);

const shot = await page.screenshot({ path: join(SHOTS, "ne09_playable.png"), fullPage: true });
console.log(`OK   截图 out/shots/ne09_playable.png ${shot.length} bytes`);
if (shot.length <= 0) { fail += 1; console.log("FAIL 截图为空"); }

await page.goto(url);
await page.evaluate(() => window.__ne09.reset());
let steps = 0;
for (let i = 0; i < 200; i += 1) {
  if ((await page.evaluate(() => window.__ne09.choices)) === 0) break;
  const cid = await page.getAttribute("[data-choice-id]", "data-choice-id");
  await page.click(`[data-choice-id="${cid}"]`);
  steps += 1;
}
const got = await page.evaluate(() => ({
  node: window.__ne09.node, ending: window.__ne09.ending,
  canonical: window.__ne09.canonical, digest: window.__ne09.digest,
}));
check("策略路径事件数", steps, ref.choices.length);
check("终局节点", got.node, ref.node);
check("结局", got.ending, ref.ending);
check("canonical（浏览器 vs Python）", got.canonical, ref.canonical);
check("FNV-1a 摘要（浏览器 vs Python）", got.digest, ref.digest);
check("摘要锚点 4162796975", got.digest, 4162796975);

await browser.close();
console.log(`== verify_ne09: 失败 ${fail}`);
process.exit(fail ? 1 : 0);

OK   起始节点: d_pier_1
OK   按钮数 = 当前可用选项数: 2
OK   点击后节点推进: true
OK   截图 out/shots/ne09_playable.png 50002 bytes

# snippet: 构建并验证可玩原型
cd ~/.inkwellbook/inkwell && node web/build_ne09.mjs \
  && NODE_PATH=/opt/homebrew/lib/node_modules node web/verify_ne09.mjs