sindicate 0.10.0 → 0.12.0

package/src/ui/deathScreen.js

@@ -57,7 +57,7 @@ export function showDeathScreen(opts = {}) {
       } catch (e) { /* tainted — leave as drawn */ }
     };
     img.onerror = () => { emblem.style.display = 'none'; };
-    img.src = `${UI}/banner.png`;
+    img.src = opts.emblem ?? `${UI}/banner.png`;
   }
   band.appendChild(emblem);
 
@@ -67,7 +67,7 @@ export function showDeathScreen(opts = {}) {
 
   content.appendChild(el('div',
     'color:#ddd7cc;font-size:min(8vw,76px);letter-spacing:min(1.4vw,10px);font-weight:700;line-height:1;'
-    + 'text-shadow:0 1px 0 rgba(255,255,255,0.28),0 2px 0 #5a1712,0 3px 3px rgba(0,0,0,0.6),0 0 30px rgba(0,0,0,0.45);', 'YOU DIED'));
+    + 'text-shadow:0 1px 0 rgba(255,255,255,0.28),0 2px 0 #5a1712,0 3px 3px rgba(0,0,0,0.6),0 0 30px rgba(0,0,0,0.45);', opts.title ?? 'YOU DIED'));
   const dv = el('div', 'margin:14px 0 15px;line-height:0;'); dv.innerHTML = DIVIDER_SVG; content.appendChild(dv);
 
   // options — small, tight, centred: [icon] label
@@ -89,7 +89,7 @@ export function showDeathScreen(opts = {}) {
     rows.push({ btn, fn, el: row, badge });
   };
   if (opts.hasSave) addRow('LOAD LAST SAVE', 'cross', opts.onLoad);
-  addRow('WAKE AT THE WELL', opts.hasSave ? 'square' : 'cross', opts.onRevive);
+  addRow(opts.reviveLabel ?? 'WAKE AT THE WELL', opts.hasSave ? 'square' : 'cross', opts.onRevive);
   addRow('QUIT TO TITLE', 'circle', opts.onQuit);
 
   let raf = 0, closed = false, first = true, prev = {}, lastMode = false;

package/src/ui/dialogue.js

@@ -27,7 +27,20 @@
 // back for free, without an integrator edit.
 // dialogue trees are GAME data: setDialogueTrees(treeForFn) — (npc) => tree
 let treeFor = () => null;
+let topicInjector = null;
+export function setDialogueTopicInjector(fn) { topicInjector = fn; }
 export function setDialogueTrees(fn) { treeFor = fn ?? (() => null); }
+// NODE-GRAPH MODE (fable-shaped trees): a tree with { nodes, start(game) } renders per-node
+// instead of per-topic. The option side-effect VOCABULARY is game data:
+//   setDialogueOptionHandler((opt, ctx) => bool) — ctx = { npc, game, dialogue, goto(id),
+//     close(), render(line, [{label,onPick}], byeLabel) }; return true = handled, false =
+//     the engine falls through to opt.next (null → close)
+//   setDialogueNodeHook((npc, id, {text,options}, game) => {text,options}|null) — flavour a
+//     node before it renders (mood lines, romance extras)
+let optionHandler = null;
+let nodeHook = null;
+export function setDialogueOptionHandler(fn) { optionHandler = fn; }
+export function setDialogueNodeHook(fn) { nodeHook = fn; }
 import { padMode, buttonCanvas } from './menuHints.js';
 
 // ── the two-shot, in numbers ────────────────────────────────────────────────────────────────────
@@ -102,19 +115,18 @@ export class Dialogue {
 
   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) },
-      ] };
+    if (this.ui.dialogueOpen && this.npc === npc) {
+      if (this.tree?.nodes) this._renderNode(this.tree.start?.(this.game) ?? 'hello');
+      else this._render(pick(this.tree.openers));
+      return;
     }
+    const tree = treeFor(npc);
+    if (!tree) return;                // an NPC with nothing to say opens nothing
+    this.npc = npc;
+    this.tree = tree;
+    // game hook: append/modify topics per-NPC at open time (campaign specials — a ride-along
+    // toggle, a mission-gated ask) without the game forking treeFor for one conversation
+    if (topicInjector) this.tree = topicInjector(npc, this.tree, this.ui.game) ?? this.tree;
     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.
@@ -129,7 +141,8 @@ export class Dialogue {
     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));
+    if (this.tree.nodes) this._renderNode(this.tree.start?.(this.game) ?? 'hello');
+    else this._render(pick(this.tree.openers));
     this.game.audio?.play?.('ui');
   }
 
@@ -156,7 +169,9 @@ export class Dialogue {
   // 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;
+    // !npc: the flag is up but the conversation isn't OURS (a game-scripted panel set
+    // ui.dialogueOpen itself) — its own nav drives it; consuming its Escape strands it
+    if (!this.ui.dialogueOpen || !input || !this.npc) return;
     const fresh = this._navFresh; this._navFresh = false;
     this._paintByeKey();   // swap the way-out keycap live if a pad was (un)plugged
 
@@ -289,6 +304,62 @@ export class Dialogue {
     this._tt.x = chosen.tx; this._tt.y = chosen.ty; this._tt.z = chosen.tz;
   }
 
+  // ── node-graph mode ───────────────────────────────────────────────────────────────────────────
+  _renderNode(id) {
+    if (!id) return this.close();
+    const node = this.tree?.nodes?.[id];
+    if (!node) return this.close();
+    this._nodeId = id;
+    let text = node.text, options = [...(node.options ?? [])];
+    if (nodeHook) {
+      const out = nodeHook(this.npc, id, { text, options }, this.game);
+      if (out) { text = out.text ?? text; options = out.options ?? options; }
+    }
+    this._renderCustom(text, options.map((o) => ({ label: o.label, onPick: () => this._pickNode(o) })), node.bye ?? this.tree.bye);
+  }
+
+  _pickNode(opt) {
+    const ctx = {
+      npc: this.npc, game: this.game, dialogue: this,
+      goto: (nid) => this._renderNode(nid),
+      close: () => this.close(),
+      render: (line, options, byeLabel) => this._renderCustom(line, options, byeLabel),
+    };
+    if (optionHandler?.(opt, ctx)) return;
+    if (opt.next !== undefined) { if (opt.next === null) return this.close(); return this._renderNode(opt.next); }
+    this.close();
+  }
+
+  // an explicit line + option list (node mode and game-driven sub-screens like boast offers)
+  _renderCustom(line, options, byeLabel) {
+    const opts = this.el.opts;
+    this.el.name.textContent = this.npc?.name || 'Stranger';
+    this.el.say.textContent = line || '';
+    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; };
+      b.onclick = () => { this.game.audio?.play?.('ui'); fn(); };
+      opts.appendChild(b);
+      return b;
+    };
+    for (const o of options ?? []) {
+      k++;
+      const b = add(`${k}. ${o.label}`, () => o.onPick?.());
+      b.dataset.num = String(k);
+    }
+    const bye = add(byeLabel ?? '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'));
+  }
+
   // ── rendering ─────────────────────────────────────────────────────────────────────────────────
   _opts() { return [...this.el.opts.querySelectorAll('button')].filter((b) => !b.disabled); }
 

package/src/ui/intro.js

@@ -14,7 +14,7 @@ const FADE = 1300;   // ms crossfade between beats
 
 // The prologue. Each beat is one image + one line. Sets up the county, the crime, the lawless
 // vacuum, and drops the player in — straight into Deputy Toomey's first job.
-// The prologue script is GAME data: registerIntroBeats([{ img, line }, ...])
+// The prologue script is GAME data: registerIntroBeats([{ img, text }, ...])
 let BEATS = [];
 export function registerIntroBeats(beats) { BEATS = beats ?? []; }
 

package/src/ui/pauseMenu.js

@@ -7,6 +7,16 @@ import { getQualityName, setQualityName, PRESETS } from '../core/quality.js';
 import { renderHints, refreshHints, padMode } from './menuHints.js';
 import { showSaveLoad } from './saveLoadScreen.js';
 
+// PAUSE CONTENT is GAME data (setPauseContent in engineSetup):
+//   extraItems(game, {resume,close}) → [{label, action}] — game pages (CHARACTER/JOURNAL…)
+//     listed after RESUME; typically resume() then open the game's own screen
+//   settingsRows({game, slider, toggleRow}) → rows appended to the Settings panel
+//   onQualityChange(name, game) — live-apply hook (default: takes effect next load)
+//   saves — adapter replacing the game.missions default: { hasSave, list, saveSlots,
+//     loadSlots, moneyLabel, defaultTitle, onSave/onLoad/onDelete(slot, game) }
+let PAUSE = { saves: null, extraItems: null, settingsRows: null, onQualityChange: null };
+export function setPauseContent(c = {}) { PAUSE = { ...PAUSE, ...c }; }
+
 const GOLD = '#e8c87a';
 const TXT = '#ecdfc2';
 const MUT = '#b6a577';
@@ -66,9 +76,9 @@ export function showPauseMenu(game, opts = {}) {
     const wrap = rowWrap(); wrap.appendChild(rowLabel('Graphics'));
     const btns = el('div', 'display:flex;gap:8px;flex:1;'); const names = ['low', 'medium', 'high'];
     const paintQ = () => [...btns.children].forEach((b, i) => hl(b, getQualityName() === names[i]));
-    names.forEach((nm) => { const b = el('button', `flex:1;${BTN}text-align:center;`, PRESETS[nm].label); b.onclick = () => { setQualityName(nm); paintQ(); }; btns.appendChild(b); });
+    names.forEach((nm) => { const b = el('button', `flex:1;${BTN}text-align:center;`, PRESETS[nm].label); b.onclick = () => { setQualityName(nm); PAUSE.onQualityChange?.(nm, game); paintQ(); }; btns.appendChild(b); });
     paintQ(); wrap.appendChild(btns);
-    const step = (d) => { const i = clamp(names.indexOf(getQualityName()) + d, 0, 2); setQualityName(names[i]); paintQ(); };
+    const step = (d) => { const i = clamp(names.indexOf(getQualityName()) + d, 0, 2); setQualityName(names[i]); PAUSE.onQualityChange?.(names[i], game); paintQ(); };
     return { el: wrap, focus: () => (wrap.style.background = 'rgba(232,200,122,0.1)'), blur: () => (wrap.style.background = 'none'), left: () => step(-1), right: () => step(1) };
   };
   const slider = (label, get, set) => {
@@ -100,13 +110,14 @@ export function showPauseMenu(game, opts = {}) {
     const p = framedPanel(500); titleBar(p, 'SETTINGS');
     const rows = [
       gfxRow(),
-      slider('Music', () => +(localStorage.getItem('av_volMusic') ?? 0.55), (v) => game.music?.setMusicVolume?.(v)),
+      slider('Music', () => +(localStorage.getItem('av_volMusic') ?? 0.55), (v) => { try { localStorage.setItem('av_volMusic', v); } catch (e) {} game.music?.setMusicVolume?.(v); }),
       slider('Ambience', () => +(localStorage.getItem('av_volAmb') ?? 0.6), (v) => { try { localStorage.setItem('av_volAmb', v); } catch (e) {} game.ambience?.setVolume?.(v); }),
       slider('Effects', () => +(localStorage.getItem('av_volSfx') ?? 0.85), (v) => game.audio?.setSfxVolume?.(v)),
       slider('Look Speed', () => clamp((game.player.camSensitivity - 0.25) / 2.75, 0, 1), (v) => { game.player.camSensitivity = +(0.25 + v * 2.75).toFixed(2); try { localStorage.setItem('av_camSens', game.player.camSensitivity); } catch (e) {} }),
       toggleRow('Invert Y', () => !!game.player.invertY, (on) => { game.player.invertY = on; try { localStorage.setItem('av_invertY', on ? '1' : '0'); } catch (e) {} }),
       toggleRow('Fullscreen', () => !!document.fullscreenElement, (on) => { try { if (on && !document.fullscreenElement) document.documentElement.requestFullscreen?.(); else if (!on && document.fullscreenElement) document.exitFullscreen?.(); } catch (e) {} }),
     ];
+    rows.push(...(PAUSE.settingsRows?.({ game, slider, toggleRow }) ?? []));
     rows.forEach((r) => p.appendChild(r.el));
     p.appendChild(el('div', `font-size:12px;color:${MUT};opacity:0.7;margin-top:10px;text-align:center;`, 'Graphics takes full effect on the next load.'));
     const f = footer(p);
@@ -119,6 +130,14 @@ export function showPauseMenu(game, opts = {}) {
   // while it's up so the two don't both drive the pad.
   let sub = false;
   const doSave = () => {
+    if (PAUSE.saves) {
+      const S = PAUSE.saves;
+      sub = true;
+      showSaveLoad({ mode: 'save', slots: S.saveSlots, moneyLabel: S.moneyLabel, defaultTitle: S.defaultTitle,
+        list: S.list, onSave: (slot) => S.onSave?.(slot, game), onDelete: (slot) => S.onDelete?.(slot, game),
+        onClose: () => { sub = false; } });
+      return;
+    }
     if (!game.missions) { toast('Nothing to save yet.'); return; }
     sub = true;
     showSaveLoad({ mode: 'save', list: () => game.missions.listSaves(),
@@ -127,6 +146,15 @@ export function showPauseMenu(game, opts = {}) {
       onClose: () => { sub = false; } });
   };
   const doLoad = () => {
+    if (PAUSE.saves) {
+      const S = PAUSE.saves;
+      if (S.hasSave && !S.hasSave()) { toast('No saved game found.'); return; }
+      sub = true;
+      showSaveLoad({ mode: 'load', slots: S.loadSlots ?? S.saveSlots, moneyLabel: S.moneyLabel, defaultTitle: S.defaultTitle,
+        list: S.list, onLoad: (slot) => { sub = false; resume(); S.onLoad?.(slot, game); },
+        onDelete: (slot) => S.onDelete?.(slot, game), onClose: () => { sub = false; } });
+      return;
+    }
     if (!game.missions?.hasSave?.()) { toast('No saved game found.'); return; }
     sub = true;
     showSaveLoad({ mode: 'load', list: () => game.missions.listSaves(),
@@ -139,6 +167,7 @@ export function showPauseMenu(game, opts = {}) {
   titleBar(mainPanel, 'PAUSED');
   const items = [
     menuItem('RESUME', resume),
+    ...(PAUSE.extraItems?.(game, { resume, close }) ?? []).map((x) => menuItem(x.label, x.action)),
     menuItem('SAVE GAME', () => { doSave(); }),
     menuItem('LOAD GAME', () => { doLoad(); }),
     menuItem('SETTINGS', openSettings),

package/src/ui/saveLoadScreen.js

@@ -52,8 +52,8 @@ export function showSaveLoad(opts = {}) {
     const img = rec.thumb ? `<img src="${rec.thumb}" style="width:100%;height:100%;object-fit:cover">`
       : `<div style="flex:1;display:flex;align-items:center;justify-content:center;color:${MUT};font-size:12px;letter-spacing:3px">NO PREVIEW</div>`;
     detail.innerHTML = `<div style="flex:1;min-height:190px;background:linear-gradient(135deg,#1a130b,#0d0906);display:flex;overflow:hidden">${img}</div>`
-      + `<div style="padding:20px 24px"><div style="color:${GOLD};font-size:22px;letter-spacing:2px;font-weight:700">${rec.name || rec.title || 'Dustwater'}</div>`
-      + `<div style="color:${MUT};font-size:13px;margin-top:8px;line-height:1.9">${rec.auto ? 'Autosave · ' : ''}${fmtDate(rec.savedAt)}<br>Played ${fmtTime(rec.playtime)} &nbsp;·&nbsp; Purse $${rec.money ?? 0}${rec.objective ? '<br>' + rec.objective : ''}</div></div>`;
+      + `<div style="padding:20px 24px"><div style="color:${GOLD};font-size:22px;letter-spacing:2px;font-weight:700">${rec.name || rec.title || opts.defaultTitle || 'Saved game'}</div>`
+      + `<div style="color:${MUT};font-size:13px;margin-top:8px;line-height:1.9">${rec.auto ? 'Autosave · ' : ''}${fmtDate(rec.savedAt)}<br>Played ${fmtTime(rec.playtime)} &nbsp;·&nbsp; ${opts.moneyLabel ?? 'Purse $'}${rec.money ?? 0}${rec.objective ? '<br>' + rec.objective : ''}</div></div>`;
   };
 
   const rebuild = () => {
@@ -67,7 +67,7 @@ export function showSaveLoad(opts = {}) {
       const card = el('button', `display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:1px solid rgba(232,200,122,0.3);border-radius:6px;background:rgba(232,200,122,0.05);cursor:pointer;font-family:inherit;color:${TXT};transition:background .12s;`);
       const thumb = rec && rec.thumb ? `<img src="${rec.thumb}" style="width:74px;height:44px;object-fit:cover;border-radius:3px;flex:none">`
         : `<div style="width:74px;height:44px;border-radius:3px;background:rgba(232,200,122,0.08);flex:none"></div>`;
-      const title = rec ? (rec.name || rec.title || 'Dustwater') : (save ? 'New Save' : 'Empty');
+      const title = rec ? (rec.name || rec.title || opts.defaultTitle || 'Saved game') : (save ? 'New Save' : 'Empty');
       const subtitle = rec ? `${rec.auto ? 'AUTO' : 'SLOT ' + id} &nbsp;·&nbsp; ${fmtDate(rec.savedAt)}` : (save ? 'Empty slot' : '');
       card.innerHTML = `${thumb}<div style="min-width:0"><div style="font-size:15px;letter-spacing:1px;font-weight:700;color:${GOLD};white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${title}</div><div style="font-size:11px;color:${MUT};margin-top:3px">${subtitle}</div></div>`;
       const ctrl = {

package/src/ui/titleScreen.js

@@ -14,7 +14,20 @@ import { getQualityName, setQualityName, PRESETS } from '../core/quality.js';
 import { renderHints, refreshHints, padMode } from './menuHints.js';
 import { showSaveLoad } from './saveLoadScreen.js';
 
-const UI = '/assets/ui/menu';
+// TITLE CONTENT is GAME data — brand, credits, difficulty roster, and the save-browser
+// adapter all register here (setTitleContent in the game's engineSetup). The engine ships
+// neutral defaults; difficulties: null skips the picker (NEW resolves { choice:'new',
+// difficulty:null }); saves.list/remove adapt whatever save model the game uses.
+let TITLE = {
+  brand: 'SINDICATE', subtitle: '', version: '',
+  assetDir: '/assets/ui/menu', bg: 'title_bg.jpg', difficultyArtDir: '/assets/ui/difficulty',
+  credits: [],
+  difficulties: null,
+  newGameConfirm: 'Start a new game? Your autosave is replaced — your manual saves are kept.',
+  moneyLabel: undefined, slotIds: undefined,
+  saves: { list: () => [], remove: null },
+};
+export function setTitleContent(c = {}) { TITLE = { ...TITLE, ...c, saves: { ...TITLE.saves, ...(c.saves ?? {}) } }; }
 const GOLD = '#e8c87a';
 const TXT = '#ecdfc2';     // light body text on the dark panels
 const MUT = '#b6a577';     // muted labels / captions
@@ -38,16 +51,7 @@ function el(tag, css, text) {
 }
 
 function readSaves() {
-  const out = [];
-  try {
-    for (let i = 0; i < localStorage.length; i++) {
-      const k = localStorage.key(i);
-      if (!k || !k.startsWith('dustwater_save_')) continue;
-      const s = JSON.parse(localStorage.getItem(k));
-      if (s && s.active !== undefined) out.push({ key: k, id: k.slice('dustwater_save_'.length), ...s, slot: s.slot ?? k.slice('dustwater_save_'.length) });
-    }
-  } catch (e) { /* private mode / bad json */ }
-  return out.sort((a, b) => (b.savedAt ?? 0) - (a.savedAt ?? 0));
+  try { return TITLE.saves.list() ?? []; } catch (e) { return []; }
 }
 const fmtDate = (ts) => { try { return ts ? new Date(ts).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : '—'; } catch (e) { return '—'; } };
 
@@ -82,7 +86,7 @@ function framedPanel(w = 560) {
 // (framedPanel) are kept ONLY for the little confirms, which should be modal.
 function fullView(titleText) {
   const root = el('div', 'position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;background:#0a0705;');
-  root.appendChild(el('div', `position:absolute;inset:0;background:#000 url(${UI}/title_bg.jpg) center/cover;opacity:0.09;`));
+  root.appendChild(el('div', `position:absolute;inset:0;background:#000 url(${TITLE.assetDir}/${TITLE.bg}) center/cover;opacity:0.09;`));
   root.appendChild(el('div', 'position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,5,0.84),rgba(10,7,5,0.96));'));
   const head = el('div', 'position:relative;padding:46px 64px 18px;border-bottom:1px solid rgba(232,200,122,0.22);flex:none;');
   head.appendChild(el('div', `color:${GOLD};font-size:34px;letter-spacing:9px;font-weight:700;text-shadow:0 3px 12px rgba(0,0,0,0.7);`, titleText));
@@ -109,15 +113,15 @@ export function showTitleMenu(host, { music } = {}) {
     const top = el('div', 'text-align:center;margin-top:6vh;z-index:2;');
     top.appendChild(el('div',
       `color:${GOLD};font-size:min(9vw,88px);letter-spacing:min(2.2vw,18px);font-weight:700;line-height:1;`
-      + 'text-shadow:0 0 44px rgba(232,200,122,0.34),0 4px 14px rgba(0,0,0,0.95);', 'DUSTWATER'));
+      + 'text-shadow:0 0 44px rgba(232,200,122,0.34),0 4px 14px rgba(0,0,0,0.95);', TITLE.brand));
     top.appendChild(el('div',
       'color:#9a8558;font-style:italic;font-size:15px;letter-spacing:7px;margin-top:8px;'
-      + 'text-shadow:0 2px 6px rgba(0,0,0,0.9);', 'A WESTERN TALE'));
+      + 'text-shadow:0 2px 6px rgba(0,0,0,0.9);', TITLE.subtitle));
     root.appendChild(top);
 
     // ── letterboxed vista band (middle)
     const band = el('div',
-      `position:relative;width:100%;height:38vh;background:#000 url(${UI}/title_bg.jpg) center 44%/cover no-repeat;`);
+      `position:relative;width:100%;height:38vh;background:#000 url(${TITLE.assetDir}/${TITLE.bg}) center 44%/cover no-repeat;`);
     band.appendChild(el('div',
       'position:absolute;inset:0;background:linear-gradient(to bottom,#080604 0%,rgba(8,6,4,0) 24%,rgba(8,6,4,0) 72%,#080604 100%);'));
     root.appendChild(band);
@@ -223,15 +227,7 @@ export function showTitleMenu(host, { music } = {}) {
     const openCredits = () => {
       const view = fullView('CREDITS');
       const body = el('div', `flex:1;min-height:0;overflow:auto;max-width:640px;margin:0 auto;text-align:center;color:${TXT};line-height:1.8;font-size:16px;letter-spacing:1px;`);
-      body.innerHTML = [
-        ['DUSTWATER', 'A Western Tale'],
-        ['Design · Code · Direction', 'Nick Thompson'],
-        ['Built with', 'three.js · WebGPU'],
-        ['Characters & World', 'Synty Studios (POLYGON)'],
-        ['Music', 'Original score — the Dustwater cuts'],
-        ['Assistance', 'Claude Code'],
-        ['', 'Thanks for riding out.'],
-      ].map(([h, s]) => `<div style="margin:18px 0"><div style="color:${GOLD};font-size:12px;letter-spacing:3px;text-transform:uppercase;opacity:.9">${h}</div><div>${s}</div></div>`).join('');
+      body.innerHTML = TITLE.credits.map(([h, s]) => `<div style="margin:18px 0"><div style="color:${GOLD};font-size:12px;letter-spacing:3px;text-transform:uppercase;opacity:.9">${h}</div><div>${s}</div></div>`).join('');
       view.body.appendChild(body);
       renderHints(view.foot, [['scroll', 'Scroll'], ['back', 'Back']]);
       root.appendChild(view.root);
@@ -242,9 +238,10 @@ export function showTitleMenu(host, { music } = {}) {
       subOpen = true;   // hand input to the shared Save/Load screen while it's up
       showSaveLoad({
         mode: 'load',
+        slots: TITLE.slotIds, moneyLabel: TITLE.moneyLabel, defaultTitle: TITLE.brand,
         list: () => readSaves(),
         onLoad: (slot) => done({ choice: 'load', slot }),   // boot() applies it once the world builds
-        onDelete: (slot) => { try { localStorage.removeItem('dustwater_save_' + slot); } catch (e) {} },
+        onDelete: (slot) => { try { TITLE.saves.remove?.(slot); } catch (e) {} },
         onClose: () => { subOpen = false; },
       });
     };
@@ -264,16 +261,12 @@ export function showTitleMenu(host, { music } = {}) {
     const openDifficulty = () => {
       const view = fullView('SELECT DIFFICULTY');
       const row = el('div', 'flex:1;min-height:0;display:flex;gap:24px;justify-content:center;align-items:center;');
-      const DIFFS = [
-        { id: 'easy', name: 'GREENHORN', tag: 'EASY', desc: 'For the story and the scenery. Lead finds you slowly and lands soft.' },
-        { id: 'normal', name: 'GUNSLINGER', tag: 'NORMAL', desc: 'The county as it was meant to be rode — a fair fight, and a fatal one.' },
-        { id: 'hard', name: 'DEAD MAN WALKING', tag: 'HARD', desc: 'The desert wants you buried. Every round bites, and the law rides hard.' },
-      ];
+      const DIFFS = TITLE.difficulties;
       const openT = performance.now();   // settle window — the click that OPENED this must not fall through onto a card
       const items = DIFFS.map((d) => {
         const card = el('button', 'width:300px;max-width:30vw;height:392px;padding:24px 26px;border:1px solid rgba(232,200,122,0.32);border-radius:8px;'
           + 'background:rgba(232,200,122,0.05);cursor:pointer;font-family:inherit;color:' + TXT + ';display:flex;flex-direction:column;align-items:center;text-align:center;transition:background .12s,border-color .12s,transform .12s;');
-        card.innerHTML = `<img src="/assets/ui/difficulty/${d.id}.png" style="width:132px;height:132px;object-fit:contain;mix-blend-mode:screen;pointer-events:none" onerror="this.style.display='none'">`
+        card.innerHTML = `<img src="${TITLE.difficultyArtDir}/${d.id}.png" style="width:132px;height:132px;object-fit:contain;mix-blend-mode:screen;pointer-events:none" onerror="this.style.display='none'">`
           + `<div style="color:${MUT};font-size:12px;letter-spacing:4px;margin-top:6px">${d.tag}</div>`
           + `<div style="color:${GOLD};font-size:23px;letter-spacing:2px;font-weight:700;margin:12px 0 15px">${d.name}</div>`
           + `<div style="color:${TXT};opacity:0.85;font-size:15px;line-height:1.6;font-family:'Book Antiqua',Georgia,serif">${d.desc}</div>`;
@@ -290,7 +283,8 @@ export function showTitleMenu(host, { music } = {}) {
       pushScreen({ items, sel: 1, horizontal: true, foot: view.foot, onPop: () => view.root.remove() });
     };
 
-    const newGame = () => { readSaves().length ? confirm('NEW GAME', 'Start a new game? Your autosave is replaced — your manual saves are kept.', openDifficulty) : openDifficulty(); };
+    const startNew = () => (TITLE.difficulties ? openDifficulty() : done({ choice: 'new', difficulty: null }));
+    const newGame = () => { readSaves().length && TITLE.newGameConfirm ? confirm('NEW GAME', TITLE.newGameConfirm, startNew) : startNew(); };
 
     // ── the main menu: a HORIZONTAL row (RDR2-style). Continue/Load only when a save exists. ───────
     const hasSave = readSaves().length > 0;
@@ -299,11 +293,11 @@ export function showTitleMenu(host, { music } = {}) {
     mainItems.push(item('NEW GAME', newGame));
     if (hasSave) mainItems.push(item('LOAD', openLoad));
     mainItems.push(item('SETTINGS', openSettings));
-    mainItems.push(item('CREDITS', openCredits));
+    if (TITLE.credits.length) mainItems.push(item('CREDITS', openCredits));
     const rowEl = el('div', 'display:flex;gap:34px;justify-content:center;align-items:center;flex-wrap:wrap;');
     mainItems.forEach((it) => rowEl.appendChild(it.el));
     col.appendChild(rowEl);
-    col.appendChild(el('div', 'color:#6a5a3a;font-size:11px;letter-spacing:3px;margin-top:22px;', 'v0.1'));
+    if (TITLE.version) col.appendChild(el('div', 'color:#6a5a3a;font-size:11px;letter-spacing:3px;margin-top:22px;', TITLE.version));
     pushScreen({ items: mainItems, sel: 0, horizontal: true });
 
     // ── input: pad + keyboard over the whole stack ────────────────────────────────────────────────

package/src/ui/weaponWheel.js

@@ -0,0 +1,138 @@
+// WEAPON WHEEL — the GTA-style radial select ring, as an engine UI component.
+// Hold the bound key/button → the ring fades in (optionally slowing the world),
+// point with the mouse or the right stick → release to commit the highlighted slot.
+//
+//   const wheel = new WeaponWheel({
+//     engine,                                   // for the optional slow-mo contributor
+//     items: () => game.player.wheelItems(),    // [{ id, label, icon?, disabled? }] — icon
+//                                               //   is an <img> URL or inline SVG/emoji text
+//     onSelect: (id) => game.player.equip(id),
+//     holdKey: 'Tab',                           // Input key code that holds the wheel open
+//     slowMo: 0.25,                             // world timeScale while open (1 = off)
+//     theme: { ring: 'rgba(20,20,32,0.85)', hi: '#e8c66a', text: '#f5ead0' },
+//   });
+//   // once per frame, AFTER input.pollGamepad, BEFORE the game reads the hold key:
+//   wheel.update(input, dt);
+//
+// The wheel consumes its key while open (input.consume) so releasing never leaks the
+// key into gameplay — the same edge discipline as the engine's panel nav. Right-stick
+// pointing uses input.stickLook, so the pad needs no extra bindings.
+import { tune } from '../core/tune.js';
+
+export class WeaponWheel {
+  constructor({ engine = null, items, onSelect, onTap = null, holdKey = 'Tab', holdDelay = 0.18, slowMo = 1, theme = {} } = {}) {
+    this.engine = engine;
+    this.itemsFn = items;
+    this.onSelect = onSelect;
+    this.onTap = onTap;            // released under holdDelay — the game's quick-switch
+    this.holdKey = holdKey;
+    this.holdDelay = holdDelay;    // TAP under this stays the game's (quick-switch); HOLD opens the wheel
+    this._heldT = 0;
+    this.slowMo = slowMo;
+    this.theme = { ring: 'rgba(18,18,30,0.86)', hi: '#e8c66a', text: '#f5ead0', dim: '#8d8875', ...theme };
+    this.open = false;
+    this._sel = -1;
+    this._items = [];
+    this._el = null;
+    // slow-mo joins the engine's timeScale chain like hit-stop does — composed, not imposed
+    if (engine && slowMo < 1) engine.addTimeScale(() => (this.open ? this.slowMo : 1));
+    // live-tunable in the dev GUI (/__sindicate/)
+    tune.group('weaponWheel', {
+      slowMo: { value: this.slowMo, min: 0.05, max: 1, step: 0.05 },
+      holdDelay: { value: this.holdDelay, min: 0, max: 0.6, step: 0.02 },
+    }, { onChange: (k, v) => { this[k] = v; } });
+  }
+
+  _build() {
+    const el = this._el = document.createElement('div');
+    el.style.cssText = 'position:fixed;inset:0;display:none;place-items:center;z-index:900;pointer-events:none;';
+    const ring = this._ring = document.createElement('div');
+    ring.style.cssText = 'position:relative;width:340px;height:340px;';
+    el.appendChild(ring);
+    document.body.appendChild(el);
+  }
+
+  _layout() {
+    const items = this._items;
+    this._ring.innerHTML = '';
+    const R = 128, n = Math.max(1, items.length);
+    const t = this.theme;
+    items.forEach((it, i) => {
+      const a = (i / n) * Math.PI * 2 - Math.PI / 2;    // slot 0 at the top, clockwise
+      const x = 170 + Math.cos(a) * R, y = 170 + Math.sin(a) * R;
+      const d = document.createElement('div');
+      const hi = i === this._sel && !it.disabled;
+      d.style.cssText = `position:absolute;left:${x}px;top:${y}px;transform:translate(-50%,-50%) scale(${hi ? 1.18 : 1});`
+        + `width:84px;height:84px;border-radius:50%;display:grid;place-items:center;text-align:center;`
+        + `background:${t.ring};border:2px solid ${hi ? t.hi : 'rgba(255,255,255,0.14)'};`
+        + `box-shadow:${hi ? `0 0 18px ${t.hi}55` : '0 2px 10px rgba(0,0,0,0.45)'};`
+        + `transition:transform 80ms,border-color 80ms;opacity:${it.disabled ? 0.35 : 1};`;
+      const icon = document.createElement('div');
+      if (it.icon && /^(\/|https?:|data:)/.test(it.icon)) {
+        icon.innerHTML = `<img src="${it.icon}" style="width:44px;height:44px;object-fit:contain" alt="">`;
+      } else icon.textContent = it.icon ?? '•';
+      icon.style.cssText = 'font-size:30px;line-height:1;';
+      const lab = document.createElement('div');
+      lab.textContent = it.label ?? it.id;
+      lab.style.cssText = `font:600 10px/1.1 sans-serif;letter-spacing:0.06em;text-transform:uppercase;`
+        + `color:${hi ? t.text : t.dim};margin-top:3px;max-width:76px;`;
+      d.append(icon, lab);
+      this._ring.appendChild(d);
+    });
+    // centre label = current highlight
+    const c = document.createElement('div');
+    const sel = items[this._sel];
+    c.textContent = sel && !sel.disabled ? (sel.label ?? sel.id) : '';
+    c.style.cssText = `position:absolute;left:170px;top:170px;transform:translate(-50%,-50%);`
+      + `font:700 15px/1 sans-serif;letter-spacing:0.08em;color:${t.text};text-transform:uppercase;`
+      + `text-shadow:0 2px 8px rgba(0,0,0,0.8);`;
+    this._ring.appendChild(c);
+  }
+
+  // Angle → slot. Mouse: vector from screen centre. Pad: the right stick directly.
+  _pick(input) {
+    let vx = 0, vy = 0;
+    const sl = input.stickLook;
+    if (Math.hypot(sl.x, sl.y) > 0.35) { vx = sl.x; vy = sl.y; }
+    else {
+      vx = input.mouse.x - window.innerWidth / 2;
+      vy = input.mouse.y - window.innerHeight / 2;
+    }
+    if (Math.hypot(vx, vy) < 24) return this._sel;   // dead centre: keep the last highlight
+    const n = Math.max(1, this._items.length);
+    const a = Math.atan2(vy, vx) + Math.PI / 2;      // slot 0 at the top
+    let idx = Math.round((a / (Math.PI * 2)) * n) % n;
+    if (idx < 0) idx += n;
+    return idx;
+  }
+
+  update(input, dt = 0.016) {
+    const held = input.down(this.holdKey);
+    if (held) {
+      input.consume(this.holdKey);   // the wheel owns this key entirely (press edge included)
+      this._heldT += dt;
+      if (!this.open && this._heldT >= this.holdDelay) {
+        this._items = (this.itemsFn?.() ?? []).slice();
+        if (!this._items.length) return;
+        this.open = true;
+        if (!this._el) this._build();
+        this._sel = Math.max(0, this._items.findIndex((i) => i.current));
+        this._el.style.display = 'grid';
+        this._layout();
+      } else if (this.open) {
+        const pick = this._pick(input);
+        if (pick !== this._sel) { this._sel = pick; this._layout(); }
+      }
+    } else {
+      if (this.open) {
+        this.open = false;
+        this._el.style.display = 'none';
+        const it = this._items[this._sel];
+        if (it && !it.disabled) this.onSelect?.(it.id);
+      } else if (this._heldT > 0) {
+        this.onTap?.();              // a TAP: quick-switch, exactly the old key behaviour
+      }
+      this._heldT = 0;
+    }
+  }
+}