@polycode-projects/the-mechanical-code-talker 4.0.0 → 4.1.0

package/src/services/adventure-viz.mjs

@@ -19,7 +19,7 @@
 // already takes with its own precomputed memory payload, just applied to a
 // second kind of build-time data.
 //
-// Eight pure, `.toString()`-splice-safe pieces are exported as real functions
+// Seven pure, `.toString()`-splice-safe pieces are exported as real functions
 // (not raw inline-script text) so they can be pinned directly by tests, the
 // same discipline spider-fly-viz.mjs holds classOfAgentId/
 // threadCellsForSpiderPlan to: `spriteClassForObject` (an object's sprite
@@ -33,27 +33,35 @@
 // ancestor walk, then floor), `roomSceneLayout` (the room split into a wall
 // band and floor stacks, over `roomSceneObjects` and `scenePlacement`),
 // `roomKindForRoom` (a room's border treatment, from its own rdf:type),
-// `carriedItems` (every object placed with the player), `exitDoorways` (the
-// written ways out of one room, in compass order, each marked with whether
-// this session has walked it — what the room view's own door plates are
-// drawn from), and `visitedRoomGraph`
-// (a directions-only layout of the rooms a session has actually visited —
-// see its own header for the exposure discipline). None of these import
-// anything beyond this module's own exports, which is what keeps a raw
-// `.toString()` splice safe. Three further pure helpers are exported for
-// testing but NOT spliced, because each calls another module's export the
-// in-page script instead reaches through the browser bundle's own
-// `tmctAdventure` global (mirroring how the inline script calls
-// `tmctSpiderFly.*` rather than re-importing spider-fly-world.mjs):
-// `roomCaptionText` (calls `worldDigestRows`; the in-page `captionFor`
-// mirrors it against `tmctAdventure.worldDigestRows`), `pillsForRoom` (a thin
-// wrapper over adventure.mjs's own exported `roomAffordances`, whose header
-// explains why its list can never promise an action one of take/open/talk/
-// examine would then refuse; the in-page `pillsFor` mirrors it against
-// `tmctAdventure.roomAffordances`), and `goalStatusLines` (calls
-// `foldWorldState` and adventure-autoplay.mjs's own `exposedFacts`; the
-// in-page `goalStatusLinesFor` mirrors both against the `tmctAdventure`
-// global too).
+// `carriedItems` (every object currently placed with a `holder`, "player" by
+// default), and `exitDoorways` (the written ways out of one room, in compass
+// order, each marked with whether this session has walked it — what the room
+// view's own door plates are drawn from). None of these import anything
+// beyond this module's own exports, which is what keeps a raw `.toString()`
+// splice safe.
+//
+// Four further pure helpers are exported for testing but NOT spliced,
+// because each calls another module's export — the in-page script instead
+// reaches through the browser bundle's own `tmctAdventure` global (mirroring
+// how the inline script calls `tmctSpiderFly.*` rather than re-importing
+// spider-fly-world.mjs): `roomCaptionText` (calls `worldDigestRows`; the
+// in-page `captionFor` mirrors it against `tmctAdventure.worldDigestRows`),
+// `pillsForRoom` (a thin wrapper over adventure.mjs's own exported
+// `roomAffordances`, whose header explains why its list can never promise an
+// action one of take/open/talk/examine would then refuse; the in-page
+// `pillsFor` mirrors it against `tmctAdventure.roomAffordances`),
+// `goalStatusLines` (calls `foldWorldState` and adventure-autoplay.mjs's own
+// `exposedFacts`; the in-page `goalStatusLinesFor` mirrors both against the
+// `tmctAdventure` global too), and `visitedRoomGraph` (a directions-only
+// layout of the rooms a session has actually visited, now a thin wrapper over
+// viz-room-graph.mjs's shared `directedGridLayout` — mud-viz.mjs's own
+// burrowGraph wrote the same BFS-grid layout a second time under its own
+// name, and that shared module is where the layout lives now; see its own
+// header for the algorithm and what `hints`/disconnected components mean).
+// The in-page script never splices `directedGridLayout`/`roomGraphSvg`
+// either, for the same not-self-contained reason: it calls
+// `tmctAdventure.directedGridLayout`/`tmctAdventure.roomGraphSvg` straight
+// through the bundle instead of re-implementing the room map a second time.
 //
 // The chat dock (chatlog/chatform/chatq/pills, below) mirrors
 // spider-fly-viz.mjs's own side panel: every manual exchange (via
@@ -84,13 +92,14 @@
 // an edit implies run through the browser bundle's own `session.applyEdit`
 // (adventure-browser-entry.mjs), never here — this module only renders and
 // reads.
-import { THEME_TOKENS_CSS, SERIF_STACK, MONO_STACK, escapeHtml, embedJson, embedScriptText } from "./viz-theme.mjs";
-import { createTicker } from "./viz-ticker.mjs";
+import { THEME_TOKENS_CSS, SERIF_STACK, MONO_STACK, escapeHtml, embedJson, embedScriptText, scenarioLabel, rowsForWorld, wordBeforeCursor } from "./viz-theme.mjs";
+import { createTicker, createSerialQueue } from "./viz-ticker.mjs";
+import { directedGridLayout } from "./viz-room-graph.mjs";
 import { worldDigestRows, roomAffordances, foldWorldState } from "./adventure.mjs";
 import { exposedFacts } from "./adventure-autoplay.mjs";
 import { relatedForTerm } from "../domain/skos-view.mjs";
 import { classAncestorChain } from "../domain/sprite-map.mjs";
-import { renderWorldEditorText, wordBeforeCursor } from "./adventure-editor.mjs";
+import { renderWorldEditorText } from "./adventure-editor.mjs";
 
 const DEFAULT_TITLE = "tmct — the adventure";
 const PREVIEW_MAX_TICKS = 30;
@@ -168,15 +177,21 @@ export function factsForSubject(rows, subject) {
  *  feeding it an exposure-filtered pair (as `goalStatusLines` does) is what
  *  keeps a not-yet-visited location unknown. Pure, self-contained — no
  *  reference to adventure.mjs's own private helpers, since those aren't
- *  exported. */
-export function visibleRoomOf(rows, state, subject) {
+ *  exported. `actingSubject` is the identity the world places as the
+ *  carrier/viewer — a parameter, not a baked-in name, the same way
+ *  adventure.mjs's own `runWorldCommand`/`roomAffordances` take it; it
+ *  defaults to "player" because that's the one identity Ashcombe Hall's own
+ *  world facts actually use, not because this function only ever means
+ *  that individual (mud-viz.mjs threads its own per-character viewer through
+ *  the same shape, see `mudRoomSceneObjects`/`carriedItemsFor`). */
+export function visibleRoomOf(rows, state, subject, actingSubject = "player") {
   const isRoom = (id) => (rows || []).some((r) => r.subject === id && r.predicate === "rdf:type" && r.object === "room");
   if (isRoom(subject)) return subject;
   const place = state.placements.get(subject);
   if (!place || place.predicate === "mgx:hidden-in") return null;
   if (place.predicate === "mgx:currently-in" || isRoom(place.object)) return place.object;
   const holder = place.object;
-  if (holder === "player") return null;
+  if (holder === actingSubject) return null;
   if (!state.openness.get(holder)?.open) return null;
   const holderPlace = state.placements.get(holder);
   return holderPlace && holderPlace.predicate !== "mgx:hidden-in" ? holderPlace.object : null;
@@ -185,13 +200,14 @@ export function visibleRoomOf(rows, state, subject) {
 /** Every subject actually visible in `here`, sorted, each with its sprite
  *  class — built over `visibleRoomOf` (one containment hop through an OPEN
  *  container) so this can never draw a hidden or carried object the text
- *  digest wouldn't also mention. `player` is excluded; the caller draws the
- *  player's own adventurer sprite separately. Pure. */
-export function roomSceneObjects(rows, state, here) {
+ *  digest wouldn't also mention. `actingSubject` is excluded (default
+ *  "player"); the caller draws that individual's own adventurer sprite
+ *  separately. Pure. */
+export function roomSceneObjects(rows, state, here, actingSubject = "player") {
   const out = [];
   for (const subject of [...state.placements.keys()].sort()) {
-    if (subject === "player") continue;
-    if (visibleRoomOf(rows, state, subject) !== here) continue;
+    if (subject === actingSubject) continue;
+    if (visibleRoomOf(rows, state, subject, actingSubject) !== here) continue;
     out.push({ subject, spriteClass: spriteClassForObject(rows, subject) });
   }
   return out;
@@ -329,13 +345,16 @@ export function roomKindForRoom(rows, roomId) {
   return "indoor";
 }
 
-/** Every object currently `mgx:located-in` "player", sorted, each with its
- *  sprite class — the exact placement `worldDigestRows`'/`inventoryAnswer`'s
- *  own "carries the" branch already reads, just returned as a plain list
- *  instead of prose. Pure. */
-export function carriedItems(rows, state) {
+/** Every object currently `mgx:located-in` `holder` (default "player"),
+ *  sorted, each with its sprite class — the exact placement
+ *  `worldDigestRows`'/`inventoryAnswer`'s own "carries the" branch already
+ *  reads, just returned as a plain list instead of prose. `holder` is a real
+ *  parameter, not a name baked into the function — mud-viz.mjs's own
+ *  `carriedItemsFor` used to hardcode "player" instead, so a differently-
+ *  named character's own satchel never read correctly there. Pure. */
+export function carriedItems(rows, state, holder = "player") {
   return [...state.placements]
-    .filter(([, p]) => p.predicate === "mgx:located-in" && p.object === "player")
+    .filter(([, p]) => p.predicate === "mgx:located-in" && p.object === holder)
     .map(([subject]) => ({ subject, spriteClass: spriteClassForObject(rows, subject) }))
     .sort((a, b) => a.subject.localeCompare(b.subject));
 }
@@ -354,47 +373,13 @@ export function carriedItems(rows, state) {
  *  caller can draw at most "there's an exit that way" and nothing more.
  *  Disconnected visited rooms (not reachable from each other by traveled
  *  edges) lay out as separate side-by-side blocks rather than overlapping.
- *  Pure. */
-export function visitedRoomGraph(state, visitedRoomIds) {
-  const DELTA = { north: [0, -1], south: [0, 1], east: [1, 0], west: [-1, 0], up: [0, -1], down: [0, 1] };
-  const visited = new Set(visitedRoomIds || []);
-  const here = state.placements.get("player")?.object ?? null;
-  const positions = new Map();
-  const edges = [];
-  const edgeKeys = new Set();
-  const hints = [];
-  let offsetX = 0;
-  for (const start of [...visited].sort()) {
-    if (positions.has(start)) continue;
-    positions.set(start, { x: offsetX, y: 0 });
-    const queue = [start];
-    const component = [start];
-    while (queue.length) {
-      const room = queue.shift();
-      const pos = positions.get(room);
-      const dirs = state.exits.get(room);
-      for (const direction of [...(dirs?.keys() ?? [])].sort()) {
-        const target = dirs.get(direction);
-        if (!visited.has(target)) { hints.push({ from: room, direction }); continue; }
-        const key = [room, target].sort().join("\0");
-        if (!edgeKeys.has(key)) { edgeKeys.add(key); edges.push({ from: room, to: target, direction }); }
-        if (!positions.has(target)) {
-          const [dx, dy] = DELTA[direction] ?? [0, 0];
-          positions.set(target, { x: pos.x + dx, y: pos.y + dy });
-          component.push(target);
-          queue.push(target);
-        }
-      }
-    }
-    offsetX = Math.max(...component.map((r) => positions.get(r).x)) + 2;
-  }
-  const minX = Math.min(0, ...[...positions.values()].map((p) => p.x));
-  const minY = Math.min(0, ...[...positions.values()].map((p) => p.y));
-  const nodes = [...visited].sort().map((room) => {
-    const p = positions.get(room) || { x: 0, y: 0 };
-    return { id: room, x: p.x - minX, y: p.y - minY, current: room === here };
-  });
-  return { nodes, edges, hints };
+ *
+ *  A thin wrapper over viz-room-graph.mjs's shared `directedGridLayout`: no
+ *  `root` (Ashcombe Hall is never dug two ways into one cell, so there is no
+ *  level/turf to track) and no collision nudging (a manor fixed at authoring
+ *  time never collides). Pure. */
+export function visitedRoomGraph(state, visitedRoomIds, actingSubject = "player") {
+  return directedGridLayout(state, visitedRoomIds, { actingSubject });
 }
 
 /** Every room the world DEFINES at all (every subject the fact rows type as
@@ -521,11 +506,19 @@ export function suggestionsForTerm(rows, term) {
  *  itself (its own exits) or about something placed IN it — the same
  *  "visible here" boundary `roomSceneObjects` draws from. The player's own
  *  "is in the" row is excluded: the room frame already IS the current room,
- *  so restating "you are here" is redundant, never informative. */
-export function roomCaptionText(rows, state, here) {
+ *  so restating "you are here" is redundant, never informative.
+ *
+ *  `{ caseInsensitive }` folds the room-id match to lowercase before
+ *  comparing. Ashcombe Hall's own room ids are already lowercase, so this is
+ *  a no-op here by default — it exists so mud-viz.mjs's own case-insensitive
+ *  `roomCaptionFor` variant can share this one function instead of keeping a
+ *  near-duplicate. */
+export function roomCaptionText(rows, state, here, { caseInsensitive = false } = {}) {
   const hereCased = here.charAt(0).toUpperCase() + here.slice(1);
+  const objectMatches = (value) => (caseInsensitive ? String(value).toLowerCase() === here.toLowerCase() : value === here);
+  const subjectMatches = (value) => (caseInsensitive ? String(value).toLowerCase() === here.toLowerCase() : value === hereCased);
   const lines = worldDigestRows(rows, state)
-    .filter((row) => row.subject !== "Player" && (row.object === here || row.subject === hereCased))
+    .filter((row) => row.subject !== "Player" && (objectMatches(row.object) || subjectMatches(row.subject)))
     .map((row) => `${row.subject} ${row.predicate} ${row.object}.`);
   return lines.length ? lines.join(" ") : `Nothing more about the ${here} is written down yet.`;
 }
@@ -558,12 +551,16 @@ export function roomCaptionText(rows, state, here) {
 export function renderAdventureHtml({
   title = DEFAULT_TITLE,
   worldPayload = { facts: [], rules: [], opening: "" },
+  scenarios = [],
   spriteTemplates = [],
   largeSpriteTemplates = [],
   engineBundleJs = "",
 } = {}) {
+  const scenarioList = scenarios.length
+    ? scenarios
+    : [{ label: scenarioLabel(worldPayload?.name), worldPayload }];
   const pageData = embedJson({
-    world: worldPayload,
+    scenarios: scenarioList,
     previewMaxTicks: PREVIEW_MAX_TICKS,
     tickWaitMs: TICK_WAIT_MS,
     spriteTemplates,
@@ -726,31 +723,56 @@ ${THEME_TOKENS_CSS}
      the frame so neither fights the plaque or the room-kind icon; west and
      east sit just inside their own walls. Stairs get a round chip instead —
      neither up nor down is a compass point, and neither hangs on a wall. */
-  .room-stage { position: relative; padding: 1.35rem 0; }
+  .room-stage { position: relative; padding: 1.85rem 0; }
+  /* the "ways out" eyebrow — this ring is the ONLY place movement controls
+     exist on the page (the pill row deliberately drops every "go", see
+     renderPills), so a first-time player needs a named affordance here, not
+     just brass plates they have to guess at. */
+  .ways-out-label {
+    font-family: ${MONO_STACK}; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
+    color: var(--gilt); opacity: .85; margin: 0 0 -.3rem .1rem;
+  }
   .dir-ring { position: absolute; inset: 0; pointer-events: none; }
   .dir-slot { position: absolute; pointer-events: auto; }
   .dir-north { top: 0; left: 50%; transform: translateX(-50%); }
   .dir-south { bottom: 0; left: 50%; transform: translateX(-50%); }
-  .dir-west { left: .3rem; top: 50%; transform: translateY(-50%); }
-  .dir-east { right: .3rem; top: 50%; transform: translateY(-50%); }
+  .dir-west { left: .4rem; top: 50%; transform: translateY(-50%); }
+  .dir-east { right: .4rem; top: 50%; transform: translateY(-50%); }
   /* the stairs stand at the left of each band: the frame's own corner
      flourishes sit top-left and bottom-right, and this is the one inset that
      clears both. */
-  .dir-up { top: 0; left: 1.4rem; }
-  .dir-down { bottom: 0; left: 1.4rem; }
+  .dir-up { top: 0; left: 1.5rem; }
+  .dir-down { bottom: 0; left: 1.5rem; }
+  /* a brass PUSH-plate, not a name plate: real button chrome (an outer drop
+     shadow, not just the inset highlight the static room/door plaques use),
+     a bigger touch target, and a lift on hover/press — so this reads as
+     clickable at a glance instead of blending into the wallpaper the way a
+     plain brass label would. The leading triangle is a direction-neutral
+     "go" cue, the same role an arrow plays on any door-push icon. */
   .dir-door {
-    position: relative; display: inline-flex; align-items: center; justify-content: center;
-    font-family: ${MONO_STACK}; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
-    color: var(--gilt); background: var(--parchment); border: 1px solid var(--gilt);
-    box-shadow: inset 0 0 0 2px var(--parchment-strong);
-    padding: .2rem .6rem; white-space: nowrap;
+    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
+    font-family: ${MONO_STACK}; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
+    color: var(--gilt); background: var(--parchment); border: 1px solid var(--gilt); border-radius: 3px;
+    box-shadow: inset 0 0 0 2px var(--parchment-strong), 0 2px 4px rgba(0, 0, 0, .25);
+    padding: .5rem .95rem; white-space: nowrap;
+    transition: transform .08s ease, box-shadow .08s ease, background .08s ease, color .08s ease;
+  }
+  .dir-door::before { content: "\\25B8"; font-size: .62em; opacity: .9; }
+  .dir-door:hover, .dir-door:focus-visible {
+    background: var(--gilt); color: var(--parchment);
+    box-shadow: inset 0 0 0 2px var(--parchment-strong), 0 4px 7px rgba(0, 0, 0, .32);
+    transform: translateY(-1.5px);
   }
-  .dir-door:hover, .dir-door:focus-visible { background: var(--parchment-strong); color: var(--ink); }
-  .dir-door.stair { border-radius: 50%; width: 1.5rem; height: 1.5rem; padding: 0; font-size: .72rem; letter-spacing: 0; }
+  .dir-door:active {
+    transform: translateY(0);
+    box-shadow: inset 0 0 0 2px var(--parchment-strong), 0 1px 2px rgba(0, 0, 0, .28);
+  }
+  .dir-door.stair { border-radius: 50%; width: 2.15rem; height: 2.15rem; padding: 0; font-size: .86rem; letter-spacing: 0; }
+  .dir-door.stair::before { content: ""; }
   /* a door onto a room this session has not stood in yet, marked with the
      same gilt dot the manor board prints for a direction it cannot draw a
      room for — one hint shape, two surfaces. */
-  .dir-door .unwalked { position: absolute; top: -.16rem; right: -.16rem; width: .34rem; height: .34rem; border-radius: 50%; background: var(--gilt); }
+  .dir-door .unwalked { position: absolute; top: -.2rem; right: -.2rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gilt); border: 1px solid var(--parchment); }
 
   .sprite-row { display: flex; align-items: flex-end; gap: .9rem .7rem; min-height: 2.5rem; }
   /* the floor band: every non-wall-mounted stack, wrapping and pinned to the
@@ -850,7 +872,7 @@ ${THEME_TOKENS_CSS}
      this just keeps the board's own footprint stable and click-to-enlarge
      honest about what it's enlarging. */
   .map-viewport-fixed { width: 190px; margin: 0 auto; cursor: zoom-in; }
-  /* the lights-down map lightbox — the same board, the same roomMapSvg
+  /* the lights-down map lightbox — the same board, the same room-graph svg
      output, just drawn bigger over a dimmed backdrop. Closes on a click
      anywhere outside the enlarged board, or Escape. */
   .map-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 2.4rem; background: rgba(10, 8, 4, .74); }
@@ -930,6 +952,9 @@ ${THEME_TOKENS_CSS}
   .controls-row button { font-family: ${MONO_STACK}; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; padding: .38rem .85rem; border: 1px solid var(--gilt); background: var(--parchment); color: var(--ink); }
   .controls-row button:hover:not(:disabled) { background: var(--parchment-strong); }
   .controls-row button:disabled { opacity: .4; cursor: default; }
+  .controls-row select { font-family: ${MONO_STACK}; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; padding: .38rem .85rem; border: 1px solid var(--gilt); background: var(--parchment); color: var(--ink); }
+  .controls-row select:hover:not(:disabled) { background: var(--parchment-strong); }
+  .controls-row select:disabled { opacity: .4; cursor: default; }
   .controls-row .turn { margin-left: auto; font-family: ${MONO_STACK}; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--parchment); border: 1px solid var(--gilt); padding: .3rem .6rem; font-variant-numeric: tabular-nums; }
   .goal-line { font-family: ${MONO_STACK}; font-size: .78rem; color: var(--muted); margin-top: .5rem; }
   .status { font-family: ${MONO_STACK}; font-size: .74rem; color: var(--muted); margin-top: .3rem; }
@@ -970,11 +995,14 @@ ${THEME_TOKENS_CSS}
     <div class="eyebrow">tmct &middot; the adventure</div>
     <button id="editModeBtn" type="button" class="mode-toggle" disabled>edit the world</button>
   </div>
-  <p class="page-note">${escapeHtml(worldPayload.opening)}</p>
+  <p class="page-note" id="pageNote">${escapeHtml(scenarioList[0].worldPayload.opening || "")}</p>
   <div class="stage" id="playStage">
     <div class="stage-left">
       <div class="controls-row" id="playControls">
         <button id="resetBtn" type="button" disabled>reset</button>
+${scenarioList.length > 1 ? `        <select id="scenarioSelect" aria-label="which world to play" disabled>
+${scenarioList.map((s, i) => `          <option value="${i}"${i === 0 ? " selected" : ""}>${escapeHtml(s.label || scenarioLabel(s.worldPayload?.name))}</option>`).join("\n")}
+        </select>` : ""}
         <button id="playBtn" type="button" disabled>&#9654; play</button>
         <button id="stepBtn" type="button" disabled>step</button>
         <span class="turn mono" id="turnLabel">turn: 0</span>
@@ -989,6 +1017,7 @@ ${THEME_TOKENS_CSS}
         <h2>satchel</h2>
         <div class="chips" id="carryList"></div>
       </div>
+      <div class="ways-out-label" aria-hidden="true">ways out</div>
       <div class="room-stage">
         <div class="room-frame" id="roomFrame">
           <div class="room-plaque mono" id="roomName"></div>
@@ -1080,6 +1109,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
 (function () {
   "use strict";
   const createTicker = ${createTicker.toString()};
+  const createSerialQueue = ${createSerialQueue.toString()};
   const spriteClassForObject = ${spriteClassForObject.toString()};
   const visibleRoomOf = ${visibleRoomOf.toString()};
   const roomSceneObjects = ${roomSceneObjects.toString()};
@@ -1087,7 +1117,6 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   const roomSceneLayout = ${roomSceneLayout.toString()};
   const roomKindForRoom = ${roomKindForRoom.toString()};
   const carriedItems = ${carriedItems.toString()};
-  const visitedRoomGraph = ${visitedRoomGraph.toString()};
   const allRoomIds = ${allRoomIds.toString()};
   const groundedPlaceholder = ${groundedPlaceholder.toString()};
   const exitDoorways = ${exitDoorways.toString()};
@@ -1095,7 +1124,14 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   const factsForSubject = ${factsForSubject.toString()};
   const renderWorldEditorText = ${renderWorldEditorText.toString()};
   const wordBeforeCursor = ${wordBeforeCursor.toString()};
+  const rowsForWorld = ${rowsForWorld.toString()};
   const esc = ${escapeHtml.toString()};
+  // The identity Ashcombe Hall's own world facts place as the carrier/viewer
+  // — one named constant standing in for what was six separate "player"
+  // string literals scattered through the room/inventory/map drawing calls
+  // below, so a future scenario shipping a differently-named single
+  // character never falls out of step with the calls that use it.
+  const ACTING_SUBJECT = "player";
   const el = (id) => document.getElementById(id);
   const roomFrameEl = el("roomFrame");
   const roomNameEl = el("roomName");
@@ -1139,6 +1175,15 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   const roomDetailSpritesEl = el("roomDetailSprites");
   const roomDetailCaptionEl = el("roomDetailCaption");
   const legendListEl = el("legendList");
+  const scenarioSelectEl = el("scenarioSelect");
+  const pageNoteEl = el("pageNote");
+
+  // Which of the shipped worlds is loaded. Every read of the world — the
+  // session it is opened over, its opening line, the provenance prefix edit
+  // mode filters on, the key its progress is saved under — goes through this
+  // one index, so picking another world needs no second copy of any of them.
+  let worldIndex = 0;
+  const world = () => ADVENTURE.scenarios[worldIndex].worldPayload;
 
   const params = new URLSearchParams(location.search);
   const preview = params.get("preview") === "1";
@@ -1200,13 +1245,10 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
 
   // ---- serialize every engine-touching call: the ticker, the chat dock and
   // the editor sync all share one in-memory store, and any overlapping pair
-  // could race against the same write.
-  let lock = Promise.resolve();
-  function withLock(fn) {
-    const run = lock.then(fn, fn);
-    lock = run.catch(() => {});
-    return run;
-  }
+  // could race against the same write. createSerialQueue is the shared
+  // primitive mud-viz.mjs's own tickChain/serializeTick and spider-fly-viz.mjs's
+  // own inlined withLock each duplicated under a different name.
+  const { run: withLock } = createSerialQueue();
 
   // ---- large-sprite-tier wiring — the gradient-shaded 400px tier
   // (data/sprites-large/*.toml) arrives embedded at build time as
@@ -1268,12 +1310,12 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   // holding it has actually been visited this session.
   function goalStatusLinesFor(rows, state, visitedRoomIds) {
     const ids = Array.from(new Set(rows.filter((r) => r.predicate === "mgx:is-objective" && r.object === "true").map((r) => r.subject)));
-    const carriedIds = new Set(carriedItems(rows, state).map((o) => o.subject));
+    const carriedIds = new Set(carriedItems(rows, state, ACTING_SUBJECT).map((o) => o.subject));
     const exposedRows = tmctAdventure.exposedFacts(rows, visitedRoomIds);
     const exposedState = tmctAdventure.foldWorldState(exposedRows);
     return ids.map((id) => {
       if (carriedIds.has(id)) return { subject: id, status: "carried", text: "carrying the " + id + " \\u2014 the adventure is won." };
-      const room = visibleRoomOf(exposedRows, exposedState, id);
+      const room = visibleRoomOf(exposedRows, exposedState, id, ACTING_SUBJECT);
       return room
         ? { subject: id, status: "known", text: "last known: the " + id + " is in the " + room + "." }
         : { subject: id, status: "unknown", text: "there's a sought-after " + id + " somewhere." };
@@ -1284,60 +1326,46 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   // the same non-interactive chip shape the room's own pills use for
   // actions, so the sidebar reads as one visual family.
   function renderCarrying(rows, state) {
-    const items = carriedItems(rows, state);
+    const items = carriedItems(rows, state, ACTING_SUBJECT);
     carryListEl.innerHTML = items.length
       ? items.map((o) => '<span class="chip">' + esc(o.subject) + "</span>").join("")
       : '<span class="empty-note">nothing yet</span>';
   }
 
   // ---- room map — ONE svg-building routine shared by play mode's visited-
-  // only map and edit mode's whole-map (visitedRoomGraph fed allRoomIds
+  // only map and edit mode's whole-map (visitedRoomGraphFor fed allRoomIds
   // instead of the exposure set — a parameter, not a second layout), so the
   // fixed-size-viewport CSS treatment and the node layout can never drift
   // between the two. clickable adds a data-room attribute and a pointer
   // cursor per node; play mode's own map stays purely informational.
-  function roomMapSvg(graph, clickable) {
-    if (!graph.nodes.length) return null;
-    // Board-game footprints: each room a named rectangle (the name INSIDE
-    // it, the way a Cluedo board prints its rooms), corridors as wide paths
-    // between the footprints, direction-only hints as path stubs fading
-    // toward rooms not yet visited.
-    const cell = 64, roomW = 56, roomH = 26;
-    const maxX = Math.max.apply(null, graph.nodes.map((n) => n.x));
-    const maxY = Math.max.apply(null, graph.nodes.map((n) => n.y));
-    const w = (maxX + 1) * cell, h = (maxY + 1) * cell;
-    const cx = (n) => (n.x + 0.5) * cell;
-    const cy = (n) => (n.y + 0.5) * cell;
-    const byRoom = new Map(graph.nodes.map((n) => [n.id, n]));
-    const edgesSvg = graph.edges.map((e) => {
-      const a = byRoom.get(e.from), b = byRoom.get(e.to);
-      return '<line class="room-edge" x1="' + cx(a) + '" y1="' + cy(a) + '" x2="' + cx(b) + '" y2="' + cy(b) + '"></line>';
-    }).join("");
-    const HINT_DELTA = { north: [0, -1], south: [0, 1], east: [1, 0], west: [-1, 0], up: [0, -1], down: [0, 1] };
-    const hintsSvg = graph.hints.map((hi) => {
-      const from = byRoom.get(hi.from);
-      const d = HINT_DELTA[hi.direction] || [0, 0];
-      return '<circle class="room-hint" cx="' + (cx(from) + d[0] * cell * 0.42) + '" cy="' + (cy(from) + d[1] * cell * 0.42) + '" r="3.5"></circle>';
-    }).join("");
-    const nodesSvg = graph.nodes.map((n) => {
-      const cls = "room-node" + (n.current ? " current" : "") + (clickable ? " clickable" : "") + (clickable && n.id === selectedRoomId ? " selected" : "");
-      const attr = clickable ? ' data-room="' + esc(n.id) + '"' : "";
-      return '<g class="' + cls + '"' + attr + '><rect x="' + (cx(n) - roomW / 2) + '" y="' + (cy(n) - roomH / 2) + '" width="' + roomW + '" height="' + roomH + '" rx="3"></rect>'
-        + '<text x="' + cx(n) + '" y="' + (cy(n) + 2.5) + '">' + esc(n.id) + "</text></g>";
-    }).join("");
-    return '<svg viewBox="0 0 ' + w + " " + h + '" preserveAspectRatio="xMidYMid meet" role="img" aria-label="' + (clickable ? "the whole manor \\u2014 click a room to inspect it" : "the rooms visited so far") + '">'
-      + edgesSvg + hintsSvg + nodesSvg + "</svg>";
+  // roomGraphSvgFor mirrors the OLD inline roomMapSvg's own board-game sizing
+  // (a 64px square cell, 56x26px room footprints) through the shared
+  // viz-room-graph.mjs renderer, reached via the tmctAdventure global the
+  // same way captionFor/pillsFor already reach their own adventure.mjs
+  // calls: roomGraphSvg needs escapeHtml and a module-level exit-delta table
+  // this splice-safe script carries neither of, so it runs through the
+  // bundle rather than being spliced as text (see this page's own module
+  // header). visitedRoomGraphFor is the same posture for the layout half.
+  function roomGraphSvgFor(graph, clickable) {
+    return tmctAdventure.roomGraphSvg(graph, {
+      cellX: 64, cellY: 64, roomW: 56, roomH: 26,
+      clickable, selectedRoomId,
+      label: clickable ? "the whole manor \\u2014 click a room to inspect it" : "the rooms visited so far",
+    });
+  }
+  function visitedRoomGraphFor(state, visitedIds) {
+    return tmctAdventure.directedGridLayout(state, visitedIds, { actingSubject: ACTING_SUBJECT });
   }
   function renderRoomMap(rows, state, visitedRoomIds) {
-    mapWrapEl.innerHTML = roomMapSvg(visitedRoomGraph(state, visitedRoomIds), false) || '<span class="empty-note">nowhere yet</span>';
+    mapWrapEl.innerHTML = roomGraphSvgFor(visitedRoomGraphFor(state, visitedRoomIds), false) || '<span class="empty-note">nowhere yet</span>';
   }
 
   // ---- the map lightbox — clicking the fixed-square play-mode map redraws
-  // the SAME roomMapSvg output larger, over a dimmed backdrop; clicking the
-  // backdrop (not the board itself) or pressing Escape closes it.
+  // the SAME roomGraphSvgFor output larger, over a dimmed backdrop; clicking
+  // the backdrop (not the board itself) or pressing Escape closes it.
   function openMapLightbox() {
     if (!lastSnapshot) return;
-    const svg = roomMapSvg(visitedRoomGraph(lastSnapshot.state, lastSnapshot.visitedRoomIds), false);
+    const svg = roomGraphSvgFor(visitedRoomGraphFor(lastSnapshot.state, lastSnapshot.visitedRoomIds), false);
     if (!svg) return;
     mapLightboxInnerEl.innerHTML = svg;
     mapLightboxEl.hidden = false;
@@ -1445,7 +1473,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   document.addEventListener("keydown", (e) => { if (e.key === "Escape" && !objLightboxEl.hidden) closeObjectLightbox(); });
 
   function renderEditMap(rows, state) {
-    editMapWrapEl.innerHTML = roomMapSvg(visitedRoomGraph(state, allRoomIds(rows)), true) || '<span class="empty-note">this world defines no rooms</span>';
+    editMapWrapEl.innerHTML = roomGraphSvgFor(visitedRoomGraphFor(state, allRoomIds(rows)), true) || '<span class="empty-note">this world defines no rooms</span>';
   }
   editMapWrapEl.addEventListener("click", (e) => {
     const g = e.target.closest("[data-room]");
@@ -1643,8 +1671,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   // diff + write; this page only ever reads its result back.
 
   function worldOnlyRows(rows) {
-    const prefix = "world:" + ADVENTURE.world.name;
-    return (rows || []).filter((r) => typeof r.provenance === "string" && r.provenance.indexOf(prefix) === 0);
+    return rowsForWorld(rows, world().name);
   }
 
   function renderRoomDetail() {
@@ -1657,7 +1684,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
     }
     roomDetailPanelEl.setAttribute("data-room-kind", roomKindForRoom(editRows, selectedRoomId));
     roomDetailTitleEl.textContent = selectedRoomId;
-    const objects = roomSceneObjects(editRows, editState, selectedRoomId);
+    const objects = roomSceneObjects(editRows, editState, selectedRoomId, ACTING_SUBJECT);
     roomDetailSpritesEl.innerHTML = objects.length
       ? objects.map((o) => spriteCardHtml(o.subject, o.spriteClass, resolveObjectSprite(editRows, o))).join("")
       : '<span class="empty-note">nothing placed here yet</span>';
@@ -1674,7 +1701,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   function renderLegend(rows) {
     const subjects = new Set(rows.filter((r) => r.predicate === "rdf:type").map((r) => r.subject));
     const classes = new Set(["adventurer"]);
-    subjects.forEach((s) => { if (s !== "player") classes.add(spriteClassForObject(rows, s)); });
+    subjects.forEach((s) => { if (s !== ACTING_SUBJECT) classes.add(spriteClassForObject(rows, s)); });
     legendListEl.innerHTML = Array.from(classes).sort().map((cls) => {
       const svg = tmctAdventure.resolveSpriteAsset(
         cls, spriteAncestryRows(rows, cls), factsForSubject(rows, cls),
@@ -1792,7 +1819,7 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   async function boot({ fresh = false } = {}) {
     const saved = !fresh && persist ? await persist.load() : null;
     session = await tmctAdventure.createAdventureSession(
-      ADVENTURE.world,
+      world(),
       saved && saved.payload && saved.payload.memoryPayload
         ? { restoredPayload: saved.payload.memoryPayload, restoredVisitedRoomIds: saved.payload.visitedRoomIds }
         : {},
@@ -1803,12 +1830,14 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
     goalLineEl.textContent = "";
     chatlogEl.innerHTML = "";
     statusEl.textContent = "";
-    addChatLine("t", esc(ADVENTURE.world.opening || "the adventure begins."));
+    if (pageNoteEl) pageNoteEl.textContent = world().opening || "";
+    addChatLine("t", esc(world().opening || "the adventure begins."));
     if (saved && snap.turn > 0) {
       addChatLine("t", "resumed where you left off (turn " + snap.turn + ") \\u2014 progress kept best-effort on this device; reset starts the manor over.");
     }
     chatqEl.disabled = false;
     resetBtn.disabled = false; playBtn.disabled = false; stepBtn.disabled = false; editModeBtn.disabled = false;
+    if (scenarioSelectEl) scenarioSelectEl.disabled = false;
   }
 
   const ticker = createTicker({
@@ -1843,11 +1872,34 @@ ${engineBundleJs ? `<script>\n${embedScriptText(engineBundleJs)}\n</script>` : `
   stepBtn.addEventListener("click", () => ticker.stepOnce());
   resetBtn.addEventListener("click", () => ticker.reset());
 
+  // Each world keeps its own saved progress, so the stamp carries the world's
+  // name and a switch opens the store belonging to the world being switched
+  // to. Without that, one world's snapshot would restore into another's graph.
+  let siteVersion = "";
+  async function openPersistFor(worldName) {
+    if (preview || !tmctAdventure.openPersistedStore) return;
+    if (!siteVersion) siteVersion = await fetchSiteVersion();
+    persist = tmctAdventure.openPersistedStore({ storeKey: "adventure", stamp: siteVersion + ":" + worldName });
+  }
+
+  if (scenarioSelectEl) {
+    scenarioSelectEl.addEventListener("change", () => withLock(async () => {
+      const picked = Number(scenarioSelectEl.value);
+      if (!ADVENTURE.scenarios[picked] || picked === worldIndex) return;
+      ticker.pause();
+      // The pending save belongs to the world being left, and it is about to
+      // be written under the world being opened. Cancel it rather than let it
+      // land in the wrong store.
+      clearTimeout(persistSaveTimer);
+      persistSaveTimer = null;
+      worldIndex = picked;
+      await openPersistFor(world().name);
+      await boot();
+    }));
+  }
+
   (async () => {
-    if (!preview && tmctAdventure.openPersistedStore) {
-      const siteVersion = await fetchSiteVersion();
-      persist = tmctAdventure.openPersistedStore({ storeKey: "adventure", stamp: siteVersion + ":" + ADVENTURE.world.name });
-    }
+    await openPersistFor(world().name);
     await boot();
     if (preview) ticker.play();
   })();