// ============================================================ // Wreck Room - 2D Physics Playground (Melon-Sandbox style, CORE) // MCPity Web Engine - Three.js render + cannon-es physics on z=0 // // Architecture follows the proven fruit-merger 2D template: // - bare imports "three" + "cannon-es" (resolved by the iframe // import map -> esm.sh/three@0.168.0, esm.sh/cannon-es@0.20.0) // - cannon-es world stepped at fixed 1/60 with accumulator, // maxSubSteps 3; all dynamic bodies locked to the z=0 plane // (position.z=0, velocity.z=0, angular x/y=0, quaternion // constrained to z rotation) after every physics substep // - top-level async boot(), window.__mcpity_dispose registered // for hot-reload cleanup, canvas mounted into #mcpity-root // // Friendly cartoon sandbox. NO blood / gore - impacts spawn comic // stars + "BONK!" pops instead. // ============================================================ import * as THREE from "three"; import * as CANNON from "cannon-es"; /* --------------------------------------------------------------------------- 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/wreck-room/store-boot.ts), else returns null so every hero prop factory takes its procedural branch. On /play there is no MCPityAssets, so getModel() resolves to null and NOTHING changes - every prop stays 100% procedural and the cannon-es physics is untouched. ------------------------------------------------------------------------- */ 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; }, }; // Hero-prop model keys the store-build asset pack can inject (see // asset-manifest.json + ASSETS.md). One per single-body destructible prop; each // swaps only that prop's VISUAL, never its physics collider. The `ragdoll` key // is intentionally NOT wired (a rigged dummy maps to 11 independent physics // bodies + ConeTwist joints, which a single GLB clone cannot drive) - see // ASSETS.md. const HERO_MODEL_KEYS = [ "wrecking_ball", "crate", "barrel", "tnt", "plank", "money_bag", "glass_case", ]; // ─── Tunables ─────────────────────────────────────────────────────────────── const ROOM_HALF_W = 4.2; // playable half-width (walls just outside) const ROOM_H = 18; // invisible ceiling height (contains flicks) const VIEW_H = 12; // vertical world units the camera frames const VIEW_W = 9.6; // minimum horizontal world units framed const FIXED_DT = 1 / 60; const MAX_SUBSTEPS = 3; const MAX_BODIES = 200; // dynamic-body cap (ragdoll counts as its parts) const SLOWMO_FACTOR = 0.25; const IMPACT_SPEED_THRESHOLD = 5; // relative normal speed for comic FX const IMPACT_FX_COOLDOWN_MS = 90; const GRAVITY_DEFAULT = 9.82; // downward-positive, slider range -5..25 type ItemType = | "ragdoll" | "crate" | "plank" | "barrel" | "tnt" | "wreckingball" | "rope" | "trampoline" | "fan" | "balloon" | "glasscase" | "moneybag" | "tripwire"; // ── Phase-2 tunables ──────────────────────────────────────────────────────── const BARREL_RADIUS = 4; // blast radius (world units) const BARREL_POWER = 26; // impulse at blast center, linear falloff const BARREL_PRIME_TIME = 0.5; // warning-flash seconds before detonation const BARREL_IMPACT_SPEED = 9; // hard-impact speed that primes a barrel const TNT_RADIUS = 5.5; // bigger + stronger than the barrel const TNT_POWER = 48; const TNT_FUSE_TIME = 2.0; // sparking-fuse seconds const FAN_HEIGHT = 6; // wind column height above the fan const FAN_HALF_W = 0.7; // wind column half-width const FAN_ACCEL = 30; // m/s^2 at the fan mouth, linear falloff with height const BALLOON_LIFT = 3.0; // buoyant accel beyond current gravity const BALLOON_MAX_RISE = 2.6; // terminal rise speed const BALLOON_POP_SPEED = 8; // sharp-impact speed that pops a balloon const TRIP_RADIUS = 6; // tripwire ignition radius const GLASS_BREAK_SPEED = 7; // impact speed that shatters the glass case const BAG_SPILL_SPEED = 7; // impact speed that spills coins const CUT_RADIUS = 0.6; // cut-tool pick radius (world units) const CONFETTI_COLORS = ["#ef5350", "#ab47bc", "#29b6f6", "#ffca28", "#66bb6a", "#ff8a65"]; const BALLOON_COLORS = ["#ef5350", "#ab47bc", "#29b6f6", "#ffca28", "#66bb6a"]; interface Item { id: number; // stable id (survives despawns / index shifts) type: ItemType; bodies: CANNON.Body[]; // DYNAMIC bodies (count toward MAX_BODIES) partNames: string[]; // parallel to bodies visuals: THREE.Object3D[]; // parallel to bodies (synced from physics) staticBodies: CANNON.Body[]; // anchors / pads / posts (not capped) extraVisuals: THREE.Object3D[]; // static or manually-animated visuals constraints: CANNON.Constraint[]; spawnedAt: number; state: string; // "idle" | "fused" | "primed" | "jewel" | ... data: Record; update?: (dt: number) => void; // per-frame behavior, SIM-time dt onIgnite?: () => void; // ignite-tool response } function baseItem(type: ItemType): Item { return { id: 0, type, bodies: [], partNames: [], visuals: [], staticBodies: [], extraVisuals: [], constraints: [], spawnedAt: performance.now(), state: "idle", data: {}, }; } // ─── Boot ─────────────────────────────────────────────────────────────────── async function boot() { const mount = document.getElementById("mcpity-root"); if (!mount) throw new Error("Wreck Room: #mcpity-root not found"); // ── Renderer / scene / camera ──────────────────────────────────────────── const renderer = new THREE.WebGLRenderer({ antialias: false }); // Dynamic shadows from one key light: small map + tight bounds (see below). renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFShadowMap; // Adaptive resolution: on weak GPUs (low-end phones, software GL) we step // the internal render scale down (never below 0.45) until the frame rate // recovers; the canvas CSS keeps it full-size. Real GPUs stay at 1.0. let renderScale = 1; const basePixelRatio = Math.min(window.devicePixelRatio || 1, 2); function applyRenderSize() { const w = mount!.clientWidth || 640; const h = mount!.clientHeight || 480; renderer.setPixelRatio(basePixelRatio * renderScale); renderer.setSize(w, h, false); renderer.domElement.style.width = "100%"; renderer.domElement.style.height = "100%"; } applyRenderSize(); mount.appendChild(renderer.domElement); const canvas = renderer.domElement; canvas.style.touchAction = "none"; const scene = new THREE.Scene(); scene.background = makeGradientTexture("#cfe8ff", "#f6ecff"); // Subtle perspective camera: slightly elevated + tilted down so the floor // recedes and object volume reads, while gameplay stays 2D on the z=0 plane. const CAM_FOV = 40; // degrees, vertical const CAM_TILT = 0.2; // rad, downward tilt const CAM_TARGET_Y = VIEW_H / 2 - 1.6; const camera = new THREE.PerspectiveCamera(CAM_FOV, 1, 0.1, 120); function placeCamera(aspect: number) { const tanV = Math.tan((CAM_FOV * Math.PI) / 360); // Fit the room at the z=0 plane: VIEW_H tall, at least VIEW_W wide, with // margin for the tilt (same fit rule the old flat framing used). const distH = (VIEW_H / 2 + 1.0) / tanV; const distW = (VIEW_W / 2 + 0.55) / (tanV * aspect); const dist = Math.max(distH, distW); camera.aspect = aspect; camera.position.set(0, CAM_TARGET_Y + Math.sin(CAM_TILT) * dist, Math.cos(CAM_TILT) * dist); camera.lookAt(0, CAM_TARGET_Y, 0); camera.updateProjectionMatrix(); } function resize() { const w = mount!.clientWidth || 640; const h = mount!.clientHeight || 480; applyRenderSize(); placeCamera(w / h); } resize(); window.addEventListener("resize", resize); // Hemisphere fill + one shadow-casting key light (map <=1024, tight bounds). const hemi = new THREE.HemisphereLight(0xffffff, 0x9fb0c8, 0.95); scene.add(hemi); const key = new THREE.DirectionalLight(0xffffff, 0.85); key.position.set(6, 13, 9); key.castShadow = true; key.shadow.mapSize.set(768, 768); key.shadow.camera.left = -9; key.shadow.camera.right = 9; key.shadow.camera.top = 12; key.shadow.camera.bottom = -9; key.shadow.camera.near = 1; key.shadow.camera.far = 45; key.shadow.bias = -0.0015; key.shadow.normalBias = 0.02; key.target.position.set(0, 3, 0); scene.add(key.target); scene.add(key); let shadowsOn = true; // ── Shared geometries / materials (reused across all spawns) ──────────── const GEO = { box: new THREE.BoxGeometry(1, 1, 1), sphere: new THREE.SphereGeometry(1, 18, 14), cylinder: new THREE.CylinderGeometry(1, 1, 1, 20), plane: new THREE.PlaneGeometry(1, 1), // Faceted gem (glassy jewel) + one shared capsule for all ragdoll limbs: // CapsuleGeometry(1, 2) is 4 tall total, and every limb is ~4:1 long, so // scale (r, L/4, r) keeps the caps round. icosa: new THREE.IcosahedronGeometry(1, 0), capsule: new THREE.CapsuleGeometry(1, 2, 4, 12), }; const matCache = new Map(); function mat(color: string): THREE.MeshLambertMaterial { let m = matCache.get(color); if (!m) { m = new THREE.MeshLambertMaterial({ color }); matCache.set(color, m); } return m; } const crateMat = new THREE.MeshLambertMaterial({ map: makeCrateTexture() }); const plankMat = new THREE.MeshLambertMaterial({ map: makePlankTexture() }); const tntMat = new THREE.MeshLambertMaterial({ map: makeTntTexture() }); const glassMat = new THREE.MeshLambertMaterial({ color: "#b3e5fc", transparent: true, opacity: 0.35 }); const moneyDecalMat = new THREE.MeshBasicMaterial({ map: makeMoneyTexture(), transparent: true }); // The two hero materials that want real speculars (shared instances): const ballMetalMat = new THREE.MeshStandardMaterial({ color: "#8a9ba8", metalness: 0.55, roughness: 0.35 }); const jewelMat = new THREE.MeshStandardMaterial({ color: "#e040fb", metalness: 0.15, roughness: 0.18, flatShading: true, emissive: 0x5e0a75, emissiveIntensity: 0.35, transparent: true, opacity: 0.92, }); const shineMat = new THREE.MeshBasicMaterial({ color: "#ffffff", transparent: true, opacity: 0.75 }); // ── Static room visuals ────────────────────────────────────────────────── const staticVisuals: THREE.Object3D[] = []; function addStaticMesh(mesh: THREE.Object3D) { scene.add(mesh); staticVisuals.push(mesh); } // Room surfaces are now LIT (Lambert) so the key light + shadows model the // depth; the name bmat is kept to avoid touching every call site. const basicCache = new Map(); function bmat(color: string): THREE.MeshLambertMaterial { let m = basicCache.get(color); if (!m) { m = new THREE.MeshLambertMaterial({ color }); basicCache.set(color, m); } return m; } // Back wall (visual only) - warm cream, pushed back so the floor recedes. const backWall = new THREE.Mesh(GEO.plane, new THREE.MeshLambertMaterial({ map: makeBackWallTexture() })); backWall.scale.set(ROOM_HALF_W * 2 + 3.6, VIEW_H + 8, 1); backWall.position.set(0, (VIEW_H + 8) / 2 - 1.2, -2.6); // NOTE: only the FLOOR receives shadows (contact shadows). Wall receive is // skipped on purpose: it doubles the shadow-sampling screen area for a // muddier look, and software-GL fallbacks pay dearly for full-screen PCF. addStaticMesh(backWall); // Baseboard along the back wall. const baseboard = new THREE.Mesh(GEO.box, bmat("#c9a06a")); baseboard.scale.set(ROOM_HALF_W * 2 + 3.6, 0.42, 0.12); baseboard.position.set(0, 0.21, -2.52); addStaticMesh(baseboard); // Floor slab with plank texture, deep enough to visibly recede. const floorMat = new THREE.MeshLambertMaterial({ map: makeFloorTexture() }); const floorMesh = new THREE.Mesh(GEO.box, floorMat); floorMesh.scale.set(ROOM_HALF_W * 2 + 2.4, 1.2, 5.2); floorMesh.position.set(0, -0.6, -0.3); floorMesh.receiveShadow = true; addStaticMesh(floorMesh); const floorTrim = new THREE.Mesh(GEO.box, bmat("#d19a4a")); floorTrim.scale.set(ROOM_HALF_W * 2 + 2.4, 0.12, 5.22); floorTrim.position.set(0, -0.02, -0.28); addStaticMesh(floorTrim); // Side walls (thick pillars: box + cap sphere for a soft look). for (const side of [-1, 1]) { const wall = new THREE.Mesh(GEO.box, bmat("#8fb8de")); wall.scale.set(1.0, VIEW_H + 2, 3.6); wall.position.set(side * (ROOM_HALF_W + 0.5), (VIEW_H + 2) / 2 - 1, -0.6); addStaticMesh(wall); const cap = new THREE.Mesh(GEO.sphere, bmat("#8fb8de")); cap.scale.set(0.5, 0.5, 0.5); cap.position.set(side * (ROOM_HALF_W + 0.5), VIEW_H + 1, -0.6); addStaticMesh(cap); } // ── Physics world ──────────────────────────────────────────────────────── const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -GRAVITY_DEFAULT, 0) }); world.broadphase = new CANNON.SAPBroadphase(world); world.allowSleep = true; (world.solver as CANNON.GSSolver).iterations = 10; world.defaultContactMaterial.friction = 0.4; world.defaultContactMaterial.restitution = 0.15; const staticMat = new CANNON.Material("static"); const dynMat = new CANNON.Material("dyn"); // shared by all dynamic bodies const trampMat = new CANNON.Material("tramp"); // trampoline pad (bouncy) // dyn <-> dyn and dyn <-> static pairs fall back to defaultContactMaterial // (friction 0.4, restitution 0.15) - identical to phase-1 behavior. world.addContactMaterial(new CANNON.ContactMaterial(dynMat, trampMat, { friction: 0.3, restitution: 0.75 })); function addStaticBox(hx: number, hy: number, hz: number, x: number, y: number) { const b = new CANNON.Body({ type: CANNON.Body.STATIC, material: staticMat }); b.addShape(new CANNON.Box(new CANNON.Vec3(hx, hy, hz))); b.position.set(x, y, 0); world.addBody(b); return b; } // Floor top at y=0; walls just outside ROOM_HALF_W; ceiling contains flicks. addStaticBox(ROOM_HALF_W + 2, 1, 4, 0, -1); addStaticBox(1, ROOM_H, 4, -(ROOM_HALF_W + 1), ROOM_H / 2); addStaticBox(1, ROOM_H, 4, ROOM_HALF_W + 1, ROOM_H / 2); addStaticBox(ROOM_HALF_W + 2, 1, 4, 0, ROOM_H + 1); // ── Sim state ──────────────────────────────────────────────────────────── const items: Item[] = []; let dynamicBodyCount = 0; let gravityG = GRAVITY_DEFAULT; // downward-positive let slowmo = false; let disposed = false; const pickMeshes: THREE.Mesh[] = []; // raycast targets, userData.body/.itemId set let nextItemId = 1; // Collide-triggered actions (shatter / coin spill / trampoline boost / pops) // are queued during the physics step and executed right after it. const deferred: (() => void)[] = []; // Fuse-expired explosives detonate between the update pass and the step. const explodeQueue: { item: Item; radius: number; power: number }[] = []; // z=0 plane lock - run after EVERY physics substep (postStep fires per // internal substep in cannon-es). function lockBodyToPlane(b: CANNON.Body) { b.position.z = 0; b.velocity.z = 0; b.angularVelocity.x = 0; b.angularVelocity.y = 0; const q = b.quaternion; q.x = 0; q.y = 0; const len = Math.sqrt(q.z * q.z + q.w * q.w); if (len > 1e-8) { q.z /= len; q.w /= len; } else { q.set(0, 0, 0, 1); } } world.addEventListener("postStep", () => { for (const item of items) for (const b of item.bodies) lockBodyToPlane(b); }); // ── Comic impact FX (pooled - zero allocation per impact) ─────────────── const starTexture = makeStarTexture(); const wordTextures = [makeWordTexture("BONK!", "#ff5252"), makeWordTexture("POW!", "#ffb300"), makeWordTexture("WHAM!", "#7c4dff")]; const boomTexture = makeWordTexture("BOOM!", "#ff7043"); const popTexture = makeWordTexture("POP!", "#ec407a"); const smokeTexture = makeSmokeTexture(); const sparkTexture = makeSparkTexture(); const coinTexture = makeCoinTexture(); const shardTexture = makeShardTexture(); const confettiTexture = makeConfettiTexture(); const flashTexture = makeFlashTexture(); interface FxSprite { sprite: THREE.Sprite; vx: number; vy: number; life: number; ttl: number; word: boolean; scaleMul: number; } const fxPool: FxSprite[] = []; for (let i = 0; i < 14; i++) { const isWord = i >= 10; const sm = new THREE.SpriteMaterial({ map: isWord ? wordTextures[i % 3] : starTexture, transparent: true, depthTest: false, }); const sp = new THREE.Sprite(sm); sp.visible = false; sp.renderOrder = 50; scene.add(sp); fxPool.push({ sprite: sp, vx: 0, vy: 0, life: 0, ttl: 0, word: isWord, scaleMul: 1 }); } let lastImpactFxAt = 0; // Generic particle pool (smoke / sparks / coins / shards / confetti / flash). interface Puff { sprite: THREE.Sprite; vx: number; vy: number; grav: number; life: number; ttl: number; s0: number; s1: number; spin: number; } const puffPool: Puff[] = []; for (let i = 0; i < 48; i++) { const m = new THREE.SpriteMaterial({ transparent: true, depthTest: false }); const sp = new THREE.Sprite(m); sp.visible = false; sp.renderOrder = 60; scene.add(sp); puffPool.push({ sprite: sp, vx: 0, vy: 0, grav: 0, life: 0, ttl: 0, s0: 0.3, s1: 0.3, spin: 0 }); } // Pooled explosion flash lights (max 2 concurrent, no shadows, short-lived). interface FlashLight { light: THREE.PointLight; life: number; ttl: number; base: number; } const flashLights: FlashLight[] = []; for (let i = 0; i < 2; i++) { const l = new THREE.PointLight(0xffc477, 0, 10, 1.8); l.visible = false; scene.add(l); flashLights.push({ light: l, life: 0, ttl: 0.35, base: 0 }); } function flashLightAt(x: number, y: number, intensity: number) { for (const f of flashLights) { if (f.life > 0) continue; f.life = 0.001; f.base = intensity; f.light.position.set(x, y + 0.4, 1.6); f.light.intensity = intensity; f.light.visible = true; break; } } interface BurstOpts { x: number; y: number; count: number; tex: THREE.Texture; color?: string; randColor?: string[]; speed?: number; up?: number; grav?: number; ttl?: number; s0?: number; s1?: number; } function burst(o: BurstOpts) { let n = 0; for (const p of puffPool) { if (p.life > 0) continue; const m = p.sprite.material as THREE.SpriteMaterial; m.map = o.tex; m.color.set(o.randColor ? o.randColor[(Math.random() * o.randColor.length) | 0] : (o.color ?? "#ffffff")); m.opacity = 1; m.rotation = Math.random() * Math.PI * 2; const a = Math.random() * Math.PI * 2; const sp = (o.speed ?? 2) * (0.5 + Math.random() * 0.7); p.vx = Math.cos(a) * sp; p.vy = Math.sin(a) * sp + (o.up ?? 0); p.grav = o.grav ?? 0; p.life = 0.001; p.ttl = (o.ttl ?? 0.6) * (0.8 + Math.random() * 0.4); p.s0 = o.s0 ?? 0.3; p.s1 = o.s1 ?? p.s0; p.spin = (Math.random() - 0.5) * 6; p.sprite.position.set(o.x + (Math.random() - 0.5) * 0.25, o.y + (Math.random() - 0.5) * 0.25, 1.7); p.sprite.scale.set(p.s0, p.s0, 1); p.sprite.visible = true; if (++n >= o.count) break; } } function wordPop(x: number, y: number, tex?: THREE.Texture, scale = 1) { for (const fx of fxPool) { if (!fx.word || fx.life > 0) continue; const m = fx.sprite.material as THREE.SpriteMaterial; m.map = tex ?? wordTextures[(Math.random() * wordTextures.length) | 0]; m.opacity = 1; fx.life = 0.001; fx.ttl = 0.7; fx.vx = 0; fx.vy = 0.9; fx.scaleMul = scale; fx.sprite.position.set(x, y + 0.4, 1.8); fx.sprite.scale.set(0.2 * scale, 0.1 * scale, 1); fx.sprite.visible = true; break; } } function impactFx(x: number, y: number, strength: number) { const now = performance.now(); if (now - lastImpactFxAt < IMPACT_FX_COOLDOWN_MS) return; lastImpactFxAt = now; // 2-3 stars let stars = 0; const want = 2 + (strength > 9 ? 1 : 0); for (const fx of fxPool) { if (fx.word || fx.life > 0) continue; fx.life = 0.001; fx.ttl = 0.55; const a = Math.random() * Math.PI * 2; const sp = 1.6 + Math.random() * 1.6; fx.vx = Math.cos(a) * sp; fx.vy = Math.abs(Math.sin(a)) * sp + 1.2; fx.sprite.position.set(x + (Math.random() - 0.5) * 0.3, y + (Math.random() - 0.5) * 0.3, 1.5); fx.sprite.scale.set(0.4, 0.4, 1); (fx.sprite.material as THREE.SpriteMaterial).opacity = 1; fx.sprite.visible = true; if (++stars >= want) break; } // 1 word pop wordPop(x, y, undefined, 1); } function updateFx(dt: number) { for (const fx of fxPool) { if (fx.life <= 0) continue; fx.life += dt; if (fx.life >= fx.ttl) { fx.life = 0; fx.sprite.visible = false; continue; } const t = fx.life / fx.ttl; const m = fx.sprite.material as THREE.SpriteMaterial; if (fx.word) { // pop: overshoot scale then fade const pop = t < 0.35 ? easeOutBack(t / 0.35) : 1; fx.sprite.scale.set(1.9 * pop * fx.scaleMul, 0.95 * pop * fx.scaleMul, 1); fx.sprite.position.y += fx.vy * dt; m.opacity = t > 0.55 ? 1 - (t - 0.55) / 0.45 : 1; } else { fx.sprite.position.x += fx.vx * dt; fx.sprite.position.y += fx.vy * dt; fx.vy -= 6 * dt; const s = 0.42 * (1 - t * 0.5); fx.sprite.scale.set(s, s, 1); m.opacity = 1 - t; fx.sprite.material.rotation += dt * 5; } } for (const p of puffPool) { if (p.life <= 0) continue; p.life += dt; if (p.life >= p.ttl) { p.life = 0; p.sprite.visible = false; continue; } const t = p.life / p.ttl; p.sprite.position.x += p.vx * dt; p.sprite.position.y += p.vy * dt; p.vy -= p.grav * dt; const s = p.s0 + (p.s1 - p.s0) * t; p.sprite.scale.set(s, s, 1); const m = p.sprite.material as THREE.SpriteMaterial; m.opacity = 1 - t * t; m.rotation += p.spin * dt; } for (const f of flashLights) { if (f.life <= 0) continue; f.life += dt; const t = f.life / f.ttl; if (t >= 1) { f.life = 0; f.light.visible = false; f.light.intensity = 0; continue; } f.light.intensity = f.base * (1 - t) * (1 - t); } } function onBodyCollide(this: CANNON.Body, e: { contact: CANNON.ContactEquation }) { const v = Math.abs(e.contact.getImpactVelocityAlongNormal()); if (v > IMPACT_SPEED_THRESHOLD) { impactFx(this.position.x, this.position.y, v); } } // ── Item factories ─────────────────────────────────────────────────────── function makeDynamicBody(shape: CANNON.Shape, mass: number, x: number, y: number): CANNON.Body { const b = new CANNON.Body({ mass, position: new CANNON.Vec3(x, y, 0) }); b.addShape(shape); b.material = dynMat; b.linearDamping = 0.05; b.angularDamping = 0.3; // Aggressive sleep keeps big settled piles nearly free (the classic // sandbox-game trick) - grabs / impacts / gravity changes wake bodies. b.allowSleep = true; b.sleepSpeedLimit = 0.5; b.sleepTimeLimit = 0.4; b.addEventListener("collide", onBodyCollide); return b; } // Shadow-caster budget: past this many casters new meshes stop casting so a // 150+ body stress scene never multiplies the shadow pass cost unbounded. const SHADOW_CASTER_MAX = 90; let shadowCasterCount = 0; function enableShadow(m: THREE.Mesh) { if (shadowCasterCount >= SHADOW_CASTER_MAX) return; m.castShadow = true; m.userData.sc = 1; shadowCasterCount++; } function meshFor(geo: THREE.BufferGeometry, material: THREE.Material, sx: number, sy: number, sz: number, body: CANNON.Body): THREE.Mesh { const m = new THREE.Mesh(geo, material); m.scale.set(sx, sy, sz); m.userData.body = body; enableShadow(m); pickMeshes.push(m); return m; } // Capsule visual for ragdoll limbs (shared GEO.capsule is 4 units tall at // radius 1, so scale (r, L/4, r) gives a capsule of radius r, length L). // Arms lie along X, so the mesh is pre-rotated inside a wrapper group that // receives the physics-body transform. function capsuleVis(r: number, L: number, material: THREE.Material, alongX: boolean): { group: THREE.Group; mesh: THREE.Mesh } { const m = new THREE.Mesh(GEO.capsule, material); m.scale.set(r, L / 4, r); if (alongX) m.rotation.z = Math.PI / 2; enableShadow(m); pickMeshes.push(m); const g = new THREE.Group(); g.add(m); return { group: g, mesh: m }; } function clampSpawn(x: number, y: number, halfW: number, minY: number): [number, number] { return [ Math.max(-(ROOM_HALF_W - halfW - 0.05), Math.min(ROOM_HALF_W - halfW - 0.05, x)), Math.max(minY, Math.min(ROOM_H - 1, y)), ]; } /* ---------------------- Hero-prop asset-swap seam ------------------------ Store builds (Google Play / App Store wraps) can inject a GLB per hero prop via the module-level Assets shim. preloadHeroAssets() (fired at the end of boot) fills heroTemplates once; each prop factory then routes its VISUAL through fitHeroTemplate when a template is loaded. Crucially this ONLY swaps the visual Object3D that syncItemVisuals() drives from the physics body - the CANNON body, its collider shape/size, mass, and every constraint are built exactly as before, so the physics / destruction simulation is byte-for-byte identical whether or not a model is injected. On /play there is no window.MCPityAssets, so heroTemplates stays EMPTY, every factory takes its procedural branch, and nothing changes. The factories stay SYNC by reading the preloaded cache. */ const heroTemplates = new Map(); // Clone a preloaded template, uniformly scale it to FIT INSIDE the prop's // collider box (w x h x d = the full collider extents), center it, and wrap // it in a Group whose transform syncItemVisuals() sets from the body. Every // leaf mesh is bound to the body (userData.body) + registered for tap-picking // + the shadow budget, exactly like meshFor, so grab / delete / shadows keep // working on the swapped prop. clone(true) SHARES geometry + materials with // the template (three's clone is shallow for those), so the clone must never // be disposed - the template owns those resources. function fitHeroTemplate(template: THREE.Object3D, w: number, h: number, d: number, body: CANNON.Body): THREE.Object3D { const inst = template.clone(true); const size = new THREE.Box3().setFromObject(inst).getSize(new THREE.Vector3()); const sx = size.x > 1e-4 ? w / size.x : 1; const sy = size.y > 1e-4 ? h / size.y : 1; const sz = size.z > 1e-4 ? d / size.z : 1; inst.scale.setScalar(Math.min(sx, sy, sz)); // uniform -> keeps GLB proportions inside the collider const center = new THREE.Box3().setFromObject(inst).getCenter(new THREE.Vector3()); inst.position.sub(center); const group = new THREE.Group(); group.add(inst); group.userData.body = body; group.traverse((o) => { const mesh = o as THREE.Mesh; if (mesh.isMesh) { mesh.userData.body = body; enableShadow(mesh); pickMeshes.push(mesh); } }); return group; } // One-time boot preload. On /play every getModel() resolves to null so the // cache stays empty (zero visual change). Any failure -> everything stays // procedural. Store builds inject GLBs that load here before the user's first // spawn. async function preloadHeroAssets(): Promise { try { for (const key of HERO_MODEL_KEYS) { const model = await Assets.getModel(key); if (model) heroTemplates.set(key, model); } } catch (_e) { /* any failure -> everything stays procedural */ } } function buildCrate(x: number, y: number): Item { [x, y] = clampSpawn(x, y, 0.36, 0.4); const s = 0.72; const body = makeDynamicBody(new CANNON.Box(new CANNON.Vec3(s / 2, s / 2, s / 2)), 2, x, y); // Asset seam: swap the crate visual for the injected GLB (fitted to the // s x s x s collider); /play has no template -> procedural box, unchanged. const tpl = heroTemplates.get("crate"); const visual = tpl ? fitHeroTemplate(tpl, s, s, s, body) : meshFor(GEO.box, crateMat, s, s, s, body); const it = baseItem("crate"); it.bodies = [body]; it.partNames = ["crate"]; it.visuals = [visual]; return it; } function buildPlank(x: number, y: number): Item { [x, y] = clampSpawn(x, y, 1.2, 0.3); const w = 2.4, h = 0.3, d = 0.5; const body = makeDynamicBody(new CANNON.Box(new CANNON.Vec3(w / 2, h / 2, d / 2)), 1.6, x, y); // Asset seam: swap the plank visual for the injected GLB (fitted to the // w x h x d collider); /play has no template -> procedural box, unchanged. const tpl = heroTemplates.get("plank"); const visual = tpl ? fitHeroTemplate(tpl, w, h, d, body) : meshFor(GEO.box, plankMat, w, h, d, body); const it = baseItem("plank"); it.bodies = [body]; it.partNames = ["plank"]; it.visuals = [visual]; return it; } // Static (non-simulated) mesh helper - registered for tap-picking so the // delete tool can target pads / posts / fans. function staticMesh(geo: THREE.BufferGeometry, material: THREE.Material, sx: number, sy: number, sz: number, x: number, y: number, rotZ = 0): THREE.Mesh { const m = new THREE.Mesh(geo, material); m.scale.set(sx, sy, sz); m.position.set(x, y, 0); if (rotZ) m.rotation.z = rotZ; enableShadow(m); pickMeshes.push(m); return m; } function noCollideAnchor(x: number, y: number): CANNON.Body { const b = new CANNON.Body({ type: CANNON.Body.STATIC }); b.addShape(new CANNON.Sphere(0.1)); b.collisionFilterGroup = 0; b.collisionFilterMask = 0; b.position.set(x, y, 0); return b; } function buildBarrel(x: number, y: number): Item { // Explosive barrel: ignite (or a very hard impact) -> 0.5s warning flash // -> radial blast, barrel despawns. Comic FX only. [x, y] = clampSpawn(x, y, 0.36, 0.55); const r = 0.36, h = 1.0; const body = makeDynamicBody(new CANNON.Box(new CANNON.Vec3(r, h / 2, r)), 2.4, x, y); // Asset seam: swap the whole procedural barrel for the injected GLB (fitted // to the 2r x h x 2r collider). `shell` (the flash target used by it.update) // is null on the swapped path, so the prime->explode logic is unchanged and // only the cosmetic flash is skipped. /play has no template -> procedural. const barrelTpl = heroTemplates.get("barrel"); let shell: THREE.Mesh | null = null; let visual: THREE.Object3D; if (barrelTpl) { visual = fitHeroTemplate(barrelTpl, 2 * r, h, 2 * r, body); } else { const group = new THREE.Group(); shell = meshFor(GEO.cylinder, mat("#ef5350"), r, h, r, body); group.add(shell); for (const by of [-0.28, 0.28]) { const band = meshFor(GEO.cylinder, mat("#b71c1c"), r * 1.04, 0.09, r * 1.04, body); band.position.y = by; group.add(band); } const stripe = meshFor(GEO.cylinder, mat("#ffe082"), r * 1.02, 0.16, r * 1.02, body); group.add(stripe); const lid = meshFor(GEO.cylinder, mat("#c62828"), r * 0.88, 0.06, r * 0.88, body); lid.position.y = h / 2 + 0.02; group.add(lid); group.position.set(x, y, 0); visual = group; } const it = baseItem("barrel"); it.bodies = [body]; it.partNames = ["barrel"]; it.visuals = [visual]; const prime = () => { if (it.state === "idle") { it.state = "primed"; it.data.t = 0; } }; it.onIgnite = prime; body.addEventListener("collide", (e: { contact: CANNON.ContactEquation }) => { if (Math.abs(e.contact.getImpactVelocityAlongNormal()) > BARREL_IMPACT_SPEED) prime(); }); it.update = (dt: number) => { if (it.state !== "primed") return; it.data.t += dt; if (shell) shell.material = Math.floor(it.data.t / 0.08) % 2 === 0 ? mat("#ffffff") : mat("#ef5350"); if (it.data.t >= BARREL_PRIME_TIME) { it.state = "exploding"; explodeQueue.push({ item: it, radius: BARREL_RADIUS, power: BARREL_POWER }); } }; return it; } function buildTnt(x: number, y: number): Item { // TNT crate: ignite lights a ~2s sparking fuse, then a bigger blast. [x, y] = clampSpawn(x, y, 0.31, 0.4); const s = 0.62; const body = makeDynamicBody(new CANNON.Box(new CANNON.Vec3(s / 2, s / 2, s / 2)), 2, x, y); // Asset seam: swap the whole procedural TNT crate for the injected GLB // (fitted to the s x s x s collider). `group` is the actual visual either // way, so the fuse-spark tip transform (group.quaternion/position) is // unchanged. /play has no template -> procedural crate + fuse. const tntTpl = heroTemplates.get("tnt"); let group: THREE.Object3D; if (tntTpl) { group = fitHeroTemplate(tntTpl, s, s, s, body); } else { const g = new THREE.Group(); const box = meshFor(GEO.box, tntMat, s, s, s, body); g.add(box); const fuseMesh = new THREE.Mesh(GEO.cylinder, mat("#eceff1")); fuseMesh.scale.set(0.035, 0.22, 0.035); fuseMesh.position.set(0, s / 2 + 0.1, 0); g.add(fuseMesh); group = g; } const it = baseItem("tnt"); it.bodies = [body]; it.partNames = ["tnt"]; it.visuals = [group]; it.data.sparkT = 0; it.onIgnite = () => { if (it.state === "idle") { it.state = "fused"; it.data.t = 0; } }; it.update = (dt: number) => { if (it.state !== "fused") return; it.data.t += dt; it.data.sparkT += dt; if (it.data.sparkT > 0.06) { it.data.sparkT = 0; // spark at the fuse tip (rotates with the body) const tip = new THREE.Vector3(0, s / 2 + 0.2, 0).applyQuaternion(group.quaternion).add(group.position); burst({ x: tip.x, y: tip.y, count: 1, tex: sparkTexture, color: "#ffe082", speed: 1.2, up: 0.8, grav: 2, ttl: 0.28, s0: 0.16, s1: 0.05 }); } if (it.data.t >= TNT_FUSE_TIME) { it.state = "exploding"; explodeQueue.push({ item: it, radius: TNT_RADIUS, power: TNT_POWER }); } }; return it; } function buildWreckingBall(x: number, y: number): Item { // Static anchor high up + 8-link chain (DistanceConstraints) + heavy ball. const ax = Math.max(-(ROOM_HALF_W - 0.4), Math.min(ROOM_HALF_W - 0.4, x)); // chain+ball total length is 5.6 - keep the resting ball above the floor const ay = Math.max(6.3, Math.min(10, y)); const it = baseItem("wreckingball"); const anchor = noCollideAnchor(ax, ay); it.staticBodies.push(anchor); const anchorVis = staticMesh(GEO.sphere, mat("#546e7a"), 0.16, 0.16, 0.16, ax, ay); it.extraVisuals.push(anchorVis); const LINKS = 8, SPACING = 0.6; let prev: CANNON.Body = anchor; for (let i = 0; i < LINKS; i++) { const link = makeDynamicBody(new CANNON.Sphere(0.09), 1.2, ax, ay - SPACING * (i + 1)); link.collisionFilterGroup = 2; link.collisionFilterMask = 1; // collide with world, not other links link.linearDamping = 0.01; link.angularDamping = 0.01; link.allowSleep = false; const lv = meshFor(GEO.sphere, mat("#78909c"), 0.12, 0.12, 0.12, link); it.bodies.push(link); it.partNames.push(`link${i}`); it.visuals.push(lv); const c = new CANNON.DistanceConstraint(prev, link, SPACING, 1e6); (c as unknown as Record).__cuttable = true; it.constraints.push(c); prev = link; } const BALL_R = 0.5; const ball = makeDynamicBody(new CANNON.Sphere(BALL_R), 10, ax, ay - SPACING * LINKS - (SPACING / 2 + BALL_R)); ball.allowSleep = false; ball.linearDamping = 0.01; ball.angularDamping = 0.05; // Asset seam: swap ONLY the ball visual for the injected GLB (fitted to the // 2*BALL_R sphere collider); the chain links stay procedural. /play has no // template -> procedural metal ball. The ball body is unchanged either way. const ballTpl = heroTemplates.get("wrecking_ball"); let ballVisual: THREE.Object3D; if (ballTpl) { ballVisual = fitHeroTemplate(ballTpl, 2 * BALL_R, 2 * BALL_R, 2 * BALL_R, ball); } else { const ballGroup = new THREE.Group(); const ballMesh = meshFor(GEO.sphere, ballMetalMat, BALL_R, BALL_R, BALL_R, ball); ballGroup.add(ballMesh); const shine = new THREE.Mesh(GEO.sphere, shineMat); shine.scale.set(0.09, 0.09, 0.09); shine.position.set(-0.16, 0.2, BALL_R * 0.85); ballGroup.add(shine); ballVisual = ballGroup; } it.bodies.push(ball); it.partNames.push("ball"); it.visuals.push(ballVisual); const cb = new CANNON.DistanceConstraint(prev, ball, SPACING / 2 + BALL_R, 1e6); (cb as unknown as Record).__cuttable = true; it.constraints.push(cb); return it; } function buildRope(x: number, y: number): Item { // Hanging bead-rope from a static anchor; the free end ties to a dynamic // body if one is under it at spawn. const ax = Math.max(-(ROOM_HALF_W - 0.2), Math.min(ROOM_HALF_W - 0.2, x)); const ay = Math.max(2.5, Math.min(11, y)); const it = baseItem("rope"); const anchor = noCollideAnchor(ax, ay); it.staticBodies.push(anchor); const plate = staticMesh(GEO.box, mat("#8d6e63"), 0.3, 0.1, 0.3, ax, ay + 0.05); it.extraVisuals.push(plate); const LINKS = 9, SP = 0.32; let prev: CANNON.Body = anchor; let last: CANNON.Body = anchor; for (let i = 0; i < LINKS; i++) { const link = makeDynamicBody(new CANNON.Sphere(0.06), 0.15, ax, ay - SP * (i + 1)); link.collisionFilterGroup = 2; link.collisionFilterMask = 1; link.linearDamping = 0.2; link.angularDamping = 0.2; const lv = meshFor(GEO.sphere, mat("#a1887f"), 0.075, 0.075, 0.075, link); it.bodies.push(link); it.partNames.push(`link${i}`); it.visuals.push(lv); const c = new CANNON.DistanceConstraint(prev, link, SP, 1e6); (c as unknown as Record).__cuttable = true; it.constraints.push(c); prev = link; last = link; } // Tie the free end to a dynamic body just below (if any). const endY = ay - SP * LINKS; let best: CANNON.Body | null = null; let bestD = 0.9; for (const other of items) for (const b of other.bodies) { if (b.mass <= 0) continue; const d = Math.hypot(b.position.x - ax, b.position.y - endY); if (d < bestD && b.position.y < endY + 0.2) { bestD = d; best = b; } } if (best) { const c = new CANNON.DistanceConstraint(last, best, Math.max(0.15, bestD), 1e6); (c as unknown as Record).__cuttable = true; it.constraints.push(c); } return it; } function buildTrampoline(x: number, _y: number): Item { // Static angled pad: bouncy contact material + an extra upward boost. const cx = Math.max(-(ROOM_HALF_W - 1.1), Math.min(ROOM_HALF_W - 1.1, x)); const it = baseItem("trampoline"); const TILT = 0.14; // ~8 degrees const pad = new CANNON.Body({ type: CANNON.Body.STATIC, material: trampMat }); pad.addShape(new CANNON.Box(new CANNON.Vec3(0.95, 0.14, 0.6))); pad.position.set(cx, 0.5, 0); pad.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 0, 1), TILT); it.staticBodies.push(pad); pad.addEventListener("collide", (e: { body: CANNON.Body; contact: CANNON.ContactEquation }) => { const other = e.body; if (!other || other.mass <= 0) return; const v = Math.abs(e.contact.getImpactVelocityAlongNormal()); if (v <= 2.5) return; deferred.push(() => { other.wakeUp(); const boost = Math.min(0.5 * v + 1.5, 13); other.velocity.y = Math.min(Math.max(other.velocity.y, 0) + boost, 15); impactFx(other.position.x, other.position.y, 6); }); }); const padTop = staticMesh(GEO.box, bmat("#3949ab"), 1.9, 0.16, 1.2, cx, 0.58, TILT); const padRim = staticMesh(GEO.box, bmat("#ef5350"), 1.98, 0.12, 1.24, cx, 0.46, TILT); const legL = staticMesh(GEO.box, bmat("#78909c"), 0.12, 0.44, 0.12, cx - 0.7, 0.22); const legR = staticMesh(GEO.box, bmat("#78909c"), 0.12, 0.44, 0.12, cx + 0.7, 0.22); it.extraVisuals.push(padTop, padRim, legL, legR); return it; } function buildFan(x: number, _y: number): Item { // Floor fan: spinning blades, upward wind column with height falloff. const cx = Math.max(-(ROOM_HALF_W - 0.7), Math.min(ROOM_HALF_W - 0.7, x)); const it = baseItem("fan"); const base = new CANNON.Body({ type: CANNON.Body.STATIC, material: staticMat }); base.addShape(new CANNON.Box(new CANNON.Vec3(0.55, 0.28, 0.4))); base.position.set(cx, 0.28, 0); it.staticBodies.push(base); const baseVis = staticMesh(GEO.box, bmat("#607d8b"), 1.1, 0.56, 0.8, cx, 0.28); const grill = staticMesh(GEO.box, bmat("#455a64"), 1.0, 0.08, 0.82, cx, 0.6); const blades = new THREE.Group(); for (const rot of [0, Math.PI / 2]) { const blade = new THREE.Mesh(GEO.box, bmat("#b0bec5")); blade.scale.set(0.85, 0.05, 0.14); blade.rotation.y = rot; blades.add(blade); } blades.position.set(cx, 0.44, 0.15); it.extraVisuals.push(baseVis, grill, blades); it.data.streakT = 0; it.update = (dt: number) => { blades.rotation.y += dt * 18; // wind force column for (const other of items) for (const b of other.bodies) { if (b.mass <= 0) continue; const h = b.position.y - 0.6; if (h > 0 && h < FAN_HEIGHT && Math.abs(b.position.x - cx) < FAN_HALF_W) { b.wakeUp(); b.velocity.y += FAN_ACCEL * (1 - h / FAN_HEIGHT) * dt; } } it.data.streakT += dt; if (it.data.streakT > 0.16) { it.data.streakT = 0; burst({ x: cx + (Math.random() - 0.5) * 0.8, y: 1.0, count: 1, tex: smokeTexture, color: "#ffffff", speed: 0.2, up: 3.5, grav: -0.5, ttl: 0.5, s0: 0.14, s1: 0.3 }); } }; return it; } function buildBalloon(x: number, y: number): Item { // Buoyant balloon; ties its string to a dynamic body it touches at spawn. [x, y] = clampSpawn(x, y, 0.4, 0.6); const body = makeDynamicBody(new CANNON.Sphere(0.34), 0.3, x, y); body.allowSleep = false; body.linearDamping = 0.35; const group = new THREE.Group(); const color = BALLOON_COLORS[(Math.random() * BALLOON_COLORS.length) | 0]; const ballMesh = meshFor(GEO.sphere, mat(color), 0.34, 0.4, 0.34, body); group.add(ballMesh); const knot = new THREE.Mesh(GEO.box, mat(color)); knot.scale.set(0.07, 0.07, 0.07); knot.position.set(0, -0.43, 0); group.add(knot); const gleam = new THREE.Mesh(GEO.sphere, shineMat); gleam.scale.set(0.09, 0.13, 0.06); gleam.position.set(-0.12, 0.16, 0.26); group.add(gleam); const it = baseItem("balloon"); it.bodies = [body]; it.partNames = ["balloon"]; it.visuals = [group]; // string to a dynamic body touching/below at spawn let cargo: CANNON.Body | null = null; let cargoD = 1.1; for (const other of items) for (const b of other.bodies) { if (b.mass <= 0) continue; const d = Math.hypot(b.position.x - x, b.position.y - y); if (d < cargoD && b.position.y < y + 0.1) { cargoD = d; cargo = b; } } let stringC: CANNON.Constraint | null = null; let stringVis: THREE.Mesh | null = null; if (cargo) { stringC = new CANNON.DistanceConstraint(body, cargo, Math.max(0.5, Math.min(cargoD, 1.1)), 1e6); (stringC as unknown as Record).__cuttable = true; it.constraints.push(stringC); stringVis = new THREE.Mesh(GEO.box, bmat("#eceff1")); stringVis.scale.set(0.03, 1, 0.03); it.extraVisuals.push(stringVis); it.data.cargo = cargo; } body.addEventListener("collide", (e: { contact: CANNON.ContactEquation }) => { if (Math.abs(e.contact.getImpactVelocityAlongNormal()) > BALLOON_POP_SPEED) { deferred.push(() => popBalloon(it)); } }); it.onIgnite = () => popBalloon(it); it.update = (dt: number) => { // buoyancy: constant upward accel beyond gravity, terminal rise speed body.velocity.y += (gravityG + BALLOON_LIFT) * dt; if (body.velocity.y > BALLOON_MAX_RISE) body.velocity.y = BALLOON_MAX_RISE; if (stringVis) { const cargoBody = it.data.cargo as CANNON.Body | undefined; if (!cargoBody || !stringC || !it.constraints.includes(stringC)) { stringVis.visible = false; } else { const a = body.position, b2 = cargoBody.position; const len = Math.max(0.05, Math.hypot(b2.x - a.x, b2.y - a.y)); stringVis.visible = true; stringVis.position.set((a.x + b2.x) / 2, (a.y + b2.y) / 2, -0.2); stringVis.scale.set(0.03, len, 0.03); stringVis.rotation.z = Math.atan2(-(b2.x - a.x), b2.y - a.y); } } }; return it; } function buildGlassCase(x: number, y: number): Item { // Museum case: translucent box with a jewel inside. Shatters on hard // impact; the case body swaps to a free dynamic jewel body. [x, y] = clampSpawn(x, y, 0.45, 0.5); const s = 0.9; const body = makeDynamicBody(new CANNON.Box(new CANNON.Vec3(s / 2, s / 2, s / 2)), 3, x, y); // Asset seam: swap the whole procedural glass case for the injected GLB // (fitted to the s x s x s collider). Shatter logic keys off `it` state, not // the visual, so it is unchanged. /play has no template -> procedural case. const caseTpl = heroTemplates.get("glass_case"); let visual: THREE.Object3D; if (caseTpl) { visual = fitHeroTemplate(caseTpl, s, s, s, body); } else { const group = new THREE.Group(); const box = meshFor(GEO.box, glassMat, s, s, s, body); group.add(box); const trimTop = new THREE.Mesh(GEO.box, mat("#90a4ae")); trimTop.scale.set(s * 1.02, 0.07, s * 1.02); trimTop.position.y = s / 2; group.add(trimTop); const trimBot = new THREE.Mesh(GEO.box, mat("#90a4ae")); trimBot.scale.set(s * 1.02, 0.1, s * 1.02); trimBot.position.y = -s / 2 + 0.02; group.add(trimBot); const jewelPreview = new THREE.Mesh(GEO.icosa, jewelMat); jewelPreview.scale.set(0.2, 0.27, 0.2); jewelPreview.position.y = -0.05; group.add(jewelPreview); visual = group; } const it = baseItem("glasscase"); it.bodies = [body]; it.partNames = ["case"]; it.visuals = [visual]; body.addEventListener("collide", (e: { contact: CANNON.ContactEquation }) => { if (it.state === "idle" && Math.abs(e.contact.getImpactVelocityAlongNormal()) > GLASS_BREAK_SPEED) { it.state = "breaking"; deferred.push(() => shatterCase(it)); } }); return it; } function buildMoneyBag(x: number, y: number): Item { // Heavy bag; spills a burst of coins on hard impact (bag persists). [x, y] = clampSpawn(x, y, 0.42, 0.5); const body = makeDynamicBody(new CANNON.Sphere(0.42), 6, x, y); body.linearDamping = 0.2; body.angularDamping = 0.6; // Asset seam: swap the whole procedural money bag for the injected GLB // (fitted to the 0.84 sphere-collider diameter). The coin-spill collide // handler reads body.position, not the visual, so it is unchanged. /play // has no template -> procedural bag + $ decal. const bagTpl = heroTemplates.get("money_bag"); let visual: THREE.Object3D; if (bagTpl) { visual = fitHeroTemplate(bagTpl, 0.84, 0.84, 0.84, body); } else { const group = new THREE.Group(); const bag = meshFor(GEO.sphere, mat("#8d6e63"), 0.42, 0.38, 0.42, body); group.add(bag); const knot = new THREE.Mesh(GEO.sphere, mat("#6d4c41")); knot.scale.set(0.12, 0.1, 0.12); knot.position.set(0, 0.4, 0); group.add(knot); const decal = new THREE.Mesh(GEO.plane, moneyDecalMat); decal.scale.set(0.45, 0.45, 1); decal.position.set(0, -0.02, 0.42); group.add(decal); visual = group; } const it = baseItem("moneybag"); it.bodies = [body]; it.partNames = ["moneybag"]; it.visuals = [visual]; it.data.lastSpill = 0; body.addEventListener("collide", (e: { contact: CANNON.ContactEquation }) => { const v = Math.abs(e.contact.getImpactVelocityAlongNormal()); const now = performance.now(); if (v > BAG_SPILL_SPEED && now - (it.data.lastSpill as number) > 900) { it.data.lastSpill = now; deferred.push(() => { burst({ x: body.position.x, y: body.position.y + 0.3, count: 10, tex: coinTexture, speed: 2.8, up: 2.5, grav: 9, ttl: 0.9, s0: 0.18 }); }); } }); return it; } function buildTripwire(x: number, _y: number): Item { // Laser tripwire: two floor posts + a red beam. A dynamic body crossing // the beam flashes it and ignites all TNT/barrels within TRIP_RADIUS. const HALF_SPAN = 1.4, BEAM_Y = 0.6; const cx = Math.max(-(ROOM_HALF_W - HALF_SPAN - 0.25), Math.min(ROOM_HALF_W - HALF_SPAN - 0.25, x)); const it = baseItem("tripwire"); for (const side of [-1, 1]) { const post = new CANNON.Body({ type: CANNON.Body.STATIC, material: staticMat }); post.addShape(new CANNON.Box(new CANNON.Vec3(0.09, 0.6, 0.09))); post.position.set(cx + side * HALF_SPAN, 0.6, 0); it.staticBodies.push(post); const postVis = staticMesh(GEO.cylinder, bmat("#37474f"), 0.09, 1.2, 0.09, cx + side * HALF_SPAN, 0.6); const tip = staticMesh(GEO.sphere, bmat("#ff1744"), 0.08, 0.08, 0.08, cx + side * HALF_SPAN, 1.24); it.extraVisuals.push(postVis, tip); } const beamMat = new THREE.MeshBasicMaterial({ color: "#ff1744", transparent: true, opacity: 0.75 }); const beam = staticMesh(GEO.box, beamMat, HALF_SPAN * 2 - 0.18, 0.05, 0.05, cx, BEAM_Y); it.extraVisuals.push(beam); it.data.ownMaterials = [beamMat]; it.data.cooldown = 0; it.data.flashT = 0; const inZone = (b: CANNON.Body) => b.mass > 0 && Math.abs(b.position.y - BEAM_Y) < 0.38 && Math.abs(b.position.x - cx) < HALF_SPAN - 0.1; it.update = (dt: number) => { if (it.data.flashT > 0) { it.data.flashT -= dt; const hot = Math.floor(it.data.flashT / 0.06) % 2 === 0; beamMat.color.set(hot ? "#ffffff" : "#ff1744"); beamMat.opacity = 1; beam.scale.y = 0.12; if (it.data.flashT <= 0) { beamMat.color.set("#ff1744"); beamMat.opacity = 0.75; beam.scale.y = 0.05; } } if (it.data.cooldown > 0) { it.data.cooldown -= dt; if (it.data.cooldown <= 0) { // re-arm only when the beam zone is clear let occupied = false; for (const other of items) { for (const b of other.bodies) if (inZone(b)) { occupied = true; break; } if (occupied) break; } if (occupied) it.data.cooldown = 0.5; } return; } for (const other of items) { if (other === it) continue; for (const b of other.bodies) { if (!inZone(b)) continue; // TRIGGERED it.data.cooldown = 2; it.data.flashT = 0.35; burst({ x: b.position.x, y: BEAM_Y, count: 5, tex: sparkTexture, color: "#ff5252", speed: 2.2, up: 1, grav: 3, ttl: 0.35, s0: 0.18, s1: 0.06 }); for (const target of items) { if ((target.type === "tnt" || target.type === "barrel") && target.state === "idle") { const c = centerOf(target); if (Math.hypot(c.x - cx, c.y - BEAM_Y) < TRIP_RADIUS) target.onIgnite?.(); } } return; } } }; return it; } function buildRagdoll(x: number, y: number): Item { [x, y] = clampSpawn(x, y, 1.3, 1.6); const bodies: CANNON.Body[] = []; const names: string[] = []; const visuals: THREE.Object3D[] = []; const constraints: CANNON.Constraint[] = []; const SKIN = "#ffcc80"; const SHIRT = "#42a5f5"; const PANTS = "#5c6bc0"; const SHOE = "#37474f"; function part(name: string, shape: CANNON.Shape, massVal: number, px: number, py: number, visual: THREE.Object3D): CANNON.Body { const b = makeDynamicBody(shape, massVal, x + px, y + py); // Ragdoll parts damp a bit more so the flop settles convincingly. b.angularDamping = 0.6; b.linearDamping = 0.08; bodies.push(b); names.push(name); visuals.push(visual); return b; } function joint(a: CANNON.Body, b: CANNON.Body, pivotWorldX: number, pivotWorldY: number, twistLimit: number) { const pw = new CANNON.Vec3(x + pivotWorldX, y + pivotWorldY, 0); const c = new CANNON.ConeTwistConstraint(a, b, { pivotA: a.pointToLocalFrame(pw, new CANNON.Vec3()), pivotB: b.pointToLocalFrame(pw, new CANNON.Vec3()), axisA: new CANNON.Vec3(0, 0, 1), axisB: new CANNON.Vec3(0, 0, 1), angle: 0.05, twistAngle: twistLimit, collideConnected: false, maxForce: 1e6, }); constraints.push(c); return c; } // Torso const torsoHalf = new CANNON.Vec3(0.28, 0.36, 0.14); const torsoVis = new THREE.Group(); const torsoMesh = meshFor(GEO.box, mat(SHIRT), 0.56, 0.72, 0.28, null as unknown as CANNON.Body); torsoVis.add(torsoMesh); const torso = part("torso", new CANNON.Box(torsoHalf), 4, 0, 0, torsoVis); torsoMesh.userData.body = torso; // Head with a friendly face (eyes + smile as tiny meshes) const headVis = new THREE.Group(); const headMesh = meshFor(GEO.sphere, mat(SKIN), 0.25, 0.25, 0.25, null as unknown as CANNON.Body); headVis.add(headMesh); for (const ex of [-0.09, 0.09]) { const eyeWhite = new THREE.Mesh(GEO.sphere, mat("#ffffff")); eyeWhite.scale.set(0.055, 0.055, 0.03); eyeWhite.position.set(ex, 0.05, 0.23); headVis.add(eyeWhite); const pupil = new THREE.Mesh(GEO.sphere, mat("#263238")); pupil.scale.set(0.026, 0.026, 0.015); pupil.position.set(ex, 0.05, 0.26); headVis.add(pupil); } const smile = new THREE.Mesh(GEO.box, mat("#c62828")); smile.scale.set(0.12, 0.03, 0.02); smile.position.set(0, -0.08, 0.24); headVis.add(smile); const head = part("head", new CANNON.Sphere(0.25), 1.4, 0, 0.66, headVis); headMesh.userData.body = head; joint(torso, head, 0, 0.4, 0.9); // neck // Arms: upper (0.4 long) + lower (0.36 long), horizontal T-pose for (const side of [-1, 1] as const) { const sfx = side < 0 ? "L" : "R"; const uaHalf = new CANNON.Vec3(0.2, 0.09, 0.09); const uaCap = capsuleVis(0.1, 0.42, mat(SHIRT), true); const ua = part(`upperArm${sfx}`, new CANNON.Box(uaHalf), 0.6, side * 0.48, 0.3, uaCap.group); uaCap.mesh.userData.body = ua; joint(torso, ua, side * 0.28, 0.3, 1.6); // shoulder const laHalf = new CANNON.Vec3(0.18, 0.08, 0.08); const laCap = capsuleVis(0.085, 0.38, mat(SKIN), true); const laGroup = laCap.group; const hand = new THREE.Mesh(GEO.sphere, mat(SKIN)); hand.scale.set(0.1, 0.1, 0.1); hand.position.set(side * 0.18, 0, 0); laGroup.add(hand); const la = part(`lowerArm${sfx}`, new CANNON.Box(laHalf), 0.5, side * (0.68 + 0.18), 0.3, laGroup); laCap.mesh.userData.body = la; joint(ua, la, side * 0.68, 0.3, 1.3); // elbow } // Legs: upper (0.44 long) + lower (0.44 long), vertical for (const side of [-1, 1] as const) { const sfx = side < 0 ? "L" : "R"; const ulHalf = new CANNON.Vec3(0.11, 0.22, 0.11); const ulCap = capsuleVis(0.12, 0.46, mat(PANTS), false); const ul = part(`upperLeg${sfx}`, new CANNON.Box(ulHalf), 1.0, side * 0.15, -0.58, ulCap.group); ulCap.mesh.userData.body = ul; joint(torso, ul, side * 0.15, -0.36, 1.2); // hip const llHalf = new CANNON.Vec3(0.09, 0.22, 0.09); const llCap = capsuleVis(0.095, 0.46, mat(PANTS), false); const llGroup = llCap.group; const shoe = new THREE.Mesh(GEO.box, mat(SHOE)); shoe.scale.set(0.24, 0.1, 0.3); shoe.position.set(0, -0.2, 0.04); llGroup.add(shoe); const ll = part(`lowerLeg${sfx}`, new CANNON.Box(llHalf), 0.8, side * 0.15, -1.02, llGroup); llCap.mesh.userData.body = ll; joint(ul, ll, side * 0.15, -0.8, 1.2); // knee } const it = baseItem("ragdoll"); it.bodies = bodies; it.partNames = names; it.visuals = visuals; it.constraints = constraints; return it; } const BUILDERS: Record Item> = { ragdoll: buildRagdoll, crate: buildCrate, plank: buildPlank, barrel: buildBarrel, tnt: buildTnt, wreckingball: buildWreckingBall, rope: buildRope, trampoline: buildTrampoline, fan: buildFan, balloon: buildBalloon, glasscase: buildGlassCase, moneybag: buildMoneyBag, tripwire: buildTripwire, }; // DYNAMIC bodies each item contributes toward MAX_BODIES. const PART_COUNT: Record = { ragdoll: 10, crate: 1, plank: 1, barrel: 1, tnt: 1, wreckingball: 9, rope: 9, trampoline: 0, fan: 0, balloon: 1, glasscase: 1, moneybag: 1, tripwire: 0, }; function spawnItem(type: ItemType, x: number, y: number): number { const builder = BUILDERS[type]; if (!builder) return -1; // Body cap: despawn OLDEST whole items until the new one fits. const incoming = PART_COUNT[type]; while (items.length > 0 && dynamicBodyCount + incoming > MAX_BODIES) { despawnItem(items[0]); } const item = builder(x, y); item.id = nextItemId++; for (const b of item.bodies) { world.addBody(b); dynamicBodyCount++; } for (const b of item.staticBodies) world.addBody(b); for (const c of item.constraints) world.addConstraint(c); for (const v of item.visuals) scene.add(v); for (const v of item.extraVisuals) scene.add(v); for (const v of [...item.visuals, ...item.extraVisuals]) { v.traverse((o) => { o.userData.itemId = item.id; }); } items.push(item); syncItemVisuals(item); return items.length - 1; } function removeVisual(v: THREE.Object3D) { scene.remove(v); v.traverse((o) => { const idx = pickMeshes.indexOf(o as THREE.Mesh); if (idx >= 0) pickMeshes.splice(idx, 1); if (o.userData && o.userData.sc) { o.userData.sc = 0; shadowCasterCount--; } }); const idx2 = pickMeshes.indexOf(v as THREE.Mesh); if (idx2 >= 0) pickMeshes.splice(idx2, 1); } // Cross-item constraints (balloon strings, rope ties) must not survive the // removal of the bodies they reference - a dangling constraint on a removed // body destabilizes the solver. function removeConstraintsReferencing(bodies: CANNON.Body[], except: Item | null) { for (const other of items) { if (other === except) continue; for (const c of other.constraints.slice()) { const ca = (c as unknown as { bodyA: CANNON.Body }).bodyA; const cb = (c as unknown as { bodyB: CANNON.Body }).bodyB; if (bodies.includes(ca) || bodies.includes(cb)) { world.removeConstraint(c); const ci = other.constraints.indexOf(c); if (ci >= 0) other.constraints.splice(ci, 1); } } } } function despawnItem(item: Item) { const i = items.indexOf(item); if (i < 0) return; items.splice(i, 1); if (grabbed && item.bodies.includes(grabbed.body)) releaseGrab(); removeConstraintsReferencing(item.bodies, item); for (const c of item.constraints) world.removeConstraint(c); for (const b of item.bodies) { b.removeEventListener("collide", onBodyCollide); world.removeBody(b); dynamicBodyCount--; } for (const b of item.staticBodies) world.removeBody(b); for (const v of item.visuals) removeVisual(v); for (const v of item.extraVisuals) removeVisual(v); const own = item.data.ownMaterials as THREE.Material[] | undefined; if (own) for (const m of own) m.dispose(); } function centerOf(item: Item): { x: number; y: number } { const list = item.bodies.length ? item.bodies : item.staticBodies; if (!list.length) return { x: 0, y: 0 }; let sx = 0, sy = 0; for (const b of list) { sx += b.position.x; sy += b.position.y; } return { x: sx / list.length, y: sy / list.length }; } // ── Explosions / pops / shatters / cuts (phase-2 actions) ──────────────── function processExplosions() { while (explodeQueue.length > 0) { const { item, radius, power } = explodeQueue.shift()!; if (!items.includes(item)) continue; const c = centerOf(item); despawnItem(item); explodeAt(c.x, c.y, radius, power); } } function explodeAt(x: number, y: number, radius: number, power: number) { for (const it of items) { for (const b of it.bodies) { if (b.mass <= 0) continue; const dx = b.position.x - x, dy = b.position.y - y; const d = Math.hypot(dx, dy); if (d > radius) continue; let nx = 0, ny = 1; // degenerate: straight up if (d > 0.05) { nx = dx / d; ny = dy / d; } const J = power * (1 - d / radius); b.wakeUp(); b.applyImpulse(new CANNON.Vec3(nx * J, ny * J + 0.25 * J, 0)); } // chain reactions: nearby idle explosives light their own fuses if ((it.type === "barrel" || it.type === "tnt") && it.state === "idle") { const cc = centerOf(it); if (Math.hypot(cc.x - x, cc.y - y) < radius) it.onIgnite?.(); } } flashLightAt(x, y, 55); burst({ x, y, count: 1, tex: flashTexture, speed: 0, ttl: 0.45, s0: 1.4, s1: radius * 1.5 }); burst({ x, y, count: 6, tex: starTexture, speed: 5, up: 1, grav: 6, ttl: 0.55, s0: 0.42, s1: 0.2 }); burst({ x, y, count: 6, tex: smokeTexture, color: "#cfd8dc", speed: 1.6, up: 1.6, grav: -0.6, ttl: 1.0, s0: 0.5, s1: 1.4 }); wordPop(x, y + 0.6, boomTexture, 1.7); } function popBalloon(it: Item) { if (it.state === "popped" || !items.includes(it)) return; it.state = "popped"; const p = it.bodies[0].position; wordPop(p.x, p.y, popTexture, 1.1); burst({ x: p.x, y: p.y, count: 4, tex: starTexture, speed: 3, up: 1, grav: 5, ttl: 0.5, s0: 0.3, s1: 0.15 }); burst({ x: p.x, y: p.y, count: 8, tex: confettiTexture, randColor: CONFETTI_COLORS, speed: 2.5, up: 1.5, grav: 4, ttl: 0.8, s0: 0.14 }); despawnItem(it); } function shatterCase(it: Item) { if (it.state === "jewel" || !items.includes(it)) return; it.state = "jewel"; const body = it.bodies[0]; const px = body.position.x, py = body.position.y; const vx = body.velocity.x, vy = body.velocity.y; if (grabbed && grabbed.body === body) releaseGrab(); removeConstraintsReferencing([body], it); body.removeEventListener("collide", onBodyCollide); world.removeBody(body); dynamicBodyCount--; for (const v of it.visuals) removeVisual(v); // free jewel body const jewel = makeDynamicBody(new CANNON.Sphere(0.22), 0.8, px, py); jewel.velocity.set(vx * 0.4, Math.max(vy * 0.2, -2), 0); const jv = meshFor(GEO.icosa, jewelMat, 0.24, 0.32, 0.24, jewel); jv.userData.itemId = it.id; world.addBody(jewel); dynamicBodyCount++; scene.add(jv); it.bodies = [jewel]; it.partNames = ["jewel"]; it.visuals = [jv]; // comic glass shatter + sparkle (pooled particles - no gore, just glitter) burst({ x: px, y: py, count: 10, tex: shardTexture, color: "#b3e5fc", speed: 3.2, up: 1.8, grav: 8, ttl: 0.7, s0: 0.2, s1: 0.08 }); burst({ x: px, y: py + 0.2, count: 3, tex: starTexture, speed: 1.4, up: 1.2, grav: 2, ttl: 0.6, s0: 0.26, s1: 0.12 }); } function pointSegDist(px: number, py: number, ax: number, ay: number, bx: number, by: number): number { const dx = bx - ax, dy = by - ay; const len2 = dx * dx + dy * dy; let t = len2 > 1e-9 ? ((px - ax) * dx + (py - ay) * dy) / len2 : 0; t = Math.max(0, Math.min(1, t)); return Math.hypot(px - (ax + dx * t), py - (ay + dy * t)); } function cutAt(wx: number, wy: number): boolean { // nearest severable constraint (chain / rope / balloon-string link) let bestC: { item: Item; c: CANNON.Constraint } | null = null; let bestD = CUT_RADIUS; for (const it of items) for (const c of it.constraints) { if (!(c as unknown as Record).__cuttable) continue; const a = (c as unknown as { bodyA: CANNON.Body }).bodyA.position; const b = (c as unknown as { bodyB: CANNON.Body }).bodyB.position; const d = pointSegDist(wx, wy, a.x, a.y, b.x, b.y); if (d < bestD) { bestD = d; bestC = { item: it, c } } } // a cut directly on a balloon pops it let bestBalloon: Item | null = null; let bd = 0.5; for (const it of items) { if (it.type !== "balloon" || it.state === "popped") continue; const p = it.bodies[0].position; const d = Math.hypot(p.x - wx, p.y - wy); if (d < bd) { bd = d; bestBalloon = it; } } if (bestBalloon && bd <= bestD) { popBalloon(bestBalloon); return true; } if (bestC) { world.removeConstraint(bestC.c); const ci = bestC.item.constraints.indexOf(bestC.c); if (ci >= 0) bestC.item.constraints.splice(ci, 1); for (const b of bestC.item.bodies) b.wakeUp(); burst({ x: wx, y: wy, count: 3, tex: sparkTexture, color: "#ffffff", speed: 1.5, up: 0.5, grav: 2, ttl: 0.25, s0: 0.12, s1: 0.05 }); return true; } return false; } function syncItemVisuals(item: Item) { for (let i = 0; i < item.bodies.length; i++) { const b = item.bodies[i]; const v = item.visuals[i]; v.position.set(b.position.x, b.position.y, b.position.z); v.quaternion.set(b.quaternion.x, b.quaternion.y, b.quaternion.z, b.quaternion.w); } } function resetScene() { while (items.length > 0) despawnItem(items[items.length - 1]); for (const fx of fxPool) { fx.life = 0; fx.sprite.visible = false; } for (const p of puffPool) { p.life = 0; p.sprite.visible = false; } explodeQueue.length = 0; deferred.length = 0; setGravity(GRAVITY_DEFAULT); setSlowmo(false); } // ── Grab tool (point-to-point constraint + flick on release) ──────────── const jointBody = new CANNON.Body({ mass: 0, type: CANNON.Body.STATIC }); jointBody.addShape(new CANNON.Sphere(0.05)); jointBody.collisionFilterGroup = 0; jointBody.collisionFilterMask = 0; world.addBody(jointBody); let grabbed: { body: CANNON.Body; constraint: CANNON.PointToPointConstraint } | null = null; const pointerTrail: { x: number; y: number; t: number }[] = []; const raycaster = new THREE.Raycaster(); const ndc = new THREE.Vector2(); // Pointer -> world: raycast the perspective camera ray onto the z=0 plane // (the plane every physics body lives on). const PLANE_Z0 = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0); const planeHit = new THREE.Vector3(); function pointerToWorld(clientX: number, clientY: number): { x: number; y: number } { const rect = canvas.getBoundingClientRect(); ndc.set(((clientX - rect.left) / rect.width) * 2 - 1, -(((clientY - rect.top) / rect.height) * 2 - 1)); raycaster.setFromCamera(ndc, camera); if (raycaster.ray.intersectPlane(PLANE_Z0, planeHit)) { return { x: planeHit.x, y: planeHit.y }; } const v = new THREE.Vector3(ndc.x, ndc.y, 0.5).unproject(camera); // degenerate fallback return { x: v.x, y: v.y }; } function pickBodyAt(clientX: number, clientY: number): { body: CANNON.Body; point: { x: number; y: number } } | null { const rect = canvas.getBoundingClientRect(); ndc.set(((clientX - rect.left) / rect.width) * 2 - 1, -(((clientY - rect.top) / rect.height) * 2 - 1)); raycaster.setFromCamera(ndc, camera); const hits = raycaster.intersectObjects(pickMeshes, false); const w = pointerToWorld(clientX, clientY); for (const h of hits) { const b = (h.object.userData && h.object.userData.body) as CANNON.Body | undefined; if (b && b.mass > 0) return { body: b, point: { x: w.x, y: w.y } }; } // Touch-friendly fallback: nearest dynamic body within 0.6 units. let best: CANNON.Body | null = null; let bestD = 0.6; for (const item of items) for (const b of item.bodies) { const dx = b.position.x - w.x, dy = b.position.y - w.y; const d = Math.sqrt(dx * dx + dy * dy); if (d < bestD) { bestD = d; best = b; } } return best ? { body: best, point: { x: w.x, y: w.y } } : null; } function startGrab(body: CANNON.Body, wx: number, wy: number) { releaseGrab(); body.wakeUp(); jointBody.position.set(wx, wy, 0); const pivot = body.pointToLocalFrame(new CANNON.Vec3(wx, wy, 0), new CANNON.Vec3()); const c = new CANNON.PointToPointConstraint(body, pivot, jointBody, new CANNON.Vec3(0, 0, 0), 60 * Math.max(1, body.mass)); world.addConstraint(c); grabbed = { body, constraint: c }; } function releaseGrab(flick = false) { if (!grabbed) return; world.removeConstraint(grabbed.constraint); const body = grabbed.body; grabbed = null; if (flick && pointerTrail.length >= 2) { const newest = pointerTrail[pointerTrail.length - 1]; // Flick velocity = displacement over the recent trail. The window is // time-bounded at 280ms for environments that deliver sparse pointer // events (low-end / software-GL browsers); on real devices the 8-point // trail cap keeps the effective window near a frame-times-8 gesture // tail, so flick feel is unchanged. let oldest = pointerTrail[0]; for (const p of pointerTrail) { if (newest.t - p.t <= 280) { oldest = p; break; } } const dt = (newest.t - oldest.t) / 1000; if (dt > 0.005) { let vx = (newest.x - oldest.x) / dt; let vy = (newest.y - oldest.y) / dt; const sp = Math.sqrt(vx * vx + vy * vy); const MAXV = 26; if (sp > MAXV) { vx = (vx / sp) * MAXV; vy = (vy / sp) * MAXV; } body.velocity.set(vx, vy, 0); body.wakeUp(); } } } // ── Input wiring ───────────────────────────────────────────────────────── type Tool = "grab" | "cut" | "ignite" | "delete" | ItemType; let tool: Tool = "grab"; let paletteDragType: ItemType | null = null; let pointerDown = false; // Tap-pick a whole ITEM (any part - dynamic mesh or static pad/post). function pickItemAt(clientX: number, clientY: number): Item | null { const rect = canvas.getBoundingClientRect(); ndc.set(((clientX - rect.left) / rect.width) * 2 - 1, -(((clientY - rect.top) / rect.height) * 2 - 1)); raycaster.setFromCamera(ndc, camera); const hits = raycaster.intersectObjects(pickMeshes, false); for (const h of hits) { const id = h.object.userData.itemId as number | undefined; if (id != null) { const it = items.find((x) => x.id === id); if (it) return it; } const b = h.object.userData.body as CANNON.Body | undefined; if (b) { const it = items.find((x) => x.bodies.includes(b)); if (it) return it; } } // touch-friendly fallback: nearest item center within 0.9 units const w = pointerToWorld(clientX, clientY); let best: Item | null = null; let bestD = 0.9; for (const it of items) { const c = centerOf(it); const d = Math.hypot(c.x - w.x, c.y - w.y); if (d < bestD) { bestD = d; best = it; } } return best; } function deleteItem(it: Item) { const c = centerOf(it); burst({ x: c.x, y: c.y, count: 4, tex: smokeTexture, color: "#eceff1", speed: 1.2, up: 1, grav: -0.4, ttl: 0.5, s0: 0.35, s1: 0.7 }); despawnItem(it); } function onPointerDown(e: PointerEvent) { if (disposed) return; pointerDown = true; pointerTrail.length = 0; const w = pointerToWorld(e.clientX, e.clientY); pointerTrail.push({ x: w.x, y: w.y, t: performance.now() }); if (tool === "grab") { const hit = pickBodyAt(e.clientX, e.clientY); if (hit) startGrab(hit.body, hit.point.x, hit.point.y); } else if (tool === "cut") { cutAt(w.x, w.y); } else if (tool === "ignite") { pickItemAt(e.clientX, e.clientY)?.onIgnite?.(); } else if (tool === "delete") { const it = pickItemAt(e.clientX, e.clientY); if (it) deleteItem(it); } else { spawnItem(tool, w.x, w.y); } try { canvas.setPointerCapture(e.pointerId); } catch { /* ok */ } } function onPointerMove(e: PointerEvent) { if (disposed || !pointerDown) return; const w = pointerToWorld(e.clientX, e.clientY); pointerTrail.push({ x: w.x, y: w.y, t: performance.now() }); if (pointerTrail.length > 8) pointerTrail.shift(); if (tool === "cut") cutAt(w.x, w.y); // drag to slice across links if (grabbed) { jointBody.position.set(w.x, w.y, 0); grabbed.body.wakeUp(); } } function onPointerUp(e: PointerEvent) { if (disposed) return; pointerDown = false; if (grabbed) { const w = pointerToWorld(e.clientX, e.clientY); pointerTrail.push({ x: w.x, y: w.y, t: performance.now() }); releaseGrab(true); } } canvas.addEventListener("pointerdown", onPointerDown); window.addEventListener("pointermove", onPointerMove); window.addEventListener("pointerup", onPointerUp); // Palette drag-to-place: pointerdown on a palette chip records the type; // releasing over the canvas spawns there. function onWindowPointerUpForPalette(e: PointerEvent) { if (paletteDragType) { const rect = canvas.getBoundingClientRect(); if (e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom) { const w = pointerToWorld(e.clientX, e.clientY); spawnItem(paletteDragType, w.x, w.y); } paletteDragType = null; } } window.addEventListener("pointerup", onWindowPointerUpForPalette); // ── Gravity / slow-mo / reset controls (shared with test API) ─────────── function setGravity(g: number) { gravityG = Math.max(-5, Math.min(25, g)); world.gravity.set(0, -gravityG, 0); for (const item of items) for (const b of item.bodies) b.wakeUp(); if (gravitySlider) gravitySlider.value = String(gravityG); if (gravityLabel) gravityLabel.textContent = gravityG.toFixed(1); } function setSlowmo(on: boolean) { slowmo = !!on; if (slowmoBtn) slowmoBtn.classList.toggle("wr-active", slowmo); if (slowmoBadge) slowmoBadge.style.display = slowmo ? "block" : "none"; } // ── DOM overlay UI ─────────────────────────────────────────────────────── const ui = document.createElement("div"); ui.id = "wr-ui"; ui.innerHTML = `

WRECK ROOM

🐢 SLOW-MO

Gravity ${GRAVITY_DEFAULT.toFixed(1)}

`; mount.appendChild(ui); const toolButtons = Array.from(ui.querySelectorAll(".wr-tool")); function selectTool(t: Tool) { tool = t; for (const b of toolButtons) b.classList.toggle("wr-active", b.dataset.tool === t); } for (const b of toolButtons) { b.addEventListener("click", () => selectTool(b.dataset.tool as Tool)); b.addEventListener("pointerdown", () => { const t = b.dataset.tool as Tool; if ((BUILDERS as Record)[t]) paletteDragType = t as ItemType; }); } selectTool("grab"); const gravitySlider = ui.querySelector("#wr-gravity"); const gravityLabel = ui.querySelector("#wr-gravity-val"); const slowmoBtn = ui.querySelector("#wr-slowmo"); const slowmoBadge = ui.querySelector("#wr-slowmo-badge"); const resetBtn = ui.querySelector("#wr-reset"); gravitySlider?.addEventListener("input", () => setGravity(parseFloat(gravitySlider.value))); slowmoBtn?.addEventListener("click", () => setSlowmo(!slowmo)); resetBtn?.addEventListener("click", () => resetScene()); // ── Main loop: fixed 1/60 physics via cannon accumulator, slow-mo scales // BOTH physics time and FX animations. ──────────────────────────────── let raf = 0; let lastFrameAt = performance.now(); const frameDurations: number[] = []; let fpsAvg = 60; let framesSinceScaleCheck = 0; let physMsAvg = 0; let renderMsAvg = 0; function frame() { if (disposed) return; raf = requestAnimationFrame(frame); const now = performance.now(); let wallDt = (now - lastFrameAt) / 1000; lastFrameAt = now; if (wallDt > 0.1) wallDt = 0.1; // clamp huge tab-switch deltas // rolling FPS (last 30 frames) frameDurations.push(wallDt); if (frameDurations.length > 30) frameDurations.shift(); const sum = frameDurations.reduce((a, b) => a + b, 0); fpsAvg = frameDurations.length / Math.max(sum, 1e-6); // Adaptive resolution scaling (see renderScale above). Check every ~45 // frames so we react in ~1s without thrashing. if (++framesSinceScaleCheck >= 45) { framesSinceScaleCheck = 0; if (fpsAvg < 45 && renderScale > 0.45) { renderScale = Math.max(0.45, renderScale * 0.75); applyRenderSize(); } else if (fpsAvg < 42 && renderScale <= 0.45 && shadowsOn) { // Last-resort degrade for very weak GPUs (software GL): drop the // dynamic-shadow pass entirely. One-way per session, no thrash. shadowsOn = false; key.castShadow = false; } else if (fpsAvg > 57 && renderScale < 1) { renderScale = Math.min(1, renderScale * 1.2); applyRenderSize(); } } const timeFactor = slowmo ? SLOWMO_FACTOR : 1; const simDt = wallDt * timeFactor; // Per-item behaviors (fans, balloons, fuses, tripwires) run on SIM time. for (const it of items.slice()) it.update?.(simDt); processExplosions(); // Fixed timestep + accumulator (cannon-es steps internally), max 3 substeps. const tp0 = performance.now(); world.step(FIXED_DT, simDt, MAX_SUBSTEPS); const tp1 = performance.now(); // Collide-triggered actions (shatter, coin spill, trampoline boost, pops) // were queued during the step; run them outside it for solver safety. if (deferred.length > 0) { const defs = deferred.splice(0, deferred.length); for (const f of defs) { try { f(); } catch (err) { console.warn("[Wreck Room] deferred action failed", err); } } } for (const item of items) syncItemVisuals(item); updateFx(simDt); renderer.render(scene, camera); const tp2 = performance.now(); physMsAvg += (tp1 - tp0 - physMsAvg) * 0.1; renderMsAvg += (tp2 - tp1 - renderMsAvg) * 0.1; } raf = requestAnimationFrame(frame); // Asset-swap seam: preload injected hero GLBs (store builds only). On /play // there is no window.MCPityAssets, so every getModel() resolves to null, // heroTemplates stays empty, and every prop stays procedural. Fire-and-forget // so boot never waits on it; the first user spawn happens seconds later. void preloadHeroAssets(); // Tell the preview harness the game booted (measureLoadTime contract). try { parent.postMessage({ type: "mcpity:web-engine:ready" }, "*"); } catch { /* opaque parent */ } // ── Test API (kept in shipped code - harmless, enables automated QA) ──── (window as unknown as Record).__wreckroom = { spawn: (type: ItemType, x: number, y: number) => spawnItem(type, Number(x) || 0, Number(y) || 5), setGravity: (g: number) => setGravity(Number(g)), setSlowmo: (on: boolean) => setSlowmo(!!on), reset: () => resetScene(), // phase-2 API setTool: (t: string) => selectTool(t as Tool), ignite: (itemIndex: number) => { items[itemIndex]?.onIgnite?.(); }, cutAt: (x: number, y: number) => cutAt(Number(x), Number(y)), // world (z=0 plane) -> canvas client px, via the live game camera. Lets // automated QA aim pointer events exactly where objects appear on screen. worldToScreen: (x: number, y: number) => { const v = new THREE.Vector3(Number(x) || 0, Number(y) || 0, 0).project(camera); const rect = canvas.getBoundingClientRect(); return { x: rect.left + ((v.x + 1) / 2) * rect.width, y: rect.top + ((1 - v.y) / 2) * rect.height, }; }, find: (id: number) => items.findIndex((it) => it.id === id), // stable-id -> current index kick: (itemIndex: number, partIndex: number, vx: number, vy: number) => { const b = items[itemIndex]?.bodies[partIndex | 0]; if (!b) return false; b.wakeUp(); b.velocity.set(Number(vx) || 0, Number(vy) || 0, 0); return true; }, getState: () => ({ bodies: dynamicBodyCount, items: items.map((i) => i.type), // index-stable detail: id survives despawns/evictions; use find(id) itemsDetail: items.map((it, i) => ({ i, id: it.id, type: it.type, state: it.state, bodies: it.bodies.length })), tool, fxActive: fxPool.filter((f) => f.life > 0).length + puffPool.filter((p) => p.life > 0).length, slowmo, gravity: gravityG, fps: Math.round(fpsAvg * 10) / 10, time: world.time, // diagnostics (extra fields, harmless): rolling per-frame cost split physMs: Math.round(physMsAvg * 100) / 100, renderMs: Math.round(renderMsAvg * 100) / 100, awake: items.reduce((n, it) => n + it.bodies.filter((b) => b.sleepState !== 2).length, 0), renderScale: Math.round(renderScale * 100) / 100, shadows: shadowsOn, shadowCasters: shadowCasterCount, }), getBodyPositions: (itemIndex: number) => { const item = items[itemIndex]; if (!item) return null; return item.bodies.map((b, i) => ({ name: item.partNames[i], x: b.position.x, y: b.position.y, z: b.position.z, vx: b.velocity.x, vy: b.velocity.y, })); }, }; // ── Hot-reload dispose hook ────────────────────────────────────────────── (window as unknown as Record).__mcpity_dispose = () => { disposed = true; cancelAnimationFrame(raf); window.removeEventListener("resize", resize); window.removeEventListener("pointermove", onPointerMove); window.removeEventListener("pointerup", onPointerUp); window.removeEventListener("pointerup", onWindowPointerUpForPalette); canvas.removeEventListener("pointerdown", onPointerDown); resetScene(); ui.remove(); renderer.dispose(); if (renderer.domElement.parentNode) renderer.domElement.parentNode.removeChild(renderer.domElement); for (const g of Object.values(GEO)) g.dispose(); for (const m of matCache.values()) m.dispose(); for (const m of basicCache.values()) m.dispose(); (backWall.material as THREE.MeshLambertMaterial).map?.dispose(); (backWall.material as THREE.Material).dispose(); floorMat.map?.dispose(); floorMat.dispose(); ballMetalMat.dispose(); jewelMat.dispose(); shineMat.dispose(); key.shadow.map?.dispose?.(); crateMat.map?.dispose(); crateMat.dispose(); plankMat.map?.dispose(); plankMat.dispose(); tntMat.map?.dispose(); tntMat.dispose(); glassMat.dispose(); moneyDecalMat.map?.dispose(); moneyDecalMat.dispose(); starTexture.dispose(); for (const t of wordTextures) t.dispose(); boomTexture.dispose(); popTexture.dispose(); smokeTexture.dispose(); sparkTexture.dispose(); coinTexture.dispose(); shardTexture.dispose(); confettiTexture.dispose(); flashTexture.dispose(); for (const p of puffPool) (p.sprite.material as THREE.SpriteMaterial).dispose(); delete (window as unknown as Record).__wreckroom; }; } // ─── Canvas-texture helpers (created once at boot, shared) ────────────────── function makeCanvas(w: number, h: number): [HTMLCanvasElement, CanvasRenderingContext2D] { const c = document.createElement("canvas"); c.width = w; c.height = h; return [c, c.getContext("2d")!]; } function makeGradientTexture(top: string, bottom: string): THREE.CanvasTexture { const [c, ctx] = makeCanvas(4, 128); const g = ctx.createLinearGradient(0, 0, 0, 128); g.addColorStop(0, top); g.addColorStop(1, bottom); ctx.fillStyle = g; ctx.fillRect(0, 0, 4, 128); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeBackWallTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(256, 512); const g = ctx.createLinearGradient(0, 0, 0, 512); g.addColorStop(0, "#fdf3e3"); g.addColorStop(1, "#f4e0c8"); ctx.fillStyle = g; ctx.fillRect(0, 0, 256, 512); // subtle polka dots for a playroom feel ctx.fillStyle = "rgba(190, 160, 120, 0.12)"; for (let y = 24; y < 512; y += 56) { for (let x = ((y / 56) % 2) * 28 + 16; x < 256; x += 56) { ctx.beginPath(); ctx.arc(x, y, 7, 0, Math.PI * 2); ctx.fill(); } } const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeFloorTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(256, 256); ctx.fillStyle = "#e8b96b"; ctx.fillRect(0, 0, 256, 256); // plank seams running toward the camera give the receding floor a grid read ctx.strokeStyle = "rgba(150, 100, 40, 0.35)"; ctx.lineWidth = 3; for (let x = 0; x <= 256; x += 32) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, 256); ctx.stroke(); } ctx.strokeStyle = "rgba(150, 100, 40, 0.18)"; ctx.lineWidth = 2; for (let y = 0; y <= 256; y += 64) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(256, y); ctx.stroke(); } // soft grain ctx.fillStyle = "rgba(255, 235, 190, 0.10)"; for (let i = 0; i < 26; i++) { ctx.fillRect((i * 47) % 256, (i * 83) % 256, 20, 4); } const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeCrateTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(128, 128); ctx.fillStyle = "#c98846"; ctx.fillRect(0, 0, 128, 128); ctx.strokeStyle = "#8f5b26"; ctx.lineWidth = 10; ctx.strokeRect(5, 5, 118, 118); ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(8, 8); ctx.lineTo(120, 120); ctx.stroke(); ctx.beginPath(); ctx.moveTo(120, 8); ctx.lineTo(8, 120); ctx.stroke(); ctx.fillStyle = "rgba(255,255,255,0.10)"; ctx.fillRect(10, 10, 108, 20); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makePlankTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(256, 64); ctx.fillStyle = "#deb069"; ctx.fillRect(0, 0, 256, 64); ctx.strokeStyle = "rgba(140, 95, 40, 0.55)"; ctx.lineWidth = 3; for (let i = 0; i < 5; i++) { ctx.beginPath(); ctx.moveTo(0, 10 + i * 12 + Math.sin(i) * 3); ctx.bezierCurveTo(80, 6 + i * 12, 170, 16 + i * 12, 256, 10 + i * 12); ctx.stroke(); } ctx.strokeStyle = "#a5732f"; ctx.lineWidth = 8; ctx.strokeRect(2, 2, 252, 60); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeStarTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(96, 96); ctx.translate(48, 48); ctx.fillStyle = "#ffd93b"; ctx.strokeStyle = "#ff9800"; ctx.lineWidth = 6; ctx.beginPath(); for (let i = 0; i < 10; i++) { const r = i % 2 === 0 ? 40 : 17; const a = (i / 10) * Math.PI * 2 - Math.PI / 2; const x = Math.cos(a) * r, y = Math.sin(a) * r; if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.fill(); ctx.stroke(); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeWordTexture(word: string, color: string): THREE.CanvasTexture { const [c, ctx] = makeCanvas(256, 128); ctx.font = "900 64px 'Comic Sans MS', 'Chalkboard SE', ui-rounded, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.save(); ctx.translate(128, 64); ctx.rotate(-0.06); ctx.lineWidth = 14; ctx.strokeStyle = "#ffffff"; ctx.strokeText(word, 0, 0); ctx.lineWidth = 5; ctx.strokeStyle = "#222"; ctx.strokeText(word, 0, 0); ctx.fillStyle = color; ctx.fillText(word, 0, 0); ctx.restore(); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeTntTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(128, 128); ctx.fillStyle = "#d84315"; ctx.fillRect(0, 0, 128, 128); ctx.strokeStyle = "#8d2a0b"; ctx.lineWidth = 8; ctx.strokeRect(4, 4, 120, 120); ctx.fillStyle = "#ffe0b2"; ctx.fillRect(12, 48, 104, 32); ctx.font = "900 26px 'Arial Black', sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "#4e1a05"; ctx.fillText("TNT", 64, 65); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeMoneyTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(96, 96); ctx.clearRect(0, 0, 96, 96); ctx.font = "900 64px 'Arial Black', sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.lineWidth = 10; ctx.strokeStyle = "#4e342e"; ctx.strokeText("$", 48, 52); ctx.fillStyle = "#ffd54f"; ctx.fillText("$", 48, 52); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeSmokeTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(64, 64); const g = ctx.createRadialGradient(32, 32, 4, 32, 32, 30); g.addColorStop(0, "rgba(255,255,255,0.9)"); g.addColorStop(0.6, "rgba(255,255,255,0.5)"); g.addColorStop(1, "rgba(255,255,255,0)"); ctx.fillStyle = g; ctx.fillRect(0, 0, 64, 64); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeSparkTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(48, 48); ctx.translate(24, 24); ctx.fillStyle = "#ffffff"; ctx.beginPath(); for (let i = 0; i < 8; i++) { const r = i % 2 === 0 ? 22 : 6; const a = (i / 8) * Math.PI * 2; const x = Math.cos(a) * r, y = Math.sin(a) * r; if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.fill(); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeCoinTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(64, 64); ctx.beginPath(); ctx.arc(32, 32, 26, 0, Math.PI * 2); ctx.fillStyle = "#ffd54f"; ctx.fill(); ctx.lineWidth = 6; ctx.strokeStyle = "#f9a825"; ctx.stroke(); ctx.font = "900 30px 'Arial Black', sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "#a06e00"; ctx.fillText("$", 32, 34); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeShardTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(48, 48); ctx.beginPath(); ctx.moveTo(24, 4); ctx.lineTo(42, 40); ctx.lineTo(8, 36); ctx.closePath(); ctx.fillStyle = "rgba(255,255,255,0.92)"; ctx.fill(); ctx.lineWidth = 3; ctx.strokeStyle = "rgba(180,220,255,0.9)"; ctx.stroke(); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeConfettiTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(32, 32); ctx.fillStyle = "#ffffff"; ctx.beginPath(); // rounded rectangle confetto (tinted per-particle via material.color) ctx.moveTo(8, 4); ctx.lineTo(24, 4); ctx.quadraticCurveTo(28, 4, 28, 8); ctx.lineTo(28, 24); ctx.quadraticCurveTo(28, 28, 24, 28); ctx.lineTo(8, 28); ctx.quadraticCurveTo(4, 28, 4, 24); ctx.lineTo(4, 8); ctx.quadraticCurveTo(4, 4, 8, 4); ctx.fill(); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function makeFlashTexture(): THREE.CanvasTexture { const [c, ctx] = makeCanvas(128, 128); const g = ctx.createRadialGradient(64, 64, 2, 64, 64, 62); g.addColorStop(0, "rgba(255,255,255,1)"); g.addColorStop(0.35, "rgba(255,236,150,0.95)"); g.addColorStop(0.7, "rgba(255,152,0,0.55)"); g.addColorStop(1, "rgba(255,87,34,0)"); ctx.fillStyle = g; ctx.fillRect(0, 0, 128, 128); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; } function easeOutBack(t: number): number { const c1 = 1.70158, c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); } // ─── Entry (matches fruit-merger convention) ──────────────────────────────── boot().catch((err) => { console.error("[Wreck Room] boot failed:", err); });