sindicate 0.10.0 → 0.12.0

package/src/ui/worldmap.js

@@ -17,7 +17,43 @@
 // paper map open, and the coaches, the law and the outlaws can all wait. It also means the map is
 // not a thing you have to read while being shot at.
 import { WORLD_SIZE, allPOIs, allBuildings } from './cartograph.js';
-import { getQualityName, setQualityName, PRESETS } from '../core/quality.js';
+
+// WORLD-MAP CONTENT is GAME data (setWorldMapContent in engineSetup):
+//   title/iconDir/horseIcon — the sheet's dress
+//   legend [{cat,label}] + ink {cat:col} + kindLabel {kind:label} — the marker taxonomy
+//   labelZoomRule(p, zoom) → bool — may this label print at this zoom (western: stage stops
+//     hide under 2.2×; return true/undefined to print)
+//   tabs [{id, label, render(el, game, api)}] — hub tabs after MAP; render may return
+//     { padRows: [{el, act?, cycle?}] } for pad row-nav, else up/down scrolls the panel
+//   discovery { known(p), version() } — POIs filter through known(); bump version to redraw
+//   layersUnder / layersOver [(ctx, d, api) => void] — extra paint (fog, home stamps);
+//     under = below buildings, over = above markers, below the player arrow
+//   onPick(target, api) → bool — click interception (fast-travel popups); target is
+//     { p } for a marker hit or { x, z } for open ground; return true = handled
+//   waypoint { get(game), set(game, wp), route(game) } — the pin/route adapter; default
+//     is the engine contract (game.waypoint / game.route / ui.recomputeRoute)
+let WM = {
+  title: 'WORLD MAP',
+  iconDir: '/assets/ui/map', horseIcon: '/assets/ui/icon_horse.png',
+  legend: [], ink: {}, inkDefault: '#3a2a16', kindLabel: {},
+  labelZoomRule: null,
+  tabs: [],
+  discovery: null,
+  layersUnder: [], layersOver: [],
+  onPick: null,
+  drawPOIs: null,           // FULL marker-pass override (ctx, d, api) — marker style is game
+                            // identity; the api's addHit/w2s/filters keep hit-testing engine-side
+  hoverLabel: null,         // (h) => { name, kind } — mystery masking, custom kind copy
+  routeColors: null,        // (rt) => { line, casing } — the route's ink
+  fogLayer: null,           // { px, version(), draw(ctx, px) } — WORLD-ANCHORED canvas between
+                            // chart and overlay (discovery fog); redrawn only when version moves
+  waypoint: {
+    get: (g) => g.waypoint,
+    set: (g, w) => { g.waypoint = w; g.ui?.recomputeRoute?.(); },
+    route: (g) => g.route,
+  },
+};
+export function setWorldMapContent(c = {}) { WM = { ...WM, ...c, waypoint: { ...WM.waypoint, ...(c.waypoint ?? {}) } }; }
 
 const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
 // THE CHART BITMAP STAYS AT 1600, AND THAT IS A DELIBERATE REFUSAL.
@@ -36,7 +72,7 @@ const ZOOM_MAX = 16;            // 16× ⇒ ~270 m across the frame: close enoug
 // (dusty and plain — the Military set's chrome and the Fantasy set's gold filigree both read
 // wrong on a western), except horse.png, which is the Fantasy pack's — no other pack ships a
 // horse, and a horse is what a stage stop is.
-const ICON = (n) => `/assets/ui/map/${n}.png`;
+const ICON = (n) => `${WM.iconDir}/${n}.png`;
 const _imgs = new Map();
 function iconImg(name, onReady) {
   let img = _imgs.get(name);
@@ -68,11 +104,7 @@ function inkIcon(name, col, px, onReady) {
 
 // Ink by category — the one colour cue on an otherwise monochrome sheet. Outposts are the places
 // with people in them who care who you are, and they are red.
-const INK = { Settlement: '#3a2a16', Outpost: '#7d3123', Stage: '#3c5860', Camp: '#b5642a', Shop: '#4a6b2e' };
-const KIND_LABEL = {
-  town: 'Town', fort: 'Army fort', mission: 'Mission', camp: 'Camp', mine: 'Diggings',
-  stop: 'Stage stop', ranch: 'Ranch', farm: 'Farm', outpost: 'Outpost', shop: 'Shop',
-};
+
 
 export class WorldMap {
   // `getChart` hands back the prebuilt chart bitmap (ui.prebuildChart) — the map never renders
@@ -96,26 +128,22 @@ export class WorldMap {
       flex-direction:column; gap:10px; background:radial-gradient(circle at 50% 42%, rgba(24,17,10,0.86), rgba(8,6,4,0.96));
       font-family:Copperplate,'Copperplate Gothic Bold',Palatino,'Book Antiqua',Georgia,serif; pointer-events:auto; user-select:none;`;
     root.innerHTML = `
-      <div style="color:#e8c98a; font-size:21px; letter-spacing:7px; text-shadow:0 2px 6px #000; font-weight:700;">DUSTWATER COUNTY</div>
-      <div id="wm-tabs" style="display:flex; gap:0; border-bottom:1px solid rgba(122,99,54,0.4);">
+      <div style="color:#e8c98a; font-size:21px; letter-spacing:7px; text-shadow:0 2px 6px #000; font-weight:700;">${WM.title}</div>
+      <div id="wm-tabs" style="display:flex; gap:0; border-bottom:1px solid rgba(122,99,54,0.4); ${WM.tabs.length ? '' : 'display:none;'}">
         <button data-tab="map" style="${TAB}">MAP</button>
-        <button data-tab="journal" style="${TAB}">JOURNAL</button>
-        <button data-tab="system" style="${TAB}">SYSTEM</button>
+        ${WM.tabs.map((t) => `<button data-tab="${t.id}" style="${TAB}">${t.label}</button>`).join('')}
       </div>
       <div id="wm-mapview" style="display:flex; flex-direction:column; align-items:center; gap:10px;">
-        <div id="wm-legend" style="display:flex; gap:6px;">
+        <div id="wm-legend" style="display:${WM.legend.length ? 'flex' : 'none'}; gap:6px;">
           <button data-cat="" style="${LBTN}">All</button>
-          <button data-cat="Settlement" style="${LBTN}">Settlements</button>
-          <button data-cat="Outpost" style="${LBTN}">Outposts</button>
-          <button data-cat="Stage" style="${LBTN}">Stage line</button>
-          <button data-cat="Camp" style="${LBTN}">Campfires</button>
-          <button data-cat="Shop" style="${LBTN}">Shops</button>
+          ${WM.legend.map((l) => `<button data-cat="${l.cat}" style="${LBTN}">${l.label}</button>`).join('')}
         </div>
         <div id="wm-frame" style="position:relative; width:min(74vh,74vw); height:min(74vh,74vw); overflow:hidden;
           border:3px solid #6d5730; border-radius:4px; box-shadow:0 0 44px rgba(0,0,0,0.85), inset 0 0 70px rgba(0,0,0,0.45);
           background:#1a1611; cursor:grab;">
           <div id="wm-pan" style="position:absolute; inset:0; transform-origin:0 0;">
             <canvas id="wm-canvas" style="position:absolute; inset:0; width:100%; height:100%;"></canvas>
+            ${WM.fogLayer ? '<canvas id="wm-fog" style="position:absolute; inset:0; width:100%; height:100%; pointer-events:none;"></canvas>' : ''}
           </div>
           <canvas id="wm-overlay" style="position:absolute; inset:0; width:100%; height:100%; pointer-events:none;"></canvas>
           <div id="wm-target" style="position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px;
@@ -135,12 +163,9 @@ export class WorldMap {
         <div style="color:#c0ad82; font-size:12.5px; letter-spacing:0.5px; opacity:0.85;">
           wheel zooms &middot; drag pans &middot; click sets your waypoint &middot; right-click clears it &middot; [M] closes</div>
       </div>
-      <div id="wm-journal" style="display:none; width:min(74vh,74vw); height:min(70vh,70vw); overflow-y:auto;
-        border:3px solid #6d5730; border-radius:4px; background:rgba(20,15,9,0.55); box-shadow:0 0 44px rgba(0,0,0,0.85);
-        padding:24px 30px; color:#e6d6ad; text-align:left;"></div>
-      <div id="wm-system" style="display:none; width:min(74vh,74vw); height:min(70vh,70vw);
+      ${WM.tabs.map((t) => `<div id="wm-tab-${t.id}" style="display:none; width:min(74vh,74vw); height:min(70vh,70vw); overflow-y:auto;
         border:3px solid #6d5730; border-radius:4px; background:rgba(20,15,9,0.55); box-shadow:0 0 44px rgba(0,0,0,0.85);
-        padding:30px 34px; color:#e6d6ad; text-align:left; display:none; flex-direction:column; gap:22px;"></div>`;
+        padding:24px 30px; color:#e6d6ad; text-align:left;"></div>`).join('')}`;
     document.body.appendChild(root);
 
     this.root = root;
@@ -148,6 +173,8 @@ export class WorldMap {
     this.pan = root.querySelector('#wm-pan');
     this.canvas = root.querySelector('#wm-canvas');
     this.canvas.width = this.canvas.height = CHART_PX;
+    this.fog = root.querySelector('#wm-fog');
+    if (this.fog) { this.fog.width = this.fog.height = WM.fogLayer.px ?? CHART_PX; this._fogVer = -1; }
     this.overlay = root.querySelector('#wm-overlay');
 
     // the hover card — name, what the place is, and how far you have to ride
@@ -171,8 +198,7 @@ export class WorldMap {
 
     // HUB TABS — MAP · JOURNAL (SYSTEM lands in Phase 3). The map is the pause screen already.
     this.mapview = root.querySelector('#wm-mapview');
-    this.journal = root.querySelector('#wm-journal');
-    this.system = root.querySelector('#wm-system');
+    this.panels = Object.fromEntries(WM.tabs.map((t) => [t.id, root.querySelector(`#wm-tab-${t.id}`)]));
     this.target = root.querySelector('#wm-target');   // the pad's centre reticle (where Square drops the pin)
     this.tab = 'map';
     root.querySelectorAll('#wm-tabs button').forEach((b) =>
@@ -184,56 +210,42 @@ export class WorldMap {
   _showTab(tab) {
     this.tab = tab;
     this.mapview.style.display = tab === 'map' ? 'flex' : 'none';
-    this.journal.style.display = tab === 'journal' ? 'block' : 'none';
-    this.system.style.display = tab === 'system' ? 'flex' : 'none';
+    for (const [id, el] of Object.entries(this.panels)) el.style.display = id === tab ? 'block' : 'none';
     if (this.target && tab !== 'map') this.target.style.display = 'none';   // reticle is chart-only (pad shows it)
     this.root.querySelectorAll('#wm-tabs button').forEach((b) => {
       const on = b.dataset.tab === tab;
       b.style.color = on ? '#e8c98a' : '#9a855a';
       b.style.borderBottomColor = on ? '#e8c98a' : 'transparent';
     });
-    if (tab === 'journal') this._renderJournal();
-    if (tab === 'system') this._renderSystem();
-  }
-
-  // SYSTEM tab — the map is the game's hub. A vertical list of ITEMS: up/down moves between them,
-  // Cross fires Save/Load/Quit, and LEFT/RIGHT changes the value on a setting row (Graphics).
-  _renderSystem() {
-    const m = this.game.missions, el = this.system;
-    const ROW = `display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border:1px solid #6d5730;
-      border-radius:4px; background:linear-gradient(180deg,#3f2d14,#281b0c); color:#e8c98a; font-family:inherit; font-size:16px;
-      letter-spacing:2px; cursor:pointer; pointer-events:auto; transition:filter .12s;`;
-    el.innerHTML = `
-      <div style="color:#e8c98a; font-size:13px; letter-spacing:3px; font-weight:700; opacity:0.85;">SYSTEM</div>
-      <div id="wm-r-save" style="${ROW}">Save Game</div>
-      <div id="wm-r-load" style="${ROW}${m?.hasSave?.() ? '' : ' opacity:0.4;'}">Load Game</div>
-      <div id="wm-r-gfx" style="${ROW}"><span>Graphics</span><span>&#8249;&nbsp; <span id="wm-gfxval" style="color:#f4e6bf; display:inline-block; min-width:74px; text-align:center;"></span> &nbsp;&#8250;</span></div>
-      <div style="flex:1;"></div>
-      <div id="wm-r-quit" style="${ROW} border-color:#7a3f2c; color:#dfb090;">Quit to Title</div>`;
-    const gfxVal = el.querySelector('#wm-gfxval');
-    const setGfx = () => { gfxVal.textContent = PRESETS[getQualityName()].label; };
-    const cycleGfx = (dir) => { const o = ['low', 'medium', 'high']; setQualityName(o[(o.indexOf(getQualityName()) + dir + 3) % 3]); setGfx(); };
-    setGfx();
-    this._sysRows = [
-      { el: el.querySelector('#wm-r-save'), act: () => m?.saveGame?.() },
-      { el: el.querySelector('#wm-r-load'), act: () => { if (m?.hasSave?.() && m.loadGame()) this.toggle(); } },
-      { el: el.querySelector('#wm-r-gfx'), cycle: cycleGfx },
-      { el: el.querySelector('#wm-r-quit'), act: () => location.reload() },
-    ];
-    // mouse still works: click a row to fire it (the Graphics row cycles forward)
-    for (const r of this._sysRows) r.el.onclick = (e) => { e.stopPropagation(); (r.act || (() => r.cycle(1)))(); };
-    this._padSel = 0; this._paintSysSel();
+    const def = WM.tabs.find((t) => t.id === tab);
+    this._padRows = null; this._padSel = 0;
+    if (def) {
+      const out = def.render?.(this.panels[tab], this.game, this._api());
+      if (out?.padRows) { this._padRows = out.padRows; this._paintSysSel(); }
+    }
+  }
+
+  // the helpers game callbacks paint with — one w2s, one stamp, so nothing can drift
+  _api() {
+    return {
+      game: this.game, map: this, zoom: this.zoom,
+      w2s: (x, z) => this._w2s(x, z), s2w: (sx, sy) => this._s2w(sx, sy),
+      stamp: (ctx, X, Y, r, p, redraw) => this._stamp(ctx, X, Y, r, p, redraw),
+      inkIcon, redraw: () => this._draw(), close: () => this.toggle(),
+      setWaypoint: (w) => this._setWaypoint(w),
+      addHit: (h) => this._hit.push(h), filters: this.filters, frame: this.frame,
+    };
   }
 
   // ── GAMEPAD in the hub. The game's own pad mapping is suppressed while a panel is up (input.js),
   // so the map drives itself: L1/R1 swap tabs, D-pad/stick navigates the current tab, Cross confirms,
   // Circle (or the map button) closes.
   _cycleTab(dir) {
-    const tabs = ['map', 'journal', 'system'];
+    const tabs = ['map', ...WM.tabs.map((t) => t.id)];
     this._showTab(tabs[(tabs.indexOf(this.tab) + dir + tabs.length) % tabs.length]);
   }
   _paintSysSel() {
-    (this._sysRows || []).forEach((r, i) => { r.el.style.outline = i === this._padSel ? '2px solid #e8c98a' : 'none'; r.el.style.outlineOffset = '2px'; });
+    (this._padRows || []).forEach((r, i) => { r.el.style.outline = i === this._padSel ? '2px solid #e8c98a' : 'none'; r.el.style.outlineOffset = '2px'; });
   }
   _startPadNav() {
     cancelAnimationFrame(this._padRAF);
@@ -262,19 +274,17 @@ export class WorldMap {
             if (edge('a')) this._zoomAt(c, c, 1.4);      // Cross zooms IN about the reticle
             if (edge('tri')) this._zoomAt(c, c, 1 / 1.4); // Triangle zooms out
             if (edge('sq')) this._clickAt(c, c);         // Square drops the waypoint at the reticle
-          } else if (this.tab === 'system') {           // up/down moves rows · left/right changes a value · Cross fires
-            const rows = this._sysRows || [];
-            if (rows.length) {
-              if (edge('up')) { this._padSel = (this._padSel + rows.length - 1) % rows.length; this._paintSysSel(); }
-              if (edge('down')) { this._padSel = (this._padSel + 1) % rows.length; this._paintSysSel(); }
-              const r = rows[this._padSel];
-              if (edge('left') && r?.cycle) r.cycle(-1);
-              if (edge('right') && r?.cycle) r.cycle(1);
-              if (edge('a') && r?.act) r.act();
-            }
-          } else if (this.tab === 'journal') {          // scroll (held)
-            if (b(12) || ly < -0.4) this.journal.scrollTop -= 16;
-            if (b(13) || ly > 0.4) this.journal.scrollTop += 16;
+          } else if (this._padRows?.length) {           // a rows tab: up/down moves · left/right cycles · Cross fires
+            const rows = this._padRows;
+            if (edge('up')) { this._padSel = (this._padSel + rows.length - 1) % rows.length; this._paintSysSel(); }
+            if (edge('down')) { this._padSel = (this._padSel + 1) % rows.length; this._paintSysSel(); }
+            const r = rows[this._padSel];
+            if (edge('left') && r?.cycle) r.cycle(-1);
+            if (edge('right') && r?.cycle) r.cycle(1);
+            if (edge('a') && r?.act) r.act();
+          } else if (this.panels[this.tab]) {           // a scroll tab (held)
+            if (b(12) || ly < -0.4) this.panels[this.tab].scrollTop -= 16;
+            if (b(13) || ly > 0.4) this.panels[this.tab].scrollTop += 16;
           }
           if (edge('back') || edge('pad')) { this.toggle(); return; }
         }
@@ -285,66 +295,6 @@ export class WorldMap {
     this._padRAF = requestAnimationFrame(poll);
   }
 
-  // The journal reads straight from the mission engine (definitions + progress). Active job with its
-  // current objective highlighted (and n/N on kill/collect), then the finished ones.
-  _renderJournal() {
-    const m = this.game.missions;
-    const esc = (s) => String(s ?? '').replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
-    if (!m) { this.journal.innerHTML = `<div style="opacity:0.7;">No journal yet.</div>`; return; }
-    const name = (id) => esc(m.npcs?.[id]?.name || id);
-    const prog = m.progress;
-    const active = m.defs.find((d) => d.id === prog.active);
-    const completed = m.defs.filter((d) => prog.missions[d.id]?.done);
-    const H = (s) => `<div style="color:#e8c98a; font-size:13px; letter-spacing:3px; font-weight:700; margin:6px 0 12px; opacity:0.85;">${s}</div>`;
-    let html = '';
-    if (active) {
-      const rec = prog.missions[active.id] || { stage: 0, counters: {} };
-      html += H('CURRENT JOB');
-      html += `<div style="margin-bottom:20px;">
-        <div style="color:#f4e6bf; font-size:23px; letter-spacing:2px; margin-bottom:4px;">${esc(active.title)}</div>
-        <div style="color:#b9a678; font-size:13px; margin-bottom:11px;">Given by ${name(active.giver)}</div>
-        <div style="color:#d8c79c; font-style:italic; font-size:14px; line-height:1.55; margin-bottom:16px;">${esc(active.summary)}</div>
-        <div style="display:flex; flex-direction:column; gap:9px;">`;
-      // The checklist stops at the CURRENT beat — a journal that prints the mission's whole future
-      // is a spoiler, and with branching it printed the OTHER fork's stages too. Behind you: only
-      // the stages your path actually walked (skipIf/onlyIf-mismatched ones never happened —
-      // m._condOk); ahead of you: a single quiet ellipsis.
-      active.stages.forEach((s, i) => {
-        const done = i < rec.stage, cur = i === rec.stage;
-        if (!done && !cur) return;
-        if (done && m._condOk && !m._condOk(s)) return;   // the fork not taken
-        let label = esc(s.desc || s.id);
-        if ((s.type === 'kill' || s.type === 'collect') && s.count) {
-          const c = done ? s.count : (rec.counters[s.id] || 0);
-          label += ` <span style="opacity:0.7;">(${c}/${s.count})</span>`;
-        }
-        const mark = done ? '&#10003;' : '&#9656;';
-        const col = done ? '#83a06c' : '#f4e6bf';
-        html += `<div style="color:${col}; font-size:15.5px; font-weight:${cur ? '700' : '400'}; ${done ? 'opacity:0.7;' : ''}">
-          <span style="display:inline-block; width:22px;">${mark}</span>${label}</div>`;
-      });
-      if (rec.stage < active.stages.length - 1) html += `<div style="color:#8a7c5c; font-size:15px;"><span style="display:inline-block; width:22px;">&#8226;</span>&#8230;</div>`;
-      html += `</div></div>`;
-      // THE STANDING — how the county reads you (missions.stat): Bracken's trust in his deputy and
-      // the town's regard, once the star's been taken. Signed, so a debt reads as one.
-      if (prog.flags?.badge) {
-        const sgn = (n) => (n > 0 ? '+' : '') + n;
-        const trust = m.stat?.('trust') ?? 0, rep = m.stat?.('reputation') ?? 0;
-        html += `<div style="color:#b9a678; font-size:13.5px; margin:-6px 0 18px; letter-spacing:0.5px;">
-          Bracken's trust <b style="color:${trust < 0 ? '#c98a6a' : '#d8c79c'}">${sgn(trust)}</b>
-          &nbsp;&middot;&nbsp; the town's regard <b style="color:${rep < 0 ? '#c98a6a' : '#d8c79c'}">${sgn(rep)}</b></div>`;
-      }
-    } else {
-      html += `<div style="color:#b9a678; font-style:italic; font-size:15px; margin:8px 0 20px;">No job in hand. Ask around town — someone always needs a gun.</div>`;
-    }
-    if (completed.length) {
-      html += H('DONE');
-      for (const d of completed) html += `<div style="display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid rgba(122,99,54,0.25); color:#a99a72; font-size:14.5px;">
-        <span>${esc(d.title)}</span>${d.reward?.money ? `<span style="color:#83a06c;">$${d.reward.money}</span>` : ''}</div>`;
-    }
-    this.journal.innerHTML = html;
-  }
-
   _wireEvents() {
     const f = this.frame;
     f.addEventListener('wheel', (e) => {
@@ -453,16 +403,19 @@ export class WorldMap {
   // they must keep reading it — the map is where you SAY where you are going; the HUD is what gets
   // you there once the map is shut.
   _setWaypoint(w) {
-    this.game.waypoint = w;
-    // Re-plan the road route NOW, before we repaint: the world is paused behind the map, so ui.js's
+    // Re-plan the route NOW, before we repaint: the world is paused behind the map, so the
     // movement-gated re-plan would not fire, and the route would lag a click behind the pin.
-    this.game.ui?.recomputeRoute?.();
+    WM.waypoint.set(this.game, w);
     this._draw();
   }
   // CLICK-SNAP: a click on (or near) a marker means the PLACE, not the pixel you happened to hit.
   // Without it, "waypoint the fort" puts you 30 m into the scrub beside the fort.
   _clickAt(sx, sy) {
     const hit = this._hitAt(sx, sy, 10);
+    if (WM.onPick) {
+      const [x, z] = this._s2w(sx, sy);
+      if (WM.onPick(hit ? { p: hit.p, masked: hit.masked, sx, sy } : { x, z, sx, sy }, this._api())) return;
+    }
     if (hit) { this._setWaypoint({ x: hit.p.x, z: hit.p.z, name: hit.p.name }); return; }
     const [x, z] = this._s2w(sx, sy);
     this._setWaypoint({ x, z });
@@ -484,8 +437,9 @@ export class WorldMap {
     if (!h) { this.card.style.display = 'none'; return; }
     const pl = this.game.player?.position;
     const dist = pl ? `${Math.round(Math.hypot(h.p.x - pl.x, h.p.z - pl.z))} m` : '';
-    this.card.innerHTML = `<b style="color:#f0d89e;">${h.p.name}</b><br>` +
-      `<span style="opacity:0.8;">${KIND_LABEL[h.p.kind] ?? h.p.kind}${dist ? ' &middot; ' + dist : ''}</span>`;
+    const lab = WM.hoverLabel?.(h) ?? { name: h.p.name, kind: WM.kindLabel[h.p.kind] ?? h.p.kind };
+    this.card.innerHTML = `<b style="color:#f0d89e;">${lab.name}</b><br>` +
+      `<span style="opacity:0.8;">${lab.kind}${dist ? ' &middot; ' + dist : ''}</span>`;
     this.card.style.display = '';
     const d = this._disp();
     this.card.style.left = `${Math.min(sx + 14, d - 160)}px`;
@@ -509,6 +463,16 @@ export class WorldMap {
     this.built = true;
   }
 
+  // the discovery fog repaints ONLY when its version moves — the grain pass is O(px²)
+  _drawFogIfStale() {
+    const f = WM.fogLayer;
+    if (!f || !this.fog) return;
+    const v = f.version?.() ?? 0;
+    if (v === this._fogVer) return;
+    this._fogVer = v;
+    f.draw(this.fog.getContext('2d'), f.px ?? CHART_PX);
+  }
+
   // Everything below is drawn in SCREEN pixels. Nothing here multiplies a size by this.zoom —
   // that is the invariant that keeps the map readable at 1× and at 8×.
   _draw() {
@@ -523,12 +487,14 @@ export class WorldMap {
     const redraw = () => this._draw();          // a late icon load repaints the overlay
     this._hit = [];
 
+    const api = this._api();
+    for (const fn of WM.layersUnder) fn(ctx, d, api);
     this._drawBuildings(ctx, d);
     this._drawRoute(ctx, d);
     this._drawPOIs(ctx, d, redraw);
     this._drawObjectives(ctx, d, redraw);
     this._drawWaypoint(ctx, d, redraw);
-    this._drawHome(ctx, d, redraw);
+    for (const fn of WM.layersOver) fn(ctx, d, api);
     this._drawHorse(ctx, d);
     this._drawPlayer(ctx, d);
     this._drawScale(ctx, d);
@@ -572,17 +538,18 @@ export class WorldMap {
   // network, DASHED for the two short stubs off it (you→road, road→pin). If the router has no plan yet,
   // or the pin is nowhere near a road, it falls back to an honest crow-flies dashed line.
   _drawRoute(ctx, d) {
-    const wp = this.game.waypoint;
+    const wp = WM.waypoint.get(this.game);
     const pl = this.game.player?.position;
     if (!wp || !pl) return;
-    const rt = this.game.route;
+    const rt = WM.waypoint.route(this.game);
     const segs = rt?.segments?.length
       ? rt.segments
       : [{ pts: [{ x: pl.x, z: pl.z }, { x: wp.x, z: wp.z }], style: 'dash' }];
-    const line = rt && rt.reachable ? '#c2401f' : '#a86a3c';   // rust when it's a real road route; faded when crow-flies
+    const cols = WM.routeColors?.(rt) ?? { line: rt && rt.reachable ? '#c2401f' : '#a86a3c', casing: 'rgba(245,232,198,0.85)' };
+    const line = cols.line;
     ctx.lineCap = 'round'; ctx.lineJoin = 'round';
     for (let pass = 0; pass < 2; pass++) {
-      ctx.strokeStyle = pass ? line : 'rgba(245,232,198,0.85)';   // cream casing, so it reads on ink AND on paper
+      ctx.strokeStyle = pass ? line : cols.casing;   // casing under the line, so it reads on ink AND on paper
       ctx.lineWidth = pass ? 2.6 : 5;
       for (const seg of segs) {
         if (!seg.pts || seg.pts.length < 2) continue;
@@ -599,8 +566,10 @@ export class WorldMap {
   }
 
   _drawPOIs(ctx, d, redraw) {
+    if (WM.drawPOIs) { WM.drawPOIs(ctx, d, this._api()); return; }
     const placed = [];                          // label rects — the small ones yield to the big ones
-    const shown = allPOIs().filter((p) => !this.filters.size || this.filters.has(p.category));
+    const known = WM.discovery?.known;
+    const shown = allPOIs().filter((p) => (!this.filters.size || this.filters.has(p.category)) && (!known || known(p)));
     // big places first, so their labels reserve their ground before the stage stops ask for any
     const order = [...shown].sort((a, b) => (b.big ? 1 : 0) - (a.big ? 1 : 0));
     const stamps = [];
@@ -633,7 +602,7 @@ export class WorldMap {
   // a dot tells you something is there and nothing about what it is, and this county has a fort, a
   // mission, a camp, a quarry and a stage line, which are five different reasons to ride somewhere.
   _stamp(ctx, X, Y, r, p, redraw) {
-    const ink = INK[p.category] ?? '#3a2a16';
+    const ink = WM.ink[p.category] ?? WM.inkDefault;
     ctx.save();
     ctx.shadowColor = 'rgba(30,20,8,0.55)'; ctx.shadowBlur = 5; ctx.shadowOffsetY = 1;
     ctx.beginPath(); ctx.arc(X, Y, r, 0, 7);
@@ -656,7 +625,7 @@ export class WorldMap {
     // themselves from there. (The first cut suppressed every non-"big" place, which meant every
     // farm, ranch, shack and the cemetery went unnamed at county zoom — the zoom you actually plan
     // a ride at. The label-collision pass below already handles crowding; it does not need help.)
-    if (p.category === 'Stage' && this.zoom < 2.2) return;
+    if (WM.labelZoomRule && WM.labelZoomRule(p, this.zoom) === false) return;
     const fs = p.big ? 13.5 : 11;
     ctx.font = `${p.big ? 700 : 600} ${fs}px Georgia, 'Palatino Linotype', serif`;
     ctx.textAlign = 'center'; ctx.textBaseline = 'top';
@@ -675,7 +644,7 @@ export class WorldMap {
   }
 
   _drawWaypoint(ctx, d, redraw) {
-    const wp = this.game.waypoint;
+    const wp = WM.waypoint.get(this.game);
     if (!wp) return;
     const [X, Y] = this._w2s(wp.x, wp.z);
     const s = 24;
@@ -718,19 +687,6 @@ export class WorldMap {
     }
   }
 
-  // THE HALLOWAY PLACE — once the deed is yours, home gets its own stamp on the paper (the static
-  // POI list is built before the campaign can sell you a house, so it rides the live layer).
-  _drawHome(ctx, d, redraw) {
-    if (!this.game.missions?.flag?.('house_owned')) return;
-    const [X, Y] = this._w2s(-15.58, -79.79);
-    if (X < -30 || Y < -30 || X > d + 30 || Y > d + 30) return;
-    this._stamp(ctx, X, Y, 11, { category: 'Settlement', icon: 'home', big: false, name: 'The Halloway Place' }, redraw);
-    ctx.font = '600 11px Georgia, serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
-    ctx.lineWidth = 3.2; ctx.strokeStyle = 'rgba(243,232,203,0.92)';
-    ctx.strokeText('The Halloway Place', X, Y + 14);
-    ctx.fillStyle = '#3d2e1a'; ctx.fillText('The Halloway Place', X, Y + 14);
-  }
-
   // YOUR HORSE on the paper — a green dot so you can find where you left it. Not while you're in the
   // saddle (it sits under your own arrow), and culled when it's off the drawn frame.
   _drawHorse(ctx, d) {
@@ -740,7 +696,7 @@ export class WorldMap {
     if (X < -30 || Y < -30 || X > d + 30 || Y > d + 30) return;
     ctx.save();
     ctx.shadowColor = 'rgba(30,20,8,0.5)'; ctx.shadowBlur = 4;
-    const img = (this._horseImg ??= Object.assign(new Image(), { src: '/assets/ui/icon_horse.png' }));
+    const img = (this._horseImg ??= Object.assign(new Image(), { src: WM.horseIcon }));
     if (img.complete && img.naturalWidth) {
       const s = 30;
       ctx.drawImage(img, X - s / 2, Y - s / 2, s, s);
@@ -805,9 +761,10 @@ export class WorldMap {
   tick() {
     const p = this.game.player;
     if (!p?.position) return;
-    const k = `${p.position.x.toFixed(1)}|${p.position.z.toFixed(1)}|${(p.heading ?? 0).toFixed(2)}`;
+    const k = `${p.position.x.toFixed(1)}|${p.position.z.toFixed(1)}|${(p.heading ?? 0).toFixed(2)}|${WM.discovery?.version?.() ?? 0}`;
     if (k === this._playerKey) return;
     this._playerKey = k;
+    if (this.visible) this._drawFogIfStale();
     this._draw();
   }
 
@@ -816,6 +773,7 @@ export class WorldMap {
     this.root.style.display = this.visible ? 'flex' : 'none';
     if (!this.visible) { this.card.style.display = 'none'; this._hover = null; if (this.target) this.target.style.display = 'none'; return; }
     if (!this.built) this._render();
+    this._drawFogIfStale();
     this._showTab(this.tab);   // restore the last tab + refresh the journal from live mission state
     this._startPadNav();       // the pad drives the hub now (L1/R1 tabs · D-pad navigates · Circle closes)
     // THE MOUSE HAS TO COME BACK. The game holds pointer lock, and under lock there is no cursor

package/tools/devPlugin.js

@@ -205,6 +205,74 @@ function editorShotsPlugin({ shotsDir, mapsDir }) {
   };
 }
 
+// THE ENGINE DEV GUI (/__sindicate/) — served by the dev server, talks to the RUNNING
+// game through the game bus. v1: live tunables (core/tune.js groups render as sliders;
+// edits apply in the game the same frame). Panels for add-ons/packs mount here next.
+export function guiPlugin() {
+  const PAGE = `<!doctype html><html><head><meta charset="utf-8"><title>Sindicate</title><style>
+    body{margin:0;font:14px/1.5 -apple-system,sans-serif;background:#14141f;color:#e8e2d0;padding:28px}
+    h1{font-size:18px;letter-spacing:0.14em;color:#e8c66a;margin:0 0 4px} .sub{color:#8d8875;font-size:12px;margin-bottom:22px}
+    .grp{background:#1c1c2b;border:1px solid #2c2c40;border-radius:10px;padding:16px 18px;margin-bottom:14px;max-width:520px}
+    .grp h2{font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:#e8c66a;margin:0 0 10px}
+    .row{display:grid;grid-template-columns:130px 1fr 64px;gap:12px;align-items:center;margin:7px 0}
+    .row label{color:#b8b09a;font-size:12px} .row output{text-align:right;font-variant-numeric:tabular-nums;color:#f5ead0}
+    input[type=range]{width:100%;accent-color:#e8c66a}
+    .file{color:#6d6858;font-size:11px;margin-top:8px} .status{color:#8d8875;font-size:12px;margin-top:18px}
+  </style></head><body>
+  <h1>SINDICATE</h1><div class="sub">dev panel — tunables apply LIVE in the running game</div>
+  <div id="groups"></div><div class="status" id="status">connecting to the game bus…</div>
+  <script>
+  const cmd = (js) => fetch('/__game/cmd', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ js }) }).then((r) => r.json());
+  const take = async (id) => { for (let i = 0; i < 40; i++) { const r = await fetch('/__game/take?id=' + id).then((x) => x.json()); if (!r.pending) return r; await new Promise((res) => setTimeout(res, 250)); } return { err: 'timeout' }; };
+  const bus = async (js) => { const { id, err } = await cmd(js); if (err) throw new Error(err); const r = await take(id); if (!r.ok) throw new Error(r.err ?? 'bus error'); return r.value; };
+  let sig = '', dragging = false;
+  const rows = new Map();
+  addEventListener('pointerup', () => { dragging = false; });
+  async function refresh() {
+    try {
+      const r = await bus('return { who: location.pathname + location.search, title: document.title, groups: window.__sindTune ? window.__sindTune.list() : [] }');
+      const groups = r.groups, tab = r.title + ' — ' + r.who;
+      const s = JSON.stringify(groups.map((g) => [g.name, Object.keys(g.spec)]));
+      document.getElementById('status').textContent = (groups.length ? 'live — ' + groups.length + ' group(s)' : 'connected — no tunables registered') + ' · answering tab: ' + tab;
+      if (s === sig) {
+        if (!dragging) for (const g of groups) for (const [k, v] of Object.entries(g.spec)) {
+          const row = rows.get(g.name + '.' + k);
+          if (row && String(row.inp.value) !== String(v.value)) { row.inp.value = v.value; row.out.textContent = v.value; }
+        }
+        return;
+      }
+      sig = s; rows.clear();
+      const root = document.getElementById('groups'); root.innerHTML = '';
+      for (const g of groups) {
+        const div = document.createElement('div'); div.className = 'grp';
+        div.innerHTML = '<h2>' + g.name + '</h2>';
+        for (const [k, v] of Object.entries(g.spec)) {
+          const row = document.createElement('div'); row.className = 'row';
+          row.innerHTML = '<label>' + k + '</label><input type="range" min="' + (v.min ?? 0) + '" max="' + (v.max ?? 1) + '" step="' + (v.step ?? 0.01) + '" value="' + v.value + '"><output>' + v.value + '</output>';
+          const inp = row.querySelector('input'), out = row.querySelector('output');
+          rows.set(g.name + '.' + k, { inp, out });
+          inp.onpointerdown = () => { dragging = true; };
+          inp.oninput = () => { out.textContent = inp.value; bus('return window.__sindTune.set(' + JSON.stringify(g.name) + ',' + JSON.stringify(k) + ',' + inp.value + ')').catch(() => {}); };
+          div.appendChild(row);
+        }
+        if (g.file) { const f = document.createElement('div'); f.className = 'file'; f.textContent = 'persists to: ' + g.file; div.appendChild(f); }
+        root.appendChild(div);
+      }
+    } catch (e) { document.getElementById('status').textContent = 'game bus unreachable — is a game tab open? (' + e.message + ')'; }
+  }
+  refresh(); setInterval(refresh, 3000);
+  </script></body></html>`;
+  return {
+    name: 'sindicate-gui',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use('/__sindicate', (req, res) => {
+        res.setHeader('content-type', 'text/html'); res.end(PAGE);
+      });
+    },
+  };
+}
+
 export function sindicateDevTools({
   sourceWrites = [],
   assetLists = [],
@@ -225,6 +293,7 @@ export function sindicateDevTools({
     ...assetLists.map(assetListPlugin),
     ...stores.map(binStorePlugin),
     perfSinkPlugin(perfSink),
+    guiPlugin(),
     busPlugin({ name: 'game', prefix: '/__game', originGuard: true }),
     busPlugin({ name: 'editor', prefix: '/__editor' }),
     editorShotsPlugin({ shotsDir: editorShotsDir, mapsDir }),