/** * INTEGRATION SEAM — owned by integration, not by lanes. * The playable slice: a blob + paint + buffs, the shared race loop, and a * COURSE. The flagship "Breakfast Rush" is hand-built (buildBreakfastRush — it * carries a lot of integration tuning); extra courses are data (see course/spec) * and load with `?course=`. */ import * as THREE from 'three' import type { World } from './contracts' import { buildGreybox } from './course/greybox' import { createBlob, type BlobHandle } from './blob/createBlob' import { createBlobController } from './blob/controller' import { createBlobFeel } from './blob/feel' import { createFollowCamera } from './blob/camera' import { PaintSkin, PaintCannon, BuffSystem, PaintHUD, installPaint } from './paint/index' import { createBucketDump, createBubbleArch, createConveyorBelt, createPaintMine, createColorGate, createPaintBubbles, SURFACES, applySurface, } from './machine/index' import { installZones } from './course/zones' import { buildCourseFromSpec, COURSES, COURSE_META, type FinishBox } from './course/spec' import { installCheckpoints, type CheckpointList } from './course/checkpoints' import { assets } from './assets/registry' import { hasOverrides } from './assets/idb' import { installAudio } from './audio/index' import { installGhost } from './ghost/index' import { installTitle } from './ui/title' /** Breakfast Rush spawn — matches buildGreybox()'s recommended spawn plateau. */ const BREAKFAST_SPAWN = new THREE.Vector3(0, 3.5, 30) /** Breakfast Rush checkpoints: landing shelf, slope bottom, fork entrance. * y is the local floor top at that spot (posts stand on it; respawn is +0.8). */ const BREAKFAST_CHECKPOINTS: CheckpointList = [ // Two, both on dry open ground. No mid-course one: the slope's volume would // eject a respawner and the river's rinse strips the paint a checkpoint is // supposed to preserve — a fall there honestly costs you the river re-run. [0, 3.5, -6], // gap-jump landing shelf [0, 0.24, -42], // machine district / fork entrance ] /** * Build the hand-tuned flagship course onto the world and return its finish box. * (Everything here used to live inline in installGame; it is course-specific.) */ function buildBreakfastRush(world: World, blob: BlobHandle, skin: PaintSkin): FinishBox { buildGreybox(world) // ---- paint economy (Lane G): puddles + colour zones + MEGA/MINI fork ---- const zones = installZones(world, blob, skin) for (const spec of zones.cannonConfigs) { world.addSystem(new PaintCannon({ world, position: new THREE.Vector3(...spec.position), color: spec.color, target: blob.mesh, paint: skin, targetRadius: blob.radius, triggerId: spec.triggerId, interval: spec.interval, muzzleSpeed: 26, // default 16 caps ballistic range at ~18u — course distances need ~26 splatRadius: 0.45, })) } // ---- centre-lane machine garnish (Lane C) ---- // The fork owns plate/boot now (zones.ts). The belt+bucket moved to the // CENTRE lane: un-forked runners get slow-carried under a purple dump — // a free taste of MEGA with no roof above (never dump grow-juice inside // the MINI tunnel: growing under the roof would wedge you). createBucketDump(world, { id: 'bucket-1', position: [-1.4, 6, -50], color: 'purple', radius: 0.8, // Shallow catch just upstream of the spout (bucket.x+1.4 = belt centre x=0): // observed teeter drift is 0.4-2u depending on speed. trigger: { size: [3, 2, 1.6], offset: [1.4, -5.2, 0.75] }, }) createConveyorBelt(world, { id: 'belt-1', position: [0, 0.0, -50], // sunk flush with the machine pad — a proud belt face curbed the racing line size: [3, 0.5, 10], velocity: [0, 0, -3], }) createBubbleArch(world, { id: 'arch-1', position: [-4.5, 0.12, -56], fraction: 0.6, // purple-lane exit: cleansing punishes a failed MEGA attempt }) // ---- paint bubbles: blue soap bubbles drifting over the milk-river approach. // Pop one mid-run → SLICK/waterproof → your paint survives the rinse. The // bubble colour teaches the counter to the hazard it floats above. ---- createPaintBubbles(world, { id: 'bubbles-river', position: [0, 1.4, -24], color: 'blue', radius: 0.6, splats: 2, count: 6, area: [5, 1.0, 2.5], drift: [0, 0.3, 0], bubbleRadius: 0.6, }) // ---- paint-mines: first-through floor panels on the centre line ---- // REWARD: roll over it and it launches you forward + coats you GREEN (GRIP) — // a shortcut booster for the runner who takes the middle. HAZARD: further down, // dumps heavy PURPLE (MEGA) and shoves you toward the pink tunnel lane where a // grown blob bonks the roof — the greedy straight-liner pays for it. Both // re-arm each run (race:respawn) so the time-trial stays repeatable. createPaintMine(world, { id: 'mine-reward', position: [0, 0.06, -34], color: 'green', radius: 0.9, splats: 5, impulse: 8, direction: [0, 1, -0.6], size: [3.4, 3.4], }) createPaintMine(world, { id: 'mine-hazard', position: [0, 0.24, -44], color: 'purple', radius: 0.8, splats: 4, impulse: 7, direction: [0.8, 0.5, 0], size: [3, 3], }) // ---- oil slick: a slippery patch on the flat approach. applySurface gives // it oil friction with a Min combine rule, so it stays slick under ANY blob // (even a grippy green one), and the userData tag lets the controller throttle // steering + add drag → you luge across it. Demo of the surface framework. ---- { const oilMat = new THREE.MeshStandardMaterial({ color: SURFACES.oil.color, roughness: 0.12, metalness: 0.35, }) const oil = new THREE.Mesh(new THREE.BoxGeometry(6, 0.08, 4), oilMat) oil.position.set(0, 0.28, -40) // machine-pad centre lane (top y0.24), clear of the fork exits + hazard mine oil.receiveShadow = true world.scene.add(oil) const oilCol = world.physics.createCollider( world.rapier.ColliderDesc.cuboid(3, 0.04, 2).setTranslation(0, 0.28, -40)) applySurface(world.rapier, oilCol, 'oil') ;(oilCol as unknown as { userData?: unknown }).userData = { surface: 'oil' } } // ---- colour-keyed gate: a GREEN shortcut through the centre lane, just // before the finish. Roll over the green reward mine upstream and you arrive // green enough for the gate to sink into the floor — a straight blast to the // line. Arrive un-green and it stays shut, so you steer around the short // flank walls (a detour). Closes the core loop solo: paint decides your route. // Walls only cover the centre (|x|<4) so the fork exits (boot x-6, tunnel // x6.5) are untouched. ---- { const gz = -59 const wallMat = new THREE.MeshStandardMaterial({ color: '#5b6b7a', roughness: 0.85 }) for (const x of [-3, 3] as const) { // flank the centre gate gap (gate is x[-2,2]) const wall = new THREE.Mesh(new THREE.BoxGeometry(2, 3, 0.8), wallMat) wall.position.set(x, 1.5, gz) wall.castShadow = true wall.receiveShadow = true world.scene.add(wall) world.physics.createCollider( world.rapier.ColliderDesc.cuboid(1, 1.5, 0.4).setTranslation(x, 1.5, gz)) } createColorGate(world, { id: 'gate-green', position: [0, 0.02, gz], color: 'green', size: [4, 3, 0.6], qualifies: () => skin.coverage().byColor.green >= 0.4, }) } // ---- gap-recovery trampoline: falling in the gap jump must cost time, not // soft-lock you under the green slope (straight-line drivers wedged at z≈-16.6). // A deterministic launcher bounces fallers back to shelf height. ---- { const tramp = new THREE.Mesh( new THREE.BoxGeometry(12, 0.5, 4), new THREE.MeshStandardMaterial({ color: '#FF9500', roughness: 0.6 })) tramp.position.set(0, 0.25, 0) // exactly the open slot between the shelves tramp.receiveShadow = true world.scene.add(tramp) world.physics.createCollider( world.rapier.ColliderDesc.cuboid(6, 0.25, 2).setTranslation(0, 0.25, 0)) // course.tramp slot: hide the MATERIAL, not the mesh — the custom model is // parented as a child, so hiding the mesh would hide it too. The collider // above is untouched, so the bounce is identical whatever the pad looks like. assets().attachSlot('course.tramp', tramp, { onSwap: () => { (tramp.material as THREE.Material).visible = false }, }) // Fill BOTH under-shelf volumes solid: the front-face plinth stopped // overshooters, but lane-huggers rolled in from the open x±7 sides and // wedged (observed at (-4.1,-7.9)). Under-shelf space serves no gameplay — // make the shelves read as solid blocks down to the floor. const plinthMat = new THREE.MeshStandardMaterial({ color: '#0A5FCB', roughness: 0.8 }) // Central fill only (x±5.2): observed wedges are all |x|<4.5; full-width // fills walled off the floor-level side corridors lane-hug routes use. for (const [zc, hz] of [[6, 4], [-6, 4]] as const) { const fill = new THREE.Mesh(new THREE.BoxGeometry(10.4, 2.8, hz * 2), plinthMat) fill.position.set(0, 1.4, zc) world.scene.add(fill) world.physics.createCollider( world.rapier.ColliderDesc.cuboid(5.2, 1.4, hz).setTranslation(0, 1.4, zc)) } // Deterministic launcher, not restitution: raw bounciness pachinkos off the // shelf's front edge and can still slip underneath. Catch a falling blob on // the pad and set a clean arc onto the landing shelf. let bounceCooldown = 0 world.addSystem({ update(dt) { bounceCooldown = Math.max(0, bounceCooldown - dt) const t = blob.body.translation() const v = blob.body.linvel() const onPad = Math.abs(t.x) < 7.2 && t.z > -2.2 && t.z < 2.2 && t.y < 1.4 // full gap width — lane-huggers fall at |x|≈7 if (onPad && v.y < 0.5 && bounceCooldown === 0) { // High + centered: held-W air control (~24 u/s²) flattens shallow arcs // into the shelf face, so go UP hard and pull toward the slot center; // forward drift only wins after the arc clears the shelf top. const vz = Math.max(-3, Math.min(3, (0.5 - t.z) * 1.5)) const vx = Math.max(-3, Math.min(3, (0 - t.x) * 1.5)) // center x too — cannon impacts drift racers sideways blob.body.setLinvel({ x: vx, y: 14, z: vz }, true) bounceCooldown = 0.6 world.events.emit('blob:jumped', {}) // reuse the stretch feel } }, }) } // Finish pad volume, extended to z -57.2 so a blob bonking the pad's front // face (a 1.2-high podium, unclimbable from the floor) still counts as a // finish. Mid-air crossings count too — the boot is a legit finisher. return { xMin: -9, xMax: 9, zMin: -70, zMax: -57.2, yMax: 4 } } export function installGame(world: World) { // ---- course selection: default = hand-built Breakfast Rush; ?course= // loads a data-driven course from COURSES. Spawn is known before geometry. ---- const which = new URLSearchParams(location.search).get('course') const spec = which ? COURSES[which] : undefined const spawn = spec ? new THREE.Vector3(...spec.spawn) : BREAKFAST_SPAWN.clone() // ---- blob (Lane A) ---- const blob = createBlob(world, { position: spawn }) blob.paint = new PaintSkin(blob.mesh, { size: 256 }) world.blob = blob world.addSystem(createBlobController(world, blob)) const feel = createBlobFeel(blob) world.events.on('blob:jumped', () => feel.onJump()) world.events.on('blob:landed', (p: { impact: number }) => feel.onLand(p.impact)) world.onFrame((dt) => feel.update(dt)) const camera = createFollowCamera(world, blob) world.onFrame((dt) => camera.update(dt)) const skin = blob.paint as PaintSkin // ---- build the selected course, get its finish box ---- const finish = spec ? buildCourseFromSpec(world, spec, { blob, skin }).finish : buildBreakfastRush(world, blob, skin) // ---- checkpoints: a fall costs time, not the run (see course/checkpoints) ---- const cps = installCheckpoints(world, blob, spec ? spec.checkpoints ?? [] : BREAKFAST_CHECKPOINTS) world.addSystem(new BuffSystem(world, { mesh: blob.mesh, modifiers: blob.modifiers, paint: skin })) installPaint(world, { mesh: blob.mesh, paint: skin }) const hud = new PaintHUD() world.onFrame(() => { hud.update(skin.coverage(), blob.modifiers) // coverage() self-caches at 250ms }) // ---- race loop: first movement starts the clock, the finish box ends it ---- // Per-course best time so switching courses doesn't compare apples to oranges. const bestKey = `blobbo:best${spec ? ':' + which : ''}` let raceState: 'idle' | 'running' | 'finished' = 'idle' let raceT = 0 let best: number | null = Number(localStorage.getItem(bestKey)) || null const raceUI = document.createElement('div') raceUI.style.cssText = 'position:fixed;top:12px;right:14px;font:700 20px ui-monospace,Menlo,monospace;' + 'color:#0a2540;background:rgba(255,255,255,.82);padding:8px 14px;border-radius:10px;' + 'z-index:15;text-align:right;pointer-events:none' document.body.appendChild(raceUI) const banner = document.createElement('div') banner.style.cssText = 'position:fixed;inset:0;display:none;align-items:center;justify-content:center;' + 'flex-direction:column;gap:12px;font:800 42px ui-monospace,Menlo,monospace;color:#fff;' + 'background:rgba(20,24,34,.72);z-index:30;text-align:center' document.body.appendChild(banner) const fmt = (s: number) => s.toFixed(2) + 's' let finishHold = 0 world.addSystem({ update(dt) { const t = blob.body.translation() const v = blob.body.linvel() if (raceState === 'idle') { if (Math.hypot(v.x, v.z) > 0.6) { raceState = 'running' raceT = 0 world.events.emit('race:started', {}) } } else if (raceState === 'running') { raceT += dt const inFinish = t.x >= finish.xMin && t.x <= finish.xMax && t.z >= finish.zMin && t.z <= finish.zMax && t.y <= finish.yMax if (inFinish) { raceState = 'finished' const isBest = best === null || raceT < best if (isBest) { best = raceT localStorage.setItem(bestKey, String(raceT)) } banner.innerHTML = `
🏁 FINISH — ${fmt(raceT)}
` + `
${isBest ? 'NEW BEST!' : 'best ' + fmt(best!)}
` + `
R / Start to race again — auto in 6s
` banner.style.display = 'flex' world.events.emit('race:finished', { time: raceT, best }) finishHold = 6 } } else { finishHold -= dt if (finishHold <= 0) respawn() } raceUI.textContent = (raceState === 'running' ? '⏱ ' + fmt(raceT) : raceState === 'idle' ? '⏱ ready' : '🏁 ' + fmt(raceT)) + (best !== null ? ' · best ' + fmt(best) : '') }, }) // ---- fall respawn + debug ---- const respawn = () => { blob.body.setTranslation({ x: spawn.x, y: spawn.y, z: spawn.z }, true) blob.body.setLinvel({ x: 0, y: 0, z: 0 }, true) world.events.emit('paint:request-cleanse', { fraction: 1 }) raceState = 'idle' raceT = 0 banner.style.display = 'none' world.events.emit('race:respawn', {}) } // Fixed-step, not onFrame: the fall check GATES gameplay, and onFrame stalls // in hidden tabs (same lesson as telegraph/bucket — found at integration). world.addSystem({ update() { if (blob.body.translation().y < -25) { // Mid-run with a checkpoint lit → soft respawn there: clock keeps running // (the fall's cost is time) and paint stays (progress already earned). // Otherwise it's a full restart to the line. const cp = raceState === 'running' ? cps.last() : null if (cp) { blob.body.setTranslation({ x: cp.x, y: cp.y + 0.8, z: cp.z }, true) blob.body.setLinvel({ x: 0, y: 0, z: 0 }, true) } else { respawn() } } }, }) addEventListener('keydown', (e) => { if (e.code === 'KeyR') respawn() if (e.code === 'KeyC') world.events.emit('paint:request-cleanse', { fraction: 0.5 }) }) // ---- gamepad niceties (movement/jump live in the blob controller) ---- let startHeld = false world.addSystem({ update() { const pads = navigator.getGamepads?.() if (!pads) return for (const p of pads) { if (!p || !p.connected) continue const s = !!p.buttons[9]?.pressed // Start/Options = respawn if (s && !startHeld) respawn() startHeld = s break } }, }) addEventListener('gamepadconnected', (e) => { const toast = document.createElement('div') toast.textContent = `🎮 ${(e as GamepadEvent).gamepad.id.slice(0, 40)} connected — stick to roll, A to jump, Start to respawn` toast.style.cssText = 'position:fixed;bottom:16px;left:50%;transform:translateX(-50%);' + 'font:13px ui-monospace,Menlo,monospace;color:#fff;background:rgba(20,24,34,.88);' + 'padding:9px 14px;border-radius:9px;z-index:20;pointer-events:none' document.body.appendChild(toast) setTimeout(() => toast.remove(), 3200) }) // ---- course switcher: cycles through COURSE_META's rotation (shared with // the title's course select). Labs/unknown courses cycle home. ---- { const i = COURSE_META.findIndex((c) => c.course === (which ?? undefined)) const other = COURSE_META[(i + 1) % COURSE_META.length] ?? COURSE_META[0] const link = document.createElement('a') link.href = other.href link.textContent = `▸ course: ${other.emoji} ${other.label}` link.style.cssText = 'position:fixed;top:56px;right:14px;font:12px ui-monospace,Menlo,monospace;' + 'color:#0a2540;background:rgba(255,255,255,.82);padding:6px 11px;border-radius:9px;' + 'text-decoration:none;z-index:15;box-shadow:0 1px 6px rgba(0,0,0,.14)' document.body.appendChild(link) } // ---- custom-assets pill: a forgotten Workshop swap otherwise reads as a // broken game ("why is the boot a weird cylinder?"), with no way back. ---- void hasOverrides().then((on) => { if (!on) return const pill = document.createElement('a') pill.href = 'editor.html' pill.textContent = '🎨 your custom models are on — open the Workshop' pill.style.cssText = 'position:fixed;bottom:14px;left:14px;font:12px ui-monospace,Menlo,monospace;' + 'color:#0a2540;background:rgba(255,255,255,.86);padding:7px 12px;border-radius:999px;' + 'text-decoration:none;z-index:18;box-shadow:0 1px 6px rgba(0,0,0,.18)' document.body.appendChild(pill) }) // ---- wave 2: audio, ghost, title ---- installAudio(world) installGhost(world, blob, { radius: blob.radius, course: which ?? undefined }) installTitle(world) // debug handle (dev builds are the only builds right now) ;(window as unknown as { BLOBBO: unknown }).BLOBBO = { world, blob, skin, spawn, finish } return { blob, spawn, finish } }