diff --git a/C-progress.md b/C-progress.md index e1c77b8..5f90047 100644 --- a/C-progress.md +++ b/C-progress.md @@ -19,7 +19,16 @@ Round-5 §Lane C task 1 (the v1.1 gate). Lane E's re-exports mapped + validated - Report + decision detail: [LANE_C_GLB_VALIDATION.md](docs/LANES/LANE_C_GLB_VALIDATION.md); F note in [LANE_C_NOTES.md](docs/LANES/LANE_C_NOTES.md). **→ F: C1 committed, v1.1 can be tagged.** -Still in flight this round: C2 `?dig=1` crate-riffle (v2, behind flag), C3 record re-measure (after E's bake). +**C2 — `?dig=1` crate-riffle (v2, behind flag).** Ported 90sDJsim `dig.js` → `web/js/interiors/dig.js`: +walk to a record bin, press **E**, riffle its sleeves (scroll/drag), click the front to pull, **BUY IT** +(STUBBED — toast + remove; getCash constant; real economy is round 6+). Riffle items are seeded per bin +via the `stockAdapter(shop,'sleeve')` seam (procedural fallback now — parody 90s-AU sleeves). Own scene + +camera, procedural fwip/thunk audio, **leak-free** (per-open resources freed on close → dig soak 20× +`leakGeo 0 / leakTex 0`). Flag-off (`?dig=0`) is **byte-identical** — `buildInterior` is untouched; the dig +is wired only in the test page (F owns the shell seam — hook documented in LANE_C_NOTES §"input/mode hook"). +Shot: [dig_riffle_r5.jpg](docs/shots/laneC/dig_riffle_r5.jpg). + +Still in flight: C3 record re-measure — blocked on Lane E's hero-prop bake landing (don't wait, per §Lane C). --- diff --git a/docs/shots/laneC/dig_riffle_r5.jpg b/docs/shots/laneC/dig_riffle_r5.jpg new file mode 100644 index 0000000..38a7cb4 Binary files /dev/null and b/docs/shots/laneC/dig_riffle_r5.jpg differ diff --git a/web/interior_test.html b/web/interior_test.html index 27db6d3..8d37813 100644 --- a/web/interior_test.html +++ b/web/interior_test.html @@ -70,6 +70,7 @@ import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import { buildInterior, SHOP_TYPES, ARCHETYPE_KEYS } from './js/interiors/interiors.js'; +import { createDig, binSeed } from './js/interiors/dig.js'; // ── renderer / scene / camera ────────────────────────────────────────────── const app = document.getElementById('app'); @@ -98,7 +99,7 @@ for (const t of SHOP_TYPES) { const o = document.createElement('option'); o.valu archSel.appendChild(new Option('auto', 'auto')); for (const a of ARCHETYPE_KEYS) archSel.appendChild(new Option(a, a)); -let current = null; // the live interior +let current = null, curSeed = 0; // the live interior + the seed it was built from (dig per-bin seeding) let gridHelper = null, pathHelper = null; let wire = false, showGrid = false, showPath = false, useGLB = false; let glbManifest = null; // Lane E manifest → GLB props load via the live depot: path (all 22 GLBs published). @@ -111,9 +112,11 @@ function parseLot(v) { } function rebuild() { + if (dig && dig.active) dig.close(); if (current) current.dispose(); clearDebug(); const seed = parseInt($('seed').value, 10) >>> 0; + curSeed = seed; const type = typeSel.value; const arch = archSel.value === 'auto' ? undefined : archSel.value; const lot = parseLot($('lot').value); @@ -291,17 +294,55 @@ async function soak(N = 50) { } $('soakBtn').onclick = () => soak(50); +// ── dig (?dig=1) — walk to a record bin, press E to riffle its sleeves (v2, flag-gated) ── +const DIG_ON = new URLSearchParams(location.search).has('dig'); +let dig = null; +const _digRay = new THREE.Raycaster(); +function binUnderAim() { + if (!current) return null; + const bins = []; current.group.traverse(o => { if (o.userData && o.userData.kind === 'bin') bins.push(o); }); + if (!bins.length) return null; + _digRay.setFromCamera({ x: 0, y: 0 }, camera); + const hit = _digRay.intersectObjects(bins, true)[0]; + if (hit && hit.distance < 3.2) { let o = hit.object; while (o && !(o.userData && o.userData.kind === 'bin')) o = o.parent; return o; } + let best = null, bd = 2.4; const cp = camera.position, p = new THREE.Vector3(); + for (const b of bins) { b.getWorldPosition(p); const d = p.distanceTo(cp); if (d < bd) { bd = d; best = b; } } + return best; +} +function openDigOn(bin) { + if (!dig) dig = createDig(THREE, renderer); + if (controls.isLocked) controls.unlock(); + const p = new THREE.Vector3(); bin.getWorldPosition(p); + const key = Math.round(p.x * 100) + '_' + Math.round(p.z * 100); // stable per-bin key (deterministic position) + dig.open({ seed: binSeed(curSeed, key), count: 16, shopName: current.recipe.label, + getCash: () => 50, onBuy: () => true, onClose: () => {} }); +} +if (DIG_ON) { + addEventListener('keydown', e => { if (e.code === 'KeyE' && current && (!dig || !dig.active)) { const b = binUnderAim(); if (b) openDigOn(b); } }); + document.getElementById('hint').innerHTML += ' · E riffle a record bin'; +} +// enter+leave a dig per record room, assert leak-free (round-5 acceptance) +async function digSoak(N = 15) { + if (!dig) dig = createDig(THREE, renderer); + dig.open({ seed: 1, count: 16 }); renderer.render(dig.scene, dig.camera); dig.close(); renderer.render(scene, camera); + const bG = renderer.info.memory.geometries, bT = renderer.info.memory.textures; + for (let i = 0; i < N; i++) { dig.open({ seed: (i * 7919 + 1) >>> 0, count: 10 + (i % 9) }); renderer.render(dig.scene, dig.camera); dig.close(); } + renderer.render(scene, camera); + return { rooms: N, leakGeo: renderer.info.memory.geometries - bG, leakTex: renderer.info.memory.textures - bT }; +} + // ── loop ─────────────────────────────────────────────────────────────────────── let last = performance.now(); function frame() { const now = performance.now(), dt = Math.min(0.05, (now - last) / 1000); last = now; - move(dt); - renderer.render(scene, camera); + if (dig && dig.active) { dig.update(dt); renderer.render(dig.scene, dig.camera); } + else { move(dt); renderer.render(scene, camera); } requestAnimationFrame(frame); } // expose for headless verification (screenshot harness, workflow checks) -window.PROCITY_C = { buildInterior, THREE, SHOP_TYPES, ARCHETYPE_KEYS, soak, rebuild, get current() { return current; }, scene, camera, renderer }; +window.PROCITY_C = { buildInterior, THREE, SHOP_TYPES, ARCHETYPE_KEYS, soak, rebuild, get current() { return current; }, scene, camera, renderer, + DIG_ON, digSoak, openDigOn, binUnderAim, get dig() { return dig; } }; rebuild(); frame(); diff --git a/web/js/interiors/dig.js b/web/js/interiors/dig.js new file mode 100644 index 0000000..c3476a7 --- /dev/null +++ b/web/js/interiors/dig.js @@ -0,0 +1,311 @@ +// PROCITY Lane C — crate riffle, ported from 90sDJsim/web/world/dig.js (itself from thriftgod/RecordGod). +// v2 headline behind `?dig=1`: walk to a record bin → flip through its sleeves, pull one, "buy" it. +// +// Scope (round 5): the riffled items are the EXISTING procedural stock — a seeded sleeve list per bin +// (same seed ⇒ same order). Real records feed in later via `stockAdapter(shop, 'sleeve')` (round 6+, +// GODVERSE/mint). **Buy is STUBBED** (a toast + remove-from-bin; getCash returns a constant). +// +// Self-contained: own scene + camera, procedural fwip/thunk audio (no assets), and LEAK-FREE — every +// geometry/material/CanvasTexture minted here is tracked and freed on close()/dispose(). Nothing here +// runs unless the shell/test-page opens it, so `?dig=0` is byte-identical to v1. + +import { mulberry32, xmur3 } from '../core/prng.js'; + +const MAXFLIP = 1.95, BACK = -0.12; +const SLEEVE = [0.31, 0.31, 0.0060]; // w, h, thickness (packed a touch chunkier than vinyl) +// 90s-Australian crate genres → sleeve card colour. +const GENRE = [['ROCK', '#7a2a3a'], ['SOUL', '#b0894a'], ['JAZZ', '#2a4a6a'], ['DISCO', '#8a3a7a'], + ['COUNTRY', '#6a5a2a'], ['PUNK', '#3a3a3a'], ['REGGAE', '#2a6a4a'], ['POP', '#b05a8a']]; +const ARTISTS = ['THE VERANDAHS', 'DEZ & THE UTES', 'MERINO', 'HILLS HOIST', 'THE ESKIES', 'GOON BAG', + 'STOBIE POLES', 'THE FIBROS', 'WARATAH', 'THONGS', 'THE CLOTHESLINE', 'GALAH']; +const TITLES = ['Sunburnt', 'Back o’ Bourke', 'Servo at Midnight', 'Long Weekend', 'Tinny', + 'Southerly Buster', 'Milk Bar Dreams', 'Cane Toad Blues', 'Ute Muster', 'Arvo']; +const CONDS = ['VG+', 'VG', 'G+', 'NM', 'EX']; + +// Deterministic sleeve list for a bin — the "existing procedural stock" as riffle-able offers. +function proceduralSleeves(seed, n) { + const r = mulberry32(seed >>> 0); + const out = []; + for (let i = 0; i < n; i++) { + const g = GENRE[(r() * GENRE.length) | 0]; + out.push({ + i, kind: 'record', + a: ARTISTS[(r() * ARTISTS.length) | 0], + t: TITLES[(r() * TITLES.length) | 0], + y: 1971 + ((r() * 28) | 0), + s: g[0], color: g[1], + cond: CONDS[(r() * CONDS.length) | 0], + price: 2 + ((r() * 28) | 0), + rare: r() < 0.12, + }); + } + return out; +} + +export function createDig(THREE, renderer) { + // ── tracked resources (leak-free) ── + // Persistent (p*): the fixed set — floor, backdrop, shared sleeve geometry — freed only on dispose(). + // Per-open (o*): sleeve textures/materials + crate parts — freed on EVERY close() so repeated + // open/close (e.g. the soak entering a dig per interior) returns to baseline. + const pGeo = new Set(), pMat = new Set(), pTex = new Set(); + const oGeo = new Set(), oMat = new Set(), oTex = new Set(); + const trackGeo = g => (pGeo.add(g), g); + const trackMat = m => (pMat.add(m), m); + const trackTex = t => (pTex.add(t), t); + + const scene = new THREE.Scene(); + scene.background = new THREE.Color(0x14110c); + const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.01, 50); + camera.position.set(0, 0.5, 0.92); + camera.lookAt(0, 0.12, -0.2); + const onResize = () => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }; + addEventListener('resize', onResize); + + scene.add(new THREE.AmbientLight(0xfff4de, 0.55)); + const spot = new THREE.SpotLight(0xfff2e6, 26, 5, 0.7, 0.5, 1.2); + spot.position.set(0.4, 1.5, 0.9); spot.target.position.set(0, 0, -0.3); + scene.add(spot, spot.target); + const floor = new THREE.Mesh(trackGeo(new THREE.BoxGeometry(1.4, 0.02, 1.4)), + trackMat(new THREE.MeshStandardMaterial({ color: 0x2a2318, roughness: 0.9 }))); + floor.position.set(0.3, -0.011, -0.35); scene.add(floor); + // a warm gradient backdrop (canvas — no external art), so the sleeves stay the subject + const back = new THREE.Mesh(trackGeo(new THREE.PlaneGeometry(5.5, 3.1)), + trackMat(new THREE.MeshBasicMaterial({ map: backdropTex() }))); + back.position.set(0, 0.35, -2.8); scene.add(back); + function backdropTex() { + const cv = document.createElement('canvas'); cv.width = 64; cv.height = 48; + const x = cv.getContext('2d'); + const g = x.createLinearGradient(0, 0, 0, 48); + g.addColorStop(0, '#2a2016'); g.addColorStop(1, '#0e0b07'); + x.fillStyle = g; x.fillRect(0, 0, 64, 48); + const t = new THREE.CanvasTexture(cv); t.colorSpace = THREE.SRGBColorSpace; return trackTex(t); + } + + // ── sleeve art (cardboard card + genre + $ sticker) — matches the interior stock aesthetic ── + function sleeveTexture(o) { + const cv = document.createElement('canvas'); cv.width = cv.height = 256; + const c = cv.getContext('2d'); + c.fillStyle = o.color; c.fillRect(0, 0, 256, 256); + c.fillStyle = 'rgba(0,0,0,.22)'; c.fillRect(0, 0, 256, 12); c.fillRect(0, 244, 256, 12); + c.strokeStyle = 'rgba(255,255,255,.28)'; c.lineWidth = 3; c.strokeRect(14, 14, 228, 228); + c.fillStyle = 'rgba(255,255,255,.92)'; c.textAlign = 'center'; + c.font = '700 22px "Courier New",monospace'; c.fillText(o.a.slice(0, 18), 128, 80); + c.fillStyle = 'rgba(255,255,255,.75)'; c.font = '17px "Courier New",monospace'; + c.fillText('“' + o.t + '”', 128, 116); + c.fillStyle = 'rgba(0,0,0,.4)'; c.font = '14px "Courier New",monospace'; + c.fillText(`${o.y} · ${o.s} · ${o.cond}`, 128, 210); + c.beginPath(); c.arc(210, 48, 30, 0, 7); c.fillStyle = '#f4e11a'; c.fill(); // price sticker + c.fillStyle = '#c1121f'; c.font = '700 20px Arial'; c.fillText('$' + o.price, 210, 55); + if (o.rare) { c.fillStyle = '#ffd23d'; c.font = '20px monospace'; c.fillText('★', 34, 232); } + const t = new THREE.CanvasTexture(cv); t.colorSpace = THREE.SRGBColorSpace; t.anisotropy = 4; + oTex.add(t); return t; // per-open → freed on close() + } + + let recs = [], cursor = 0, vel = 0, active = false, pulled = null, lastFloor = -1; + let crate = null, offers = [], onCloseCb = null, onBuyCb = null, getCashCb = null; + // shared across opens (persistent): sleeves are all the same box; sides + crate timber never vary + const sleeveGeo = trackGeo(new THREE.BoxGeometry(SLEEVE[0], SLEEVE[1], SLEEVE[2])); + const sideMat = trackMat(new THREE.MeshStandardMaterial({ color: 0x8a8070, roughness: 0.85 })); + const crateWood = trackMat(new THREE.MeshStandardMaterial({ color: 0x8a6a45, roughness: 0.85 })); + + // ── DOM overlay (hint / cursor label / pull panel / walk-out) ── + const el = (tag, cls, txt) => { const e = document.createElement(tag); e.className = cls; if (txt) e.textContent = txt; return e; }; + const css = el('style'); css.textContent = ` + .pcdg-hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#d8d8e0;padding:6px 14px;font:13px "Courier New",monospace;pointer-events:none;display:none;z-index:60} + .pcdg-cur{position:fixed;left:50%;top:64px;transform:translateX(-50%);color:#ffd23d;font:700 15px "Courier New",monospace;text-shadow:0 1px 4px #000;pointer-events:none;text-align:center;max-width:80%;display:none;z-index:60} + .pcdg-panel{position:fixed;right:6%;top:50%;transform:translateY(-50%);width:250px;background:#0e0e16;border:1px solid #ffd23d;padding:16px;color:#d8d8e0;font:14px "Courier New",monospace;display:none;z-index:61} + .pcdg-panel h3{margin:.1em 0;color:#ffd23d;font-size:15px} + .pcdg-panel .meta{color:#8a8a9a;font-size:12px;margin:4px 0 8px} + .pcdg-panel .price{font-size:24px;color:#3dff8b} + .pcdg-panel button{margin-top:12px;width:100%;padding:9px;border:1px solid #666;background:#1d1d2b;color:#d8d8e0;font:inherit;cursor:pointer} + .pcdg-panel button:hover{border-color:#3dff8b;color:#3dff8b} + .pcdg-panel .x{position:absolute;top:6px;right:11px;cursor:pointer;color:#888} + .pcdg-out{position:fixed;left:16px;top:16px;background:#1d1d2b;border:1px solid #666;color:#d8d8e0;padding:8px 14px;font:13px "Courier New",monospace;cursor:pointer;display:none;z-index:60} + .pcdg-out:hover{border-color:#3dff8b;color:#3dff8b} + .pcdg-toast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:#0e0e16;border:1px solid #3dff8b;color:#3dff8b;padding:14px 22px;font:700 15px "Courier New",monospace;z-index:62;display:none}`; + document.head.appendChild(css); + const hint = el('div', 'pcdg-hint', 'scroll / drag to riffle · click the front sleeve to pull it · Esc / WALK OUT to leave'); + const curLbl = el('div', 'pcdg-cur'); + const panel = el('div', 'pcdg-panel'); + const outBtn = el('div', 'pcdg-out', '← WALK OUT'); + const toast = el('div', 'pcdg-toast'); + outBtn.onclick = () => close(); + document.body.append(hint, curLbl, panel, outBtn, toast); + + // ── procedural audio ── + let actx; + function blip(kind) { + try { + actx = actx || new (window.AudioContext || window.webkitAudioContext)(); + if (kind === 'fwip') { + const n = Math.floor(actx.sampleRate * 0.05), buf = actx.createBuffer(1, n, actx.sampleRate), d = buf.getChannelData(0); + for (let i = 0; i < n; i++) d[i] = (Math.sin(i * 0.7) * (1 - i / n)) * 0.6; // deterministic-ish fwip (no Math.random) + const s = actx.createBufferSource(); s.buffer = buf; + const f = actx.createBiquadFilter(); f.type = 'bandpass'; f.frequency.value = 2100; f.Q.value = 0.7; + const g = actx.createGain(); g.gain.value = 0.2; + s.connect(f); f.connect(g); g.connect(actx.destination); s.start(); + } else { + const o = actx.createOscillator(); o.type = 'sine'; o.frequency.value = 105; + const g = actx.createGain(); g.gain.setValueAtTime(0.0001, actx.currentTime); + g.gain.exponentialRampToValueAtTime(0.5, actx.currentTime + 0.005); + g.gain.exponentialRampToValueAtTime(0.0001, actx.currentTime + 0.28); + o.connect(g); g.connect(actx.destination); o.start(); o.stop(actx.currentTime + 0.3); + } + } catch (e) {} + } + + function buildCrate(depth) { + if (crate) { scene.remove(crate); crate = null; } + crate = new THREE.Group(); + const [w, h] = SLEEVE; + const W = w + 0.06, H = h * 0.72, D = depth + 0.10, th = 0.016; + const add = (bw, bh, bd, x, y, z) => { const g = new THREE.BoxGeometry(bw, bh, bd); oGeo.add(g); const m = new THREE.Mesh(g, crateWood); m.position.set(x, y, z); crate.add(m); }; + add(W, th, D, 0, -th / 2, -D / 2 + 0.05); + add(th, H, D, -W / 2, H / 2, -D / 2 + 0.05); add(th, H, D, W / 2, H / 2, -D / 2 + 0.05); + add(W, H, th, 0, H / 2, -D + 0.05); add(W, H * 0.55, th, 0, H * 0.275, 0.05); + scene.add(crate); + } + + function buildStack(list) { + recs.forEach(r => scene.remove(r.group)); recs = []; + const [w, h, th] = SLEEVE; + let z = -0.05; + list.forEach((o, i) => { + const grp = new THREE.Group(); grp.position.set(0, 0, z); + const face = new THREE.MeshStandardMaterial({ map: sleeveTexture(o), roughness: 0.75 }); oMat.add(face); + const mesh = new THREE.Mesh(sleeveGeo, [sideMat, sideMat, sideMat, sideMat, face, sideMat]); // shared sleeve geo + mesh.position.y = h / 2; + grp.add(mesh); grp.rotation.x = BACK; + grp.rotation.z = (((i * 2654435761) >>> 0) % 100 - 50) / 1800; // each sleeve leans its own way (seeded by index) + grp.position.x = (((i * 40503) >>> 0) % 100 - 50) / 12000; + scene.add(grp); + recs.push({ group: grp, offer: o, angle: BACK, homeZ: z }); + z -= th + 0.010; + }); + buildCrate(Math.max(0.2, -z)); + cursor = 0; vel = 0; lastFloor = -1; updateCur(); + } + + function updateCur() { + const r = recs[Math.round(cursor)]; + curLbl.textContent = r ? `${r.offer.a} — “${r.offer.t}”` : (recs.length ? '' : 'bin’s cleaned out'); + } + + function removeEntry(entry) { + const idx = recs.indexOf(entry); if (idx < 0) return; + scene.remove(entry.group); recs.splice(idx, 1); + let z = -0.05; + recs.forEach(x => { x.homeZ = z; x.group.position.z = z; z -= SLEEVE[2] + 0.010; }); + cursor = Math.min(cursor, Math.max(0, recs.length - 1)); + pulled = null; panel.style.display = 'none'; updateCur(); + } + + function showPanel(entry) { + const o = entry.offer; + const cash = getCashCb ? getCashCb() : 999; + panel.innerHTML = `