feat: playable SpellGrid page on the site (the highest TS reference, unmodified, in the browser)

The sync step copies the reference's engine, harness and content into
site/src/game/generated/ and replaces only content/index.ts (node:fs) with a
re-export of a browser content module (static imports of cards, words, seams,
levels). /play/ has a level picker, text-tile grid, keyboard and buttons, cards
then tiles, the chooser as buttons, rules, minions, the log tree, Undo by
replay and Restart. test:site plays l3 to the win under plain Node. Lessons
5, 10-13 and the home page link the page; lesson links to site pages go
through their source file.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

site/scripts/sync-content.mjs

@@ -1,6 +1,7 @@
-// Generates site/src/content/docs/course/** from course/**/lesson.md and course/harness.md.
-// Nothing is copied by hand: the lessons stay the single source of truth.
-import { readFileSync, writeFileSync, mkdirSync, readdirSync, existsSync, rmSync } from "node:fs";
+// Generates site/src/content/docs/course/** from course/**/lesson.md and course/harness.md,
+// and site/src/game/generated/** (the play page's game) from the highest TypeScript reference.
+// Nothing is copied by hand: the lessons and the references stay the single source of truth.
+import { readFileSync, writeFileSync, mkdirSync, readdirSync, existsSync, rmSync, cpSync } from "node:fs";
 import { dirname, join, resolve, relative, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -80,7 +81,8 @@ export function headingSlugs(md) {
 const LINK = /\]\(([^)\s]+)((?:\s+"[^"]*")?)\)/g;
 
 /**
- * Rewrites relative links. `ctx` = { repoRoot, file (absolute path of the source), lessonFiles: Map<abs path, url>, readMd }.
+ * Rewrites relative links: to a lesson's page, to a site page's URL, or to the file in
+ * the repository. `ctx` = { repoRoot, file (absolute path of the source), lessonFiles: Map<abs path, url>, readMd }.
  */
 export function rewriteLinks(prose, ctx) {
   return prose.replace(LINK, (whole, href, title) => {
@@ -107,6 +109,12 @@ export function rewriteLinks(prose, ctx) {
       return `](${siteUrl}${anchor ? "#" + anchor : ""}${title})`;
     }
     const rel = relative(ctx.repoRoot, target).split(sep).join("/");
+    // A page of the site itself (site/src/pages/play.astro) links to its URL (/play/).
+    const page = rel.match(/^site\/src\/pages\/(.+)\.astro$/);
+    if (page) {
+      const url = page[1] === "index" ? "/" : `/${page[1].replace(/\/index$/, "")}/`;
+      return `](${url}${anchor ? "#" + anchor : ""}${title})`;
+    }
     return `](${BLOB_BASE}${rel}${anchor ? "#" + anchor : ""}${title})`;
   });
 }
@@ -240,10 +248,91 @@ export function syncContent({ repoRoot, outDir }) {
   return jobs.map((j) => j.out);
 }
 
+// ---- the playable SpellGrid (/play/) ------------------------------------------
+
+/** First module whose workspace gets course/cards (as COURSE_CARDS_FROM in tools/lib.mjs). */
+const COURSE_CARDS_FROM = 5;
+
+/** The idea of each level, from the module's lesson: `**Level 3, "Title".** Idea. Hand: ...` */
+export function levelIdeas(lessonMd) {
+  const ideas = new Map();
+  for (const m of lessonMd.matchAll(/^\*\*Level (\d+), "([^"]+)"\.\*\*\s+(.*)$/gm)) {
+    const idea = m[3].replace(/\s*Hand: [^.]*\.\s*$/, "").replace(/\[([^\]]*)\]\([^)]*\)/g, "$1");
+    ideas.set(Number(m[1]), { title: m[2], idea });
+  }
+  return ideas;
+}
+
+/**
+ * Generates the sources of the play page into `outDir` (site/src/game/generated):
+ * the TypeScript reference of the highest module that has one, copied unmodified
+ * (`engine/`, `harness.ts`, and `content/` except its `index.ts`, which reads the cards
+ * with node:fs); a `content/index.ts` that re-exports the browser content module
+ * (`site/src/game/content.browser.ts`); and, for that module to import statically,
+ * `cards.json` (the cards a workspace at that module has, in file-name order) and
+ * `levels.json` (every level, with its title and idea from the lesson).
+ */
+export function syncGame({ repoRoot, outDir }) {
+  const courseDir = join(repoRoot, "course");
+  const modules = readdirSync(courseDir).filter((d) => /^\d\d-/.test(d)).sort();
+  const module = modules.filter((d) => existsSync(join(courseDir, d, "reference/ts/src/harness.ts"))).at(-1);
+  if (!module) throw new Error("no module has a TypeScript reference with a harness");
+  const upTo = modules.filter((d) => d <= module);
+  const src = join(courseDir, module, "reference/ts/src");
+
+  rmSync(outDir, { recursive: true, force: true });
+  mkdirSync(join(outDir, "content"), { recursive: true });
+  cpSync(join(src, "engine"), join(outDir, "engine"), { recursive: true });
+  cpSync(join(src, "harness.ts"), join(outDir, "harness.ts"));
+  for (const f of readdirSync(join(src, "content"))) {
+    if (f !== "index.ts") cpSync(join(src, "content", f), join(outDir, "content", f));
+  }
+  writeFileSync(
+    join(outDir, "content", "index.ts"),
+    `// Generated by site/scripts/sync-content.mjs: the browser's content module, in place of\n` +
+      `// course/${module}/reference/ts/src/content/index.ts (which reads the cards with node:fs).\n` +
+      `export * from "../../content.browser";\n`,
+  );
+
+  // Cards: as tools/play-spellgrid.mjs stages them, one directory over another, in file-name order.
+  const cardDirs = [
+    ...(Number(module.slice(0, 2)) >= COURSE_CARDS_FROM ? [join(courseDir, "cards")] : []),
+    ...upTo.map((d) => join(courseDir, d, "cards")),
+  ].filter((d) => existsSync(d));
+  const cardFiles = new Map();
+  for (const dir of cardDirs) {
+    for (const f of readdirSync(dir)) if (f.endsWith(".json")) cardFiles.set(f, join(dir, f));
+  }
+  const cards = [...cardFiles.keys()].sort().map((f) => JSON.parse(readFileSync(cardFiles.get(f), "utf8")));
+  writeFileSync(join(outDir, "cards.json"), JSON.stringify(cards));
+
+  const levels = [];
+  for (const d of upTo) {
+    const dir = join(courseDir, d, "levels");
+    if (!existsSync(dir)) continue;
+    const lesson = join(courseDir, d, "lesson.md");
+    const ideas = levelIdeas(existsSync(lesson) ? readFileSync(lesson, "utf8") : "");
+    const files = readdirSync(dir)
+      .filter((f) => f.endsWith(".json") && f !== "proofs.json")
+      .sort((a, b) => a.localeCompare(b, "en", { numeric: true }));
+    for (const f of files) {
+      const name = f.slice(0, -".json".length);
+      const n = Number(name.match(/^l(\d+)/)?.[1]);
+      const about = ideas.get(n);
+      if (!about) throw new Error(`course/${d}/lesson.md: no **Level ${n}, "Title".** line for ${f}`);
+      levels.push({ name, ...about, level: JSON.parse(readFileSync(join(dir, f), "utf8")) });
+    }
+  }
+  writeFileSync(join(outDir, "levels.json"), JSON.stringify(levels));
+  return { module, cards: cards.length, levels: levels.length };
+}
+
 if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
   const here = dirname(fileURLToPath(import.meta.url));
   const repoRoot = resolve(here, "../..");
   const outDir = resolve(here, "../src/content/docs/course");
   const written = syncContent({ repoRoot, outDir });
   console.log(`sync-content: wrote ${written.length} pages`);
+  const game = syncGame({ repoRoot, outDir: resolve(here, "../src/game/generated") });
+  console.log(`sync-content: the play page runs course/${game.module} (${game.cards} cards, ${game.levels} levels)`);
 }