sindicate 0.5.0 → 0.7.0

package/src/ui/dialogue.js

@@ -0,0 +1,434 @@
+// dialogue.js — TALKING TO THE COUNTY. A self-contained panel, built once on the loading screen,
+// DOM-only (PERF LAW: nothing touches the scene during play). It owns three things:
+//
+//   1. the Fantasy-Warrior panel — a name banner, the line the NPC speaks, and numbered option
+//      plates with a gold flourish down the side, laid out as Synty's own demo scene lays it: the
+//      speaker to the LEFT of frame, the panel filling the RIGHT.
+//   2. keyboard + gamepad + mouse selection of those options (the same five rules the pause menu
+//      uses — number keys, up/down, Enter/E, Esc/B — copied here so ui.js's _navTarget stays the
+//      pause menu's alone; three panels must not fight over it).
+//   3. THE TALK CAMERA — it swings the lens round to the NPC's front, eases in, and hands back with
+//      a cut the instant he reaches for the gun. Same shape as trainCamera.js (seize the lens, kill
+//      mouse-look via ui.cinematic, snap on handback), realised for a two-shot instead of a train.
+//
+// The WORDS live in data/dialogue.js, per role, with a few named people. This file is the machine
+// that says them; that file is the feature.
+//
+// WIRING (the integrator, main.js/ui.js — NOT this file):
+//   · construct once beside loot/deadEye:            game.ui.dialogue = new Dialogue(game.ui)
+//   · open on the nearest talkable NPC at the E-scan: ui.dialogue.open(npc)   (game.npcs only — see
+//        WESTERN SEAMS §5: outlaws and the law are Enemies in other arrays, never talk candidates)
+//   · once per frame while open:                      ui.dialogue.handleKey(input)
+//   · from the on-foot camera tail (outside the pause guard, like player.aboardPost):
+//                                                     ui.dialogue.cameraTakeover(dt, camera)
+//   · point the trade option at the shop:             ui.dialogue.onTrade = (npc) => ui.shop.open(npc)
+// Escape and getting-shot already route through ui.closeDialogue() (main.js:748, player.js:1366),
+// which this module adopts as its own close — so those paths tear the panel down and hand the camera
+// back for free, without an integrator edit.
+// dialogue trees are GAME data: setDialogueTrees(treeForFn) — (npc) => tree
+let treeFor = () => null;
+export function setDialogueTrees(fn) { treeFor = fn ?? (() => null); }
+import { padMode, buttonCanvas } from './menuHints.js';
+
+// ── the two-shot, in numbers ────────────────────────────────────────────────────────────────────
+// The lens stands in FRONT of the NPC (he has already turned to face the player, so his front faces
+// roughly where the player — and thus the lens — is), swung a touch to one side for a 3/4 read, then
+// PANNED screen-right so he slides into the LEFT of frame and the panel has the right to itself.
+const CAM_D = 2.6;              // metres the lens stands off the NPC — close enough he fills frame,
+                               // far enough the 40°-ish FOV doesn't fish-eye his hat brim
+const CAM_THETA = 0.454;        // 26°: swing off dead-centre for a 3/4 face instead of a passport photo
+const CAM_PAN = 0.9;            // metres of screen-right pan → NPC to the left, panel fills the right
+const HEAD = 1.5;               // look height above the NPC's feet (his eyeline; matches the follow
+                               // cam's head target at _visualY+1.55)
+const CAM_H = 1.7;             // lens height above his feet — a touch above the eyeline, looking down
+                               // ~4°, which clears hats and hitching rails between the two of them
+const GROUND_CLEAR = 0.5;       // never let the eased lens drop into the dirt
+const CAM_RATE = 3.2;          // ease-in speed (per second). trainCamera plants exactly; a two-shot
+                               // wants to GLIDE in over ~0.4 s so the swing reads as a move.
+
+// segment-test scratch (world.segmentBlocked wants {x,y,z}) — module scope, no per-frame alloc.
+const _segA = { x: 0, y: 0, z: 0 };
+const _segB = { x: 0, y: 0, z: 0 };
+
+// Pick a line from a pool without repeating the last one drawn from THAT pool — so two miners in a
+// row don't greet you identically, and asking a question twice gets a different answer. The last
+// index is stashed on the array itself (WeakMap), shared across every NPC of the role.
+const _lastPick = new WeakMap();
+function pick(a) {
+  if (!Array.isArray(a)) return a;
+  if (a.length <= 1) return a[0] ?? '';
+  let i = (Math.random() * a.length) | 0;
+  if (i === _lastPick.get(a)) i = (i + 1) % a.length;
+  _lastPick.set(a, i);
+  return a[i];
+}
+
+export class Dialogue {
+  constructor(ui) {
+    this.ui = ui;
+    this.game = ui.game;
+    this.npc = null;
+    this.tree = null;
+    this.onTrade = null;         // the shop hook the integrator points at ui.shop.open
+
+    // nav state (mirrors ui.js navUpdate, kept local so we never touch _navTarget)
+    this._idx = 0;
+    this._engaged = false;       // a key/pad has been used since the last mouse move
+    this._navFresh = true;       // options just (re)rendered — swallow this frame's confirm edge
+    this._mx = 0; this._my = 0;
+
+    // talk-camera state — plain scalars eased toward the target; camera.position is reset every
+    // frame by the follow cam before we run, so we can't lerp IT, we lerp our own kept pose.
+    this._camActive = false;
+    this._cp = { x: 0, y: 0, z: 0 };   // current lens position
+    this._ct = { x: 0, y: 0, z: 0 };   // current look-at
+    this._tp = { x: 0, y: 0, z: 0 };   // target lens position (the planted two-shot)
+    this._tt = { x: 0, y: 0, z: 0 };   // target look-at
+
+    this._injectCSS();
+    this._buildDOM();
+
+    // ADOPT ui.closeDialogue. It exists as a stub (ui.js:913) that ten systems and two hot paths
+    // call — Escape (main.js:748) and taking a bullet (player.js:1366). Routing it through close()
+    // makes those paths tear the panel down and hand the camera back with no edit to ui.js or
+    // main.js. openDialogue is aliased too, for any caller that reaches for the Fable-era name.
+    ui.closeDialogue = () => this.close();
+    ui.openDialogue = (npc) => this.open(npc);
+    if (ui.currentNPC === undefined) ui.currentNPC = null;   // the flag npc.js reads to hold + face
+  }
+
+  // ── the contract API ──────────────────────────────────────────────────────────────────────────
+  isOpen() { return !!this.ui.dialogueOpen; }
+
+  open(npc) {
+    if (!npc) return;
+    if (this.ui.dialogueOpen && this.npc === npc) { this._render(pick(this.tree.openers)); return; }
+    this.npc = npc;
+    this.tree = treeFor(npc);
+    // A HOUSED GUNHAND (COPPERHEAD crew at the Halloway place) always offers the ride-along toggle,
+    // appended non-destructively over WHATEVER tree he's using — the merchant counter, a mission
+    // stage, his own lines — so taking August along never costs you his shop.
+    if (npc._atHouse && npc.def?.gunhand) {
+      const g = this.ui.game;
+      this.tree = { ...this.tree, topics: [...(this.tree.topics ?? []), npc._follow
+        ? { q: `Head on home.`, a: [`Holler when it turns interesting again.`], action: (n) => g._toggleRideAlong?.(n) }
+        : { q: `Ride with me.`, a: [`(A check of the load, a tug of the hat, and he falls in.)`], action: (n) => g._toggleRideAlong?.(n) },
+      ] };
+    }
+    this._asked = new Set();          // topics already put to him THIS conversation — they drop off the
+                                      // list once answered, so a chat PROGRESSES toward "So long"
+                                      // instead of handing back the same three buttons forever.
+    this.ui.dialogueOpen = true;      // freezes the player (look/move/gun/mount) via ten readers;
+    this.ui.cinematic = true;         // and freezes look/move a second way — the camera-takeover flag
+    this.ui.currentNPC = npc;         // npc.js: face the player, hold idle, drop the wander goal
+    const input = this.game.input;
+    input?.releaseLock?.();           // free the cursor for the option buttons (map does the same)
+    input?.consume?.('KeyE');         // the E that opened us must NOT also confirm the top option
+    this._camActive = false;          // re-seed the ease from wherever the follow cam is this frame
+    this._plantShot(npc);
+    this._mx = input?.mouse?.x ?? 0; this._my = input?.mouse?.y ?? 0;
+    this._engaged = false;
+    this.el.root.style.display = 'block';
+    this._render(pick(this.tree.openers));
+    this.game.audio?.play?.('ui');
+  }
+
+  close(opts = {}) {
+    if (!this.ui.dialogueOpen) return;                 // idempotent — safe to call already-closed
+    this.el.root.style.display = 'none';
+    this.ui.dialogueOpen = false;
+    this.ui.cinematic = false;
+    this.ui.currentNPC = null;
+    this.npc = null; this.tree = null;
+    this._camActive = false;
+    this._navFresh = false;
+    // HAND THE LENS BACK. If he needs the gun this instant — shot, aiming, a fight, dead — CUT, the
+    // way trainCamera does (player._camSnap, consumed next frame in _camera). Otherwise leave the
+    // lens where the two-shot ended and let the follow cam EASE it home (a soft ~0.2 s settle), which
+    // is the ease-OUT: a calm goodbye shouldn't snap. (Do NOT re-request the pointer lock; the next
+    // canvas click re-acquires it and input.js drops that click so it never lands as a shot.)
+    const p = this.game.player;
+    const danger = opts.snap || !p?.alive || p?.aiming || p?.drawn || p?.reloading
+      || (p?._combatT > 0) || this.game._inCombat;
+    if (danger && p) p._camSnap = true;
+  }
+
+  // Called once per frame by the integrator while this panel is the active one. Mouse works without
+  // it (native :hover + onclick); this drives keys/pad and consumes Escape.
+  handleKey(input) {
+    if (!this.ui.dialogueOpen || !input) return;
+    const fresh = this._navFresh; this._navFresh = false;
+    this._paintByeKey();   // swap the way-out keycap live if a pad was (un)plugged
+
+    // RAW pad. The synthesized pad keys are suppressed while a panel is open (input.pollGamepad(uiOpen)),
+    // so read the stick / D-pad / face buttons DIRECTLY, edge-detected, like the pause menu & world map.
+    let padUp = false, padDown = false, padConfirm = false, padClose = false;
+    {
+      const pads = navigator.getGamepads ? navigator.getGamepads() : null;
+      let gp = null; if (pads) for (const p of pads) if (p && p.connected) { gp = p; break; }
+      if (gp) {
+        const b = (i) => !!gp.buttons[i]?.pressed, ax = (i) => gp.axes[i] || 0;
+        const st = { u: b(12) || ax(1) < -0.55, d: b(13) || ax(1) > 0.55, a: b(0), c: b(1) };
+        const pv = this._dpad || {};
+        padUp = st.u && !pv.u; padDown = st.d && !pv.d; padConfirm = st.a && !pv.a; padClose = st.c && !pv.c;
+        this._dpad = st;
+      } else this._dpad = null;
+    }
+
+    // leave the conversation — Circle (pad), KeyB / Esc, or reaching for the gun
+    if (padClose && !fresh) return this.close();
+    if (input.hit('Escape')) { input.consume('Escape'); return this.close(); }
+    if (input.hit('KeyB'))   { input.consume('KeyB');   return this.close(); }
+    // reaching for the gun ends the talk and cuts the lens straight back
+    if (input.mouseHit?.(2)) { input.consumeMouse?.(2); return this.close({ snap: true }); }
+
+    const opts = this._opts();
+    if (!opts.length) return;
+
+    // number keys jump straight to a numbered option (the topics + the trade line; NOT the B row)
+    const numbered = opts.filter((b) => b.dataset && b.dataset.num);
+    for (let i = 0; i < numbered.length && i < 9; i++) {
+      if (input.hit('Digit' + (i + 1)) || input.hit('Numpad' + (i + 1))) {
+        input.consume('Digit' + (i + 1)); input.consume('Numpad' + (i + 1));
+        numbered[i].click(); return;
+      }
+    }
+
+    const down = input.hit('ArrowDown') || input.hit('KeyS') || padDown;
+    const up = input.hit('ArrowUp') || input.hit('KeyW') || padUp;
+    const confirm = input.hit('Enter') || input.hit('Space') || input.hit('KeyE') || padConfirm;
+
+    // last-device-wins: a mouse move drops the key marker so it can't sit lit beside a :hover'd row
+    const mx = input.mouse?.x ?? 0, my = input.mouse?.y ?? 0;
+    if ((mx !== this._mx || my !== this._my) && !input.gpActive) this._engaged = false;
+    this._mx = mx; this._my = my;
+    if (down || up || confirm || padUp || padDown || input.gpActive) this._engaged = true;
+
+    if (this._idx >= opts.length) this._idx = opts.length - 1;
+    if (this._idx < 0) this._idx = 0;
+    if (!this._engaged) { opts.forEach((b) => b.classList.remove('navsel')); return; }
+
+    if (down) this._idx = (this._idx + 1) % opts.length;
+    if (up)   this._idx = (this._idx - 1 + opts.length) % opts.length;
+    if (down || up) this.game.audio?.play?.('ui');
+    opts.forEach((b, i) => b.classList.toggle('navsel', i === this._idx));
+
+    // never confirm on the frame the options first appear — that E/Enter edge belongs to whatever
+    // opened the panel (KeyE both OPENS dialogue and CONFIRMS options), so the top option can't
+    // self-select the instant you walk up.
+    if (confirm && !fresh) {
+      ['Enter', 'Space', 'KeyE'].forEach((c) => input.consume(c));
+      opts[this._idx]?.click();
+    }
+  }
+
+  // ── THE TALK CAMERA ─────────────────────────────────────────────────────────────────────────
+  // Returns true while the rig owns the lens (mouse-look already dead via ui.cinematic), false the
+  // moment the panel closes — then the follow cam takes over and eases home. Same seam as the train:
+  // player.aboardPost calls the train rig and falls through when it answers false; the integrator
+  // calls THIS from the on-foot camera tail and overrides the follow cam when it answers true.
+  cameraTakeover(dt, camera) {
+    if (!this.ui.dialogueOpen || !this.npc) return false;
+    if (!this._camActive) {
+      // seed the ease from where the follow cam left the lens this frame, so the swing reads as a
+      // move and not a cut — and seed the look-at at the player's head, which is exactly what the
+      // follow cam was looking at, so the aim glides FROM the player round TO the man he's talking to.
+      this._camActive = true;
+      this._cp.x = camera.position.x; this._cp.y = camera.position.y; this._cp.z = camera.position.z;
+      const P = this.game.player.position;
+      this._ct.x = P.x; this._ct.y = P.y + HEAD; this._ct.z = P.z;
+    }
+    const k = Math.min(1, dt * CAM_RATE);
+    this._cp.x += (this._tp.x - this._cp.x) * k;
+    this._cp.y += (this._tp.y - this._cp.y) * k;
+    this._cp.z += (this._tp.z - this._cp.z) * k;
+    this._ct.x += (this._tt.x - this._ct.x) * k;
+    this._ct.y += (this._tt.y - this._ct.y) * k;
+    this._ct.z += (this._tt.z - this._ct.z) * k;
+    camera.position.set(this._cp.x, this._cp.y, this._cp.z);
+    camera.lookAt(this._ct.x, this._ct.y, this._ct.z);
+    return true;
+  }
+
+  // Compute the planted two-shot ONCE per conversation (the player is frozen and the NPC is held on
+  // his mark facing us, so the target never moves — no need to re-solve the ray every frame). Writes
+  // _tp (lens) and _tt (look-at).
+  _plantShot(npc) {
+    const N = npc.position, P = this.game.player.position;
+    let fx = P.x - N.x, fz = P.z - N.z;          // the way he faces: toward the player, toward us
+    let fl = Math.hypot(fx, fz);
+    if (fl < 0.2) { fx = 0; fz = 1; fl = 1; }    // stacked on the same spot → pick an arbitrary front
+    fx /= fl; fz /= fl;
+    const world = this.game.world;
+    let chosen = null;
+    // try a 3/4 swing to either side; keep the first whose sightline to his head is CLEAR of walls,
+    // so the lens never frames him through the back of the saloon. (Prefer the +26° side.)
+    for (const s of [1, -1]) {
+      const th = CAM_THETA * s, c = Math.cos(th), sn = Math.sin(th);
+      const cx = fx * c + fz * sn, cz = -fx * sn + fz * c;   // rotate the facing vector about +Y
+      let px = N.x + cx * CAM_D, pz = N.z + cz * CAM_D, py = N.y + CAM_H;
+      let tx = N.x, tz = N.z; const ty = N.y + HEAD;
+      // screen-right = cross(up, view); view = look − lens. For up=(0,1,0): right = (view.z, 0, −view.x)
+      const vx = tx - px, vz = tz - pz;
+      // SCREEN-RIGHT is cross(view, up), not cross(up, view) — the sign was flipped, so the pan went
+      // screen-LEFT and slid the man behind the panel on the right instead of into the clear on the
+      // left. three's look-at builds right = normalize(cross(forward, up)); for up=(0,1,0) and a
+      // horizontal view that is (−view.z, 0, view.x).
+      let rx = -vz, rz = vx; const rl = Math.hypot(rx, rz) || 1; rx /= rl; rz /= rl;
+      px += rx * CAM_PAN; pz += rz * CAM_PAN;      // pan the lens right → he slides left, panel gets the right
+      tx += rx * CAM_PAN; tz += rz * CAM_PAN;
+      const g = world.groundAt(px, pz) + GROUND_CLEAR;
+      if (py < g) py = g;                          // never through the floor
+      const shot = { px, py, pz, tx, ty, tz };
+      if (!chosen) chosen = shot;
+      _segA.x = px; _segA.y = py; _segA.z = pz;
+      _segB.x = N.x; _segB.y = N.y + HEAD; _segB.z = N.z;
+      if (!world.segmentBlocked(_segA, _segB)) { chosen = shot; break; }
+    }
+    this._tp.x = chosen.px; this._tp.y = chosen.py; this._tp.z = chosen.pz;
+    this._tt.x = chosen.tx; this._tt.y = chosen.ty; this._tt.z = chosen.tz;
+  }
+
+  // ── rendering ─────────────────────────────────────────────────────────────────────────────────
+  _opts() { return [...this.el.opts.querySelectorAll('button')].filter((b) => !b.disabled); }
+
+  // the "way out" keycap: the pad's Circle icon when a controller is connected, else a boxed "B".
+  _paintByeKey() {
+    const mode = padMode();
+    if (mode === this._byeMode || !this._byeKey) return;
+    this._byeMode = mode;
+    this._byeKey.textContent = '';
+    if (mode) { this._byeKey.className = 'dlg-byekey pad'; const c = buttonCanvas('circle', mode, 19); c.style.display = 'inline-block'; c.style.verticalAlign = 'middle'; this._byeKey.appendChild(c); }
+    else { this._byeKey.className = 'dlg-byekey kbd'; this._byeKey.textContent = 'B'; }
+  }
+
+  _render(line) {
+    const npc = this.npc, tree = this.tree;
+    this.el.name.textContent = npc.name || 'Stranger';
+    this.el.say.textContent = line || '';
+    const opts = this.el.opts;
+    opts.innerHTML = '';
+    let k = 0;
+    const add = (label, fn, cls) => {
+      const b = document.createElement('button');
+      b.className = 'dlg-opt' + (cls ? ' ' + cls : '');
+      b.textContent = label;
+      b.onmouseenter = () => { this._engaged = false; };   // mouse takes the highlight from the keys
+      b.onclick = () => { this.game.audio?.play?.('ui'); fn(); };
+      opts.appendChild(b);
+      return b;
+    };
+    // THE TOPICS. Asking one MARKS IT ASKED and re-renders, so it is gone from the list next time —
+    // a conversation that moves forward, not a menu you click a billion times. The number keys map to
+    // what is on screen, so they re-number as topics fall away; when the last is asked only the
+    // merchant's counter (if any) and "So long" remain, which is the chat ending on its own.
+    (tree.topics || []).forEach((t, ti) => {
+      if (this._asked && this._asked.has(ti)) return;
+      k++;
+      const b = add(`${k}. ${t.q}`, () => { this._asked.add(ti); t.action?.(this.npc, this); this._render(pick(t.a)); });
+      b.dataset.num = String(k);
+    });
+    // ...and once he has nothing left to be asked, put a sign-off under his name so the panel is not a
+    // banner over a lone "So long" with no line beneath it.
+    const topicsN = (tree.topics || []).length;
+    if (topicsN && this._asked && this._asked.size >= topicsN && !tree.merchant) {
+      this.el.say.textContent = line || `That's about the size of it. Mind how you go.`;
+    }
+    // the merchant's counter — reached, per the plan, through a line of dialogue
+    if (tree.merchant) {
+      k++;
+      const label = `${k}. ${tree.tradeLabel || `Let me see what you've got.`}`;
+      const b = this.onTrade
+        ? add(label, () => { const n = this.npc; this.close(); this.onTrade(n); }, 'dlg-trade')
+        // shop not wired yet (it ships after dialogue): keep the option visible but honest
+        : add(label, () => this._render(`Counter's shut just now. Come back when I've cracked the crates.`), 'dlg-trade');
+      b.dataset.num = String(k);
+    }
+    // the "way out" row — a controller-aware keycap: Circle (○) on a pad, B on a keyboard. Closes on
+    // Circle / KeyB / Esc. No data-num: number keys skip it.
+    const bye = add('So long.', () => this.close(), 'dlg-bye');
+    this._byeKey = document.createElement('span'); this._byeKey.className = 'dlg-byekey';
+    bye.insertBefore(this._byeKey, bye.firstChild);
+    this._byeMode = undefined; this._paintByeKey();
+    this._navFresh = true;
+    this._idx = 0;
+    [...opts.children].forEach((b) => b.classList.remove('navsel'));
+  }
+
+  // ── DOM + CSS (built once) ────────────────────────────────────────────────────────────────────
+  _buildDOM() {
+    const root = document.createElement('div');
+    root.id = 'dlg';
+    root.innerHTML = '<div class="dlg-panel">'
+      + '<div class="dlg-name"></div>'
+      + '<div class="dlg-say"></div>'
+      + '<div class="dlg-opts"></div>'
+      + '</div>';
+    document.body.appendChild(root);
+    this.el = {
+      root,
+      name: root.querySelector('.dlg-name'),
+      say: root.querySelector('.dlg-say'),
+      opts: root.querySelector('.dlg-opts'),
+    };
+  }
+
+  _injectCSS() {
+    const P = '/assets/ui/panels';
+    const css = document.createElement('style');
+    // All under #dlg / .dlg-* — no selector reaches another panel or #hud. The Fantasy-Warrior
+    // sprites sit on top of solid, legible CSS plates (western palette: gold #e8c87a, brown #7a5c30,
+    // near-black panel), so a sprite that reads oddly or fails to load still leaves a readable panel.
+    css.textContent = `
+      #dlg { position:fixed; inset:0; z-index:60; display:none; pointer-events:none;
+        font-family:Copperplate,'Copperplate Gothic Bold','Palatino','Book Antiqua',Georgia,serif; }
+      #dlg .dlg-panel { position:absolute; right:3.2vw; bottom:8vh; width:min(560px,46vw);
+        display:flex; flex-direction:column; align-items:stretch; gap:10px; }
+
+      /* NAME BANNER — the ornate FW banner as a horizontal 9-slice (330 0 330 0): the two end
+         flourishes hold their size and the middle stretches, so a long name never tears it. The
+         gradient + border below is the fallback shape if the sprite is missing. */
+      #dlg .dlg-name { align-self:center; min-width:200px; max-width:100%; height:56px; padding:0 66px;
+        display:flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden;
+        color:#f4e3b0; font-size:19px; letter-spacing:2px; text-transform:uppercase;
+        text-shadow:0 2px 4px #000, 0 0 10px rgba(0,0,0,0.85);
+        background:linear-gradient(180deg,rgba(60,44,22,0.96),rgba(28,18,9,0.96));
+        border:2px solid #6a5630; border-radius:8px;
+        border-image:url(${P}/dlg_banner.png) 330 0 330 0 fill; border-image-width:0 72px;
+        border-image-repeat:stretch; }
+
+      /* THE LINE HE SPEAKS — dark plate for legibility, dlg_frame's ornate gold border on top. */
+      #dlg .dlg-say { position:relative; padding:18px 22px; min-height:72px; display:flex; align-items:center;
+        color:#f1e6c6; font-family:'Palatino','Book Antiqua',Georgia,serif; font-size:19px; font-style:italic;
+        line-height:1.42; text-shadow:0 1px 3px #000;
+        background:rgba(18,12,7,0.94); border:2px solid #7a5c30; border-radius:8px;
+        box-shadow:0 10px 34px rgba(0,0,0,0.72), inset 0 0 40px rgba(122,92,48,0.10);
+        border-image:url(${P}/dlg_frame.png) 200 fill; border-image-width:20px; border-image-repeat:stretch; }
+
+      /* OPTIONS — a column of plates with the gold flourish down the left gutter. */
+      #dlg .dlg-opts { position:relative; display:flex; flex-direction:column; gap:7px; padding-left:26px; }
+      #dlg .dlg-opts::before { content:''; position:absolute; left:0; top:3px; bottom:3px; width:16px;
+        background:url(${P}/dlg_flourish.png) center/100% 100% no-repeat; opacity:0.9; pointer-events:none; }
+      #dlg .dlg-opt { pointer-events:auto; position:relative; text-align:left; cursor:pointer; width:100%;
+        padding:11px 16px; color:#d8c79a; font-size:16px; letter-spacing:0.4px; line-height:1.3;
+        font-family:inherit; text-shadow:0 1px 2px #000; white-space:normal;
+        background:rgba(28,20,10,0.90); border:1px solid #4a3a20; border-radius:6px;
+        transition:color .12s, background .12s, transform .08s, box-shadow .12s; }
+      #dlg .dlg-opt.dlg-trade { color:#e8c87a; }
+      /* highlight — mouse :hover and keyboard .navsel read identically (last-device-wins in JS). The
+         FW tracery frame, tinted by the sprite, rides on top of the solid gold border fallback. */
+      #dlg .dlg-opt:hover, #dlg .dlg-opt.navsel { color:#fff4d2; background:rgba(58,42,20,0.96);
+        border-color:#e8c87a; transform:translateX(3px); box-shadow:0 0 15px rgba(232,200,122,0.28);
+        border-image:url(${P}/opt_frame.png) 120 240 120 240 fill; border-image-width:11px 18px;
+        border-image-repeat:stretch; }
+      /* the "So long" row: a keycap (pad Circle icon or boxed B), tucked right, quieter than a topic */
+      #dlg .dlg-bye { align-self:flex-end; width:auto; margin-top:2px; padding:7px 15px 7px 12px;
+        color:#b9a878; font-size:14px; letter-spacing:1px; background:rgba(10,7,4,0.92); border-color:#3a2c18; }
+      #dlg .dlg-bye:hover, #dlg .dlg-bye.navsel { transform:translateX(0); }
+      #dlg .dlg-byekey { display:inline-flex; align-items:center; vertical-align:middle; margin-right:9px; }
+      #dlg .dlg-byekey.kbd { width:18px; height:18px; justify-content:center; line-height:17px; font-size:12px;
+        font-weight:700; color:#f4e3b0; border:1px solid #8a6a3a; border-radius:4px; background:rgba(40,28,14,0.92); }
+    `;
+    document.head.appendChild(css);
+  }
+}

package/src/ui/iconBaker.js

@@ -0,0 +1,180 @@
+// iconBaker.js — the item satchel's icons are PICTURES OF THE GAME'S OWN PROPS.
+//
+// Instead of hunting item icons in four fantasy/military/sci-fi HUD packs (wrong period, wrong art),
+// we render each item's real 3D prop to one cell of a texture atlas ONCE, on the loading screen. The
+// icon of a whiskey bottle is the whiskey bottle that stands on the Emporium shelf, in the game's own
+// low-poly art, lit the same way. That is exactly why RDR2's satchel reads as a satchel.
+//
+// PERF LAW HOLDS: the rig below is a THROWAWAY scene (never game.scene). Each prop is added to it,
+// shot, and removed inside the same loop turn — nothing is ever added to or removed from the live
+// scene, and the whole bake runs beside the other loading-screen work (warmTextures, the 1.7s chart).
+//
+// THE MECHANISM is tools/map.js:genThumb, which already renders editor-palette props to 128² render
+// targets and reads them back — the same lighting rig, ported to an ortho camera for a distortion-free
+// icon. readRenderTargetPixelsAsync FENCES THE GPU (editorBus.js's item-card lesson: an unfenced
+// drawImage copies a stale/blank frame), so the readback is the fence and no separate wait is needed.
+//
+// COST (loading screen, ~30 items, estimated from the map.js precedent):
+//   · model parse — props already resident in the world = cached ~0 ms; a fresh prop parses its fast
+//     GLB twin ≈ 5–15 ms (instantiate redirects .fbx→.glb when a texture is given). ~15 fresh ≈ 150 ms.
+//   · render — one 128² draw of a low-poly Synty prop ≪ 1 ms each.
+//   · readback fence — ~1–3 ms each; ~30 items ≈ 30–90 ms.
+//   · toDataURL once ≈ a few ms.
+//   TOTAL ≈ 150–300 ms, dominated by any fresh parses and shared with the world when the prop is used.
+//   Free at runtime: the atlas is a data URL painted as a CSS background; nothing renders per frame.
+//
+// ATLAS: ~30 icons at 128 px on a ceil(√n)-wide grid ≈ 768×640 → a ~100–300 KB PNG data URL. Bump
+// CELL to 192 for retina crisp (still trivial). A single-RT / setScissor variant could collapse the 30
+// fences to one; the per-item path below is the proven map.js one and its cost is already negligible.
+import * as THREE from 'three/webgpu';
+import { instantiate } from '../core/assets.js';
+
+// `dir` picks the atlas the FBX/GLB twin is textured with (assets.js won't auto-link Synty atlases).
+// western props live on the main western atlas; frontier props and the weapons share the frontier one
+// (player.js:63 WEAPON_TEX). Wrong atlas = wrong texels, so this map is load-bearing.
+// prop-dir -> texture atlas routing is GAME data: setIconAtlases({ dir: url, ... })
+let ATLAS_FOR = {};
+export function setIconAtlases(map) { ATLAS_FOR = map ?? {}; }
+
+const CELL = 128;   // px per icon. 128*4 = 512 is a multiple of 256 → a legal WebGPU readback stride
+                    // (map.js:207: 160/224 are illegal — row-pad skew). 192 and 256 are also legal.
+
+// A fixed 3/4 hero angle: front-on, a touch above and to the side, so a bottle reads as a bottle and a
+// revolver shows its profile. One direction for every prop keeps the satchel looking like a set.
+const VIEW_DIR = new THREE.Vector3(1, 0.72, 1.35).normalize();
+
+export class IconBaker {
+  constructor(renderer) {
+    this.renderer = renderer;
+    this.url = null;          // the finished atlas, a PNG data URL (null until bake() resolves)
+    this.cell = CELL;
+    this.cols = 0;
+    this.rows = 0;
+    this._uv = new Map();     // id -> { col, row }
+
+    // Throwaway rig. Lighting copied from tools/map.js:208-210 so icons match the editor thumbs that
+    // already look right — a bright hemisphere fill plus one key from front-upper-left.
+    this.scene = new THREE.Scene();
+    this.scene.add(new THREE.HemisphereLight(0xffffff, 0x445566, 3));
+    const key = new THREE.DirectionalLight(0xffffff, 2.6);
+    key.position.set(2, 4, 3);
+    this.scene.add(key);
+
+    // Ortho, not perspective: an icon wants no lens distortion. Frustum is set per-prop in bake().
+    this.cam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.01, 100);
+    this.rt = new THREE.RenderTarget(CELL, CELL);   // one small target, read back per item
+  }
+
+  // Render every item's prop into the atlas. `items` is an array of item defs carrying
+  // `{ id, icon: { dir, prop } }` (i.e. Object.values(ITEMS) from data/items.js). Idempotent-ish:
+  // call once on the loading screen. Resolves to `this` so callers can chain.
+  async bake(items) {
+    const list = (items || []).filter((it) => it && it.icon && it.icon.prop);
+    const n = list.length;
+    if (!n) { this.url = null; return this; }
+
+    this.cols = Math.ceil(Math.sqrt(n));
+    this.rows = Math.ceil(n / this.cols);
+    const atlas = Object.assign(document.createElement('canvas'), {
+      width: this.cols * CELL, height: this.rows * CELL,
+    });
+    const actx = atlas.getContext('2d');
+    const r = this.renderer;
+
+    // Save every bit of renderer state we touch — this is the LIVE game renderer, and leaving the
+    // clear colour transparent or the render target pointed at our RT would wreck the first world frame.
+    const prevRT = r.getRenderTarget();
+    const prevColor = r.getClearColor(new THREE.Color());
+    const prevAlpha = r.getClearAlpha();
+    r.setClearColor(0x000000, 0);   // transparent: the icon is a cutout over the satchel chrome, not a box
+
+    const box = new THREE.Box3();
+    const center = new THREE.Vector3();
+    const sphere = new THREE.Sphere();
+
+    for (let i = 0; i < n; i++) {
+      const it = list[i];
+      const col = i % this.cols;
+      const row = (i / this.cols) | 0;
+      this._uv.set(it.id, { col, row });
+
+      let model = null;
+      try {
+        const tex = ATLAS_FOR[it.icon.dir] ?? Object.values(ATLAS_FOR)[0];
+        // No `scale`: instantiate hands back the metre GLB twin or the cm FBX (assets.js decides).
+        // We never care which — the camera frames the MEASURED bbox, so the scale trap can't bite.
+        model = await instantiate(`/assets/${it.icon.dir}/${it.icon.prop}.fbx`, { texture: tex });
+        box.setFromObject(model);
+        if (box.isEmpty()) { console.warn('[iconBaker] empty bbox for', it.id); continue; }
+        box.getBoundingSphere(sphere);
+        box.getCenter(center);
+        const rad = Math.max(1e-3, sphere.radius);
+
+        // Ortho frustum snug to the bounding sphere with ~12% air so nothing kisses the cell edge.
+        const half = rad * 1.12;
+        this.cam.left = -half; this.cam.right = half;
+        this.cam.top = half;   this.cam.bottom = -half;
+        this.cam.near = 0.01;  this.cam.far = rad * 12;
+        this.cam.position.copy(center).addScaledVector(VIEW_DIR, rad * 4);
+        this.cam.up.set(0, 1, 0);
+        this.cam.lookAt(center);
+        this.cam.updateProjectionMatrix();
+
+        this.scene.add(model);
+        r.setRenderTarget(this.rt);
+        r.render(this.scene, this.cam);            // autoClear wipes the RT transparent first
+        r.setRenderTarget(null);
+        const buf = await r.readRenderTargetPixelsAsync(this.rt, 0, 0, CELL, CELL);  // fences the GPU
+        this.scene.remove(model);
+
+        const img = actx.createImageData(CELL, CELL);
+        img.data.set(buf);                          // readback is top-left origin — no flip (map.js:234)
+        actx.putImageData(img, col * CELL, row * CELL);
+      } catch (e) {
+        console.warn('[iconBaker] failed for', it.id, e);
+        if (model) this.scene.remove(model);
+      }
+    }
+
+    r.setRenderTarget(prevRT);
+    r.setClearColor(prevColor, prevAlpha);
+
+    this.url = atlas.toDataURL('image/png');
+    return this;
+  }
+
+  // Where an id landed in the atlas grid: { col, row } or null if it wasn't baked.
+  uv(id) { return this._uv.get(id) ?? null; }
+
+  // CSS to paint an id's icon into a size×size DOM box (a satchel slot, a shop row, a dialogue line).
+  // Returns the background-* declarations as one string; drop it onto the slot's style. Empty string if
+  // the id has no icon, so a missing item degrades to a blank slot rather than a broken-image glyph.
+  // PAINT ONE ATLAS CELL, in a way that CANNOT be wrong at the caller's chosen size. The px form
+  // (cols*size / -col*size) is only right when the element is EXACTLY `size` px — and the satchel slot
+  // told it 96 while the box is really 54 (72 − 2×9 inset), so the atlas blew up to 576 px across a
+  // 54 px window and you saw one cropped corner of a cell. Percentages fix it for every caller: a
+  // background-size of (cols·100% × rows·100%) makes each cell exactly the element's own size, and a
+  // background-position of (col/(cols−1) × row/(rows−1)) in % lands cell (col,row) dead centre of the
+  // box whatever its pixels. `size` is now ignored (kept so callers don't break).
+  iconCss(id) {
+    // The 2D hand-illustrated icon (scripts/gen_item_icons.mjs → /assets/items/<id>.png) sits ON TOP of
+    // the baked-3D-prop atlas cell. Where the PNG exists it's opaque (white engraving on black, square) so
+    // it fully covers the cell beneath; where it doesn't (a 404), that layer is transparent and the old
+    // baked icon shows through — a per-item, no-manifest fallback while the set is filled in.
+    const png = `url(/assets/items/${id}.png)`;
+    const u = this._uv.get(id);
+    if (!u || !this.url) {
+      return `background-image:${png};background-size:contain;background-position:center;background-repeat:no-repeat;`;
+    }
+    const px = this.cols > 1 ? (u.col / (this.cols - 1)) * 100 : 0;
+    const py = this.rows > 1 ? (u.row / (this.rows - 1)) * 100 : 0;
+    return `background-image:${png},url(${this.url});`
+         + `background-size:contain,${this.cols * 100}% ${this.rows * 100}%;`
+         + `background-position:center,${px}% ${py}%;`
+         + `background-repeat:no-repeat,no-repeat;`;
+  }
+
+  // Optional: free the GPU render target once every panel has read `url`. The atlas data URL and the
+  // uv map survive this, so uv()/iconCss() keep working — only the (tiny) 128² RT is released.
+  dispose() { this.rt?.dispose?.(); }
+}