sindicate 0.4.0 → 0.5.0

package/src/systems/loot.js

@@ -0,0 +1,303 @@
+// MONEY + LOOT. A man who falls spills his purse where he fell; the player walks over it and
+// it's his. That's the whole loop — no inventory screen, no loot table UI, no "press E to open".
+//
+// Three decisions worth writing down:
+//
+//  1. WALK-OVER, NOT PROMPT. E is already contested (mount / dismount / doors / the finisher
+//     outranks all of them — main.js:642-669), and a purse you have to stop and interact with
+//     turns a gunfight into paperwork. Walk within 1.2m and it's yours, with a short magnet
+//     so you never have to hunt for the exact pixel.
+//
+//  2. THE PURSES ARE POOLED. PERF LAW is about SKINNED meshes — a sack is a static prop and
+//     shatter.js adds and removes those freely — but a drop happens at the worst possible
+//     moment (mid-firefight, four men down at once), and instantiate() on the hot path is an
+//     await plus a clone plus a first-sight pipeline/texture upload. So the whole pool is
+//     built ON THE LOADING SCREEN, added to the scene once, and "dropping" is making a
+//     resident sack visible — the same trick the coach uses for its fares.
+//
+//  3. THE HUD LIVES HERE. ui.js owns the hearts, the clock and the ammo pips; the money
+//     counter is one <div> that only this file ever writes, so it ships with the system it
+//     belongs to instead of adding a limb to UI. It is styled off the clock's hex plate so it
+//     reads as part of the same HUD, it is parented to #hud (so it hides when the HUD hides),
+//     and — house law — every DOM write is behind a change check.
+import * as THREE from 'three/webgpu';
+import { instantiate } from '../core/assets.js';
+// purse bands, drop tables and the goods catalogue are GAME data:
+//   setLootContent({ purseFor, purseKind, dropItemsFor, items })
+let LC = { purseFor: () => 0, purseKind: () => 'default', dropItemsFor: () => null, items: {} };
+export function setLootContent(c) { LC = { ...LC, ...c }; }
+
+const ATLAS = '/assets/textures/atlas_western.png';
+// Four sack shapes so a wiped stagecoach doesn't leave four identical props in the dust.
+const SACKS = ['SM_Prop_Sack_01', 'SM_Prop_Sack_02', 'SM_Prop_Sack_03', 'SM_Prop_Sack_04'];
+
+const START_MONEY = 5;   // the player rides in with a few dollars — enough to feel like money exists
+const POOL = 16;         // 16 purses on the ground at once; a full coach (6) plus a street brawl
+const PURSE_H = 0.30;    // metres tall. The pack's sacks are grain-sized; a purse is a hand's-worth,
+                         // and normalising by measured bbox means the FBX/GLB-twin scale can't bite us.
+const PICKUP_R = 1.2;    // walk-over radius (2D — you can grab a purse from the boardwalk above it)
+const MAGNET_R = 2.6;    // beyond pickup, the purse slides to you. Hunting for the exact pixel is not fun.
+const MAGNET_V = 3.4;    // m/s it slides
+const LIFE = 120;        // seconds before it's gone. Otherwise the desert silts up with sacks.
+const FADE = 3;          // last seconds shrink away, so the vanish doesn't look like a bug
+const MERGE_R = 0.7;     // a second body falling on the same spot tops up the purse already there,
+                         // instead of burning a pool slot and stacking two sacks in each other
+const BOB_H = 0.06;
+const SPIN = 1.1;        // rad/s — slow enough to read as loot, not as a pickup from another genre
+
+export class Loot {
+  constructor(game) {
+    this.game = game;
+    this.money = START_MONEY;
+    this.purses = [];        // the pool — every entry resident and scene-attached for life
+    this._live = 0;          // how many are out (cheap early-out in update)
+    this._t = 0;
+    this._bump = false;      // set on a gain, consumed by the HUD next frame
+    this._shown = -1;        // last value written to the DOM (change-gate)
+    this._buildHUD();
+    // Kicked off in the constructor, awaited by boot: `await this.loot.ready`. A drop before
+    // the sacks exist is survivable (the money is simply awarded on the spot) but it should
+    // never happen — the pool is up before the loading screen comes down.
+    this.ready = this._buildPool().catch((e) => { console.warn('[loot] purse pool failed to build', e); });
+  }
+
+  // ── MONEY ────────────────────────────────────────────────────────────────────────────────
+
+  add(n) {
+    n = Math.round(n);
+    if (!n) return this.money;
+    this.money = Math.max(0, this.money + n);
+    if (n > 0) { this._bump = true; this.game.audio?.play('coin'); }   // synth.js has a 'coin' case
+    return this.money;
+  }
+
+  // For the shops/bribes that don't exist yet. Returns false and takes nothing if he's short.
+  spend(n) {
+    n = Math.round(n);
+    if (n > this.money) return false;
+    this.money -= n;
+    this._shown = -1;   // a spend must repaint even though _bump stays false
+    return true;
+  }
+
+  // What a given man is carrying — see data/purse.js. `id` is an npc def id, an ENEMY_TYPES
+  // key, or a coach seat role ('driver' / 'mate' / 'fare'); unknown ids get the default band.
+  amountFor(id, mult = 1) { return LC.purseFor(id, mult); }
+
+  // The convenience the other systems actually want: "this one just died, spill him".
+  // dropFor('driver', rider.position) — one call, no purse arithmetic at the call site.
+  // ...and now his THINGS as well as his cash: dropItemsFor rolls data/drops.js by the same id, so
+  // every caller that already spilled a purse (combat.js, npc.js) starts dropping items for free.
+  dropFor(id, position, mult = 1) { return this.drop(position, LC.purseFor(id, mult), LC.dropItemsFor(id)); }
+
+  // ── THE PURSE ON THE GROUND ──────────────────────────────────────────────────────────────
+
+  // `position` is at the FEET (the codebase's entity convention) — the corpse's own y, NOT
+  // groundAt(), because a man shot on the saloon boardwalk must not drop his purse through
+  // the deck and into the dirt below it.
+  drop(position, amount = LC.purseFor('default'), items = null) {
+    amount = Math.max(1, Math.round(amount));
+    // top up a purse already lying here rather than stacking sacks (a coach crew dies in a heap)
+    for (const p of this.purses) {
+      if (p.t < 0) continue;
+      const dx = p.root.position.x - position.x, dz = p.root.position.z - position.z;
+      if (dx * dx + dz * dz < MERGE_R * MERGE_R && Math.abs(p.baseY - position.y) < 1.2) {
+        p.amount += amount;
+        p.items = mergeItems(p.items, items);   // ...and its THINGS too, or a top-up silently loses them
+        p.t = 0;                     // and its clock restarts — the pile is fresh again
+        return p;
+      }
+    }
+    const p = this._take();
+    if (!p) { this.add(amount); this._giveItems(items); return null; }   // pool not built yet: pay him rather than lose it
+    p.amount = amount;
+    p.items = items;
+    p.t = 0;
+    p.phase = Math.random() * 6.28;
+    p.baseY = position.y + 0.02;
+    // scatter a little so two drops a metre apart still read as two purses
+    p.root.position.set(position.x + (Math.random() - 0.5) * 0.3, p.baseY, position.z + (Math.random() - 0.5) * 0.3);
+    p.root.rotation.y = Math.random() * 6.28;
+    p.root.scale.setScalar(1);
+    p.root.visible = true;
+    this._live++;
+    return p;
+  }
+
+  update(dt) {
+    if (!this._live) { this._syncHUD(); return; }
+    dt = Math.min(dt, 0.05);
+    this._t += dt;
+    const player = this.game.player;
+    const alive = player?.alive !== false;
+    for (const p of this.purses) {
+      if (p.t < 0) continue;
+      p.t += dt;
+      // expire — shrink out over the last few seconds so it doesn't just blink off
+      if (p.t > LIFE) { this._park(p); continue; }
+      const left = LIFE - p.t;
+      if (left < FADE) p.root.scale.setScalar(left / FADE);
+      p.root.rotation.y += SPIN * dt;
+      p.root.position.y = p.baseY + 0.14 + Math.sin(this._t * 2.4 + p.phase) * BOB_H;
+      if (!alive) continue;
+      const px = player.position.x, pz = player.position.z;
+      const dx = px - p.root.position.x, dz = pz - p.root.position.z;
+      const d2 = dx * dx + dz * dz;
+      if (d2 > MAGNET_R * MAGNET_R) continue;
+      if (d2 > PICKUP_R * PICKUP_R) {
+        const d = Math.sqrt(d2) || 1;
+        p.root.position.x += (dx / d) * MAGNET_V * dt;
+        p.root.position.z += (dz / d) * MAGNET_V * dt;
+        continue;
+      }
+      // TAKEN. The float reads like a damage number because that's the beat it lands on —
+      // showDamage() takes any {position} and any string (combat.js passes 'HEADSHOT').
+      this.add(p.amount);
+      this.game.ui?.showDamage({ position: p.root.position }, `$${p.amount}`);
+      this._giveItems(p.items);   // BEFORE _park clears the slot — the money floats, the things get a toast
+      this._park(p);
+    }
+    this._syncHUD();
+  }
+
+  // ── internals ────────────────────────────────────────────────────────────────────────────
+
+  _take() {
+    let oldest = null;
+    for (const p of this.purses) {
+      if (p.t < 0) return p;
+      if (!oldest || p.t > oldest.t) oldest = p;
+    }
+    // Pool exhausted (16 uncollected purses lying about). Recycle the OLDEST — the one he's
+    // had the longest to pick up and didn't. Its cash is forfeit; that's the price of greed.
+    if (oldest) this._live--;
+    return oldest;
+  }
+
+  _park(p) {
+    p.t = -1;
+    p.items = null;                 // a recycled slot must never carry the last body's things
+    p.root.visible = false;
+    this._live = Math.max(0, this._live - 1);
+  }
+
+  // Merge a dropped body's THINGS into the satchel and name them in a toast. Cash floats its own
+  // number (showDamage) the frame it lands; the items get a line so the standout — a watch, a bar —
+  // reads. Guarded on the satchel: a drop before the UI is up simply awards nothing (never in play).
+  _giveItems(items) {
+    if (!items?.length) return;
+    const sat = this.game.ui?.satchel;
+    if (!sat) return;
+    const names = [];
+    for (const it of items) {
+      const got = sat.add(it.id, it.n);
+      if (got > 0) { const nm = LC.items[it.id]?.name ?? it.id; names.push(got > 1 ? `${got}× ${nm}` : nm); }
+    }
+    if (names.length) this.game.ui?.toast?.(`Picked up ${names.join(', ')}`);
+  }
+
+  async _buildPool() {
+    const box = new THREE.Box3();
+    for (let i = 0; i < POOL; i++) {
+      const mesh = await instantiate(`/assets/western/${SACKS[i % SACKS.length]}.fbx`, { texture: ATLAS });
+      // Normalise off the MEASURED height, not a magic scalar: instantiate() hands back a
+      // cm-authored FBX at 0.01 or its metre-scale GLB twin at 1:1 (assets.js decides), and a
+      // hardcoded scale would silently be 100× wrong the day the twin manifest changes.
+      box.setFromObject(mesh);
+      const h = Math.max(1e-3, box.max.y - box.min.y);
+      const s = PURSE_H / h;
+      mesh.scale.multiplyScalar(s);
+      mesh.position.y = -box.min.y * s;   // base sits on the group origin, so bobbing is about the ground
+      const root = new THREE.Group();
+      root.name = 'purse';
+      root.add(mesh);
+      root.visible = false;
+      this.game.scene.add(root);          // added ONCE, here, on the loading screen. Never during play.
+      this.purses.push({ root, amount: 0, t: -1, baseY: 0, phase: 0, items: null });
+    }
+  }
+
+  // ── HUD: "$123", top-right under the clock ───────────────────────────────────────────────
+
+  _buildHUD() {
+    const css = document.createElement('style');
+    // Lifted straight off #clock (ui.js) — same hex plate, same parchment gold, same drop
+    // shadow — so the counter looks like it was always there. Font comes from #hud.
+    css.textContent = `
+      #money { position:absolute; top:74px; right:24px; height:30px; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 20px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
+      #money .mhex { position:absolute; inset:0; z-index:0;
+        background:linear-gradient(180deg,rgba(96,68,34,0.82),rgba(42,28,12,0.86));
+        -webkit-mask:url(/assets/ui/fw/SPR_HUD_FantasyWarrior_Mask_Hexagon_01.png) center/100% 100% no-repeat;
+        mask:url(/assets/ui/fw/SPR_HUD_FantasyWarrior_Mask_Hexagon_01.png) center/100% 100% no-repeat; }
+      #money .mcoin { position:relative; z-index:1; width:15px; height:15px; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
+      #money .mtxt { position:relative; z-index:1; color:#f0e2c0; font-size:14px; font-weight:600; letter-spacing:1px; text-shadow:0 1px 3px #000; white-space:nowrap; transform-origin:center; }
+      #money .mtxt.bump { animation: moneybump 0.4s ease-out; }
+      @keyframes moneybump { 0% { transform:scale(1.4); color:#fff4c8; } 100% { transform:scale(1); color:#f0e2c0; } }
+    `;
+    document.head.appendChild(css);
+    this._el = null;   // #hud may not exist yet (construction order) — _syncHUD adopts it late
+  }
+
+  _syncHUD() {
+    if (!this._el) {
+      const hud = document.getElementById('hud');
+      if (!hud) return;   // UI not built — try again next frame, cost is one getElementById
+      const div = document.createElement('div');
+      div.id = 'money';
+      div.innerHTML = '<i class="mhex"></i><img class="mcoin" src="/assets/ui/fw/icons/ICON_FantasyWarrior_Inventory_Currency_01_Clean.png" alt=""><span class="mtxt"></span>';
+      hud.appendChild(div);
+      this._el = div.querySelector('.mtxt');
+    }
+    if (this.money === this._shown) return;   // called every frame — only touch the DOM on change
+    const gained = this.money > this._shown && this._bump;
+    this._shown = this.money;
+    this._el.textContent = `$${this.money}`;
+    this._bump = false;
+    if (gained) {
+      // restart the animation: drop the class, force a reflow, put it back
+      this._el.classList.remove('bump');
+      void this._el.offsetWidth;
+      this._el.classList.add('bump');
+    }
+  }
+}
+
+// Fold one drop's item list into another's (a purse top-up on the same spot), summing stacks of the
+// same id. Either side may be null; the result is null only when both are empty.
+function mergeItems(a, b) {
+  if (!a?.length) return b?.length ? b.slice() : null;
+  if (!b?.length) return a.slice();
+  const out = a.map((it) => ({ ...it }));
+  for (const it of b) {
+    const hit = out.find((o) => o.id === it.id);
+    if (hit) hit.n += it.n; else out.push({ ...it });
+  }
+  return out;
+}
+
+// Re-exported so a caller that already has `game.loot` doesn't need a second import to ask
+// "what kind of purse is this man carrying".
+export const purseFor = (...a) => LC.purseFor(...a);
+export const purseKind = (...a) => LC.purseKind(...a);
+
+// ─────────────────────────────────────────────────────────────────────────────────────────
+// WIRING — what main.js must do (this file touches nothing else).
+//
+//  1. import, with the other game systems near the top:
+//         import { Loot } from './game/loot.js';
+//
+//  2. construct in boot(), right after `this.deadEye = new DeadEye(this);` (main.js:209) —
+//     after audio/ui because it drives both — and await the purse pool BEFORE the loading
+//     screen comes down (the sacks are static props, but they are built once, not per drop):
+//         this.loot = new Loot(this);
+//         await this.loot.ready;     // the purse pool: 16 sacks, built on the loading screen
+//
+//  3. tick it inside the `if (!paused)` block, next to vfx/shatter (main.js:617-620), so it
+//     freezes with the pause menu:
+//         this.loot.update(dt);
+//
+//  4. no other hooks. Whoever kills a man calls it:
+//         game.loot.dropFor('driver', rider.position)   // rolls the band from data/purse.js
+//         game.loot.drop(pos, 12)                       // or an explicit sum
+//     and the pickup, the HUD and the coin sound take care of themselves.
+// ─────────────────────────────────────────────────────────────────────────────────────────