// Vault Dash: Jewel Heist - Web Full (single file) // 3-lane museum-heist auto-runner. Arrows/WASD or swipe: lanes / jump / slide. // 4 jewel tiers + combo multiplier (x1 -> x2 -> x3 -> x5). 90s alarm timer. // Extraction gate at 500m with 4 run outcomes. Jewels bank to a localStorage // wallet; buy Shadow skins between runs. Everything procedural - no assets. import * as THREE from "three"; /* --------------------------------------------------------------------------- Asset-swap seam (INLINE shim of games/_shared/asset-provider.ts WindowAssets). INLINED, not imported, on purpose: the /play build (scripts/build-game.mjs) writes ONE self-contained dist/index.ts and serves that single file to the in-browser esbuild-wasm bundler with no sibling files present. An `import { Assets } from "../../_shared/asset-provider"` would fail to resolve at bundle time and break the game at /play. This tiny object reproduces WindowAssets' runtime behavior with zero external imports: it reads window.MCPityAssets when a native store wrapper has injected it (via installAssetPack, see games/vault-dash/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 game stays 100% procedural. ------------------------------------------------------------------------- */ interface InjectedAssetGlobal { has?(key: string): boolean; getModel?(key: string): Promise | THREE.Object3D | null; getTexture?(key: string): THREE.Texture | null; } const Assets = { has(key: string): boolean { try { const g = (globalThis as unknown as { MCPityAssets?: InjectedAssetGlobal }).MCPityAssets; if (g && typeof g.has === "function") return !!g.has(key); } catch (_e) { /* absent / broken global -> procedural */ } return false; }, async getModel(key: string): Promise { try { const g = (globalThis as unknown as { MCPityAssets?: InjectedAssetGlobal }).MCPityAssets; if (g && typeof g.getModel === "function") { const model = await g.getModel(key); return model ?? null; } } catch (_e) { /* fall through to procedural */ } return 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; }, }; /* -------------------------- Asset-swap templates --------------------------- */ // Store builds can inject a GLB per hero id via the seam above. We preload each // once at boot (see void preloadAssets() near the bottom), cache the template, // and clone-per-instance in the hero factories below. On /play every getModel() // returns null, so assetTemplates stays EMPTY and every factory falls through to // its existing procedural mesh - nothing changes on /play. A partial pack // degrades per-key: any id without an injected model stays procedural. const ASSET_MODEL_KEYS = { thief: "thief", // player runner (cat-burglar) jewel: "jewel", // collectible gemstone (all tiers share the model) pedestal: "pedestal", // pedestal obstacle base glass_case: "glass_case", // glass display-case obstacle laser_grid: "laser_grid", // laser tripwire-grid obstacle } as const; const assetTemplates = new Map(); // Uniformly scale a cloned template to fit a target W x H x D box, centered in a // Group so the caller's position.set(...) places it like the procedural mesh. // `ground` rests the clone's bottom at y=0 (floor obstacles) instead of // centering vertically (free-floating pickups). function fitTemplate( template: THREE.Object3D, targetW: number, targetH: number, targetD: number, ground = false, ): THREE.Object3D { const inst = template.clone(true); const box = new THREE.Box3().setFromObject(inst); const size = box.getSize(new THREE.Vector3()); const sH = size.y > 1e-4 ? targetH / size.y : 1; const sW = size.x > 1e-4 ? targetW / size.x : 1; const sD = size.z > 1e-4 ? targetD / size.z : 1; inst.scale.setScalar(Math.min(sH, sW, sD)); const fitted = new THREE.Box3().setFromObject(inst); const center = fitted.getCenter(new THREE.Vector3()); inst.position.x -= center.x; inst.position.z -= center.z; inst.position.y -= ground ? fitted.min.y : center.y; const group = new THREE.Group(); group.add(inst); return group; } // ═══ SETUP (mount + renderer + scene + camera) ═══════════════════ const root = document.getElementById("mcpity-root") ?? document.body; root.innerHTML = ""; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.08; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; root.appendChild(renderer.domElement); const scene = new THREE.Scene(); scene.background = new THREE.Color(0x140f08); scene.fog = new THREE.Fog(0x1c130a, 16, 52); const camera = new THREE.PerspectiveCamera( 72, window.innerWidth / window.innerHeight, 0.1, 140, ); camera.position.set(0, 4.2, -7); camera.lookAt(0, 1.4, 6); // Tunables shared across sections. const LANE_X = [-2.2, 0, 2.2]; const SEGMENT_LEN = 12; const NUM_SEGMENTS = 8; const ALARM_AT = 90; // seconds until the museum alarm trips const EXTRACT_AT = 500; // metres to the extraction gate const ALARM_SPEED_MULT = 1.2; const ALARM_SPAWN_MULT = 0.65; // spawn-gap multiplier during the alarm (denser) const JUMP_VELOCITY = 9.2; const GRAVITY = 26; // ═══ LIGHTING (warm amber museum + blue laser accents) ═══════════ scene.add(new THREE.AmbientLight(0xffe8c8, 0.38)); scene.add(new THREE.HemisphereLight(0xffd9a0, 0x1a2033, 0.6)); const sun = new THREE.DirectionalLight(0xffe6b8, 1.15); sun.position.set(5, 14, 6); sun.castShadow = true; sun.shadow.mapSize.set(1024, 1024); sun.shadow.camera.left = -8; sun.shadow.camera.right = 8; sun.shadow.camera.top = 14; sun.shadow.camera.bottom = -4; sun.shadow.camera.near = 1; sun.shadow.camera.far = 30; scene.add(sun); // Warm gallery spotlight glow that travels with the player. const amber = new THREE.PointLight(0xffb84d, 1.5, 20, 1.6); amber.position.set(0, 3.2, 2); scene.add(amber); // Cold blue security-laser accents down the corridor. const blueA = new THREE.PointLight(0x3366ff, 1.1, 16, 1.8); blueA.position.set(-3, 2.6, 14); scene.add(blueA); const blueB = new THREE.PointLight(0x3366ff, 1.1, 16, 1.8); blueB.position.set(3, 2.6, 30); scene.add(blueB); // ═══ ENVIRONMENT (marble floor + columns + cases + accents) ══════ function buildMarbleTexture(): THREE.Texture { const c = document.createElement("canvas"); c.width = c.height = 256; const g = c.getContext("2d")!; // Cream marble base with soft mottling. g.fillStyle = "#e6dfd0"; g.fillRect(0, 0, 256, 256); for (let i = 0; i < 60; i++) { g.fillStyle = "rgba(190,180,160," + (0.05 + Math.random() * 0.08).toFixed(3) + ")"; const r = 8 + Math.random() * 26; g.beginPath(); g.arc(Math.random() * 256, Math.random() * 256, r, 0, Math.PI * 2); g.fill(); } // Grey veins. for (let i = 0; i < 14; i++) { g.strokeStyle = "rgba(120,115,105," + (0.14 + Math.random() * 0.18).toFixed(3) + ")"; g.lineWidth = 0.6 + Math.random() * 1.2; g.beginPath(); let x = Math.random() * 256; let y = Math.random() * 256; g.moveTo(x, y); for (let s = 0; s < 5; s++) { x += (Math.random() - 0.5) * 90; y += (Math.random() - 0.5) * 90; g.lineTo(x, y); } g.stroke(); } // Tile grout + thin gold inlay lines. g.strokeStyle = "rgba(90,80,65,0.55)"; g.lineWidth = 3; g.strokeRect(1, 1, 254, 254); g.strokeRect(1, 127, 254, 2); g.strokeStyle = "rgba(212,175,55,0.5)"; g.lineWidth = 1; g.strokeRect(5, 5, 246, 246); const tex = new THREE.CanvasTexture(c); tex.wrapS = tex.wrapT = THREE.RepeatWrapping; tex.repeat.set(2, SEGMENT_LEN / 4); tex.colorSpace = THREE.SRGBColorSpace; return tex; } const floorMat = new THREE.MeshStandardMaterial({ map: buildMarbleTexture(), roughness: 0.5, metalness: 0.08, }); const marbleMat = new THREE.MeshStandardMaterial({ color: 0xd8d0bd, roughness: 0.6, metalness: 0.1, }); const wallPanelMat = new THREE.MeshStandardMaterial({ color: 0x6e5a41, roughness: 0.8, metalness: 0.05, emissive: 0x241708, emissiveIntensity: 0.35, }); const goldTrimMat = new THREE.MeshStandardMaterial({ color: 0xffd700, roughness: 0.3, metalness: 0.85, emissive: 0xaa7700, emissiveIntensity: 0.5, }); const blueStripMat = new THREE.MeshBasicMaterial({ color: 0x3f7dff }); const caseGlassMat = new THREE.MeshStandardMaterial({ color: 0xbfe8ff, roughness: 0.05, metalness: 0.2, transparent: true, opacity: 0.28, }); const floorSegments: THREE.Mesh[] = []; const wallSegments: THREE.Group[] = []; function buildWallSide(x: number): THREE.Group { const side = new THREE.Group(); const dir = x < 0 ? 1 : -1; // Wall panel. const wall = new THREE.Mesh( new THREE.BoxGeometry(0.4, 5, SEGMENT_LEN), wallPanelMat, ); wall.position.set(x, 2.5, 0); side.add(wall); // Blue security-laser accent strip along the wall. const strip = new THREE.Mesh( new THREE.BoxGeometry(0.06, 0.07, SEGMENT_LEN), blueStripMat, ); strip.position.set(x + dir * 0.24, 3.4, 0); side.add(strip); // Two Greek columns per segment. for (const dz of [-SEGMENT_LEN / 4, SEGMENT_LEN / 4]) { const col = new THREE.Mesh( new THREE.CylinderGeometry(0.3, 0.36, 4.6, 10), marbleMat, ); col.position.set(x + dir * 0.55, 2.3, dz); col.castShadow = true; side.add(col); const cap = new THREE.Mesh(new THREE.BoxGeometry(0.9, 0.22, 0.9), marbleMat); cap.position.set(x + dir * 0.55, 4.68, dz); side.add(cap); const base = new THREE.Mesh(new THREE.BoxGeometry(0.95, 0.2, 0.95), marbleMat); base.position.set(x + dir * 0.55, 0.1, dz); side.add(base); } // Decorative glass display case against the wall (non-colliding). const podium = new THREE.Mesh(new THREE.BoxGeometry(0.7, 1.0, 0.7), marbleMat); podium.position.set(x + dir * 0.75, 0.5, 0); side.add(podium); const glass = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.6, 0.6), caseGlassMat); glass.position.set(x + dir * 0.75, 1.3, 0); side.add(glass); const relic = new THREE.Mesh(new THREE.IcosahedronGeometry(0.14, 0), goldTrimMat); relic.position.set(x + dir * 0.75, 1.3, 0); side.add(relic); return side; } for (let i = 0; i < NUM_SEGMENTS; i++) { const z = i * SEGMENT_LEN - 4; const floor = new THREE.Mesh(new THREE.PlaneGeometry(7, SEGMENT_LEN), floorMat); floor.rotation.x = -Math.PI / 2; floor.position.z = z; floor.receiveShadow = true; scene.add(floor); floorSegments.push(floor); for (const x of [-3.7, 3.7]) { const side = buildWallSide(x); side.position.z = z; scene.add(side); wallSegments.push(side); } } // ═══ PLAYER (Shadow - black outfit + fedora + eye mask) ══════════ const SKINS: Record = { classic: { name: "Classic Black", cost: 0, body: 0x121218, trim: 0x2a2a33 }, midnight: { name: "Midnight Blue", cost: 300, body: 0x101a3a, trim: 0x2b4a9e }, gold: { name: "Gold Trim", cost: 1500, body: 0x15120a, trim: 0xffd700 }, }; const player = new THREE.Group(); const figure = new THREE.Group(); // squashes for slide / bobs for run player.add(figure); const bodyMat = new THREE.MeshStandardMaterial({ color: 0x121218, roughness: 0.55, metalness: 0.15, }); const trimMat = new THREE.MeshStandardMaterial({ color: 0x2a2a33, roughness: 0.35, metalness: 0.5, emissive: 0x000000, emissiveIntensity: 0.3, }); const body = new THREE.Mesh(new THREE.CapsuleGeometry(0.32, 0.6, 6, 12), bodyMat); body.position.y = 0.5; body.castShadow = true; figure.add(body); // Utility belt (skin trim colour). const belt = new THREE.Mesh(new THREE.CylinderGeometry(0.34, 0.34, 0.08, 12), trimMat); belt.position.y = 0.5; figure.add(belt); // Skin-tone face. const faceMat = new THREE.MeshStandardMaterial({ color: 0xe8b98a, roughness: 0.7 }); const head = new THREE.Mesh(new THREE.SphereGeometry(0.21, 14, 12), faceMat); head.position.y = 1.18; head.castShadow = true; figure.add(head); // Black eye-mask band across the face. const maskMat = new THREE.MeshStandardMaterial({ color: 0x0a0a0e, roughness: 0.4 }); const mask = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.09, 0.12), maskMat); mask.position.set(0, 1.21, 0.15); figure.add(mask); // Black fedora: crown + brim, band in the skin trim colour. const hatMat = new THREE.MeshStandardMaterial({ color: 0x0c0c10, roughness: 0.45, metalness: 0.2, }); const hatCrown = new THREE.Mesh(new THREE.CylinderGeometry(0.19, 0.23, 0.2, 14), hatMat); hatCrown.position.y = 1.46; hatCrown.castShadow = true; figure.add(hatCrown); const hatBand = new THREE.Mesh(new THREE.CylinderGeometry(0.235, 0.24, 0.06, 14), trimMat); hatBand.position.y = 1.39; figure.add(hatBand); const hatBrim = new THREE.Mesh(new THREE.CylinderGeometry(0.4, 0.4, 0.035, 18), hatMat); hatBrim.position.y = 1.36; hatBrim.castShadow = true; figure.add(hatBrim); scene.add(player); // Asset-swap seam: on a store build with an injected `thief` GLB, the procedural // figure parts are hidden and the fitted model is added into `figure` (so it // still bobs / slides / jumps with the group). Swapped live in preloadAssets() // because the figure is built at boot, before the pack loads. On /play the // template is never present, so the procedural figure stays - nothing changes. const proceduralFigureParts: THREE.Object3D[] = [ body, belt, head, mask, hatCrown, hatBand, hatBrim, ]; let thiefModel: THREE.Object3D | null = null; function applyThiefModel(): void { const template = assetTemplates.get(ASSET_MODEL_KEYS.thief); if (!template || thiefModel) return; thiefModel = fitTemplate(template, 0.7, 1.55, 0.7, true); // runner footprint, feet at y=0 thiefModel.castShadow = true; for (const p of proceduralFigureParts) p.visible = false; figure.add(thiefModel); } function applySkin(id: string) { const s = SKINS[id] ?? SKINS.classic; bodyMat.color.setHex(s.body); trimMat.color.setHex(s.trim); trimMat.emissive.setHex(id === "gold" ? 0x664400 : 0x000000); } let lane = 1; let targetX = 0; let velocityY = 0; let isJumping = false; let isSliding = false; let slideTimer = 0; // ═══ INPUT (keyboard + touch swipe) ══════════════════════════════ function setLane(newLane: number) { lane = Math.max(0, Math.min(2, newLane)); targetX = LANE_X[lane]; } function jump() { if (!isJumping && !isSliding && state === "running") { velocityY = JUMP_VELOCITY; isJumping = true; } } function slide() { if (!isSliding && !isJumping && state === "running") { isSliding = true; slideTimer = 0.55; } } const onKeyDown = (e: KeyboardEvent) => { ensureAudio(); if (state === "menu" && (e.key === "Enter" || e.key === " ")) { startRun(); return; } if (state === "over" && (e.key === "Enter" || e.key === " ")) { showMenu(); return; } if (state !== "running") return; const k = e.key.toLowerCase(); if (e.key === "ArrowLeft" || k === "a") setLane(lane - 1); else if (e.key === "ArrowRight" || k === "d") setLane(lane + 1); else if (e.key === "ArrowUp" || k === "w" || e.key === " ") jump(); else if (e.key === "ArrowDown" || k === "s" || e.key === "Shift") slide(); }; window.addEventListener("keydown", onKeyDown); let touchX = 0, touchY = 0; renderer.domElement.addEventListener("touchstart", (e) => { ensureAudio(); touchX = e.touches[0].clientX; touchY = e.touches[0].clientY; }, { passive: true }); renderer.domElement.addEventListener("touchend", (e) => { if (state !== "running") return; const dx = e.changedTouches[0].clientX - touchX; const dy = e.changedTouches[0].clientY - touchY; if (Math.abs(dx) > Math.abs(dy)) { if (dx > 30) setLane(lane + 1); else if (dx < -30) setLane(lane - 1); } else { if (dy < -30) jump(); else if (dy > 30) slide(); } }, { passive: true }); renderer.domElement.addEventListener("pointerdown", () => ensureAudio()); // ═══ OBSTACLES (lasers + spotlights + glass cases + pedestals) ═══ type ObstacleKind = | "pedestal" // lane blocker - jump or dodge | "glassLow" // low glass case - jumpable | "glassTall" // tall glass case - must change lane | "floorLaser" // full-corridor ankle laser - jump | "overheadLaser" // full-corridor chest laser - slide | "gridLow" // lane laser grid, low - jump | "gridHigh" // lane laser grid, high - slide | "spotlight"; // sweeping guard spotlight - dodge the beam type Obstacle = { mesh: THREE.Object3D; kind: ObstacleKind; lane: number; // 0..2, or -1 = all lanes, -2 = sweeping phase?: number; // spotlight sweep phase swing?: THREE.Group; spin?: THREE.Object3D; }; const obstacles: Obstacle[] = []; const pedestalMat = new THREE.MeshStandardMaterial({ color: 0xd4cdb8, roughness: 0.55, metalness: 0.25, emissive: 0x3a2f1e, emissiveIntensity: 0.25, }); const redLaserMat = new THREE.MeshBasicMaterial({ color: 0xff3344, transparent: true, opacity: 0.9, }); const blueLaserMat = new THREE.MeshBasicMaterial({ color: 0x4488ff, transparent: true, opacity: 0.85, }); const spotConeMat = new THREE.MeshBasicMaterial({ color: 0xfff2b0, transparent: true, opacity: 0.22, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide, }); const spotDiscMat = new THREE.MeshBasicMaterial({ color: 0xfff6c8, transparent: true, opacity: 0.5, blending: THREE.AdditiveBlending, depthWrite: false, }); function buildPedestal(): { group: THREE.Group; artifact: THREE.Mesh } { const group = new THREE.Group(); // Asset-swap seam: swap the pedestal base for a fitted `pedestal` GLB when a // store build injected one; else the procedural marble box (unchanged on /play). // The gold trim + spinning artifact above stay procedural (artifact is the // spun `o.spin` ref), so they sit on top of either base. const pedestalTemplate = assetTemplates.get(ASSET_MODEL_KEYS.pedestal); if (pedestalTemplate) { group.add(fitTemplate(pedestalTemplate, 0.95, 1.4, 0.95, true)); } else { const base = new THREE.Mesh(new THREE.BoxGeometry(0.95, 1.4, 0.95), pedestalMat); base.position.y = 0.7; base.castShadow = true; base.receiveShadow = true; group.add(base); } const trim = new THREE.Mesh(new THREE.BoxGeometry(1.05, 0.08, 1.05), goldTrimMat); trim.position.y = 1.44; group.add(trim); const artifact = new THREE.Mesh(new THREE.IcosahedronGeometry(0.2, 0), goldTrimMat); artifact.position.y = 1.75; artifact.castShadow = true; group.add(artifact); return { group, artifact }; } function buildGlassCase(tall: boolean): THREE.Group { const group = new THREE.Group(); const h = tall ? 2.3 : 0.95; // Asset-swap seam: a store build's `glass_case` GLB replaces the whole // procedural case (frame + glass + lid + relic). /play has no template, so the // procedural case is built below unchanged. const glassTemplate = assetTemplates.get(ASSET_MODEL_KEYS.glass_case); if (glassTemplate) { group.add(fitTemplate(glassTemplate, 1.1, h + 0.2, 1.1, true)); return group; } const frame = new THREE.Mesh(new THREE.BoxGeometry(1.1, 0.12, 1.1), goldTrimMat); frame.position.y = 0.06; group.add(frame); const glass = new THREE.Mesh(new THREE.BoxGeometry(1.0, h, 1.0), caseGlassMat); glass.position.y = 0.12 + h / 2; group.add(glass); const lid = new THREE.Mesh(new THREE.BoxGeometry(1.1, 0.08, 1.1), goldTrimMat); lid.position.y = 0.14 + h; group.add(lid); const relic = new THREE.Mesh(new THREE.IcosahedronGeometry(0.16, 0), goldTrimMat); relic.position.y = tall ? 1.25 : 0.55; group.add(relic); return group; } function buildLaserGrid(high: boolean): THREE.Group { // Lane-width grid of red beams: low grid = jump over, high grid = slide under. const group = new THREE.Group(); // Asset-swap seam: a store build's `laser_grid` GLB replaces the procedural // beam-and-post grid. /play has no template, so the procedural grid is built // below unchanged. const laserTemplate = assetTemplates.get(ASSET_MODEL_KEYS.laser_grid); if (laserTemplate) { group.add(fitTemplate(laserTemplate, 1.9, high ? 2.2 : 1.1, 0.2, true)); return group; } const ys = high ? [1.1, 1.55, 2.0] : [0.25, 0.55, 0.85]; for (const y of ys) { const beam = new THREE.Mesh(new THREE.CylinderGeometry(0.035, 0.035, 1.9, 8), redLaserMat); beam.rotation.z = Math.PI / 2; beam.position.y = y; group.add(beam); } for (const x of [-0.95, 0.95]) { const post = new THREE.Mesh( new THREE.BoxGeometry(0.1, high ? 2.2 : 1.1, 0.1), new THREE.MeshStandardMaterial({ color: 0x333340, roughness: 0.4, metalness: 0.7 }), ); post.position.set(x, high ? 1.1 : 0.55, 0); group.add(post); } return group; } function buildSpotlight(): { group: THREE.Group; swing: THREE.Group } { const group = new THREE.Group(); const swing = new THREE.Group(); const cone = new THREE.Mesh(new THREE.ConeGeometry(1.0, 4.4, 18, 1, true), spotConeMat); cone.position.y = 2.2; swing.add(cone); const disc = new THREE.Mesh(new THREE.CircleGeometry(1.0, 20), spotDiscMat); disc.rotation.x = -Math.PI / 2; disc.position.y = 0.02; swing.add(disc); group.add(swing); return { group, swing }; } function spotlightX(o: Obstacle): number { return Math.sin(elapsed * 1.6 + (o.phase ?? 0)) * 2.2; } let nextSpawnZ = 18; // Natural spawning can be paused by the ?vdDebug playtest hook so headless // runs are deterministic. Always true in normal play. let spawnsEnabled = true; function spawnObstacleOfKind(kind: ObstacleKind, targetLane: number, z: number) { if (kind === "pedestal") { const { group, artifact } = buildPedestal(); group.position.set(LANE_X[targetLane], 0, z); scene.add(group); obstacles.push({ mesh: group, kind, lane: targetLane, spin: artifact }); } else if (kind === "glassLow" || kind === "glassTall") { const group = buildGlassCase(kind === "glassTall"); group.position.set(LANE_X[targetLane], 0, z); scene.add(group); obstacles.push({ mesh: group, kind, lane: targetLane }); } else if (kind === "floorLaser") { const m = new THREE.Mesh(new THREE.CylinderGeometry(0.06, 0.06, 7, 10), redLaserMat); m.rotation.z = Math.PI / 2; m.position.set(0, 0.25, z); scene.add(m); obstacles.push({ mesh: m, kind, lane: -1 }); } else if (kind === "overheadLaser") { const m = new THREE.Mesh(new THREE.CylinderGeometry(0.09, 0.09, 7, 10), blueLaserMat); m.rotation.z = Math.PI / 2; m.position.set(0, 1.5, z); scene.add(m); obstacles.push({ mesh: m, kind, lane: -1 }); } else if (kind === "gridLow" || kind === "gridHigh") { const group = buildLaserGrid(kind === "gridHigh"); group.position.set(LANE_X[targetLane], 0, z); scene.add(group); obstacles.push({ mesh: group, kind, lane: targetLane }); } else if (kind === "spotlight") { const { group, swing } = buildSpotlight(); group.position.set(0, 0, z); scene.add(group); obstacles.push({ mesh: group, kind, lane: -2, phase: Math.random() * Math.PI * 2, swing }); } } function spawnObstacle() { const z = nextSpawnZ; const targetLane = Math.floor(Math.random() * 3); const r = Math.random(); let kind: ObstacleKind; if (r < 0.20) kind = "pedestal"; else if (r < 0.32) kind = "glassLow"; else if (r < 0.42) kind = "glassTall"; else if (r < 0.56) kind = "floorLaser"; else if (r < 0.70) kind = "overheadLaser"; else if (r < 0.80) kind = "gridLow"; else if (r < 0.90) kind = "gridHigh"; else kind = "spotlight"; spawnObstacleOfKind(kind, targetLane, z); // Rare jewels ride shotgun with obstacles (see JEWELS). if (rarePending) { rarePending = false; const jl = kind === "floorLaser" || kind === "overheadLaser" || kind === "spotlight" ? Math.floor(Math.random() * 3) : (targetLane + 1 + Math.floor(Math.random() * 2)) % 3; spawnJewel("rare", jl, z - 1.6, null); } const gap = (4.6 + Math.random() * 2.4) * (alarmActive ? ALARM_SPAWN_MULT : 1); nextSpawnZ += gap; } // ═══ JEWELS (4 tiers + spawn rules + legendary cue) ══════════════ type JewelTier = "common" | "rare" | "epic" | "legendary"; const JEWEL_TIERS: Record = { common: { value: 1, color: 0x3ddc68, emissive: 0x1f8f3a, size: 0.28 }, rare: { value: 5, color: 0x2f9dff, emissive: 0x1360b0, size: 0.33 }, epic: { value: 20, color: 0xb44dff, emissive: 0x6a1fa8, size: 0.38 }, legendary: { value: 100, color: 0xffd700, emissive: 0xcc8800, size: 0.5 }, }; const jewelMats: Record = {} as never; for (const t of Object.keys(JEWEL_TIERS) as JewelTier[]) { const d = JEWEL_TIERS[t]; jewelMats[t] = new THREE.MeshStandardMaterial({ color: d.color, emissive: d.emissive, emissiveIntensity: 0.95, metalness: 0.9, roughness: 0.08, }); } type Jewel = { mesh: THREE.Object3D; tier: JewelTier; lane: number; need: "jump" | "slide" | null; // epic placement constraint baseY: number; beam?: THREE.Mesh; sparkle?: THREE.Points; }; const jewels: Jewel[] = []; function spawnJewel(tier: JewelTier, targetLane: number, z: number, need: "jump" | "slide" | null) { const d = JEWEL_TIERS[tier]; // Asset-swap seam: a store build's `jewel` GLB replaces the procedural gem, // fitted to this tier's size (all tiers share the one model; tier is still // read as value/color/size + legendary's beam cue). /play stays procedural. const jewelTemplate = assetTemplates.get(ASSET_MODEL_KEYS.jewel); let m: THREE.Object3D; if (jewelTemplate) { const s = d.size * 2; m = fitTemplate(jewelTemplate, s, s, s); } else { const geo = tier === "legendary" ? new THREE.OctahedronGeometry(d.size, 0) : new THREE.IcosahedronGeometry(d.size, 0); m = new THREE.Mesh(geo, jewelMats[tier]); } const baseY = need === "jump" ? 1.9 : need === "slide" ? 0.55 : 1.0; m.position.set(LANE_X[targetLane], baseY, z); m.castShadow = true; scene.add(m); const j: Jewel = { mesh: m, tier, lane: targetLane, need, baseY }; if (tier === "legendary") { // Unmissable cue: beam of light + sparkles + audio ping. const beam = new THREE.Mesh( new THREE.CylinderGeometry(0.5, 0.7, 9, 12, 1, true), new THREE.MeshBasicMaterial({ color: 0xffe9a0, transparent: true, opacity: 0.22, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide, }), ); beam.position.set(LANE_X[targetLane], 4.5, z); scene.add(beam); j.beam = beam; const pts = new Float32Array(120); for (let i = 0; i < 40; i++) { pts[i * 3] = (Math.random() - 0.5) * 1.4; pts[i * 3 + 1] = Math.random() * 3.2; pts[i * 3 + 2] = (Math.random() - 0.5) * 1.4; } const sparkGeo = new THREE.BufferGeometry(); sparkGeo.setAttribute("position", new THREE.BufferAttribute(pts, 3)); const sparkle = new THREE.Points(sparkGeo, new THREE.PointsMaterial({ color: 0xfff2b0, size: 0.09, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false, })); sparkle.position.set(LANE_X[targetLane], 0.4, z); scene.add(sparkle); j.sparkle = sparkle; playLegendaryPing(); } jewels.push(j); } function removeJewel(j: Jewel, idx: number) { scene.remove(j.mesh); if (j.beam) scene.remove(j.beam); if (j.sparkle) scene.remove(j.sparkle); jewels.splice(idx, 1); } // Spawn cadence (scrolled-world counters, like nextSpawnZ): // common every 3-5m in short same-lane runs, rare every 15-20m near // obstacles, epic every 40-50m gated behind a jump or slide. let nextCommonZ = 12; let commonRunLane = 1; let commonRunLeft = 4; let nextEpicZ = 55; let epicNeedsJump = true; let rareMeter = 15; // metres until the next rare is due let rarePending = false; let legendarySpawned = false; function spawnJewelsTick(dt: number) { if (!spawnsEnabled) return; nextCommonZ -= speed * dt; nextEpicZ -= speed * dt; rareMeter -= speed * dt; if (rareMeter <= 0 && !rarePending) { rarePending = true; // placed next to the next obstacle spawn rareMeter = 15 + Math.random() * 5; } while (nextCommonZ < 45) { spawnJewel("common", commonRunLane, nextCommonZ, null); nextCommonZ += 3 + Math.random() * 2; commonRunLeft -= 1; if (commonRunLeft <= 0) { commonRunLane = Math.floor(Math.random() * 3); commonRunLeft = 3 + Math.floor(Math.random() * 3); } } if (nextEpicZ < 45) { const l = Math.floor(Math.random() * 3); if (epicNeedsJump) { spawnJewel("epic", l, nextEpicZ, "jump"); } else { // Slide-under placement: pair the epic with an overhead laser. spawnObstacleOfKind("overheadLaser", 0, nextEpicZ); spawnJewel("epic", l, nextEpicZ, "slide"); } epicNeedsJump = !epicNeedsJump; nextEpicZ += 40 + Math.random() * 10; } // Legendary gold diamond: max 1 per run, only after 60s, placed safe. if (!legendarySpawned && elapsed > 60) { legendarySpawned = true; spawnJewel("legendary", Math.floor(Math.random() * 3), 42, null); } } // ═══ COMBO (consecutive pickups -> x1/x2/x3/x5 multiplier) ═══════ let comboCount = 0; function comboMult(): number { if (comboCount >= 50) return 5; if (comboCount >= 25) return 3; if (comboCount >= 10) return 2; return 1; } function onJewelCollected(tier: JewelTier) { const before = comboMult(); comboCount += 1; const mult = comboMult(); gems += 1; haul += JEWEL_TIERS[tier].value * mult; if (mult > before) { playTierUp(); popCombo(); } playPickup(tier); updateHud(); } function onJewelMissed() { if (comboCount > 0) { comboCount = 0; updateHud(); } } // ═══ ALARM (90s countdown -> alarm phase) ════════════════════════ let alarmActive = false; function alarmTick() { if (!alarmActive && elapsed >= ALARM_AT) { alarmActive = true; vignetteEl.style.display = "block"; timerEl.classList.add("vd-alarm"); startSiren(); } } // ═══ EXTRACTION (glowing gate at 500m + 4 outcomes) ══════════════ let gate: THREE.Group | null = null; type Outcome = { key: string; label: string; mult: number; haul: number; banked: number }; let lastOutcome: Outcome | null = null; function spawnGate(z: number) { const g = new THREE.Group(); const glowMat = new THREE.MeshBasicMaterial({ color: 0x66ffd0, transparent: true, opacity: 0.35, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide, }); for (const x of [-2.6, 2.6]) { const pillar = new THREE.Mesh(new THREE.BoxGeometry(0.6, 4.4, 0.6), goldTrimMat); pillar.position.set(x, 2.2, 0); pillar.castShadow = true; g.add(pillar); } const lintel = new THREE.Mesh(new THREE.BoxGeometry(5.8, 0.5, 0.7), goldTrimMat); lintel.position.y = 4.55; g.add(lintel); const portal = new THREE.Mesh(new THREE.PlaneGeometry(4.6, 4.2), glowMat); portal.position.y = 2.2; g.add(portal); const gateLight = new THREE.PointLight(0x66ffd0, 2.2, 16, 1.6); gateLight.position.set(0, 2.4, -1); g.add(gateLight); g.position.z = z; scene.add(g); gate = g; } function extractionTick(dt: number) { if (state !== "running") return; if (!gate && EXTRACT_AT - distance <= 60) { spawnGate(Math.max(6, EXTRACT_AT - distance)); } if (gate) { gate.position.z -= speed * dt; if (gate.position.z <= 0.5) endRun(false); } } function endRun(caught: boolean) { if (state !== "running") return; state = "over"; stopSiren(); const mult = caught ? (alarmActive ? 0.75 : 0.5) : (alarmActive ? 1.5 : 2); const label = caught ? (alarmActive ? "BUSTED DURING ALARM" : "BUSTED") : (alarmActive ? "ESCAPE DURING ALARM" : "CLEAN ESCAPE"); const banked = Math.round(haul * mult); save.wallet += banked; saveGame(); lastOutcome = { key: caught ? "busted" : "escape", label, mult, haul, banked }; if (caught) playBust(); else playFanfare(); showSummary(lastOutcome); } // ═══ HUD (jewels + gems + distance + combo + alarm timer) ════════ const hud = document.createElement("div"); hud.style.cssText = "position:absolute;inset:0;pointer-events:none;font:600 18px ui-sans-serif,system-ui,-apple-system;" + "color:#fff;text-shadow:0 1px 4px rgba(0,0,0,0.7);z-index:10;"; hud.innerHTML = `

◆ 0

90s

0 gems

`; root.appendChild(hud); const haulEl = hud.querySelector("#vd-haul") as HTMLElement; const gemsEl = hud.querySelector("#vd-gems") as HTMLElement; const distEl = hud.querySelector("#vd-distance") as HTMLElement; const comboEl = hud.querySelector("#vd-combo") as HTMLElement; const timerEl = hud.querySelector("#vd-timer") as HTMLElement; // Red pulsing screen-edge vignette for the alarm phase. const vignetteEl = document.createElement("div"); vignetteEl.style.cssText = "position:absolute;inset:0;display:none;pointer-events:none;z-index:9;" + "box-shadow:inset 0 0 130px 45px rgba(255,10,50,0.55);" + "animation:vd-pulse 0.45s ease-in-out infinite alternate;"; root.appendChild(vignetteEl); function updateHud() { haulEl.textContent = String(haul); gemsEl.textContent = String(gems); distEl.textContent = String(Math.floor(distance)); comboEl.textContent = "x" + comboMult() + (comboCount > 0 ? " (" + comboCount + ")" : ""); const left = Math.max(0, Math.ceil(ALARM_AT - elapsed)); timerEl.textContent = alarmActive ? "ALARM" : left + "s"; } function popCombo() { comboEl.classList.remove("vd-popping"); // Force a reflow so the pop animation re-triggers on every tier-up. void comboEl.offsetWidth; comboEl.classList.add("vd-popping"); } // ═══ WALLET (localStorage bank + skin shop + menus) ══════════════ const SAVE_KEY = "vault-dash-save-v1"; type SaveData = { wallet: number; owned: string[]; selected: string }; function loadGame(): SaveData { try { const raw = localStorage.getItem(SAVE_KEY); if (raw) { const p = JSON.parse(raw); if (p && typeof p.wallet === "number" && Array.isArray(p.owned)) return p; } } catch { /* sandboxed iframe - fall through to defaults */ } return { wallet: 0, owned: ["classic"], selected: "classic" }; } function saveGame() { try { localStorage.setItem(SAVE_KEY, JSON.stringify(save)); } catch { /* ignore */ } } const save = loadGame(); if (!SKINS[save.selected] || !save.owned.includes(save.selected)) save.selected = "classic"; applySkin(save.selected); const menuEl = document.createElement("div"); menuEl.style.cssText = "position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;" + "background:radial-gradient(circle, rgba(20,12,4,0.72) 0%, rgba(8,5,2,0.94) 75%);" + "font:600 16px ui-sans-serif,system-ui;color:#fff;z-index:30;cursor:pointer;text-align:center;"; root.appendChild(menuEl); function renderMenu() { const skinBtns = Object.keys(SKINS).map((id) => { const s = SKINS[id]; const owned = save.owned.includes(id); const sel = save.selected === id; const swatch = "#" + s.body.toString(16).padStart(6, "0"); const trim = "#" + s.trim.toString(16).padStart(6, "0"); const label = sel ? "EQUIPPED" : owned ? "OWNED" : "◆ " + s.cost; return ( '

" + '

' + '

' + s.name + "

" + '

' + label + "

" + "

" ); }).join(""); menuEl.innerHTML = '

VAULT DASH

' + '

JEWEL HEIST

' + '

Wallet: ◆ ' + save.wallet + "

" + '

' + skinBtns + "

" + '

START HEIST

' + '

Arrows / WASD / swipe · reach 500m before the 90s alarm

'; const startBtn = menuEl.querySelector("#vd-start") as HTMLElement; startBtn.addEventListener("click", (e) => { e.stopPropagation(); startRun(); }); menuEl.querySelectorAll("[data-skin]").forEach((el) => { el.addEventListener("click", (e) => { e.stopPropagation(); const id = (el as HTMLElement).dataset.skin!; const s = SKINS[id]; if (save.owned.includes(id)) { save.selected = id; } else if (save.wallet >= s.cost) { save.wallet -= s.cost; save.owned.push(id); save.selected = id; } saveGame(); applySkin(save.selected); renderMenu(); }); }); } const summaryEl = document.createElement("div"); summaryEl.style.cssText = "position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;" + "background:radial-gradient(circle, rgba(80,0,30,0.72) 0%, rgba(15,0,5,0.94) 70%);" + "font:600 17px ui-sans-serif,system-ui;color:#fff;z-index:30;cursor:pointer;text-align:center;"; root.appendChild(summaryEl); summaryEl.addEventListener("click", () => showMenu()); summaryEl.addEventListener("touchend", () => showMenu(), { passive: true }); function showSummary(o: Outcome) { const good = o.key === "escape"; summaryEl.innerHTML = '

' + o.label + "

" + '

Haul ◆ ' + o.haul + " × " + o.mult + " = ◆ " + o.banked + " banked

" + '

' + gems + " gems · " + Math.floor(distance) + "m · combo x" + comboMult() + "

" + '

Wallet: ◆ ' + save.wallet + "

" + '

TAP TO CONTINUE

'; summaryEl.style.display = "flex"; } // ═══ AUDIO (WebAudio synth - no external files) ══════════════════ let audioCtx: AudioContext | null = null; let sirenOsc: OscillatorNode | null = null; let sirenLfo: OscillatorNode | null = null; let sirenGain: GainNode | null = null; function ensureAudio() { if (!audioCtx) { try { const Ctor = window.AudioContext ?? (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext; if (Ctor) audioCtx = new Ctor(); } catch { /* audio unavailable - play silent */ } } if (audioCtx && audioCtx.state === "suspended") void audioCtx.resume(); } function blip(freq: number, dur = 0.09, type: OscillatorType = "sine", gain = 0.12, delay = 0) { if (!audioCtx) return; const t0 = audioCtx.currentTime + delay; const osc = audioCtx.createOscillator(); const g = audioCtx.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, t0); g.gain.setValueAtTime(gain, t0); g.gain.exponentialRampToValueAtTime(0.0001, t0 + dur); osc.connect(g).connect(audioCtx.destination); osc.start(t0); osc.stop(t0 + dur + 0.02); } function playPickup(tier: JewelTier) { const base = { common: 620, rare: 760, epic: 920, legendary: 1100 }[tier]; blip(base, 0.08, "sine", 0.1); if (tier !== "common") blip(base * 1.5, 0.1, "sine", 0.08, 0.05); } function playTierUp() { blip(520, 0.09, "square", 0.07); blip(660, 0.09, "square", 0.07, 0.09); blip(880, 0.12, "square", 0.07, 0.18); } function playLegendaryPing() { blip(1320, 0.4, "sine", 0.12); blip(1760, 0.5, "sine", 0.08, 0.12); } function playBust() { blip(300, 0.25, "sawtooth", 0.12); blip(180, 0.4, "sawtooth", 0.12, 0.12); } function playFanfare() { blip(660, 0.14, "triangle", 0.12); blip(880, 0.14, "triangle", 0.12, 0.14); blip(1320, 0.3, "triangle", 0.12, 0.28); } function startSiren() { if (!audioCtx || sirenOsc) return; sirenOsc = audioCtx.createOscillator(); sirenLfo = audioCtx.createOscillator(); sirenGain = audioCtx.createGain(); const lfoGain = audioCtx.createGain(); sirenOsc.type = "sawtooth"; sirenOsc.frequency.value = 700; sirenLfo.frequency.value = 1.4; lfoGain.gain.value = 180; sirenLfo.connect(lfoGain).connect(sirenOsc.frequency); sirenGain.gain.value = 0.035; sirenOsc.connect(sirenGain).connect(audioCtx.destination); sirenOsc.start(); sirenLfo.start(); } function stopSiren() { try { sirenOsc?.stop(); sirenLfo?.stop(); sirenGain?.disconnect(); } catch { /* already stopped */ } sirenOsc = null; sirenLfo = null; sirenGain = null; } // ═══ GAME OVER (bust + in-place reset - no page reload) ══════════ let state: "menu" | "running" | "over" = "menu"; let haul = 0; // jewel value collected this run (with combo multipliers) let gems = 0; // raw jewel count this run let distance = 0; let elapsed = 0; let speed = 14; function bust() { endRun(true); } function resetRun() { for (let i = obstacles.length - 1; i >= 0; i--) scene.remove(obstacles[i].mesh); obstacles.length = 0; for (let i = jewels.length - 1; i >= 0; i--) removeJewel(jewels[i], i); if (gate) { scene.remove(gate); gate = null; } haul = 0; gems = 0; distance = 0; elapsed = 0; speed = 14; comboCount = 0; lane = 1; targetX = 0; velocityY = 0; isJumping = false; isSliding = false; slideTimer = 0; alarmActive = false; legendarySpawned = false; rarePending = false; rareMeter = 15; spawnsEnabled = true; nextSpawnZ = 18; nextCommonZ = 12; nextEpicZ = 55; epicNeedsJump = true; commonRunLane = 1; commonRunLeft = 4; lastOutcome = null; player.position.set(0, 0, 0); figure.scale.y = 1; figure.position.y = 0; stopSiren(); vignetteEl.style.display = "none"; timerEl.classList.remove("vd-alarm"); updateHud(); } function startRun() { resetRun(); menuEl.style.display = "none"; summaryEl.style.display = "none"; state = "running"; } function showMenu() { state = "menu"; resetRun(); summaryEl.style.display = "none"; renderMenu(); menuEl.style.display = "flex"; } // ═══ GAME LOOP ═══════════════════════════════════════════════════ const clock = new THREE.Clock(); let rafId = 0; function tick() { const dt = Math.min(clock.getDelta(), 0.1); if (state === "running") { elapsed += dt; alarmTick(); speed = Math.min(30, 14 + distance / 60) * (alarmActive ? ALARM_SPEED_MULT : 1); distance += speed * dt; // Lane snap (smooth toward target x). player.position.x += (targetX - player.position.x) * Math.min(1, dt * 12); camera.position.x += (player.position.x * 0.35 - camera.position.x) * Math.min(1, dt * 4); camera.lookAt(player.position.x * 0.25, 1.4, player.position.z + 8); // Gravity + jump. velocityY -= GRAVITY * dt; player.position.y = Math.max(0, player.position.y + velocityY * dt); if (player.position.y === 0) { velocityY = 0; isJumping = false; } // Slide squash / run bob (whole figure so the fedora dips too). if (isSliding) { slideTimer -= dt; figure.scale.y = 0.52; figure.position.y = 0; if (slideTimer <= 0) { isSliding = false; figure.scale.y = 1; } } else if (!isJumping) { figure.position.y = Math.abs(Math.sin(distance * 0.9)) * 0.06; } else { figure.position.y = 0; } // Recycle floor + wall segments forward. for (const seg of floorSegments) { seg.position.z -= speed * dt; if (seg.position.z < -SEGMENT_LEN) seg.position.z += NUM_SEGMENTS * SEGMENT_LEN; } for (const side of wallSegments) { side.position.z -= speed * dt; if (side.position.z < -SEGMENT_LEN) side.position.z += NUM_SEGMENTS * SEGMENT_LEN; } // Obstacles: scroll, animate, collide. nextSpawnZ -= speed * dt; for (let i = obstacles.length - 1; i >= 0; i--) { const o = obstacles[i]; const prevZ = o.mesh.position.z; o.mesh.position.z -= speed * dt; if (o.spin) { o.spin.rotation.y += dt * 2; o.spin.position.y = 1.75 + Math.sin(distance * 2 + i) * 0.04; } if (o.kind === "spotlight" && o.swing) { o.swing.position.x = spotlightX(o); } // Swept check: collide if the obstacle crossed the player window // [-0.6, 0.6] this frame - a single position sample can tunnel // straight through at alarm speed on low-FPS devices. if (o.mesh.position.z < 0.6 && prevZ > -0.6) { const ph = player.position.y; if (o.kind === "spotlight") { if (Math.abs(spotlightX(o) - player.position.x) < 0.85) bust(); } else if (o.lane === -1 || o.lane === lane) { if (o.kind === "pedestal" && ph < 1.2) bust(); else if (o.kind === "glassLow" && ph < 0.85) bust(); else if (o.kind === "glassTall" && ph < 2.1) bust(); else if (o.kind === "floorLaser" && ph < 0.35) bust(); else if (o.kind === "overheadLaser" && !isSliding && ph < 1.2) bust(); else if (o.kind === "gridLow" && ph < 0.9) bust(); else if (o.kind === "gridHigh" && !isSliding && ph < 1.2) bust(); } } if (o.mesh.position.z < -4) { scene.remove(o.mesh); obstacles.splice(i, 1); } } // Keep the corridor stocked, but stop spawning past the gate. while (nextSpawnZ < 45 && !gate && spawnsEnabled) spawnObstacle(); // Jewels: scroll, animate, collect, miss. spawnJewelsTick(dt); for (let i = jewels.length - 1; i >= 0; i--) { const j = jewels[i]; const prevZ = j.mesh.position.z; j.mesh.position.z -= speed * dt; j.mesh.rotation.y += dt * 3; j.mesh.rotation.x += dt * 1.5; j.mesh.position.y = j.baseY + Math.sin(distance * 1.5 + i) * 0.08; if (j.beam) { j.beam.position.z = j.mesh.position.z; j.beam.rotation.y += dt * 0.6; } if (j.sparkle) { j.sparkle.position.z = j.mesh.position.z; j.sparkle.rotation.y += dt * 1.2; } if (j.mesh.position.z < 0.8 && prevZ > -0.8 && j.lane === lane) { const ok = j.need === "jump" ? player.position.y > 0.75 : j.need === "slide" ? isSliding : player.position.y < 1.3; if (ok) { onJewelCollected(j.tier); removeJewel(j, i); continue; } } if (j.mesh.position.z < -1.5) { // Passed behind the player uncollected -> combo resets. onJewelMissed(); removeJewel(j, i); } } extractionTick(dt); updateHud(); } renderer.render(scene, camera); rafId = requestAnimationFrame(tick); } // One-time boot preload. Fills assetTemplates from the injected pack; on /play // every getModel() is null so the cache stays empty (zero visual change). When a // thief model loads it is swapped into the already-built figure; obstacle + jewel // factories read the cache naturally on their next spawn. async function preloadAssets(): Promise { try { for (const key of Object.values(ASSET_MODEL_KEYS)) { const model = await Assets.getModel(key); if (model) assetTemplates.set(key, model); } } catch (_e) { /* any failure -> everything stays procedural */ } applyThiefModel(); } showMenu(); tick(); // No-op on /play (no window.MCPityAssets). Runs after boot so a store build's // injected pack swaps in over the procedural defaults. void preloadAssets(); // ── Debug hook (only with ?vdDebug in the URL - harmless in prod) ── let debugEnabled = false; try { debugEnabled = new URLSearchParams(window.location.search).has("vdDebug"); } catch { /* srcdoc */ } if (debugEnabled) { (window as unknown as { __VAULT_DASH__?: object }).__VAULT_DASH__ = { get state() { return state; }, get distance() { return distance; }, get lane() { return lane; }, get jumping() { return isJumping; }, get sliding() { return isSliding; }, get alarm() { return alarmActive; }, get timeLeft() { return Math.max(0, ALARM_AT - elapsed); }, get combo() { return comboCount; }, get comboMult() { return comboMult(); }, get gems() { return gems; }, get haul() { return haul; }, get wallet() { return save.wallet; }, get speedMult() { return alarmActive ? ALARM_SPEED_MULT : 1; }, get outcome() { return lastOutcome; }, forceTime(t: number) { elapsed = t; }, setDistance(d: number) { distance = d; }, spawnJewel(l?: number, tier?: JewelTier) { spawnJewel(tier ?? "common", l ?? lane, 6, null); }, spawnObstacle(kind?: ObstacleKind, l?: number) { spawnObstacleOfKind(kind ?? "glassTall", l ?? lane, 6); }, setSpawns(on: boolean) { spawnsEnabled = on; if (!on) { for (let i = obstacles.length - 1; i >= 0; i--) scene.remove(obstacles[i].mesh); obstacles.length = 0; for (let i = jewels.length - 1; i >= 0; i--) removeJewel(jewels[i], i); } }, start() { startRun(); }, }; } // ── Resize + iframe hot-reload cleanup ────────────────────────── const onResize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }; window.addEventListener("resize", onResize); (window as { __mcpity_dispose?: () => void }).__mcpity_dispose = () => { cancelAnimationFrame(rafId); window.removeEventListener("keydown", onKeyDown); window.removeEventListener("resize", onResize); stopSiren(); try { void audioCtx?.close(); } catch { /* ignore */ } renderer.dispose(); renderer.forceContextLoss(); hud.remove(); vignetteEl.remove(); menuEl.remove(); summaryEl.remove(); };