@funpixel/tools 0.0.0-stage → 0.1.1

package/dist/frames/loop.js

@@ -0,0 +1,52 @@
+const SIG = 24;
+export function signature(img) {
+    const out = new Float32Array(SIG * SIG);
+    const cw = img.width / SIG, ch = img.height / SIG;
+    for (let cy = 0; cy < SIG; cy++)
+        for (let cx = 0; cx < SIG; cx++) {
+            let s = 0, n = 0;
+            const x0 = Math.floor(cx * cw), x1 = Math.max(x0 + 1, Math.floor((cx + 1) * cw));
+            const y0 = Math.floor(cy * ch), y1 = Math.max(y0 + 1, Math.floor((cy + 1) * ch));
+            for (let y = y0; y < y1; y += 2)
+                for (let x = x0; x < x1; x += 2) {
+                    const o = (y * img.width + x) * 4, a = img.data[o + 3] / 255;
+                    s += a * (0.299 * img.data[o] + 0.587 * img.data[o + 1] + 0.114 * img.data[o + 2]) + (1 - a) * 128;
+                    n++;
+                }
+            out[cy * SIG + cx] = n ? s / n : 0;
+        }
+    return out;
+}
+export const diff = (a, b) => {
+    let s = 0;
+    for (let i = 0; i < a.length; i++)
+        s += Math.abs(a[i] - b[i]);
+    return s / a.length;
+};
+export const seamless = (p) => !p.still && p.match <= 0.5 && p.seam >= 0.6 && p.seam <= 1.5;
+export function findLoop(frames, min = 6, max = 24) {
+    const n = frames.length;
+    if (n < Math.max(3, min + 1))
+        return null;
+    const sig = frames.map(signature);
+    const steps = sig.slice(1).map((s, i) => diff(sig[i], s));
+    const sorted = [...steps].sort((a, b) => a - b);
+    const typical = Math.max(1e-6, sorted[Math.floor(sorted.length / 2)]);
+    if (typical < 0.6)
+        return { start: 0, length: Math.min(n, max), seam: 0, match: 0, step: typical, still: true };
+    let best = null, bestScore = Infinity;
+    for (let len = min; len <= Math.min(max, n - 1); len++) {
+        for (let s = 0; s + len < n; s++) {
+            const inside = steps.slice(s, s + len - 1).sort((a, b) => a - b);
+            const local = Math.max(1e-6, inside[Math.floor(inside.length / 2)] ?? typical);
+            const match = diff(sig[s + len], sig[s]) / local;
+            const seam = diff(sig[s + len - 1], sig[s]) / local;
+            const score = match + 0.25 * Math.abs(seam - 1) + 0.005 * len;
+            if (score < bestScore) {
+                bestScore = score;
+                best = { start: s, length: len, seam: Math.round(seam * 100) / 100, match: Math.round(match * 100) / 100, step: Math.round(local * 100) / 100, still: false };
+            }
+        }
+    }
+    return best;
+}

package/dist/frames/sheet.js

@@ -0,0 +1,69 @@
+import { mkdir, writeFile } from 'node:fs/promises';
+import { basename, dirname } from 'node:path';
+import { encodePng } from "../look/png.js";
+export function unionBox(frames, pad = 2) {
+    let x0 = Infinity, y0 = Infinity, x1 = -1, y1 = -1;
+    for (const f of frames)
+        for (let y = 0; y < f.height; y++)
+            for (let x = 0; x < f.width; x++) {
+                if (f.data[(y * f.width + x) * 4 + 3] <= 8)
+                    continue;
+                if (x < x0)
+                    x0 = x;
+                if (x > x1)
+                    x1 = x;
+                if (y < y0)
+                    y0 = y;
+                if (y > y1)
+                    y1 = y;
+            }
+    if (x1 < 0)
+        return null;
+    const W = frames[0].width, H = frames[0].height;
+    const x = Math.max(0, x0 - pad), y = Math.max(0, y0 - pad);
+    return { x, y, w: Math.min(W, x1 + pad + 1) - x, h: Math.min(H, y1 + pad + 1) - y };
+}
+export function cropTo(img, b) {
+    const data = new Uint8Array(b.w * b.h * 4);
+    for (let y = 0; y < b.h; y++) {
+        const sy = b.y + y;
+        if (sy >= img.height)
+            break;
+        data.set(img.data.subarray((sy * img.width + b.x) * 4, (sy * img.width + Math.min(img.width, b.x + b.w)) * 4), y * b.w * 4);
+    }
+    return { width: b.w, height: b.h, data };
+}
+export function fitInside(img, max) {
+    const s = Math.min(1, max / Math.max(img.width, img.height));
+    if (s >= 1)
+        return img;
+    const w = Math.max(1, Math.round(img.width * s)), h = Math.max(1, Math.round(img.height * s));
+    const data = new Uint8Array(w * h * 4);
+    for (let y = 0; y < h; y++)
+        for (let x = 0; x < w; x++) {
+            const sx = Math.min(img.width - 1, Math.floor(x / s)), sy = Math.min(img.height - 1, Math.floor(y / s));
+            data.set(img.data.subarray((sy * img.width + sx) * 4, (sy * img.width + sx) * 4 + 4), (y * w + x) * 4);
+        }
+    return { width: w, height: h, data };
+}
+export function pack(frames, names, cols, animations, image, meta = {}) {
+    const fw = frames[0].width, fh = frames[0].height, rows = Math.ceil(frames.length / cols);
+    const W = fw * Math.min(cols, frames.length), H = fh * rows;
+    const data = new Uint8Array(W * H * 4);
+    const json = { frames: {}, animations, meta: { image, size: { w: W, h: H }, scale: '1', ...meta } };
+    frames.forEach((f, i) => {
+        const ox = (i % cols) * fw, oy = Math.floor(i / cols) * fh;
+        for (let y = 0; y < fh; y++)
+            data.set(f.data.subarray(y * fw * 4, (y + 1) * fw * 4), ((oy + y) * W + ox) * 4);
+        json.frames[names[i]] = { frame: { x: ox, y: oy, w: fw, h: fh }, sourceSize: { w: fw, h: fh }, rotated: false, trimmed: false };
+    });
+    return { png: encodePng({ width: W, height: H, data }), json };
+}
+export async function writeSheet(out, sheet) {
+    await mkdir(dirname(out), { recursive: true });
+    const png = out.endsWith('.png') ? out : `${out}.png`, js = png.replace(/\.png$/, '.json');
+    sheet.json.meta.image = basename(png);
+    await writeFile(png, sheet.png);
+    await writeFile(js, JSON.stringify(sheet.json, null, 2) + '\n');
+    return { png, json: js };
+}

package/dist/gdd/book.js

@@ -0,0 +1,483 @@
+import { existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { designDoc, isVision, sha256 } from "./doc.js";
+import { readProgress } from "../progress/progress.js";
+import { readdirSync } from 'node:fs';
+import { hasLevelMap, LEVEL_MAP_CSS, levelMapHtml, readLevelMaps } from "./levelmap.js";
+export const GDD_PAGE = join('design', 'GDD.html');
+const PICTURE = /^[\w./-]+\.(png|webp|jpe?g)$/i;
+const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'part';
+const readJson = (p) => { try {
+    return JSON.parse(readFileSync(p, 'utf8'));
+}
+catch {
+    return null;
+} };
+function inline(game, text, count) {
+    const picture = (path, alt) => { count.n++; return `<a href="../${esc(path)}"><img src="../${esc(path)}" alt="${esc(alt)}" loading="lazy"></a>`; };
+    return text.split(/(`[^`]*`)/).map((part) => {
+        if (part.startsWith('`') && part.endsWith('`') && part.length > 1) {
+            const code = part.slice(1, -1);
+            if (/^<[^<>]*>$/.test(code))
+                return `<span class="todo">${esc(code.slice(1, -1)) || '·'}</span>`;
+            return PICTURE.test(code) && existsSync(join(game, code)) ? picture(code, code) : `<code>${esc(code)}</code>`;
+        }
+        return esc(part)
+            .replace(/&lt;((?:(?!&lt;|&gt;).)*?)&gt;/g, (_m, hint) => `<span class="todo">${hint || '·'}</span>`)
+            .replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (_m, alt, src) => (/^https?:/.test(src) ? `<img src="${src}" alt="${alt}" loading="lazy">` : picture(String(src).replace(/^\.\.\//, '').replace(/^(?!design\/|assets\/|public\/)/, 'design/'), alt)))
+            .replace(/\[([^\]]+)\]\((https?:[^)\s]+)\)/g, '<a href="$2">$1</a>')
+            .replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>')
+            .replace(/(^|[\s(])\*([^*\s][^*]*)\*/g, '$1<i>$2</i>')
+            .replace(/(^|[\s(|])((?:design|assets|public)\/[\w./-]+\.(?:png|webp|jpe?g))/gi, (m, lead, path) => (existsSync(join(game, path)) ? `${lead}${picture(path, path)}` : m));
+    }).join('');
+}
+export const DECISIONS_HEADING = /^(open (questions|decisions)|(the )?owner'?s? decisions|decisions (for|to) (the )?owner|yours to decide)\b/i;
+export function openDecisions(md) {
+    const lines = md.replace(/\r/g, '').split('\n');
+    const at = lines.findIndex((l) => /^##\s/.test(l) && DECISIONS_HEADING.test(l.replace(/^##\s+/, '')));
+    if (at < 0)
+        return [];
+    const items = [];
+    for (const l of lines.slice(at + 1)) {
+        if (/^#{1,2}\s/.test(l))
+            break;
+        const top = /^(?:[-*+]|\d+[.)])\s+(.*)$/.exec(l);
+        const sub = /^\s+(?:[-*+]|\d+[.)])\s+(.*)$/.exec(l);
+        if (top)
+            items.push(top[1]);
+        else if (sub && items.length)
+            items[items.length - 1] += `; ${sub[1]}`;
+    }
+    const out = [];
+    for (const raw of items) {
+        let text = raw.replace(/<[^<>\n]{2,}>/g, '').trim();
+        let decided = '';
+        const box = /^\[([ xX])\]\s*/.exec(text);
+        if (box) {
+            text = text.slice(box[0].length);
+            if (box[1] !== ' ')
+                decided = 'decided';
+        }
+        const said = /[\s;,(—–-]*\b(?:decided|the owner'?s? call|owner said)\s*:\s*(.*?)\)?$/i.exec(text);
+        if (said) {
+            decided = said[1].trim();
+            text = text.slice(0, said.index).trim();
+        }
+        let recommend = '';
+        const rec = /[\s;,(—–-]*\b(?:we )?recommend(?:ed|ation)?\b\s*:?\s*(.*?)\)?$/i.exec(text);
+        if (rec) {
+            recommend = rec[1].trim();
+            text = text.slice(0, rec.index).trim();
+        }
+        text = text.replace(/[\s;,—–-]+$/, '');
+        if (text.replace(/[^A-Za-zÀ-ÿ0-9]/g, '').length < 3)
+            continue;
+        out.push({ text, recommend, decided });
+    }
+    return out;
+}
+export function arrowChain(text) {
+    const t = text.trim();
+    if (/<[^<>]*>/.test(t) || /!?\[[^\]]*\]\(/.test(t) || (t.match(/→/g) ?? []).length < 2)
+        return null;
+    const m = /^(\*\*[^*→]{1,48}:\*\*|[^→:*]{1,40}:)\s+(.+)$/s.exec(t);
+    const steps = (m ? m[2] : t).split(/\s*→\s*/).map((x) => x.trim().replace(/[.;]$/, '')).filter(Boolean);
+    if (steps.length < 3 || steps.some((x) => !/\p{L}{2}/u.test(x) || x.length > 120))
+        return null;
+    return { label: m ? m[1].replace(/\*\*/g, '').replace(/:$/, '').trim() : '', steps };
+}
+function flowHtml(game, chain, count) {
+    return `<div class="flow">${chain.label ? `<b>${inline(game, chain.label, count)}</b>` : ''}<div class="steps">${chain.steps.map((x, n) => (n ? `<span class="sg"><i aria-hidden="true">→</i><span class="st">${inline(game, x, count)}</span></span>` : `<span class="st">${inline(game, x, count)}</span>`)).join('')}</div></div>`;
+}
+const HINT = /^<[^<>]+>$/s;
+export function unhinted(text) {
+    return text.replace(/<[^<>]*>/gs, ' ').replace(/(^|\s)(…|—|-|tbd|todo)(?=\s|$)/gi, ' ').replace(/\*\*[^*]+:\*\*/g, ' ').replace(/[|*_`]/g, ' ').replace(/\s+/g, ' ').trim();
+}
+export function sectionWritten(chunk) {
+    const lines = chunk.split('\n').slice(1);
+    const kept = lines.filter((l, n) => !/^\s*\|?\s*:?-{2,}/.test(l) && !/^\s*\|?\s*:?-{2,}/.test(lines[n + 1] ?? ''));
+    return /[\p{L}\p{N}]/u.test(unhinted(kept.join('\n')));
+}
+function body(game, md, count, sections) {
+    const out = [];
+    const lines = md.split('\n');
+    const seen = new Map();
+    let i = 0;
+    const cells = (row) => row.trim().replace(/^\||\|$/g, '').split('|').map((c) => c.trim());
+    while (i < lines.length) {
+        const line = lines[i];
+        if (/^```/.test(line)) {
+            const code = [];
+            for (i++; i < lines.length && !/^```/.test(lines[i]); i++)
+                code.push(lines[i]);
+            i++;
+            out.push(`<pre>${esc(code.join('\n'))}</pre>`);
+        }
+        else if (/^#{1,4}\s/.test(line)) {
+            const level = line.match(/^#+/)[0].length;
+            const title = line.replace(/^#+\s+/, '').trim();
+            if (level === 2) {
+                const base = slug(title), n = (seen.get(base) ?? 0) + 1;
+                seen.set(base, n);
+                const id = n > 1 ? `${base}-${n}` : base;
+                sections.push({ id, title, words: 0 });
+                out.push(`<div class="sh"><span class="no">${sections.length}</span><h2 id="${id}">${inline(game, title, count)}</h2></div>`);
+            }
+            else if (level > 1)
+                out.push(`<h${level}>${inline(game, title, count)}</h${level}>`);
+            i++;
+        }
+        else if (/^\s*\|/.test(line) && /^\s*\|?\s*:?-{2,}/.test(lines[i + 1] ?? '')) {
+            const head = cells(line);
+            const rows = [];
+            for (i += 2; i < lines.length && /^\s*\|/.test(lines[i]); i++)
+                rows.push(cells(lines[i]));
+            const written = rows.filter((r) => r.some((c) => !!unhinted(c)));
+            if (!written.length)
+                continue;
+            if (sections.length)
+                sections[sections.length - 1].words += written.flat().join(' ').split(/\s+/).length;
+            out.push(`<div class="tw"><table><thead><tr>${head.map((c) => `<th>${inline(game, c, count)}</th>`).join('')}</tr></thead><tbody>${rows.map((r) => `<tr>${r.map((c) => `<td>${inline(game, c, count)}</td>`).join('')}</tr>`).join('')}</tbody></table></div>`);
+        }
+        else if (/^\s*([-*]|\d+[.)])\s+/.test(line)) {
+            const ordered = /^\s*\d/.test(line);
+            const items = [];
+            for (; i < lines.length && (/^\s*([-*]|\d+[.)])\s+/.test(lines[i]) || (/^\s{2,}\S/.test(lines[i]) && items.length)); i++) {
+                if (/^\s*([-*]|\d+[.)])\s+/.test(lines[i]))
+                    items.push(lines[i].replace(/^\s*([-*]|\d+[.)])\s+/, ''));
+                else
+                    items[items.length - 1] += ` ${lines[i].trim()}`;
+            }
+            if (sections.length)
+                sections[sections.length - 1].words += items.map(unhinted).join(' ').split(/\s+/).filter(Boolean).length;
+            out.push(`<${ordered ? 'ol' : 'ul'}>${items.map((t) => { const c = arrowChain(t); return `<li>${c ? flowHtml(game, c, count) : inline(game, t, count)}</li>`; }).join('')}</${ordered ? 'ol' : 'ul'}>`);
+        }
+        else if (/^>\s?/.test(line)) {
+            const quote = [];
+            for (; i < lines.length && /^>\s?/.test(lines[i]); i++)
+                quote.push(lines[i].replace(/^>\s?/, ''));
+            out.push(`<blockquote>${inline(game, quote.join(' '), count)}</blockquote>`);
+        }
+        else if (!line.trim()) {
+            i++;
+        }
+        else {
+            const para = [];
+            for (; i < lines.length && lines[i].trim() && !/^(#{1,4}\s|```|>\s?|\s*([-*]|\d+[.)])\s+|\s*\|)/.test(lines[i]); i++)
+                para.push(lines[i].trim());
+            const text = para.join(' ');
+            if (!unhinted(text)) {
+                out.push(`<p class="todo unwritten">Not written yet${HINT.test(text.trim()) ? `: ${esc(text.trim().slice(1, -1))}` : ''}</p>`);
+                continue;
+            }
+            if (sections.length)
+                sections[sections.length - 1].words += unhinted(text).split(/\s+/).length;
+            const facts = para.length > 1 && para.every((l) => /^\*\*[^*]+:\*\*/.test(l));
+            const chain = !facts ? arrowChain(text) : null;
+            if (chain) {
+                out.push(flowHtml(game, chain, count));
+                continue;
+            }
+            out.push(facts ? `<p class="facts">${para.map((l) => inline(game, l, count)).join('<br>')}</p>` : `<p>${inline(game, text, count)}</p>`);
+        }
+    }
+    return out.join('\n');
+}
+function lightness(hex) {
+    const m = typeof hex === 'string' ? /^#?([0-9a-f]{6})$/i.exec(hex.trim()) : null;
+    if (!m)
+        return null;
+    const n = parseInt(m[1], 16);
+    return (0.2126 * ((n >> 16) & 255) + 0.7152 * ((n >> 8) & 255) + 0.0722 * (n & 255)) / 255;
+}
+function paletteCss(manifest) {
+    const p = manifest?.metadata?.palette ?? {};
+    const bg = lightness(p.bg), primary = lightness(p.primary) !== null ? String(p.primary) : null, accent = lightness(p.accent) !== null ? String(p.accent) : null;
+    if (bg === null && !primary)
+        return '';
+    const dark = bg !== null && bg < 0.45;
+    const ground = bg !== null ? String(p.bg) : null;
+    const vars = [
+        ground ? `--bg:${ground};--bg2:color-mix(in srgb,${ground} 86%,${dark ? '#fff' : '#000'});--card:color-mix(in srgb,${ground} ${dark ? 80 : 40}%,${dark ? '#fff' : '#fff'})` : '',
+        ground ? (dark ? '--ink:#f1eee8;--ink2:#b3b0ba;--rule:rgba(255,255,255,.14)' : '--ink:#17171a;--ink2:#5e5d66;--rule:rgba(0,0,0,.14)') : '',
+        primary ? `--accent:${primary}` : '', accent ? `--accent2:${accent}` : '',
+    ].filter(Boolean).join(';');
+    return `:root{${vars};color-scheme:${ground ? (dark ? 'dark' : 'light') : 'light dark'}}`;
+}
+const PIC = /\.(png|webp|jpe?g)$/i;
+function captures(game, status) {
+    const out = [];
+    const add = (path, says) => { if (typeof path === 'string' && PIC.test(path) && existsSync(join(game, path)) && !out.some((o) => o.path === path))
+        out.push({ path, says }); };
+    for (const t of status?.plan?.targets ?? [])
+        add(t, 'target frame');
+    for (const m of status?.scores?.moments ?? []) {
+        add(m?.target, `${m?.name ?? 'moment'} · target`);
+        add(m?.capture, `${m?.name ?? 'moment'} · the game${typeof m?.score === 'number' ? ` · ${Math.round(m.score)}` : ''}`);
+    }
+    add(status?.latest?.capture, 'the game now');
+    for (const dir of ['design/shots/final', 'design/shots']) {
+        const full = join(game, dir);
+        if (!existsSync(full))
+            continue;
+        for (const f of readdirSync(full).filter((f) => PIC.test(f)).sort().slice(-6))
+            add(`${dir}/${f}`, 'the game');
+    }
+    return out.slice(0, 8);
+}
+export const GDD_VERSIONS = join('.funtools', 'gdd-versions.json');
+export function sectionHashes(md) {
+    const out = {};
+    const seen = new Map();
+    for (const chunk of md.split(/^##\s+/m).slice(1)) {
+        const title = chunk.split('\n')[0].trim();
+        const base = slug(title), n = (seen.get(base) ?? 0) + 1;
+        seen.set(base, n);
+        out[n > 1 ? `${base}-${n}` : base] = { title, hash: sha256(chunk.trim()), written: sectionWritten(chunk) };
+    }
+    return out;
+}
+export const GDD_AGREED = join('.funtools', 'gdd-agreed.json');
+function savedAgreed(game) {
+    const v = readJson(join(game, GDD_AGREED));
+    return v && typeof v.sections === 'object' && v.sections ? v.sections : {};
+}
+function planText(text) { return text.replace(/^#\s+.+\n?/m, ''); }
+export function takeAgreements(game, now = new Date()) {
+    const dir = join(game, 'design', 'inbox');
+    let names = [];
+    try {
+        names = readdirSync(dir).filter((n) => n.endsWith('.json')).sort();
+    }
+    catch {
+        return [];
+    }
+    const doc = designDoc(game);
+    if (!doc)
+        return [];
+    const hashes = sectionHashes(planText(doc.text));
+    const agreed = savedAgreed(game);
+    const taken = [];
+    for (const name of names) {
+        const entry = readJson(join(dir, name));
+        if (entry?.kind !== 'agree' && entry?.kind !== 'reopen')
+            continue;
+        const id = typeof entry.section === 'string' ? entry.section : '';
+        if (entry.kind === 'agree' && hashes[id])
+            agreed[id] = { hash: hashes[id].hash, at: typeof entry.at === 'string' ? entry.at : now.toISOString() };
+        if (entry.kind === 'reopen')
+            delete agreed[id];
+        try {
+            mkdirSync(join(dir, 'done'), { recursive: true });
+            renameSync(join(dir, name), join(dir, 'done', name));
+        }
+        catch {
+            continue;
+        }
+        taken.push(id);
+    }
+    if (taken.length) {
+        mkdirSync(join(game, '.funtools'), { recursive: true });
+        writeFileSync(join(game, GDD_AGREED), JSON.stringify({ sections: agreed }, null, 2) + '\n');
+    }
+    return taken;
+}
+export function sectionStates(game) {
+    const doc = designDoc(game);
+    if (!doc)
+        return null;
+    const hashes = sectionHashes(planText(doc.text));
+    const compared = compareWithSaved(game, hashes);
+    const changed = new Set(compared.saved.length ? compared.changed : []);
+    const agreed = savedAgreed(game);
+    return Object.entries(hashes).map(([id, h]) => { const vision = isVision(h.title); return { id, title: h.title, changed: changed.has(id), agreed: !vision && agreed[id]?.hash === h.hash, written: h.written, vision, hash: h.hash.slice(0, 12) }; });
+}
+function savedVersions(game) {
+    const v = readJson(join(game, GDD_VERSIONS));
+    return Array.isArray(v?.versions) ? v.versions : [];
+}
+function compareWithSaved(game, now) {
+    const saved = savedVersions(game);
+    const last = saved[saved.length - 1];
+    if (!last)
+        return { changed: [], isNew: true, saved };
+    const same = Object.keys(now).length === Object.keys(last.sections).length && Object.entries(now).every(([id, s]) => last.sections[id] === s.hash);
+    if (same)
+        return { changed: last.changed, isNew: false, saved };
+    return { changed: Object.keys(now).filter((id) => last.sections[id] !== now[id].hash), isNew: true, saved };
+}
+export function readBook(game) {
+    const doc = designDoc(game);
+    if (!doc)
+        return null;
+    const title = /^#\s+(.+)$/m.exec(doc.text)?.[1].trim() ?? 'Design document';
+    const md = planText(doc.text);
+    const sections = [];
+    const count = { n: 0 };
+    let main = body(game, md, count, sections);
+    const hashes = sectionHashes(md);
+    const compared = compareWithSaved(game, hashes);
+    const changed = compared.saved.length ? compared.changed : [];
+    for (const id of changed)
+        main = main.replace(`<h2 id="${id}">`, `<h2 id="${id}"><span class="new">changed</span>`);
+    const agreements = savedAgreed(game);
+    const agreed = Object.keys(hashes).filter((id) => !isVision(hashes[id].title) && agreements[id]?.hash === hashes[id].hash);
+    for (const id of agreed)
+        main = main.replace(`<h2 id="${id}">`, `<h2 id="${id}"><span class="ok">agreed</span>`);
+    let maps = { rooms: null, plans: [] };
+    try {
+        maps = readLevelMaps(game, doc.text);
+    }
+    catch { }
+    const mapHtml = levelMapHtml(maps);
+    let mapIn = '';
+    if (mapHtml) {
+        const home = sections.find((s) => /^(the\s+)?(levels?|rooms?|places|map|world map|chapters|campaign|level design|where it happens|locations)\b/i.test(s.title));
+        const at = home ? main.indexOf(`<h2 id="${home.id}">`) : -1;
+        if (home && at >= 0) {
+            const next = main.indexOf('<div class="sh">', at);
+            main = next < 0 ? `${main}\n${mapHtml}` : `${main.slice(0, next)}${mapHtml}\n${main.slice(next)}`;
+            mapIn = home.id;
+        }
+        else {
+            main = `${main}\n<section><div class="sh"><span class="no">⌖</span><h2 id="the-level-map">The level map</h2></div>${mapHtml}</section>`;
+            mapIn = 'the-level-map';
+        }
+    }
+    const levelMap = hasLevelMap(maps) ? { rooms: maps.rooms?.rooms.length ?? 0, path: maps.rooms?.path ?? [], plans: maps.plans.map((p) => ({ file: p.file, places: p.nodes.length, routed: p.path.length > 1 })), in: mapIn } : null;
+    const version = /\*\*Version:\*\*\s*([^\n·]+)/i.exec(doc.text)?.[1].trim() ?? '';
+    const keep = compared.isNew
+        ? [...compared.saved, { version, at: new Date().toISOString(), sections: Object.fromEntries(Object.entries(hashes).map(([id, h]) => [id, h.hash])), changed: compared.saved.length ? compared.changed : [] }].slice(-30)
+        : null;
+    const history = (keep ?? compared.saved).slice().reverse().map((v) => ({ version: v.version, at: v.at.slice(0, 10), changed: v.changed.map((id) => hashes[id]?.title ?? id) }));
+    const status = readJson(join(game, 'design', 'status.json'));
+    const manifest = readJson(join(game, 'funpixel.json'));
+    const w = status?.where;
+    const where = w ? { stage: String(w.stage?.title ?? w.phase ?? ''), n: w.stage?.n ?? null, of: w.stage?.of ?? null, waiting_on: String(w.waiting_on ?? ''), step: String((w.waiting_on === 'owner' && w.ask) || w.step || ''), agreed: status?.plan?.agreed === true } : null;
+    const progress = readProgress(game);
+    const questions = progress.questions.map((q) => ({ id: q.id, kind: q.kind, text: q.text, state: q.state, answer: q.answer ? `${q.answer.pick}${q.answer.words ? `: ${q.answer.words}` : ''}` : '', by: q.answer?.by ?? '', at: (q.answer?.at ?? q.at).slice(0, 10) }));
+    const open = questions.filter((q) => q.state === 'open');
+    const board = {
+        done: progress.cards.slice(-8).map((c) => c.line).filter(Boolean),
+        doing: where?.waiting_on === 'owner' ? '' : (where?.step ?? ''),
+        next: progress.last?.next ?? '',
+        yours: open.map((q) => `${q.id}: ${q.text}`),
+    };
+    const decisions = openDecisions(md);
+    const decisionsHtml = decisions.length ? `<section id="yours-to-decide"><div class="sh"><span class="no">!</span><h2>Yours to decide</h2></div><div class="tw"><table><thead><tr><th>Decision</th><th>We recommend</th><th>Your call</th></tr></thead><tbody>${decisions.map((d) => `<tr><td>${inline(game, d.text, count)}</td><td>${d.recommend ? inline(game, d.recommend, count) : '<i>—</i>'}</td><td>${d.decided ? inline(game, d.decided, count) : '<i>open</i>'}</td></tr>`).join('')}</tbody></table></div></section>` : '';
+    const shots = captures(game, status);
+    const assets = Array.isArray(status?.assets) ? status.assets : [];
+    const made = assets.filter((a) => Array.isArray(a?.stages) && a.stages.length && a.stages.every((st) => st?.done)).length;
+    const meta = manifest?.metadata ?? {};
+    const bill = [
+        version && `<b>${esc(version)}</b>`,
+        where ? (where.agreed ? '<b>locked</b>: built to this plan' : '<b>not locked yet</b>') : '',
+        where?.n && where.of ? `stage <b>${where.n}</b> of ${where.of}` : '',
+        status?.game?.size && esc(String(status.game.size)),
+        meta.framework && esc(String(meta.framework)), meta.orientation && esc(String(meta.orientation)),
+        assets.length ? `<b>${made}</b> of ${assets.length} assets made` : '',
+    ].filter(Boolean);
+    const pct = where?.n && where.of ? Math.round(((where.n - 1) / where.of) * 100) : null;
+    const col = (name, cls, cards) => `<div class="col ${cls}"><h4>${name} <span>${cards.length}</span></h4>${cards.length ? cards.map((c) => `<div class="c">${esc(c)}</div>`).join('') : '<p class="none">nothing</p>'}</div>`;
+    const boardHtml = where || board.done.length || open.length ? `<section id="board"><div class="sh"><span class="no">★</span><h2>The board</h2></div>
+<div class="bhead"><div class="now"><b>${where?.waiting_on === 'owner' ? 'Waiting on you' : 'Doing now'}</b>${esc(where?.step ?? 'not started')}${where?.stage ? `<small>${esc(where.stage)}</small>` : ''}</div>${pct === null ? '' : `<div class="prog"><div class="bar" role="img" aria-label="${pct}% of the stages done"><i style="width:${pct}%"></i></div><span>${pct}% of the stages</span></div>`}</div>
+<div class="board">${col('Done', 'done', board.done)}${col('Doing now', 'doing', board.doing ? [board.doing] : [])}${col('Next', 'next', board.next ? [board.next] : [])}${col('Your move', 'yours', board.yours)}</div></section>` : '';
+    const shotsHtml = shots.length ? `<section id="today"><div class="sh"><span class="no">◉</span><h2>${shots.some((p) => p.says.includes('game')) ? 'The game today, beside its targets' : 'The look so far'}</h2></div><div class="figs">${shots.map((p) => { count.n++; return `<figure><a href="../${esc(p.path)}"><img src="../${esc(p.path)}" alt="${esc(p.says)}" loading="lazy"></a><figcaption>${esc(p.says)}</figcaption></figure>`; }).join('')}</div></section>` : '';
+    const log = questions.length
+        ? `<section><div class="sh"><span class="no">?</span><h2 id="questions-and-answers">Questions and answers</h2></div><div class="tw"><table><thead><tr><th>When</th><th>Question</th><th>Answer</th></tr></thead><tbody>${questions.map((q) => `<tr><td>${esc(q.at)}</td><td><b>${esc(q.id)}</b> ${esc(q.text)}</td><td>${q.state === 'open' ? '<i>open</i>' : `${esc(q.answer)}${q.by === 'default' ? ' <i>(taken by default)</i>' : ''}`}</td></tr>`).join('')}</tbody></table></div></section>`
+        : '';
+    const writtenIds = Object.keys(hashes).filter((id) => hashes[id].written && !isVision(hashes[id].title));
+    const stillOpen = writtenIds.filter((id) => !agreed.includes(id));
+    const changedHtml = (changed.length ? `<div class="whatchanged"><b>Changed since the last version</b>${changed.map((id) => `<a href="#${id}">${esc(hashes[id]?.title ?? id)}</a>`).join('')}</div>` : '')
+        + (agreed.length ? `<div class="whatchanged agreedcard"><b>Agreed ${agreed.length} of ${writtenIds.length}</b>${stillOpen.length ? `<span>still open:</span>${stillOpen.map((id) => `<a href="#${id}">${esc(hashes[id].title)}</a>`).join('')}` : '<span>every section, as it reads now</span>'}</div>` : '');
+    const versionsHtml = history.length > 1 ? `<section><div class="sh"><span class="no">v</span><h2 id="versions-of-the-plan">Versions of the plan</h2></div><div class="tw"><table><thead><tr><th>Version</th><th>Saved</th><th>What changed</th></tr></thead><tbody>${history.map((h, i) => `<tr><td>${esc(h.version || '—')}${i === 0 ? ' <i>(this one)</i>' : ''}</td><td>${esc(h.at)}</td><td>${h.changed.length ? esc(h.changed.join(', ')) : '<i>first version</i>'}</td></tr>`).join('')}</tbody></table></div></section>` : '';
+    const nav = [...(boardHtml ? [{ id: 'board', title: 'The board' }] : []), ...(decisionsHtml ? [{ id: 'yours-to-decide', title: 'Yours to decide' }] : []), ...(shotsHtml ? [{ id: 'today', title: 'Today' }] : []), ...sections, ...(mapIn === 'the-level-map' ? [{ id: 'the-level-map', title: 'Level map' }] : []), ...(questions.length ? [{ id: 'questions-and-answers', title: 'Questions' }] : []), ...(versionsHtml ? [{ id: 'versions-of-the-plan', title: 'Versions' }] : [])];
+    const html = `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>${esc(title)} · design document</title>
+<style>
+:root{--bg:#f3f1ec;--bg2:#e7e4dc;--card:#fff;--ink:#17171a;--ink2:#5e5d66;--rule:#d6d2c8;--accent:#c8472f;--accent2:#2f6fd0;--go:#1f7a52;--ask:#a8620e;color-scheme:light dark}
+@media (prefers-color-scheme:dark){:root{--bg:#131214;--bg2:#1c1b1f;--card:#201f24;--ink:#eeebe5;--ink2:#a5a2ab;--rule:#34323a;--accent:#ff7a5c;--accent2:#7fb0ff;--go:#6fd0a0;--ask:#e3ab5c}}
+${paletteCss(manifest)}
+*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
+h1,h2,h3,h4{font-family:ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif;line-height:1.1;margin:0}
+.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
+.mast{text-align:center;padding:38px 16px 22px;background:linear-gradient(180deg,var(--bg2),var(--bg))}
+.mast .house{font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--ink2)}
+.mast h1{font-weight:800;font-size:clamp(46px,11vw,112px);color:var(--accent);letter-spacing:-.01em;text-wrap:balance}
+.mast .sub{font-weight:600;font-size:clamp(17px,3vw,24px);margin:.2em auto .8em;max-width:30ch;text-wrap:balance}
+.bill{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:12.5px}
+.bill span{background:var(--card);border:1px solid var(--rule);border-radius:99px;padding:3px 11px;color:var(--ink2)}.bill b{color:var(--ink)}
+nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
+nav .in{display:flex;gap:2px;overflow-x:auto;max-width:1080px;margin:0 auto;padding:6px 12px;scrollbar-width:none}nav .in::-webkit-scrollbar{display:none}
+nav a{white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--ink2);text-decoration:none;padding:5px 9px;border-radius:99px}nav a:hover,nav a:focus-visible{background:var(--bg2);color:var(--ink);outline:none}
+section{padding:30px 0 8px}
+.sh{display:flex;align-items:center;gap:12px;margin:34px 0 14px;scroll-margin-top:52px}
+.sh .no{font-family:ui-rounded,system-ui;font-weight:800;background:var(--accent2);color:#fff;border-radius:13px;min-width:40px;height:40px;padding:0 9px;display:grid;place-items:center;font-size:17px;flex:none}
+.sh h2{font-size:clamp(24px,4.4vw,36px);font-weight:800;scroll-margin-top:52px}
+h3{font-size:20px;font-weight:800;margin:24px 0 8px}h4{font-size:16px;font-weight:800;margin:16px 0 6px}
+p{margin:0 0 12px;max-width:74ch}li{max-width:74ch;margin-bottom:4px}.facts{line-height:1.9}
+.bhead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:center;margin-bottom:12px}
+.now{background:var(--card);border:1px solid var(--rule);border-left:8px solid var(--ask);border-radius:14px;padding:12px 14px}
+.now b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}.now small{display:block;color:var(--ink2);margin-top:4px}
+.prog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}.bar{flex:1;height:8px;background:var(--bg2);border-radius:99px;overflow:hidden;min-width:40px}.bar i{display:block;height:100%;background:var(--go);border-radius:99px}
+.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px}
+.col{background:var(--bg2);border-radius:14px;padding:10px;display:grid;gap:6px;align-content:start}
+.col h4{margin:0 2px 2px;font-size:13px;display:flex;justify-content:space-between}.col h4 span{color:var(--ink2);font-weight:600}
+.col .c{background:var(--card);border-radius:10px;padding:8px 10px;font-size:13.5px;border-left:4px solid var(--rule)}
+.col.done .c{border-left-color:var(--go)}.col.doing .c{border-left-color:var(--accent2)}.col.yours .c{border-left-color:var(--ask)}.col .none{color:var(--ink2);font-size:13px;margin:0 2px}
+.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
+figure{margin:0}figure img,.figs img{width:100%;max-width:none}figcaption{font-size:13px;color:var(--ink2);margin-top:5px}
+.tw{overflow-x:auto;margin:0 0 16px;background:var(--card);border:1px solid var(--rule);border-radius:12px}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--rule)}tr:last-child td{border-bottom:0}th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
+img{display:block;max-width:min(100%,380px);height:auto;border-radius:10px;border:1px solid var(--rule);margin:4px 0}td img{max-width:230px}
+code{font:13px ui-monospace,Menlo,monospace;background:var(--bg2);border-radius:5px;padding:.05em .35em;word-break:break-word}
+pre{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:12px;overflow-x:auto;font:13px/1.5 ui-monospace,Menlo,monospace}
+blockquote{margin:0 0 14px;padding:8px 14px;border-left:4px solid var(--accent2);background:var(--bg2);border-radius:0 10px 10px 0;color:var(--ink2)}a{color:var(--accent2)}
+h2 .new{font:700 11px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:var(--ask);color:#fff;border-radius:6px;padding:5px 7px;margin-right:10px;vertical-align:middle}
+.flow{margin:16px 0}.flow>b{display:block;font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
+.flow .steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0}
+.flow .st{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:7px 12px;font-size:14px;line-height:1.35;max-width:100%}
+.flow .steps>.st:first-child{border-color:var(--accent)}.flow .sg{display:inline-flex;align-items:center}.flow i{font-style:normal;color:var(--accent);padding:0 8px;font-weight:700}
+li .flow{margin:6px 0}
+.todo{color:var(--ink2);font-style:italic;opacity:.75}p.unwritten{font-size:14px;border-left:3px dashed var(--rule);padding-left:12px}
+h2 .ok{font:700 11px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:var(--go);color:#fff;border-radius:6px;padding:5px 7px;margin-right:10px;vertical-align:middle}
+.agreedcard{border-left-color:var(--go)!important}.agreedcard span{font-size:13px;color:var(--ink2)}
+.whatchanged{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--card);border:1px solid var(--rule);border-left:8px solid var(--ask);border-radius:14px;padding:12px 14px}
+.whatchanged b{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-right:4px}.whatchanged a{background:var(--bg2);border-radius:99px;padding:3px 10px;font-size:13px;text-decoration:none;color:var(--ink)}
+${mapHtml ? LEVEL_MAP_CSS : ''}
+footer{margin:48px 0 64px;color:var(--ink2);font-size:13px}
+@media (max-width:700px){.bhead{grid-template-columns:minmax(0,1fr)}}
+</style></head><body>
+<header class="mast"><div class="house">Game design document</div><h1>${esc(title)}</h1>${meta.tagline ? `<p class="sub">${esc(String(meta.tagline))}</p>` : ''}<div class="bill">${bill.map((b) => `<span>${b}</span>`).join('')}</div></header>
+<nav aria-label="Sections"><div class="in">${nav.map((s) => `<a href="#${s.id}">${esc(s.title)}</a>`).join('')}</div></nav>
+<main class="wrap">
+${changedHtml}
+${boardHtml}
+${decisionsHtml}
+${shotsHtml}
+${main}
+${log}
+${versionsHtml}
+<footer>Written from ${esc(doc.rel)} by funtools gdd page, and rewritten whenever the game's state is. Change the document, not this page: a change of mind is a new version of the plan, and the next round builds to it.</footer>
+</main></body></html>
+`;
+    return { title, source: doc.rel, sections, where, questions, pictures: count.n, changed, history, keep, board, decisions, levelMap, html };
+}
+export function writeBook(game) {
+    try {
+        takeAgreements(game);
+    }
+    catch { }
+    const book = readBook(game);
+    if (!book)
+        return null;
+    writeFileSync(join(game, GDD_PAGE), book.html);
+    if (book.keep) {
+        try {
+            mkdirSync(join(game, '.funtools'), { recursive: true });
+            writeFileSync(join(game, GDD_VERSIONS), JSON.stringify({ versions: book.keep }, null, 2) + '\n');
+        }
+        catch { }
+    }
+    return book;
+}