// Heist Crew 3D - a Pizza Ready!-style idle/management game, cozy cartoon heist theme. // MCPity Web Engine single-file game: Three.js isometric diorama + 2D overlay HUD, // portrait, touch-first, no assets. Presentation upgrade of the verified 2D build: // game logic (jobs/timers/economy/upgrades/offline/save) is byte-for-byte the same, // only the RENDER layer changed (WebGL room + crew + props + loot bags, raycast taps). import * as THREE from "three"; /* ---- Asset-swap seam (procedural <-> injected GLB) ----------------------- /play serves this game as a single self-contained file, so we can't import games/_shared/asset-provider. This inline shim reproduces its runtime behavior: it reads window.MCPityAssets ONLY when a native store wrapper has injected it (via installAssetPack, see games/heist-crew/store-boot.ts), else returns null so every hero factory takes its procedural branch. On /play there is no MCPityAssets, so getModel() resolves to null and NOTHING changes -- the diorama stays 100% procedural. */ interface InjectedAssetGlobal { has?(key: string): boolean; getModel?(key: string): Promise | THREE.Object3D | null; getTexture?(key: string): THREE.Texture | null; } const Assets = { getModel(key: string): Promise { try { const g = (globalThis as unknown as { MCPityAssets?: InjectedAssetGlobal }).MCPityAssets; if (g && typeof g.getModel === "function") return Promise.resolve(g.getModel(key)).then((m) => m ?? null); } catch (_e) { /* absent / broken global -> procedural */ } return Promise.resolve(null); }, getTexture(key: string): THREE.Texture | null { try { const g = (globalThis as unknown as { MCPityAssets?: InjectedAssetGlobal }).MCPityAssets; if (g && typeof g.getTexture === "function") return g.getTexture(key) ?? null; } catch (_e) { /* fall through to procedural */ } return null; }, }; // Hero asset caches. A store build injects window.MCPityAssets BEFORE the game // boots (see store-boot.ts); preloadAssets() then fills these once. On /play all // stay null and every hero (crew / loot bag / prop) renders procedurally. const crewTemplate: { current: THREE.Object3D | null } = { current: null }; const bagTemplate: { current: THREE.Object3D | null } = { current: null }; const propTemplate: { current: THREE.Object3D | null } = { current: null }; // Swap a freshly-built PROCEDURAL hero Group for a fitted clone of an injected // GLB template: scale the clone to the procedural group's height, align its base // + center it in X/Z to the procedural bounds, hide the procedural meshes (so the // caller's position/rotation/scale/visible writes still drive the outer Group), // then parent the clone. Returns the SAME Group so factories stay SYNC. Idempotent. function swapWithTemplate(procGroup: THREE.Group, template: THREE.Object3D): THREE.Group { if (procGroup.userData.assetSwapped) return procGroup; const box = new THREE.Box3().setFromObject(procGroup); const size = box.getSize(new THREE.Vector3()); const center = box.getCenter(new THREE.Vector3()); if (!(size.y > 1e-4)) return procGroup; // nothing to fit against const inst = template.clone(true); const ib = new THREE.Box3().setFromObject(inst); const isz = ib.getSize(new THREE.Vector3()); const s = isz.y > 1e-4 ? size.y / isz.y : 1; inst.scale.setScalar(s); const fb = new THREE.Box3().setFromObject(inst); const fc = fb.getCenter(new THREE.Vector3()); inst.position.x += center.x - fc.x; inst.position.z += center.z - fc.z; inst.position.y += box.min.y - fb.min.y; // align base to the procedural base inst.traverse((o) => { const m = o as THREE.Mesh; if (m.isMesh) m.castShadow = true; }); procGroup.traverse((o) => { const m = o as THREE.Mesh; if (m.isMesh) m.visible = false; }); procGroup.add(inst); procGroup.userData.assetSwapped = true; return procGroup; } // One-time boot preload. Fills the hero caches from an injected store pack; on // /play every getModel() is null so the caches stay empty (zero visual change). // Crew figures + props are built lazily (after boot) so they read the cache in // their factory; the loot bags are built once at init, so -- like a singleton -- // they are re-swapped here in place after the template loads. async function preloadAssets(): Promise { try { const [crew, bag, prop] = await Promise.all([ Assets.getModel("crew"), Assets.getModel("loot_bag"), Assets.getModel("prop"), ]); if (crew) crewTemplate.current = crew; if (prop) propTemplate.current = prop; if (bag) { bagTemplate.current = bag; for (const st of stations) for (const bm of st.bags) swapWithTemplate(bm, bag); } } catch (_e) { /* any failure -> everything stays procedural */ } } // ═══ CONFIG ═══ // Every tunable lives in this section (sim.mjs evals it verbatim - keep it pure // data, no DOM). cost = base * GROWTH^level for the repeatable tracks; // DRIVER_COSTS / FENCE_COSTS are fixed escalating progression gates. // Pacing (verified by the economy sim, see VERIFICATION.md): an upgrade lands // at least every 90s for the first 10 min of active play; the Jewelry Store // driver is bought ~3-6 min in; each tier is roughly x8-10 yield, x2-3 duration. const SAVE_KEY = "mcpity_heist_crew_save_v1"; const SAVE_VERSION = 1; const GROWTH = 1.15; // repeatable upgrade cost growth per level const TRAIN_FACTOR = 0.92; // Train Crew: -8% job duration per level (multiplicative) const TRAIN_FLOOR = 0.35; // duration floor: never below 35% of base const GEAR_BONUS = 0.25; // Better Gear: +25% payout per level const AUTO_DELAY = 2; // Fence grabs a bag this many seconds after it drops const OFFLINE_CAP_H = 4; // offline earnings capped at 4 hours const OFFLINE_RATE = 0.6; // offline pays 60% of theoretical live income const OFFLINE_MIN_S = 90; // skip the away-modal for absences shorter than this const SAVE_EVERY = 3; // autosave cadence, seconds // Tiers: baseYield $/job, baseDuration s/job, lootCap = bags on the floor before // the job timer pauses (the tap-pressure loop), plus per-tier track base costs. const TIERS = [ { name: "PICKPOCKET", baseYield: 12, baseDuration: 6, lootCap: 3, hireBase: 110, trainBase: 80, gearBase: 130, tint: "#2a6b5f" }, { name: "JEWELRY STORE", baseYield: 110, baseDuration: 14, lootCap: 3, hireBase: 2000, trainBase: 1600, gearBase: 2500, tint: "#5b3f7a" }, { name: "MUSEUM", baseYield: 1000, baseDuration: 34, lootCap: 3, hireBase: 22000, trainBase: 18000, gearBase: 27000, tint: "#31517d" }, { name: "BANK", baseYield: 9000, baseDuration: 80, lootCap: 3, hireBase: 180000, trainBase: 150000, gearBase: 220000, tint: "#7a5a2a" }, ]; const DRIVER_COSTS = [600, 15000, 250000]; // unlock Jewelry Store / Museum / Bank const FENCE_COSTS = [280, 3800, 42000, 480000]; // Fence L1-L4 = auto-collect tiers 0-3 // ═══ MOUNT + CANVAS ═══ // Two stacked canvases: a WebGL canvas (the 3D diorama) under a transparent 2D // canvas (HUD, shop sheet, offline modal, floats, ripples). Pointer events land // on the overlay; world taps raycast into the scene. const root = document.getElementById("mcpity-root") ?? document.body; root.innerHTML = ""; const wrap = document.createElement("div"); wrap.style.cssText = "position:relative;margin:0 auto;background:#14161f;touch-action:none;user-select:none;"; const glCanvas = document.createElement("canvas"); glCanvas.id = "heist-gl"; glCanvas.style.cssText = "position:absolute;left:0;top:0;display:block;"; const canvas = document.createElement("canvas"); // 2D overlay - input + UI (same name as the 2D build so the INPUT section is unchanged) canvas.style.cssText = "position:absolute;left:0;top:0;display:block;touch-action:none;"; wrap.appendChild(glCanvas); wrap.appendChild(canvas); root.appendChild(wrap); const ctx = canvas.getContext("2d")!; let W = 0, H = 0; function resize() { W = Math.min(window.innerWidth, 480); H = Math.min(window.innerHeight, 900); const dpr = Math.min(window.devicePixelRatio || 1, 2); // cap DPR: 4x canvases hurt low-end GPUs wrap.style.width = W + "px"; wrap.style.height = H + "px"; canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); canvas.style.width = W + "px"; canvas.style.height = H + "px"; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); if (renderer) { renderer.setPixelRatio(LOW_GPU ? 1 : dpr); renderer.setSize(W, H, true); fitCamera(); } } // ═══ STATE ═══ type Bag = { value: number; born: number; pop: number }; type TierState = { unlocked: boolean; hire: number; train: number; gear: number; progress: number; loot: Bag[] }; type ShopItem = { id: string; title: string; desc: string; cost: number; tint: string; locked?: boolean; apply: () => void }; const state = { cash: 0, fence: 0, // Fence level: level N auto-collects tiers 0..N-1 mute: false, offlinePending: 0, tiers: [] as TierState[], }; const ui = { shopOpen: false, shopScroll: 0, offlineOpen: false }; let gameT = 0, cashShown = 0, saveT = 0, pulse = 0; let raf = 0, last = 0, frameCount = 0, readyPosted = false; function freshTier(i: number): TierState { return { unlocked: i === 0, hire: 0, train: 0, gear: 0, progress: 0, loot: [] }; } function initState() { state.cash = 0; state.fence = 0; state.mute = false; state.offlinePending = 0; state.tiers = TIERS.map((_, i) => freshTier(i)); } // Economy model. crew = 1 + hire level; payout multiplies by crew (each crew // member runs a parallel job - the simple model); train shrinks duration // multiplicatively down to the floor; gear adds flat +25% payout per level. const crewOf = (i: number) => 1 + state.tiers[i].hire; const durationOf = (i: number) => TIERS[i].baseDuration * Math.max(TRAIN_FLOOR, Math.pow(TRAIN_FACTOR, state.tiers[i].train)); const payoutOf = (i: number) => TIERS[i].baseYield * (1 + GEAR_BONUS * state.tiers[i].gear) * crewOf(i); const costOf = (base: number, lvl: number) => Math.floor(base * Math.pow(GROWTH, lvl)); const incomeRate = () => state.tiers.reduce((a, t, i) => a + (t.unlocked ? payoutOf(i) / durationOf(i) : 0), 0); function makeSave() { return { v: SAVE_VERSION, cash: Math.floor(state.cash), fence: state.fence, mute: state.mute, savedAt: Date.now(), tiers: state.tiers.map((t) => ({ u: t.unlocked ? 1 : 0, h: t.hire, tr: t.train, g: t.gear, p: +t.progress.toFixed(4), l: t.loot.length })), }; } function save() { const snap = makeSave(); try { localStorage.setItem(SAVE_KEY, JSON.stringify(snap)); } catch { /* storage may be unavailable in sandboxed iframes */ } platformSave(snap); } function applySave(s: any) { state.cash = Number(s.cash) || 0; state.fence = Math.min(s.fence | 0, FENCE_COSTS.length); state.mute = !!s.mute; state.tiers = TIERS.map((_, i) => { const t = (s.tiers && s.tiers[i]) || {}; const n = Math.min(t.l | 0, TIERS[i].lootCap); return { unlocked: i === 0 || !!t.u, hire: Math.max(0, t.h | 0), train: Math.max(0, t.tr | 0), gear: Math.max(0, t.g | 0), progress: Math.min(Math.max(Number(t.p) || 0, 0), 1), loot: Array.from({ length: n }, () => ({ value: 0, born: 0, pop: 0 })), }; }); // restored bags are re-valued at the current payout (they carry no history) state.tiers.forEach((t, i) => t.loot.forEach((b) => { b.value = payoutOf(i); })); } // Offline model: Fence-covered tiers earn full theoretical rate; uncovered // tiers earn as if the loot floor capped out (at most lootCap uncollected // bags' worth) - simple, and matches what the player would find on return. function computeOffline(savedAt: number): number { const elapsed = Math.min(Math.max((Date.now() - savedAt) / 1000, 0), OFFLINE_CAP_H * 3600); if (elapsed < OFFLINE_MIN_S) return 0; let total = 0; state.tiers.forEach((t, i) => { if (!t.unlocked) return; const rate = payoutOf(i) / durationOf(i); const gain = state.fence >= i + 1 ? rate * elapsed : Math.min(rate * elapsed, TIERS[i].lootCap * payoutOf(i)); total += gain * OFFLINE_RATE; }); return Math.floor(total); } function boot() { initState(); let s: any = null; try { s = JSON.parse(localStorage.getItem(SAVE_KEY) || "null"); } catch { /* corrupt save -> fresh start */ } if (s && typeof s === "object" && s.v >= 1) { applySave(s); state.offlinePending = computeOffline(Number(s.savedAt) || Date.now()); if (state.offlinePending > 0) ui.offlineOpen = true; } cashShown = state.cash; } // Shop catalog, rebuilt each frame from state (ids are stable; rows for locked // tiers don't exist yet - the single "driver" row always points at the NEXT tier). function shopItems(): ShopItem[] { const items: ShopItem[] = []; const $$ = (n: number) => "$" + fmt(n); state.tiers.forEach((t, i) => { if (!t.unlocked) return; const cfg = TIERS[i]; const crew = crewOf(i), pay = payoutOf(i); items.push({ id: "hire" + i, title: cfg.name + " - HIRE CREW", tint: cfg.tint, desc: "Crew " + crew + " to " + (crew + 1) + " · " + $$(pay) + " to " + $$((pay / crew) * (crew + 1)) + "/job", cost: costOf(cfg.hireBase, t.hire), apply: () => { t.hire++; }, }); const atFloor = Math.pow(TRAIN_FACTOR, t.train) <= TRAIN_FLOOR; items.push({ id: "train" + i, title: cfg.name + " - TRAIN CREW", tint: cfg.tint, locked: atFloor, desc: atFloor ? "Fully trained (at the speed floor)" : durationOf(i).toFixed(1) + "s to " + (cfg.baseDuration * Math.max(TRAIN_FLOOR, Math.pow(TRAIN_FACTOR, t.train + 1))).toFixed(1) + "s per job", cost: costOf(cfg.trainBase, t.train), apply: () => { t.train++; }, }); items.push({ id: "gear" + i, title: cfg.name + " - BETTER GEAR", tint: cfg.tint, desc: $$(pay) + " to " + $$(cfg.baseYield * (1 + GEAR_BONUS * (t.gear + 1)) * crew) + "/job", cost: costOf(cfg.gearBase, t.gear), apply: () => { t.gear++; }, }); }); if (state.fence < FENCE_COSTS.length) { items.push({ id: "fence", title: state.fence === 0 ? "HIRE THE FENCE" : "FENCE - LEVEL " + (state.fence + 1), tint: "#3a6b3a", desc: "Auto-collects " + TIERS[state.fence].name + " loot (" + AUTO_DELAY + "s)", cost: FENCE_COSTS[state.fence], apply: () => { state.fence++; }, }); } const nl = state.tiers.findIndex((t) => !t.unlocked); if (nl > 0) { items.push({ id: "driver", title: "GETAWAY DRIVER", tint: "#8a5a2a", desc: "Unlocks " + TIERS[nl].name + " jobs", cost: DRIVER_COSTS[nl - 1], apply: () => { state.tiers[nl].unlocked = true; }, }); } items.push({ id: "prestige", title: "NEW CITY", desc: "Prestige - coming soon", cost: 0, tint: "#6a5a2a", locked: true, apply: () => {} }); return items; } function buy(id: string): boolean { const it = shopItems().find((x) => x.id === id); if (!it || it.locked) return false; if (state.cash < it.cost) { sfx("nope"); return false; } state.cash -= it.cost; it.apply(); sfx("buy"); save(); return true; } function collectTier(i: number, viaTap: boolean) { const t = state.tiers[i]; if (!t.loot.length) return; const total = t.loot.reduce((a, b) => a + b.value, 0); const n = t.loot.length; t.loot.length = 0; state.cash += total; const bw = bagWorld(i, 0); for (let k = 0; k < Math.min(3, n); k++) flys.push({ wx: bw.x, wy: bw.y, wz: bw.z, t: -k * 0.07, dur: 0.55 }); const r = stationRect(i); floats.push({ x: r.x + r.w * 0.5, y: r.y + 26, life: 1, txt: "+$" + fmt(total) }); pulse = Math.min(1, pulse + (total >= incomeRate() * 20 ? 0.6 : 0.2)); // subtle screen pulse, bigger on big scores sfx(viaTap ? "collect" : "auto"); if (viaTap) save(); } // ═══ SCENE ═══ // Fixed isometric OrthographicCamera diorama: a cozy hideout room (floor, two // walls, rug, lamp glow), four job stations stacked down the screen along the // iso diagonal, low-poly flat-shaded props, one soft-shadow directional light. const VIEW_H = 18.6; // world units mapped to the screen height const SP = 5.35; // station spacing along the iso diagonal const UX = -1 / Math.SQRT2; // ground direction that projects straight UP the screen const PX = -1 / Math.SQRT2; // (same diagonal; perpendicular is (-x, +z)) const scene = new THREE.Scene(); scene.background = new THREE.Color(0x161926); scene.fog = new THREE.Fog(0x161926, 26, 44); // PERSPECTIVE camera (converted from the original fixed-iso OrthographicCamera). // A modest 37deg vertical FOV placed along the same (1,1,1) iso 3/4 direction, at // the distance that makes VIEW_H world units fill the screen height. This // reproduces the old ortho framing (the old cam sat at CAM_TARGET+(16,16,16), // distance 16*sqrt3 ~= 27.7, and 37deg fits VIEW_H=18.6 at ~27.8), so the diorama // reads almost identically -- but now with REAL perspective depth. Picking is // unaffected: raycaster.setFromCamera / Vector3.project handle either camera type. const CAM_FOV = 37; // deg; modest -> minimal distortion const CAM_DIR = new THREE.Vector3(1, 1, 1).normalize(); // classic iso 3/4 direction const camera = new THREE.PerspectiveCamera(CAM_FOV, 1, 0.1, 120); const CAM_TARGET = new THREE.Vector3(-0.85, 0.4, -0.85); // nudged so the diorama sits between HUD and bottom bar function fitCamera() { camera.aspect = W / H; camera.fov = CAM_FOV; // distance so the target-plane vertical extent stays VIEW_H (matches the old // ortho height); horizontal widens/narrows with aspect exactly like ortho did. const dist = (VIEW_H / 2) / Math.tan((CAM_FOV * Math.PI / 180) / 2); camera.position.copy(CAM_TARGET).addScaledVector(CAM_DIR, dist); camera.lookAt(CAM_TARGET); camera.updateProjectionMatrix(); } // Adaptive quality: software rasterizers (SwiftShader / llvmpipe in headless CI) // get no MSAA, hard 512 shadows and DPR 1 so they stay playable; real GPUs get // the full look (MSAA + PCFSoft 1024 shadows + DPR up to 2). let GL_RENDERER_STR = "unknown"; function detectSoftwareGL(): boolean { try { const c = document.createElement("canvas"); const gl = (c.getContext("webgl2") || c.getContext("webgl")) as WebGLRenderingContext | null; if (!gl) return false; const ext = gl.getExtension("WEBGL_debug_renderer_info"); GL_RENDERER_STR = String(ext ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL) : gl.getParameter(gl.RENDERER)); return /swiftshader|llvmpipe|softpipe|software/i.test(GL_RENDERER_STR); } catch { return false; } } const LOW_GPU = detectSoftwareGL(); let renderer: THREE.WebGLRenderer | null = null; renderer = new THREE.WebGLRenderer({ canvas: glCanvas, antialias: !LOW_GPU }); renderer.shadowMap.enabled = true; renderer.shadowMap.type = LOW_GPU ? THREE.BasicShadowMap : THREE.PCFSoftShadowMap; resize(); // Lights: warm key with a tight 1024 shadow camera + cool ambient fill + lamp glow. scene.add(new THREE.HemisphereLight(0x8a97c0, 0x4a3826, 1.9)); const sun = new THREE.DirectionalLight(0xfff0d0, 2.7); sun.position.set(9, 15, 5); sun.castShadow = true; sun.shadow.mapSize.set(LOW_GPU ? 512 : 1024, LOW_GPU ? 512 : 1024); sun.shadow.camera.left = -12; sun.shadow.camera.right = 12; sun.shadow.camera.top = 12; sun.shadow.camera.bottom = -12; sun.shadow.camera.near = 4; sun.shadow.camera.far = 40; sun.shadow.bias = -0.002; scene.add(sun); const lampLight = new THREE.PointLight(0xffb45a, 55, 18, 2); lampLight.position.set(-6.4, 3.4, -1.6); scene.add(lampLight); // Shared low-poly geometry + material library (created once, disposed once). const GEO = { box: new THREE.BoxGeometry(1, 1, 1), sphere: new THREE.SphereGeometry(0.5, 12, 10), capsule: new THREE.CapsuleGeometry(0.26, 0.44, 3, 8), cyl: new THREE.CylinderGeometry(0.5, 0.5, 1, 10), cone: new THREE.CylinderGeometry(0.16, 0.62, 1, 10), torus: new THREE.TorusGeometry(0.2, 0.07, 6, 12), coin: new THREE.CylinderGeometry(0.17, 0.17, 0.06, 10), bag: new THREE.SphereGeometry(0.42, 10, 8), }; const mat = (hex: number, opts: any = {}) => new THREE.MeshLambertMaterial({ color: hex, ...opts }); const MAT = { floor: mat(0x77593c), wall: mat(0x55618c), wall2: mat(0x4a5578), rug: mat(0x9c4052), skin: mat(0xe8b88a), dark: mat(0x2a2f3d), sil: mat(0x14161f), lockedPlat: mat(0x333a4c), wood: mat(0x6f4c28), woodDark: mat(0x5a3c1e), money: mat(0x66b06a), steel: mat(0x5a6070), steelLight: mat(0x8a93a8), gold: mat(0xf0c93f, { emissive: 0x664e10 }), bagCloth: mat(0x8a6136), coat: mat(0x4a4436), lampShade: mat(0xffc878, { emissive: 0xdd8830 }), lampPole: mat(0x2c2c34), window: mat(0x9fc4ff, { emissive: 0x5a7ab0 }), hit: new THREE.MeshBasicMaterial({ visible: false }), }; const tierMats = TIERS.map((c) => { const n = parseInt(c.tint.slice(1), 16); return { plat: mat(n), accent: mat(lighten(n, 1.7)), wallTrim: mat(lighten(n, 0.7)) }; }); function lighten(n: number, f: number) { const c = (v: number) => Math.min(255, Math.round(v * f)); return (c((n >> 16) & 255) << 16) | (c((n >> 8) & 255) << 8) | c(n & 255); } function addMesh(parent: THREE.Object3D, geo: THREE.BufferGeometry, m: THREE.Material, x: number, y: number, z: number, sx = 1, sy = 1, sz = 1, shadow = true) { const mesh = new THREE.Mesh(geo, m); mesh.position.set(x, y, z); mesh.scale.set(sx, sy, sz); if (shadow) { mesh.castShadow = true; mesh.receiveShadow = true; } parent.add(mesh); return mesh; } // Room shell: floor + two back walls + rug + skirting + floor lamp. const room = new THREE.Group(); { const floor = addMesh(room, GEO.box, MAT.floor, 0, -0.25, 0, 17.5, 0.5, 17.5, false); floor.receiveShadow = true; addMesh(room, GEO.box, MAT.wall, -8.9, 3.0, 0, 0.5, 6.5, 17.5, false).receiveShadow = true; addMesh(room, GEO.box, MAT.wall2, 0, 3.0, -8.9, 17.5, 6.5, 0.5, false).receiveShadow = true; addMesh(room, GEO.box, MAT.dark, -8.6, 0.35, 0, 0.25, 0.7, 17.5, false); // skirting addMesh(room, GEO.box, MAT.dark, 0, 0.35, -8.6, 17.5, 0.7, 0.25, false); const rug = addMesh(room, GEO.cyl, MAT.rug, 3.6, 0.03, -3.6, 4.6, 0.06, 4.6, false); rug.receiveShadow = true; // window glow panel on the back wall (fake moonlight, cheeky heist vibe) addMesh(room, GEO.box, MAT.window, -3.4, 3.6, -8.55, 2.2, 1.8, 0.15, false); addMesh(room, GEO.box, MAT.window, -8.55, 3.6, -5.2, 0.15, 1.8, 2.2, false); // floor lamp near the wall corner addMesh(room, GEO.cyl, MAT.lampPole, -6.4, 1.5, -1.6, 0.16, 3.0, 0.16); addMesh(room, GEO.cone, MAT.lampShade, -6.4, 3.3, -1.6, 1.5, 0.9, 1.5, false); addMesh(room, GEO.cyl, MAT.lampPole, -6.4, 0.06, -1.6, 1.0, 0.12, 1.0); } scene.add(room); // Station anchors along the diagonal (i=0 top of screen .. i=3 bottom), with a // small alternating perpendicular offset so the room reads staggered, not gridded. const S_CENTERS = TIERS.map((_, i) => { const d = (1.5 - i) * SP; const side = (i % 2 === 0 ? 1 : -1) * 0.55; return new THREE.Vector3(UX * d + side / Math.SQRT2, 0.0, PX * d - side / Math.SQRT2); }); const stations: { group: THREE.Group; plat: THREE.Mesh; hit: THREE.Mesh; prop: THREE.Group | null; propBracket: number; crew: THREE.Group[]; sils: THREE.Group[]; bags: THREE.Group[]; bagHits: THREE.Mesh[]; unlockedShown: boolean; }[] = []; const stationHits: THREE.Object3D[] = []; const bagHitMeshes: THREE.Object3D[] = []; function makeFigure(bodyM: THREE.Material, accentM: THREE.Material, silhouette = false): THREE.Group { const g = new THREE.Group(); addMesh(g, GEO.capsule, bodyM, 0, 0.62, 0); // body addMesh(g, GEO.sphere, silhouette ? bodyM : MAT.skin, 0, 1.16, 0, 0.42, 0.42, 0.42); // head const beanie = addMesh(g, GEO.sphere, silhouette ? bodyM : MAT.dark, 0, 1.26, 0, 0.44, 0.3, 0.44); // beanie beanie.castShadow = false; if (!silhouette) { const scarf = addMesh(g, GEO.torus, accentM, 0, 0.94, 0, 1, 1, 1, false); // accent scarf scarf.rotation.x = Math.PI / 2; } if (!silhouette && crewTemplate.current) return swapWithTemplate(g, crewTemplate.current); return g; } function makeBagMesh(): THREE.Group { const g = new THREE.Group(); addMesh(g, GEO.bag, MAT.bagCloth, 0, 0.4, 0, 1, 1.06, 1); addMesh(g, GEO.cyl, MAT.woodDark, 0, 0.78, 0, 0.36, 0.24, 0.36); // tied neck addMesh(g, GEO.torus, MAT.gold, 0, 0.42, 0.36, 0.55, 0.55, 0.55, false); // gold clasp if (bagTemplate.current) return swapWithTemplate(g, bagTemplate.current); return g; } function makeProp(bracket: number): THREE.Group { const g = new THREE.Group(); if (bracket >= 3) { // gold pile for (let row = 0; row < 3; row++) for (let k = 0; k <= row + 1; k++) addMesh(g, GEO.sphere, MAT.gold, (k - (row + 1) / 2) * 0.55, 0.24 + (2 - row) * 0.4, 0, 0.62, 0.46, 0.62); } else if (bracket >= 2) { // safe addMesh(g, GEO.box, MAT.steel, 0, 0.62, 0, 1.05, 1.24, 0.95); const dial = addMesh(g, GEO.torus, MAT.steelLight, 0.35, 0.75, 0.5, 0.8, 0.8, 0.8, false); dial.rotation.x = 0; addMesh(g, GEO.box, MAT.steelLight, -0.3, 0.55, 0.5, 0.1, 0.32, 0.06, false); } else if (bracket >= 1) { // counting table addMesh(g, GEO.box, MAT.wood, 0, 0.62, 0, 1.5, 0.1, 0.85); addMesh(g, GEO.box, MAT.woodDark, -0.6, 0.3, -0.3, 0.12, 0.6, 0.12); addMesh(g, GEO.box, MAT.woodDark, 0.6, 0.3, -0.3, 0.12, 0.6, 0.12); addMesh(g, GEO.box, MAT.woodDark, -0.6, 0.3, 0.3, 0.12, 0.6, 0.12); addMesh(g, GEO.box, MAT.woodDark, 0.6, 0.3, 0.3, 0.12, 0.6, 0.12); addMesh(g, GEO.box, MAT.money, -0.35, 0.76, 0.1, 0.4, 0.16, 0.3); addMesh(g, GEO.box, MAT.money, 0.25, 0.8, -0.1, 0.4, 0.24, 0.3); } else { // starter crate addMesh(g, GEO.box, MAT.wood, 0, 0.45, 0, 0.9, 0.9, 0.9); addMesh(g, GEO.box, MAT.woodDark, 0, 0.92, 0, 0.96, 0.08, 0.96); } // A single injected prop GLB replaces every gear-bracket variant (fitted to the // current bracket's procedural bounds); on /play all four brackets stay procedural. if (propTemplate.current) return swapWithTemplate(g, propTemplate.current); return g; } for (let i = 0; i < TIERS.length; i++) { const g = new THREE.Group(); const c = S_CENTERS[i]; g.position.copy(c); const plat = addMesh(g, GEO.box, MAT.lockedPlat, 0, 0.16, 0, 4.6, 0.32, 3.1); plat.receiveShadow = true; addMesh(g, GEO.box, MAT.dark, 0, 0.05, 0, 4.9, 0.1, 3.4).receiveShadow = true; // base trim // Kept low (1.5 world tall) so adjacent stations' hit boxes never occlude // each other on screen along the iso ray; bags get their own spheres. const hit = new THREE.Mesh(new THREE.BoxGeometry(5.4, 1.5, 3.8), MAT.hit); hit.position.set(0, 0.65, 0); hit.visible = false; hit.userData.tier = i; g.add(hit); stationHits.push(hit); // silhouettes shown while locked const sils: THREE.Group[] = []; for (let k = 0; k < 2; k++) { const s = makeFigure(MAT.sil, MAT.sil, true); s.position.set(-0.5 + k * 1.1, 0.16, 0.3 - k * 0.5); g.add(s); sils.push(s); } // bag meshes + enlarged invisible hit spheres (>= 44 px on screen) const bags: THREE.Group[] = [], bagHits: THREE.Mesh[] = []; for (let k = 0; k < TIERS[i].lootCap; k++) { const b = makeBagMesh(); b.visible = false; g.add(b); bags.push(b); const bh = new THREE.Mesh(new THREE.SphereGeometry(0.62, 8, 6), MAT.hit); bh.visible = false; bh.userData.tier = i; bh.position.set(0, -999, 0); g.add(bh); bagHits.push(bh); bagHitMeshes.push(bh); } scene.add(g); stations.push({ group: g, plat, hit, prop: null, propBracket: -1, crew: [], sils, bags, bagHits, unlockedShown: false }); } // Fence NPC (trench coat + hat) appears near the Pickpocket station once hired. const fenceFig = new THREE.Group(); { addMesh(fenceFig, GEO.cone, MAT.coat, 0, 0.62, 0, 1.05, 1.25, 1.05); // trench coat addMesh(fenceFig, GEO.sphere, MAT.skin, 0, 1.42, 0, 0.42, 0.42, 0.42); addMesh(fenceFig, GEO.cyl, MAT.lampPole, 0, 1.62, 0, 1.0, 0.08, 1.0, false); // hat brim addMesh(fenceFig, GEO.cyl, MAT.lampPole, 0, 1.76, 0, 0.56, 0.24, 0.56, false); fenceFig.visible = false; } scene.add(fenceFig); // Coin pool for the 3D cash-fly (bag -> a world point that projects under the HUD counter). const coinPool: THREE.Mesh[] = []; for (let k = 0; k < 14; k++) { const cn = new THREE.Mesh(GEO.coin, MAT.gold); cn.rotation.x = Math.PI / 2; cn.visible = false; scene.add(cn); coinPool.push(cn); } const raycaster = new THREE.Raycaster(); const _ndc = new THREE.Vector2(); const _v = new THREE.Vector3(); const _hudWorld = new THREE.Vector3(); function worldToScreen(wx: number, wy: number, wz: number, out: { x: number; y: number }) { _v.set(wx, wy, wz).project(camera); out.x = (_v.x * 0.5 + 0.5) * W; out.y = (-_v.y * 0.5 + 0.5) * H; return out; } function hudWorldPoint() { // world point that projects at the HUD cash counter const p = hudCashPos(); _ndc.set((p.x / W) * 2 - 1, -(p.y / H) * 2 + 1); raycaster.setFromCamera(_ndc, camera); raycaster.ray.at(24, _hudWorld); return _hudWorld; } function bagWorld(i: number, k: number) { const c = S_CENTERS[i]; return { x: c.x + 0.85 + (k - 1) * 0.55, y: 0.45, z: c.z + 1.5 - (k - 1) * 0.55, }; } // Two-phase pick: loot-bag hit spheres FIRST (they are the tap-pressure target // and may hover over a neighbouring station's box), then the station volumes. function pickTier(p: { x: number; y: number }): number | null { _ndc.set((p.x / W) * 2 - 1, -(p.y / H) * 2 + 1); raycaster.setFromCamera(_ndc, camera); const bagHit = raycaster.intersectObjects(bagHitMeshes, false); if (bagHit.length) return bagHit[0].object.userData.tier as number; const hits = raycaster.intersectObjects(stationHits, false); return hits.length ? (hits[0].object.userData.tier as number) : null; } // ═══ LAYOUT ═══ // 2D overlay layout. HUD/shop/modal rects are identical to the 2D build; the // station rect is now the screen-projected bounding box of the station's 3D // hit volume (so overlay labels hug the diorama and test taps stay honest). const HUD_H = 92, BOTTOM_H = 66, GAP = 10, SIDE = 12; const _corner = new THREE.Vector3(); const _sRects = TIERS.map(() => ({ x: 0, y: 0, w: 0, h: 0 })); const _pt = { x: 0, y: 0 }; function stationRect(i: number) { const c = S_CENTERS[i]; const r = _sRects[i]; let minX = 1e9, minY = 1e9, maxX = -1e9, maxY = -1e9; for (let k = 0; k < 8; k++) { _corner.set(c.x + (k & 1 ? 2.7 : -2.7), (k & 2 ? 1.5 : 0), c.z + (k & 4 ? 1.9 : -1.9)).project(camera); const sx = (_corner.x * 0.5 + 0.5) * W, sy = (-_corner.y * 0.5 + 0.5) * H; if (sx < minX) minX = sx; if (sx > maxX) maxX = sx; if (sy < minY) minY = sy; if (sy > maxY) maxY = sy; } r.x = minX; r.y = minY; r.w = maxX - minX; r.h = maxY - minY; return r; } const _bagPt = { x: 0, y: 0 }; function bagPos(i: number, k: number) { // projected screen position of the bag hit sphere const b = bagWorld(i, k); worldToScreen(b.x, b.y + 0.1, b.z, _bagPt); return { x: _bagPt.x, y: _bagPt.y }; } function upgradesBtnRect() { return { x: W / 2 - 118, y: H - BOTTOM_H + 9, w: 210, h: 48 }; } function muteBtnRect() { return { x: W - 58, y: H - BOTTOM_H + 9, w: 48, h: 48 }; } function sheetRect() { const y = Math.max(H * 0.24, 140); return { x: 0, y, w: W, h: H - y }; } function sheetCloseRect() { const s = sheetRect(); return { x: s.x + s.w - 54, y: s.y + 14, w: 42, h: 34 }; } const ROW_H = 66, ROW_GAP = 8; function shopViewTop() { return sheetRect().y + 58; } function shopRowRect(idx: number) { return { x: SIDE, y: shopViewTop() + idx * (ROW_H + ROW_GAP) - ui.shopScroll, w: W - SIDE * 2, h: ROW_H }; } function shopMaxScroll(n: number) { return Math.max(0, n * (ROW_H + ROW_GAP) - (H - shopViewTop() - 10)); } function offlineCardRect() { return { x: W / 2 - 152, y: H / 2 - 132, w: 304, h: 244 }; } function offlineBtnRect() { const c = offlineCardRect(); return { x: c.x + 42, y: c.y + c.h - 70, w: c.w - 84, h: 52 }; } const hudCashPos = () => ({ x: 44, y: 60 }); // fly-to-counter target function inRect(p: { x: number; y: number }, r: { x: number; y: number; w: number; h: number }) { return p.x >= r.x && p.x <= r.x + r.w && p.y >= r.y && p.y <= r.y + r.h; } const clamp = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v)); // ═══ INPUT ═══ // Pointer events only (touch-first): tap = pointerdown->up with <8px vertical // travel; a longer vertical drag scrolls the shop sheet. Wheel also scrolls it. // World taps (stations, loot bags) resolve via a REAL raycast into the scene. function localPt(e: PointerEvent) { const r = canvas.getBoundingClientRect(); return { x: (e.clientX - r.left) * (W / r.width), y: (e.clientY - r.top) * (H / r.height) }; } let pDown: { x: number; y: number } | null = null, dragged = false, scrollStart = 0; function onPointerDown(e: PointerEvent) { unlockAudio(); const p = localPt(e); ripples.push({ x: p.x, y: p.y, t: 0 }); pDown = p; dragged = false; if (ui.shopOpen && !ui.offlineOpen) scrollStart = ui.shopScroll; try { canvas.setPointerCapture(e.pointerId); } catch { /* not critical */ } } function onPointerMove(e: PointerEvent) { if (!pDown || !ui.shopOpen || ui.offlineOpen) return; const p = localPt(e); if (Math.abs(p.y - pDown.y) > 8) dragged = true; if (dragged) ui.shopScroll = clamp(scrollStart - (p.y - pDown.y), 0, shopMaxScroll(shopItems().length)); } function onPointerUp(e: PointerEvent) { if (!pDown) return; const p = localPt(e); pDown = null; if (dragged) { dragged = false; return; } tap(p); } function tap(p: { x: number; y: number }) { if (ui.offlineOpen) { // modal swallows all taps until collected if (inRect(p, offlineBtnRect())) { state.cash += state.offlinePending; floats.push({ x: W / 2, y: H / 2 - 40, life: 1.2, txt: "+$" + fmt(state.offlinePending) }); state.offlinePending = 0; ui.offlineOpen = false; pulse = Math.min(1, pulse + 0.5); sfx("collect"); save(); } return; } if (ui.shopOpen) { const s = sheetRect(); if (inRect(p, sheetCloseRect()) || p.y < s.y) { ui.shopOpen = false; sfx("tap"); return; } if (p.y < shopViewTop() - 4) return; // header strip const items = shopItems(); for (let k = 0; k < items.length; k++) { if (inRect(p, shopRowRect(k))) { buy(items[k].id); return; } } return; } if (inRect(p, upgradesBtnRect())) { ui.shopOpen = true; ui.shopScroll = 0; sfx("tap"); return; } if (inRect(p, muteBtnRect())) { state.mute = !state.mute; sfx("tap"); save(); return; } const hitTier = pickTier(p); // raycast against station boxes + enlarged bag spheres if (hitTier !== null) { const t = state.tiers[hitTier]; if (!t.unlocked) { // locked tier -> open the shop at the driver row ui.shopOpen = true; ui.shopScroll = shopMaxScroll(shopItems().length); sfx("tap"); } else if (t.loot.length) { collectTier(hitTier, true); // generous hit area: tapping anywhere on the station collects } else { sfx("tap"); } } } function onWheel(e: WheelEvent) { if (!ui.shopOpen || ui.offlineOpen) return; e.preventDefault(); ui.shopScroll = clamp(ui.shopScroll + e.deltaY, 0, shopMaxScroll(shopItems().length)); } function onVis() { if (document.visibilityState === "hidden") save(); } function onHide() { save(); } canvas.addEventListener("pointerdown", onPointerDown); canvas.addEventListener("pointermove", onPointerMove); canvas.addEventListener("pointerup", onPointerUp); canvas.addEventListener("pointercancel", onPointerUp); canvas.addEventListener("wheel", onWheel, { passive: false }); window.addEventListener("resize", resize); document.addEventListener("visibilitychange", onVis); window.addEventListener("pagehide", onHide); // ═══ UPDATE ═══ // Pure game logic - identical to the verified 2D build. No rendering in here so // __heist_debug.advanceTime() fast-forwards deterministically. function update(dt: number) { gameT += dt; for (let i = 0; i < TIERS.length; i++) { const t = state.tiers[i]; if (!t.unlocked) continue; // job timer - pauses while the loot floor is full (tap pressure) if (t.loot.length < TIERS[i].lootCap) { t.progress += dt / durationOf(i); if (t.progress >= 1) { t.progress = 0; t.loot.push({ value: payoutOf(i), born: gameT, pop: 1 }); } } // Fence auto-collect: once any bag has aged past the delay, sweep the tier if (state.fence >= i + 1 && t.loot.some((b) => gameT - b.born >= AUTO_DELAY)) collectTier(i, false); for (const b of t.loot) b.pop = Math.max(0, b.pop - dt * 3); } // displayed cash counts up toward the real value cashShown += (state.cash - cashShown) * Math.min(1, dt * 8); if (Math.abs(state.cash - cashShown) < 0.5) cashShown = state.cash; pulse = Math.max(0, pulse - dt * 2.5); for (const f of floats) { f.y -= 42 * dt; f.life -= dt; } floats = floats.filter((f) => f.life > 0); for (const f of flys) f.t += dt / f.dur; flys = flys.filter((f) => f.t < 1); for (const r of ripples) r.t += dt * 2.5; ripples = ripples.filter((r) => r.t < 1); saveT += dt; if (saveT >= SAVE_EVERY) { saveT = 0; save(); } } // ═══ RENDER ═══ function fmt(n: number): string { n = Math.floor(n); const u = (v: number, s: string) => (v >= 100 ? Math.round(v).toString() : v.toFixed(1).replace(/\.0$/, "")) + s; if (n >= 1e9) return u(n / 1e9, "B"); if (n >= 1e6) return u(n / 1e6, "M"); if (n >= 1e3) return u(n / 1e3, "K"); return String(n); } function rr(x: number, y: number, w: number, h: number, r: number) { ctx.beginPath(); if ((ctx as any).roundRect) (ctx as any).roundRect(x, y, w, h, r); else ctx.rect(x, y, w, h); } function shade(hex: string, f: number) { const n = parseInt(hex.slice(1), 16); const m = (v: number) => Math.min(255, Math.round(v * f)); return "rgb(" + m((n >> 16) & 255) + "," + m((n >> 8) & 255) + "," + m(n & 255) + ")"; } // Sync 3D visuals to game state (mesh pools only grow/swap on state changes; // per-frame work is position/scale writes - no allocations). function syncVisuals() { camera.zoom = 1 + pulse * 0.012; camera.updateProjectionMatrix(); for (let i = 0; i < TIERS.length; i++) { const st = stations[i], t = state.tiers[i], c = S_CENTERS[i]; if (t.unlocked !== st.unlockedShown) { st.unlockedShown = t.unlocked; st.plat.material = t.unlocked ? tierMats[i].plat : MAT.lockedPlat; for (const s of st.sils) s.visible = !t.unlocked; } if (!t.unlocked) continue; // prop swaps with Gear bracket: crate -> table -> safe -> gold pile const bracket = t.gear >= 8 ? 3 : t.gear >= 5 ? 2 : t.gear >= 2 ? 1 : 0; if (bracket !== st.propBracket) { st.propBracket = bracket; if (st.prop) st.group.remove(st.prop); st.prop = makeProp(bracket); st.prop.position.set(-1.35, 0.32, -0.75); st.group.add(st.prop); } // crew figures walk a waypoint loop around the platform (max 6 shown) const want = Math.min(crewOf(i), 6); while (st.crew.length < want) { const f = makeFigure(tierMats[i].plat, tierMats[i].accent); st.group.add(f); st.crew.push(f); } while (st.crew.length > want) st.group.remove(st.crew.pop()!); const ax = 1.55, az = 0.95, per = 4 * (ax + az); for (let k = 0; k < st.crew.length; k++) { const f = st.crew[k]; let u = (gameT * 0.85 + (k * per) / 6 + i * 2.1) % per; let x = 0, z = 0, hx = 0, hz = 0; if (u < 2 * ax) { x = -ax + u; z = -az; hx = 1; } else if (u < 2 * ax + 2 * az) { x = ax; z = -az + (u - 2 * ax); hz = 1; } else if (u < 4 * ax + 2 * az) { x = ax - (u - 2 * ax - 2 * az); z = az; hx = -1; } else { x = -ax; z = az - (u - 4 * ax - 2 * az); hz = -1; } f.position.set(x * 0.5, 0.32 + Math.abs(Math.sin(gameT * 5 + k * 1.7)) * 0.06, z); f.rotation.y = Math.atan2(hx, hz); } // loot bags: squash-and-stretch pop on spawn, gentle bob; hit spheres track them for (let k = 0; k < st.bags.length; k++) { const bm = st.bags[k], bh = st.bagHits[k]; if (k < t.loot.length) { const b = t.loot[k], bw = bagWorld(i, k); bm.visible = true; bm.position.set(bw.x - c.x, bw.y - 0.4 + Math.sin(gameT * 2 + k * 1.3) * 0.04, bw.z - c.z); bm.scale.set(1 + b.pop * 0.35, 1 - b.pop * 0.3, 1 + b.pop * 0.35); bh.position.set(bm.position.x, 0.5, bm.position.z); } else { bm.visible = false; bh.position.y = -999; // park the hit sphere out of raycast range } } } fenceFig.visible = state.fence > 0; if (fenceFig.visible) { const c = S_CENTERS[0]; fenceFig.position.set(c.x - 2.9, 0.02 + Math.sin(gameT * 2.2) * 0.04, c.z + 1.6); fenceFig.rotation.y = 0.7; } // 3D coin fly: bag -> world point under the HUD cash counter (easeOutQuad + arc) const hw = hudWorldPoint(); let cn = 0; for (const f of flys) { if (f.t < 0 || cn >= coinPool.length) continue; const coin = coinPool[cn++]; const e = 1 - Math.pow(1 - Math.min(f.t, 1), 2); coin.visible = true; coin.position.set( f.wx + (hw.x - f.wx) * e, f.wy + (hw.y - f.wy) * e + Math.sin(e * Math.PI) * 1.6, f.wz + (hw.z - f.wz) * e, ); coin.rotation.z = e * 7; } for (let k = cn; k < coinPool.length; k++) coinPool[k].visible = false; } function render() { syncVisuals(); renderer!.render(scene, camera); ctx.clearRect(0, 0, W, H); for (let i = 0; i < TIERS.length; i++) drawStationOverlay(i); drawHud(); drawBottomBar(); drawParticles(); if (ui.shopOpen) drawShop(); if (ui.offlineOpen) drawOffline(); drawRipples(); } // ═══ HUD ═══ function drawHud() { const g = ctx.createLinearGradient(0, 0, 0, HUD_H); g.addColorStop(0, "rgba(12,14,22,0.85)"); g.addColorStop(1, "rgba(12,14,22,0)"); ctx.fillStyle = g; ctx.fillRect(0, 0, W, HUD_H); ctx.textAlign = "center"; ctx.fillStyle = "#8a93a8"; ctx.font = "600 11px system-ui"; ctx.fillText("H E I S T C R E W", W / 2, 18); ctx.textAlign = "left"; ctx.fillStyle = "#8a93a8"; ctx.font = "600 11px system-ui"; ctx.fillText("CASH", 20, 38); ctx.fillStyle = "#ffd76a"; ctx.font = "bold 32px system-ui"; ctx.fillText("$" + fmt(cashShown), 20, 70); const inc = incomeRate(); ctx.textAlign = "right"; ctx.fillStyle = "#8a93a8"; ctx.font = "600 11px system-ui"; ctx.fillText("INCOME", W - 20, 38); ctx.fillStyle = "#7ee6a0"; ctx.font = "bold 16px system-ui"; ctx.fillText("+$" + (inc < 100 ? inc.toFixed(1) : fmt(inc)) + "/s", W - 20, 60); ctx.textAlign = "left"; } function drawBottomBar() { ctx.fillStyle = "rgba(23,26,38,0.94)"; ctx.fillRect(0, H - BOTTOM_H, W, BOTTOM_H); const b = upgradesBtnRect(); ctx.fillStyle = "#f0b429"; rr(b.x, b.y, b.w, b.h, 12); ctx.fill(); ctx.fillStyle = "#3a2a08"; ctx.font = "bold 18px system-ui"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("UPGRADES", b.x + b.w / 2, b.y + b.h / 2 + 1); const m = muteBtnRect(); ctx.fillStyle = "#232839"; rr(m.x, m.y, m.w, m.h, 10); ctx.fill(); ctx.fillStyle = state.mute ? "#5a6378" : "#7ee6a0"; ctx.font = "bold 10px system-ui"; ctx.fillText(state.mute ? "MUTED" : "SOUND", m.x + m.w / 2, m.y + m.h / 2 + 1); ctx.textBaseline = "alphabetic"; ctx.textAlign = "left"; } // Overlay labels hug the projected station rect: name plate + stats + progress // bar for unlocked tiers; name + DRIVER price tag / LOCKED tag for locked ones. function drawStationOverlay(i: number) { const r = stationRect(i), t = state.tiers[i], cfg = TIERS[i]; const nextLocked = state.tiers.findIndex((x) => !x.unlocked); const lx = clamp(r.x + 8, 8, W - 204), ly = clamp(r.y + r.h * 0.26, HUD_H + 14, H - BOTTOM_H - 60); if (!t.unlocked) { ctx.fillStyle = "rgba(14,16,23,0.72)"; rr(lx - 6, ly - 16, 160, 46, 9); ctx.fill(); ctx.fillStyle = "#8a93a8"; ctx.font = "bold 14px system-ui"; ctx.fillText(cfg.name, lx, ly); if (i === nextLocked) { ctx.fillStyle = "#f0b429"; rr(lx - 2, ly + 6, 148, 20, 6); ctx.fill(); ctx.fillStyle = "#3a2a08"; ctx.font = "bold 12px system-ui"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("DRIVER $" + fmt(DRIVER_COSTS[i - 1]), lx + 72, ly + 17); } else { ctx.fillStyle = "#232839"; rr(lx - 2, ly + 6, 148, 20, 6); ctx.fill(); ctx.fillStyle = "#59617a"; ctx.font = "bold 12px system-ui"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("LOCKED", lx + 72, ly + 17); } ctx.textBaseline = "alphabetic"; ctx.textAlign = "left"; return; } ctx.fillStyle = "rgba(14,16,23,0.66)"; rr(lx - 6, ly - 16, 196, 58, 9); ctx.fill(); ctx.fillStyle = shade(cfg.tint, 2.1); ctx.font = "bold 14px system-ui"; ctx.fillText(cfg.name, lx, ly); ctx.fillStyle = "#b6c0d6"; ctx.font = "11px system-ui"; ctx.fillText("$" + fmt(payoutOf(i)) + "/job · " + durationOf(i).toFixed(1) + "s · crew " + crewOf(i), lx, ly + 16); const bar = { x: lx, y: ly + 24, w: 184, h: 11 }; ctx.fillStyle = "rgba(0,0,0,0.45)"; rr(bar.x, bar.y, bar.w, bar.h, 5); ctx.fill(); if (t.loot.length >= cfg.lootCap) { const a = 0.55 + 0.45 * Math.sin(gameT * 6); ctx.fillStyle = "rgba(255,215,106," + a.toFixed(2) + ")"; ctx.font = "bold 11px system-ui"; ctx.fillText("FULL - TAP TO COLLECT", bar.x + 4, bar.y + 10); } else { ctx.fillStyle = "#ffd76a"; rr(bar.x + 2, bar.y + 2, Math.max(2, (bar.w - 4) * clamp(t.progress, 0, 1)), bar.h - 4, 4); ctx.fill(); } if (i === 0 && state.fence > 0) { const fp = worldToScreen(fenceFig.position.x, 2.1, fenceFig.position.z, _pt); ctx.fillStyle = "#7ee6a0"; ctx.font = "bold 9px system-ui"; ctx.textAlign = "center"; ctx.fillText("FENCE", fp.x, fp.y); ctx.textAlign = "left"; } } // ═══ SHOP ═══ function drawShop() { ctx.fillStyle = "rgba(8,9,14,0.55)"; ctx.fillRect(0, 0, W, H); const s = sheetRect(); ctx.fillStyle = "#1d2130"; rr(s.x, s.y, s.w, s.h + 24, 18); ctx.fill(); ctx.fillStyle = "#39405a"; rr(W / 2 - 22, s.y + 8, 44, 5, 3); ctx.fill(); ctx.fillStyle = "#eef2ff"; ctx.font = "bold 17px system-ui"; ctx.fillText("THE PLANNING TABLE", s.x + 16, s.y + 40); const c = sheetCloseRect(); ctx.fillStyle = "#2a3046"; rr(c.x, c.y, c.w, c.h, 9); ctx.fill(); ctx.fillStyle = "#aab3c8"; ctx.font = "bold 14px system-ui"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("✕", c.x + c.w / 2, c.y + c.h / 2 + 1); ctx.textBaseline = "alphabetic"; ctx.textAlign = "left"; ctx.save(); ctx.beginPath(); ctx.rect(0, shopViewTop() - 4, W, H - shopViewTop() + 4); ctx.clip(); const items = shopItems(); items.forEach((it, k) => { const r = shopRowRect(k); if (r.y + r.h < shopViewTop() - 20 || r.y > H) return; const can = !it.locked && state.cash >= it.cost; if (it.id === "prestige") { // locked prestige teaser card ctx.strokeStyle = "#8a6a2a"; ctx.lineWidth = 1.5; ctx.setLineDash([6, 5]); rr(r.x, r.y, r.w, r.h, 12); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = "#c9a44a"; ctx.font = "bold 15px system-ui"; ctx.fillText("NEW CITY", r.x + 16, r.y + 28); ctx.fillStyle = "#7a8299"; ctx.font = "12px system-ui"; ctx.fillText("Prestige - coming soon", r.x + 16, r.y + 48); ctx.fillStyle = "#2a3046"; rr(r.x + r.w - 76, r.y + 18, 60, 28, 8); ctx.fill(); ctx.fillStyle = "#8a93a8"; ctx.font = "bold 12px system-ui"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("SOON", r.x + r.w - 46, r.y + 32 + 1); ctx.textBaseline = "alphabetic"; ctx.textAlign = "left"; return; } ctx.fillStyle = can ? "#252b40" : "#1b2030"; rr(r.x, r.y, r.w, r.h, 12); ctx.fill(); ctx.fillStyle = it.tint; rr(r.x, r.y + 8, 5, r.h - 16, 3); ctx.fill(); ctx.fillStyle = can ? "#eef2ff" : "#7a8299"; ctx.font = "bold 14px system-ui"; ctx.fillText(it.title, r.x + 16, r.y + 26); ctx.fillStyle = can ? "#a9b3c9" : "#5f6880"; ctx.font = "12px system-ui"; ctx.fillText(it.desc, r.x + 16, r.y + 47); const pw = 84; ctx.fillStyle = it.locked ? "#232839" : can ? "#2f6b45" : "#2a3046"; rr(r.x + r.w - pw - 12, r.y + 17, pw, 32, 9); ctx.fill(); ctx.fillStyle = it.locked ? "#5a6378" : can ? "#9ff0b5" : "#6d7891"; ctx.font = "bold 13px system-ui"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(it.locked ? "MAX" : "$" + fmt(it.cost), r.x + r.w - pw / 2 - 12, r.y + 33 + 1); ctx.textBaseline = "alphabetic"; ctx.textAlign = "left"; }); ctx.restore(); } function drawOffline() { ctx.fillStyle = "rgba(5,6,10,0.72)"; ctx.fillRect(0, 0, W, H); const c = offlineCardRect(); ctx.fillStyle = "#232839"; rr(c.x, c.y, c.w, c.h, 16); ctx.fill(); ctx.strokeStyle = "#f0b429"; ctx.lineWidth = 2; rr(c.x, c.y, c.w, c.h, 16); ctx.stroke(); ctx.textAlign = "center"; ctx.fillStyle = "#ffd76a"; ctx.font = "bold 18px system-ui"; ctx.fillText("WHILE YOU WERE GONE", c.x + c.w / 2, c.y + 44); ctx.fillStyle = "#a9b3c9"; ctx.font = "13px system-ui"; ctx.fillText("Your crew kept working the streets.", c.x + c.w / 2, c.y + 72); ctx.fillStyle = "#ffd76a"; ctx.font = "bold 36px system-ui"; ctx.fillText("$" + fmt(state.offlinePending), c.x + c.w / 2, c.y + 122); const b = offlineBtnRect(); ctx.fillStyle = "#f0b429"; rr(b.x, b.y, b.w, b.h, 12); ctx.fill(); ctx.fillStyle = "#3a2a08"; ctx.font = "bold 18px system-ui"; ctx.textBaseline = "middle"; ctx.fillText("COLLECT", b.x + b.w / 2, b.y + b.h / 2 + 1); ctx.textBaseline = "alphabetic"; ctx.textAlign = "left"; } function drawParticles() { for (const f of floats) { ctx.globalAlpha = clamp(f.life, 0, 1); ctx.fillStyle = "#ffe9a8"; ctx.font = "bold 15px system-ui"; ctx.textAlign = "center"; ctx.fillText(f.txt, f.x, f.y); ctx.globalAlpha = 1; ctx.textAlign = "left"; } } function drawRipples() { for (const r of ripples) { ctx.globalAlpha = (1 - r.t) * 0.5; ctx.strokeStyle = "#ffd76a"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(r.x, r.y, 10 + r.t * 34, 0, 7); ctx.stroke(); ctx.globalAlpha = 1; } } // ═══ POLISH ═══ // Particle pools + a tiny oscillator synth (no assets). Audio is created lazily // on the first user gesture; the mute toggle persists in the save. // (flys carry WORLD coordinates now - the coins fly in 3D toward the counter.) type Float = { x: number; y: number; life: number; txt: string }; type Fly = { wx: number; wy: number; wz: number; t: number; dur: number }; type Ripple = { x: number; y: number; t: number }; let floats: Float[] = [], flys: Fly[] = [], ripples: Ripple[] = []; let ac: AudioContext | null = null; function unlockAudio() { if (!ac) { try { ac = new (window.AudioContext || (window as any).webkitAudioContext)(); } catch { /* no WebAudio -> silent game */ } } if (ac && ac.state === "suspended") ac.resume().catch(() => {}); } function tone(f0: number, f1: number, dur: number, type: OscillatorType, vol: number, delay = 0) { if (!ac || state.mute) return; try { const o = ac.createOscillator(), g = ac.createGain(); const t0 = ac.currentTime + delay; o.type = type; o.frequency.setValueAtTime(Math.max(1, f0), t0); o.frequency.exponentialRampToValueAtTime(Math.max(1, f1), t0 + dur); g.gain.setValueAtTime(vol, t0); g.gain.exponentialRampToValueAtTime(0.0001, t0 + dur); o.connect(g); g.connect(ac.destination); o.start(t0); o.stop(t0 + dur + 0.03); } catch { /* never let sfx kill the game loop */ } } function sfx(kind: string) { if (kind === "tap") tone(300, 210, 0.05, "square", 0.03); else if (kind === "collect") { tone(520, 780, 0.08, "triangle", 0.05); tone(780, 1100, 0.09, "triangle", 0.05, 0.07); } else if (kind === "auto") tone(620, 920, 0.06, "sine", 0.028); else if (kind === "buy") { tone(330, 330, 0.06, "square", 0.04); tone(440, 440, 0.06, "square", 0.04, 0.06); tone(560, 700, 0.09, "square", 0.04, 0.12); } else if (kind === "nope") tone(150, 90, 0.12, "sawtooth", 0.04); } // ═══ PLATFORM ═══ // Cloud-save mirror: when the platform save bus (window.MCPitySave, injected by // the save.cloud-save-web pattern) exists, saves are mirrored through it and a // newer cloud snapshot is adopted at boot. Feature-detected, never throws when // absent - localStorage stays the source of truth otherwise. function platformSave(snap: unknown) { try { const bus = (window as any).MCPitySave; if (bus && typeof bus.set === "function") bus.set(SAVE_KEY, snap); } catch { /* platform bus optional */ } } function platformLoadAdopt() { try { const bus = (window as any).MCPitySave; if (!bus || typeof bus.get !== "function") return; Promise.resolve(bus.get(SAVE_KEY)).then((cloud: any) => { if (!cloud || typeof cloud !== "object" || !(cloud.v >= 1)) return; let local: any = null; try { local = JSON.parse(localStorage.getItem(SAVE_KEY) || "null"); } catch { /* ignore */ } if (!local || (Number(cloud.savedAt) || 0) > (Number(local.savedAt) || 0)) { applySave(cloud); state.offlinePending = computeOffline(Number(cloud.savedAt) || Date.now()); if (state.offlinePending > 0) ui.offlineOpen = true; cashShown = state.cash; } }).catch(() => {}); } catch { /* platform bus optional */ } } // Test seam - exposes live state, config, geometry, and a deterministic clock so // automated playtests can fast-forward instead of sleeping. Harmless in prod: // nothing here runs unless something calls it. 3D additions: lootScreenPos(i,k) // (projected bag hit-sphere center - taps there exercise the REAL raycast path) // and samplePixels() (renders a frame, reads back WebGL pixels). (window as any).__heist_debug = { state, ui, config: { TIERS, DRIVER_COSTS, FENCE_COSTS, GROWTH, TRAIN_FACTOR, TRAIN_FLOOR, GEAR_BONUS, AUTO_DELAY, OFFLINE_CAP_H, OFFLINE_RATE, OFFLINE_MIN_S, SAVE_KEY }, advanceTime(ms: number) { let left = ms / 1000; while (left > 0) { const d = Math.min(0.1, left); update(d); left -= d; } }, duration: durationOf, payout: payoutOf, income: incomeRate, save, frames: () => frameCount, gpu: () => ({ software: LOW_GPU, renderer: GL_RENDERER_STR }), lootScreenPos: (i: number, k = 0) => bagPos(i, k), samplePixels() { render(); const gl = renderer!.getContext(); const w = gl.drawingBufferWidth, h = gl.drawingBufferHeight; const px = new Uint8Array(4 * 5); const pts = [[w >> 1, h >> 1], [w >> 2, h >> 2], [(3 * w) >> 2, h >> 2], [w >> 2, (3 * h) >> 2], [(3 * w) >> 2, (3 * h) >> 2]]; pts.forEach(([x, y], n) => gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, px.subarray(n * 4, n * 4 + 4))); return Array.from(px); }, geom: { station: stationRect, bag: bagPos, upgradesBtn: upgradesBtnRect, muteBtn: muteBtnRect, sheetClose: sheetCloseRect, offlineCollect: offlineBtnRect, shopRow(id: string) { const k = shopItems().findIndex((x) => x.id === id); if (k < 0) return null; const r = shopRowRect(k); return { ...r, visible: r.y >= shopViewTop() - 2 && r.y + r.h <= H - 4 }; }, }, }; // ═══ LOOP ═══ void preloadAssets(); // fills hero caches from an injected store pack; no-op on /play boot(); platformLoadAdopt(); function loopFn(ts: number) { const dt = Math.min((ts - last) / 1000, 0.1); last = ts; update(dt); render(); frameCount++; if (!readyPosted) { readyPosted = true; try { parent.postMessage({ type: "mcpity:web-engine:ready" }, "*"); } catch { /* opaque parent */ } } raf = requestAnimationFrame(loopFn); } last = performance.now(); raf = requestAnimationFrame(loopFn); // ═══ DISPOSE ═══ // Hot-reload contract: the Studio iframe calls this before injecting new code. (window as any).__mcpity_dispose = () => { cancelAnimationFrame(raf); save(); canvas.removeEventListener("pointerdown", onPointerDown); canvas.removeEventListener("pointermove", onPointerMove); canvas.removeEventListener("pointerup", onPointerUp); canvas.removeEventListener("pointercancel", onPointerUp); canvas.removeEventListener("wheel", onWheel); window.removeEventListener("resize", resize); document.removeEventListener("visibilitychange", onVis); window.removeEventListener("pagehide", onHide); scene.traverse((o: any) => { if (o.geometry) o.geometry.dispose(); }); Object.values(GEO).forEach((g) => g.dispose()); Object.values(MAT).forEach((m) => m.dispose()); tierMats.forEach((t) => { t.plat.dispose(); t.accent.dispose(); t.wallTrim.dispose(); }); renderer!.dispose(); renderer = null; wrap.remove(); };