// Turf Heist — Paper.io-2-style territory-capture IO game (solo vs bots + §128 managed multiplayer) // MCPity Web Engine game. 2.5D presentation: three.js (r168 API, bare "three" specifier, // resolved by the preview import map) renders the arena from a tilted perspective camera; // the HUD stays a transparent 2D canvas overlay on top of the WebGL canvas. // Deps: three + @supabase/realtime-js (the latter dynamically imported by the inlined // multiplayer.realtime-web pattern; import-map provided). // Mounts into #mcpity-root, runs its own RAF loop (template contract). // NOTE: this was a RENDERING-ONLY upgrade from the canvas-2D build — the simulation, // rules, bot AI, round loop and the §128 wire format are byte-for-byte unchanged // (wire-compatible: 2D-build and 3D-build clients interop in the same room). // Multiplayer: starts solo vs bots INSTANTLY; §128 matchmaking connects in the // background — real players who open the game share a room (host-authoritative, // see the MULTIPLAYER section). Offline/preview without network = silently solo. // // Rules implemented (v1): // - 200x200 cell grid, cell = 10 world px. Continuous smooth-steering movement. // - Outside your territory you leave a trail; re-entering your territory converts // trail + all enclosed cells (border flood fill) to territory. Capturing steals. // - Any head touching a trail cell kills the trail's OWNER (incl. self-cross; // the newest 3 trail cells are exempt so tight turns don't insta-kill). // - Head-on collision: the head inside its own territory survives; heads outside // their own territory die (both outside -> both die). Documented simplification. // - Arena border is lethal. Losing 100% of your territory while alive is lethal. // - Death clears territory + trail; respawn after 2s at a random free spot. // - 2:30 rounds, win screen with ranking, auto-restart after 5s. import * as THREE from "three"; /* --------------------------------------------------------------------------- Asset-swap seam (INLINE shim of games/_shared/asset-provider.ts WindowAssets). INLINED, not imported, on purpose: the /play build serves this file as ONE self-contained module to the in-browser bundler with no sibling files present, so 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/turf-heist/store-boot.ts), else returns null so the avatar factory takes its procedural branch. On /play there is no MCPityAssets, so getModel() resolves to null and NOTHING changes — the game stays 100% procedural (capsule body + direction nose cone). ------------------------------------------------------------------------- */ 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; }, }; // ═══ CONFIG ═══ const GRID = 200; // cells per side const CELL = 10; // world px per cell const WORLD = GRID * CELL; // 2000 px const NCELLS = GRID * GRID; // 40000 const SPEED = 112; // px/s (constant for everyone) const TURN_RATE = 8.2; // rad/s smooth steering const HEAD_R = 6.5; // head radius, world px const ZOOM = 1.4; // fixed camera zoom const N_BOTS = 6; const SPAWN_RADIUS = 5; // starting blob radius, cells const RESPAWN_SEC = 2; const ROUND_SEC = 150; // 2:30 const WIN_SCREEN_SEC = 5; const SELF_TRAIL_GRACE = 7; // newest own-trail cells exempt from self-kill (turn radius ~14px spans ~5 cells of arc) const FIXED_DT = 1 / 60; // simulation tick (s) const KILLFEED_TTL = 4; // s const BG = "#101423"; const PLAYER_COLOR = "#3be8ff"; const BOT_COLORS = ["#ff5c7a", "#ffd23e", "#69ff8e", "#b06bff", "#ff8a3d", "#5c86ff", "#ff5cd7"]; const BOT_NAMES = ["Muggsy", "Sly", "Vex", "Nyx", "Bandit", "Raven", "Ghost"]; // ═══ MOUNT + CANVAS (WebGL arena underneath, transparent 2D HUD overlay on top) ═══ const root = document.getElementById("mcpity-root") ?? document.body; root.innerHTML = ""; (root as HTMLElement).style.cssText += ";overflow:hidden;background:" + BG + ";"; const glCanvas = document.createElement("canvas"); // three.js renders here glCanvas.style.cssText = "position:absolute;inset:0;display:block;width:100%;height:100%;background:" + BG + ";"; root.appendChild(glCanvas); // `canvas` stays the SAME variable the rest of the file always used: it is now the // transparent HUD/input overlay, so every HUD draw + joystick listener is untouched. const canvas = document.createElement("canvas"); canvas.style.cssText = "position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;background:transparent;touch-action:none;"; root.appendChild(canvas); const ctx = canvas.getContext("2d")!; let VW = 0, VH = 0, DPR = 1; let onResize3d: (() => void) | null = null; // wired by the 3D SCENE section below function resize() { DPR = Math.min(window.devicePixelRatio || 1, 2); VW = root.clientWidth || window.innerWidth; VH = root.clientHeight || window.innerHeight; canvas.width = Math.max(1, Math.floor(VW * DPR)); canvas.height = Math.max(1, Math.floor(VH * DPR)); if (onResize3d) onResize3d(); } resize(); window.addEventListener("resize", resize); // ═══ RNG ═══ let rngState = (Date.now() ^ 0x9e3779b9) >>> 0; function rnd(): number { // mulberry32 rngState = (rngState + 0x6d2b79f5) >>> 0; let t = rngState; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; } // ═══ GRID / STATE ═══ // grid[ci] = territory owner id (0 = unclaimed, 1..N = entity id) // trailOwner[ci] = trail owner id (0 = none). Trail overlays territory. const grid = new Uint8Array(NCELLS); const trailOwner = new Uint8Array(NCELLS); const counts = new Int32Array(16); // territory cell count per entity id let terDirty = true; // full-grid offscreen redraw only when dirty (captures/deaths) let capturesTotal = 0; // cumulative captures (never reset; debug/tests) let roundT = ROUND_SEC; let roundNum = 1; let phase: "play" | "over" = "play"; let overT = 0; let ranking: Ent[] = []; const cellIdx = (cx: number, cy: number) => cy * GRID + cx; // ═══ ENTITIES ═══ // Entity model is the "local simulation" unit. Bots and the player differ only in // who writes `target` (input vs botThink). A future remote peer is an entity whose // pos/heading/trail events come from the network instead of stepEntity movement. interface Ent { id: number; // 1-based; grid/trailOwner store this name: string; color: string; terR: number; terG: number; terB: number; // precomputed territory RGB trailCss: string; isBot: boolean; alive: boolean; x: number; y: number; // smooth px position (render + sim) heading: number; // current heading, rad target: number; // desired heading, rad cellX: number; cellY: number; // last processed cell (game logic is cell-quantized) trail: number[]; // ordered cell indices of current trail respawnT: number; kills: number; anchorX: number; anchorY: number; // home anchor (return target for bots) ai: { phase: string; t: number; outDir: number; sideDir: number; scanT: number; chase: Ent | null } | null; // ── multiplayer (§128) ── peer: string | null; // remote player uuid occupying this slot (null = bot/local) netX?: number; netY?: number; netH?: number; // client-side: last host-broadcast pose (lerp target) pullX?: number; pullY?: number; // host-side: soft correction toward peer-reported pos } const entities: Ent[] = []; function hexRgb(h: string): [number, number, number] { return [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)]; } function makeEnt(id: number, name: string, color: string, isBot: boolean): Ent { const [r, g, b] = hexRgb(color); return { id, name, color, isBot, terR: Math.round(r * 0.62), terG: Math.round(g * 0.62), terB: Math.round(b * 0.62), trailCss: `rgba(${r},${g},${b},0.55)`, alive: false, x: 0, y: 0, heading: 0, target: 0, cellX: -1, cellY: -1, trail: [], respawnT: 0, kills: 0, anchorX: 0, anchorY: 0, ai: isBot ? { phase: "rest", t: 0.5, outDir: 0, sideDir: 0, scanT: 0, chase: null } : null, peer: null, }; } entities.push(makeEnt(1, "You", PLAYER_COLOR, false)); for (let i = 0; i < N_BOTS; i++) entities.push(makeEnt(2 + i, BOT_NAMES[i], BOT_COLORS[i], true)); let player = entities[0]; // re-pointed to our assigned slot when we join a peer-hosted room // ═══ 3D SCENE (replaces the old offscreen territory/trail 2D canvases) ═══ // Territory + trails render as TWO InstancedMeshes of beveled extruded tiles — // never one mesh per cell draw call. Instance slots are compact (swap-remove), // allocated/freed ONLY at the exact points the old code painted/cleared 2D // pixels (paintTrailCell / clearTrailCell / the terDirty diff), so steady-state // per-frame GPU updates are O(changed cells); a full-arena recolor (round reset // or a multiplayer RLE snapshot apply) is a single one-frame hit by design. const CAM_FOV = 55; const CAM_H = 430; // camera height above the arena plane const CAM_D = 262; // camera pull-back along +Z (tilt ~58.7 deg over the arena) const TER_TILE_H = 3.2; // territory tile extrusion height const TRAIL_TILE_H = 7.5; // trail tiles are taller thin "light walls" const renderer = new THREE.WebGLRenderer({ canvas: glCanvas, antialias: true }); renderer.setPixelRatio(DPR); // DPR is already capped at 2 in resize() const scene = new THREE.Scene(); scene.background = new THREE.Color(BG); // cheap depth-of-field FEEL on the arena edges: plain distance fog toward BG — // no postprocessing passes (mobile perf). scene.fog = new THREE.Fog(BG, 620, 1500); const camera = new THREE.PerspectiveCamera(CAM_FOV, 1, 10, 4200); onResize3d = () => { renderer.setPixelRatio(DPR); renderer.setSize(VW, VH, false); camera.aspect = VW / Math.max(1, VH); camera.updateProjectionMatrix(); }; onResize3d(); // lighting: one ambient + one directional, no shadow maps (mobile perf); // entities get a cheap fake blob shadow instead (instanced dark discs). scene.add(new THREE.AmbientLight(0xffffff, 0.85)); const sun = new THREE.DirectionalLight(0xffffff, 1.55); sun.position.set(-420, 900, -260); scene.add(sun); // ground: dark backdrop plane + arena plane + subtle grid lines (one GridHelper) const backdrop = new THREE.Mesh(new THREE.PlaneGeometry(WORLD * 2.6, WORLD * 2.6), new THREE.MeshLambertMaterial({ color: 0x0d1020 })); backdrop.rotation.x = -Math.PI / 2; backdrop.position.set(WORLD / 2, -0.8, WORLD / 2); scene.add(backdrop); const arenaFloor = new THREE.Mesh(new THREE.PlaneGeometry(WORLD, WORLD), new THREE.MeshLambertMaterial({ color: 0x171b2e })); arenaFloor.rotation.x = -Math.PI / 2; arenaFloor.position.set(WORLD / 2, 0, WORLD / 2); scene.add(arenaFloor); const gridLines = new THREE.GridHelper(WORLD, GRID / 2, 0x2f3a5e, 0x222a46); gridLines.position.set(WORLD / 2, 0.12, WORLD / 2); (gridLines.material as THREE.Material).transparent = true; (gridLines.material as THREE.Material).opacity = 0.38; scene.add(gridLines); // lethal border: 4 glowing red walls in ONE instanced draw call const borderMesh = new THREE.InstancedMesh(new THREE.BoxGeometry(1, 14, 1), new THREE.MeshBasicMaterial({ color: 0xff3860 }), 4); borderMesh.frustumCulled = false; { const m = new THREE.Matrix4(); const walls: [number, number, number, number][] = [ // [sx, sz, x, z] [WORLD + 18, 6, WORLD / 2, -4], [WORLD + 18, 6, WORLD / 2, WORLD + 4], [6, WORLD + 18, -4, WORLD / 2], [6, WORLD + 18, WORLD + 4, WORLD / 2], ]; walls.forEach(([sx, sz, x, z], i) => borderMesh.setMatrixAt(i, m.makeScale(sx, 1, sz).setPosition(x, 7, z))); } scene.add(borderMesh); // beveled extruded tile geometry: 4 sides + 4 chamfers + top, flat-shaded // (non-indexed + computeVertexNormals). No bottom face (never visible). function makeTileGeometry(size: number, height: number, bevel: number): THREE.BufferGeometry { const s = size / 2, t = Math.max(0.5, s - bevel), h1 = Math.max(0.4, height - bevel), h = height; const pos: number[] = []; const quad = (a: number[], b: number[], c: number[], d: number[]) => { pos.push(...a, ...b, ...c, ...a, ...c, ...d); }; quad([s, 0, s], [s, 0, -s], [s, h1, -s], [s, h1, s]); // +X side quad([-s, 0, -s], [-s, 0, s], [-s, h1, s], [-s, h1, -s]); // -X side quad([-s, 0, s], [s, 0, s], [s, h1, s], [-s, h1, s]); // +Z side quad([s, 0, -s], [-s, 0, -s], [-s, h1, -s], [s, h1, -s]); // -Z side quad([s, h1, s], [s, h1, -s], [t, h, -t], [t, h, t]); // +X chamfer quad([-s, h1, -s], [-s, h1, s], [-t, h, t], [-t, h, -t]); // -X chamfer quad([-s, h1, s], [s, h1, s], [t, h, t], [-t, h, t]); // +Z chamfer quad([s, h1, -s], [-s, h1, -s], [-t, h, -t], [t, h, -t]); // -Z chamfer quad([-t, h, t], [t, h, t], [t, h, -t], [-t, h, -t]); // top const g = new THREE.BufferGeometry(); g.setAttribute("position", new THREE.Float32BufferAttribute(pos, 3)); g.computeVertexNormals(); return g; } // compact instanced tile layer: cell -> slot map with swap-remove so mesh.count // is exactly the live tile count; per-frame GPU upload is the dirty slot range // only (addUpdateRange), buffers are DynamicDraw. class TileLayer { mesh: THREE.InstancedMesh; private slotOf = new Int32Array(NCELLS).fill(-1); private cellAt: Int32Array; private n = 0; private lo = Infinity; private hi = -1; constructor(geo: THREE.BufferGeometry, mat: THREE.Material, max: number) { this.mesh = new THREE.InstancedMesh(geo, mat, max); this.cellAt = new Int32Array(max); this.mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); this.mesh.instanceColor = new THREE.InstancedBufferAttribute(new Float32Array(max * 3), 3); this.mesh.instanceColor.setUsage(THREE.DynamicDrawUsage); this.mesh.count = 0; this.mesh.frustumCulled = false; const m = this.mesh.instanceMatrix.array as Float32Array; // identity rotation/scale once; only translations change for (let i = 0; i < max; i++) { const p = i * 16; m[p] = 1; m[p + 5] = 1; m[p + 10] = 1; m[p + 15] = 1; } } private touch(s: number) { if (s < this.lo) this.lo = s; if (s > this.hi) this.hi = s; } set(ci: number, r: number, g: number, b: number) { // add tile, or recolor if present let s = this.slotOf[ci]; if (s < 0) { s = this.n++; this.slotOf[ci] = s; this.cellAt[s] = ci; const m = this.mesh.instanceMatrix.array as Float32Array, p = s * 16; m[p + 12] = (ci % GRID) * CELL + CELL / 2; m[p + 13] = 0; m[p + 14] = ((ci / GRID) | 0) * CELL + CELL / 2; } const c = this.mesh.instanceColor!.array as Float32Array, q = s * 3; c[q] = r; c[q + 1] = g; c[q + 2] = b; this.touch(s); } remove(ci: number) { const s = this.slotOf[ci]; if (s < 0) return; const last = --this.n; this.slotOf[ci] = -1; if (s !== last) { // swap-remove: last slot fills the hole const lc = this.cellAt[last]; this.cellAt[s] = lc; this.slotOf[lc] = s; const m = this.mesh.instanceMatrix.array as Float32Array; m[s * 16 + 12] = m[last * 16 + 12]; m[s * 16 + 14] = m[last * 16 + 14]; const c = this.mesh.instanceColor!.array as Float32Array; c[s * 3] = c[last * 3]; c[s * 3 + 1] = c[last * 3 + 1]; c[s * 3 + 2] = c[last * 3 + 2]; this.touch(s); } } clearAll() { this.slotOf.fill(-1); this.n = 0; this.lo = Infinity; this.hi = -1; this.mesh.count = 0; } flush() { // once per rendered frame this.mesh.count = this.n; if (this.hi < 0) return; const lo = this.lo, hi = this.hi; const im = this.mesh.instanceMatrix, icol = this.mesh.instanceColor!; im.clearUpdateRanges(); im.addUpdateRange(lo * 16, (hi - lo + 1) * 16); im.needsUpdate = true; icol.clearUpdateRanges(); icol.addUpdateRange(lo * 3, (hi - lo + 1) * 3); icol.needsUpdate = true; this.lo = Infinity; this.hi = -1; } } const terLayer = new TileLayer(makeTileGeometry(9.4, TER_TILE_H, 1.1), new THREE.MeshLambertMaterial(), NCELLS); const trailLayer = new TileLayer(makeTileGeometry(6.8, TRAIL_TILE_H, 1.5), new THREE.MeshBasicMaterial(), NCELLS); // basic = unlit = emissive glow look scene.add(terLayer.mesh); scene.add(trailLayer.mesh); // per-entity color floats (bright glow tint for trails), cached per CSS color const glowCache: Record = {}; function glowColor(css: string): [number, number, number] { let c = glowCache[css]; if (!c) { const [r, g, b] = hexRgb(css); c = [Math.min(1, (r / 255) * 1.3 + 0.08), Math.min(1, (g / 255) * 1.3 + 0.08), Math.min(1, (b / 255) * 1.3 + 0.08)]; glowCache[css] = c; } return c; } // territory diff: renderOwner mirrors what the GPU currently shows; on terDirty // (set at the SAME event points the 2D build used) only changed cells are touched. const renderOwner = new Uint8Array(NCELLS); function syncTerritoryTiles() { for (let ci = 0; ci < NCELLS; ci++) { const o = grid[ci]; if (renderOwner[ci] === o) continue; renderOwner[ci] = o; if (o === 0) { terLayer.remove(ci); continue; } const e = entities[o - 1]; if (e) terLayer.set(ci, e.terR / 255, e.terG / 255, e.terB / 255); else terLayer.set(ci, 0.3, 0.3, 0.34); } terDirty = false; } // trail hooks — SAME names/signatures/call sites as the 2D build's pixel paints function paintTrailCell(e: Ent, ci: number) { const c = glowColor(e.color); trailLayer.set(ci, c[0], c[1], c[2]); } function clearTrailCell(ci: number) { trailLayer.remove(ci); } function trailClearAll() { trailLayer.clearAll(); } // entity views: rounded low-poly runner piece (capsule) + direction nose cone in // the entity color, one shared instanced disc mesh for all fake blob shadows. const bodyGeo = new THREE.CapsuleGeometry(4.6, 5.2, 4, 10); const noseGeo = new THREE.ConeGeometry(2.7, 5.4, 8); noseGeo.rotateZ(-Math.PI / 2); // cone points +X; group yaw maps +X to the heading const shadowGeo = new THREE.CircleGeometry(6.6, 20); shadowGeo.rotateX(-Math.PI / 2); const shadowMesh = new THREE.InstancedMesh(shadowGeo, new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.32, depthWrite: false }), 16); shadowMesh.frustumCulled = false; scene.add(shadowMesh); interface EntView { group: THREE.Group } const entViews: (EntView | undefined)[] = []; // Asset-swap seam: store builds can inject a single `roller` GLB (a street-skater // avatar) via the asset seam above. We preload it once at boot (see void // preloadAssets() near INIT), cache the template, and clone-per-entity in // makeAvatar. On /play Assets.getModel() returns null, so rollerTemplate stays // null and makeAvatar falls through to the procedural capsule body + nose cone — // nothing changes on /play. The paintable turf tiles stay procedural (dynamic // paint state); only the avatar is swappable. const ROLLER_MODEL_KEY = "roller"; let rollerTemplate: THREE.Object3D | null = null; // Fit a cloned roller template to the procedural avatar's bounds (capsule body // bbox ~14.4 tall x ~9.2 wide, centered at y=8.6) and tint its materials to the // entity color so store-build rollers stay visually distinct per player. Cloned // materials keep the shared template untouched. function fitRollerTemplate(template: THREE.Object3D, color: string): THREE.Object3D { const inst = template.clone(true); const box = new THREE.Box3().setFromObject(inst); const size = box.getSize(new THREE.Vector3()); const targetH = 14.4; // 2 * 4.6 + 5.2 (procedural capsule bbox height) const targetW = 9.2; // 2 * 4.6 (procedural capsule diameter) const sH = size.y > 1e-4 ? targetH / size.y : 1; const maxXZ = Math.max(size.x, size.z); const sW = maxXZ > 1e-4 ? targetW / maxXZ : 1; inst.scale.setScalar(Math.min(sH, sW)); const cb = new THREE.Box3().setFromObject(inst); const center = cb.getCenter(new THREE.Vector3()); inst.position.sub(center); // center at origin inst.position.y += 8.6; // lift to the procedural body center inst.traverse((o) => { const mesh = o as THREE.Mesh; if (!(mesh as unknown as { isMesh?: boolean }).isMesh) return; const tint = (m: THREE.Material): THREE.Material => { const c = m.clone() as THREE.Material & { color?: THREE.Color }; if (c.color) c.color.set(color); return c; }; const src = mesh.material as THREE.Material | THREE.Material[]; mesh.material = Array.isArray(src) ? src.map(tint) : tint(src); }); const group = new THREE.Group(); group.add(inst); return group; } // Build one entity avatar. Store build: the fitted + tinted roller GLB. /play: // procedural capsule body + direction nose cone (unchanged). SYNC on purpose // (called from entView on the render hot path): reads the preloaded cache, // never awaits. function makeAvatar(color: string): THREE.Object3D { if (rollerTemplate) return fitRollerTemplate(rollerTemplate, color); const mat = new THREE.MeshLambertMaterial({ color }); const body = new THREE.Mesh(bodyGeo, mat); body.position.y = 8.6; const nose = new THREE.Mesh(noseGeo, mat); nose.position.set(6.4, 7.4, 0); const g = new THREE.Group(); g.add(body); g.add(nose); return g; } function entView(e: Ent): EntView { let v = entViews[e.id]; if (!v) { const group = new THREE.Group(); group.add(makeAvatar(e.color)); scene.add(group); v = { group }; entViews[e.id] = v; } return v; } // One-time boot preload. Fills rollerTemplate from an injected store pack; on // /play Assets.getModel() is null so it stays null (zero visual change). If the // model loads after entity views were already built, drop them so they rebuild // with the roller on the next render frame (store build only). async function preloadAssets(): Promise { try { const model = await Assets.getModel(ROLLER_MODEL_KEY); if (model) { rollerTemplate = model; for (const v of entViews) { if (v) scene.remove(v.group); } entViews.length = 0; } } catch (_e) { /* any failure -> everything stays procedural */ } } const tmpM = new THREE.Matrix4(); function syncEntityViews(t: number) { let sh = 0; for (const e of entities) { const v = entView(e); v.group.visible = e.alive; if (!e.alive) continue; const bob = Math.sin(t * 5 + e.id * 1.7) * 0.6; // slight cheap bob v.group.position.set(e.x, bob, e.y); v.group.rotation.y = -e.heading; // 2D heading (x right, y down) -> yaw on the XZ plane shadowMesh.setMatrixAt(sh++, tmpM.identity().setPosition(e.x, 0.3, e.y)); } shadowMesh.count = sh; shadowMesh.instanceMatrix.needsUpdate = true; } // ═══ TERRITORY OWNERSHIP ═══ function setOwner(ci: number, id: number) { const o = grid[ci]; if (o === id) return; if (o) counts[o]--; grid[ci] = id; if (id) counts[id]++; terDirty = true; } function clearTrail(e: Ent) { for (const ci of e.trail) { if (trailOwner[ci] === e.id) { trailOwner[ci] = 0; clearTrailCell(ci); } } e.trail.length = 0; } // ═══ CAPTURE (border flood fill) ═══ const ffVisited = new Uint8Array(NCELLS); const ffStack = new Int32Array(NCELLS); function capture(e: Ent) { // 1) trail cells become territory for (const ci of e.trail) { if (trailOwner[ci] === e.id) { trailOwner[ci] = 0; clearTrailCell(ci); } setOwner(ci, e.id); } e.trail.length = 0; // 2) flood fill from arena border across cells NOT owned by e; unreached cells are enclosed -> stolen ffVisited.fill(0); let sp = 0; const push = (ci: number) => { if (!ffVisited[ci] && grid[ci] !== e.id) { ffVisited[ci] = 1; ffStack[sp++] = ci; } }; for (let i = 0; i < GRID; i++) { push(i); push((GRID - 1) * GRID + i); push(i * GRID); push(i * GRID + GRID - 1); } while (sp > 0) { const ci = ffStack[--sp]; const cx = ci % GRID, cy = (ci / GRID) | 0; if (cx > 0) push(ci - 1); if (cx < GRID - 1) push(ci + 1); if (cy > 0) push(ci - GRID); if (cy < GRID - 1) push(ci + GRID); } for (let ci = 0; ci < NCELLS; ci++) { if (!ffVisited[ci] && grid[ci] !== e.id) setOwner(ci, e.id); } capturesTotal++; e.anchorX = e.x; e.anchorY = e.y; // stealing can drop a victim to 0 territory -> lethal (checked in stepSim) } // ═══ KILL FEED / LOG ═══ interface KillEvt { t: number; victim: string; killer: string | null; cause: string; victimBot: boolean; killerBot: boolean | null } const killLog: KillEvt[] = []; // cumulative, for debug/tests const killFeed: { text: string; ttl: number }[] = []; // fading HUD entries let simClock = 0; function feed(text: string) { killFeed.unshift({ text, ttl: KILLFEED_TTL }); if (killFeed.length > 6) killFeed.length = 6; } // ═══ DEATH / RESPAWN ═══ function kill(victim: Ent, killer: Ent | null, cause: string) { if (!victim.alive) return; victim.alive = false; victim.respawnT = RESPAWN_SEC; clearTrail(victim); for (let ci = 0; ci < NCELLS; ci++) if (grid[ci] === victim.id) setOwner(ci, 0); killLog.push({ t: simClock, victim: victim.name, killer: killer && killer !== victim ? killer.name : null, cause, victimBot: victim.isBot, killerBot: killer && killer !== victim ? killer.isBot : null, }); if (killer && killer !== victim) { killer.kills++; feed(`${killer.name} eliminated ${victim.name}`); } else if (cause === "wall") feed(`${victim.name} hit the wall`); else if (cause === "self") feed(`${victim.name} cut their own line`); else feed(`${victim.name} lost all turf`); } function findSpawnCell(): [number, number] { for (let tries = 0; tries < 300; tries++) { const cx = 10 + ((rnd() * (GRID - 20)) | 0); const cy = 10 + ((rnd() * (GRID - 20)) | 0); let ok = true; const r = SPAWN_RADIUS + 2; for (let dy = -r; dy <= r && ok; dy++) { for (let dx = -r; dx <= r && ok; dx++) { const ci = cellIdx(cx + dx, cy + dy); if (grid[ci] !== 0 || trailOwner[ci] !== 0) ok = false; } } if (ok) return [cx, cy]; } return [10 + ((rnd() * (GRID - 20)) | 0), 10 + ((rnd() * (GRID - 20)) | 0)]; } function spawn(e: Ent) { const [cx, cy] = findSpawnCell(); for (let dy = -SPAWN_RADIUS; dy <= SPAWN_RADIUS; dy++) { for (let dx = -SPAWN_RADIUS; dx <= SPAWN_RADIUS; dx++) { if (dx * dx + dy * dy <= SPAWN_RADIUS * SPAWN_RADIUS) setOwner(cellIdx(cx + dx, cy + dy), e.id); } } e.x = cx * CELL + CELL / 2; e.y = cy * CELL + CELL / 2; e.cellX = cx; e.cellY = cy; e.heading = e.target = rnd() * Math.PI * 2; e.anchorX = e.x; e.anchorY = e.y; e.trail.length = 0; e.alive = true; e.pullX = e.pullY = undefined; // drop stale net position-corrections across a respawn if (e.ai) { e.ai.phase = "rest"; e.ai.t = 0.4 + rnd() * 0.8; e.ai.chase = null; } } // ═══ INPUT (keyboard + touch joystick) ═══ const keys = new Set(); window.addEventListener("keydown", (ev) => { const k = ev.key; if (k.startsWith("Arrow") || "wasdWASD".includes(k)) { keys.add(k.toLowerCase()); ev.preventDefault(); } }); window.addEventListener("keyup", (ev) => keys.delete(ev.key.toLowerCase())); // virtual joystick — fixed base bottom-left, pointer events const joy = { active: false, pointerId: -1, baseX: 0, baseY: 0, dx: 0, dy: 0 }; const JOY_R = 52; function joyBase(): [number, number] { return [92, VH - 92]; } canvas.addEventListener("pointerdown", (ev) => { const [bx, by] = joyBase(); const px = ev.clientX, py = ev.clientY; // activate in the bottom-left quadrant (generous hit zone for thumbs) if (px < VW * 0.5 && py > VH * 0.5) { joy.active = true; joy.pointerId = ev.pointerId; joy.baseX = bx; joy.baseY = by; joy.dx = px - bx; joy.dy = py - by; canvas.setPointerCapture(ev.pointerId); } }); canvas.addEventListener("pointermove", (ev) => { if (joy.active && ev.pointerId === joy.pointerId) { joy.dx = ev.clientX - joy.baseX; joy.dy = ev.clientY - joy.baseY; } }); function joyEnd(ev: PointerEvent) { if (joy.active && ev.pointerId === joy.pointerId) { joy.active = false; joy.dx = joy.dy = 0; } } canvas.addEventListener("pointerup", joyEnd); canvas.addEventListener("pointercancel", joyEnd); function readPlayerInput() { let dx = 0, dy = 0; if (keys.has("arrowleft") || keys.has("a")) dx -= 1; if (keys.has("arrowright") || keys.has("d")) dx += 1; if (keys.has("arrowup") || keys.has("w")) dy -= 1; if (keys.has("arrowdown") || keys.has("s")) dy += 1; if (joy.active && (joy.dx * joy.dx + joy.dy * joy.dy) > 144) { dx = joy.dx; dy = joy.dy; } if (dx !== 0 || dy !== 0) player.target = Math.atan2(dy, dx); } // ═══ BOTS ═══ // Loop out from home, turn, return to close the loop; flee home when an enemy head // is near while trailing; occasionally chase a nearby enemy trail to cut it. function angTo(e: Ent, x: number, y: number) { return Math.atan2(y - e.y, x - e.x); } function dist2(ax: number, ay: number, bx: number, by: number) { const dx = ax - bx, dy = ay - by; return dx * dx + dy * dy; } function botThink(e: Ent, dt: number) { const ai = e.ai!; ai.t -= dt; ai.scanT -= dt; const inside = grid[cellIdx(e.cellX, e.cellY)] === e.id; // threat: enemy head close while I have a long trail out -> run home if (e.trail.length > 10 && ai.phase !== "return") { for (const o of entities) { if (o === e || !o.alive) continue; if (dist2(o.x, o.y, e.x, e.y) < 150 * 150) { ai.phase = "return"; ai.chase = null; break; } } } // occasional chase: cut a nearby enemy trail when mine is short if (ai.scanT <= 0 && ai.phase !== "return" && e.trail.length < 40) { ai.scanT = 0.4; for (const o of entities) { if (o === e || !o.alive || o.trail.length < 6) continue; if (dist2(o.x, o.y, e.x, e.y) < 170 * 170 && rnd() < 0.25) { ai.phase = "chase"; ai.chase = o; ai.t = 1.3; break; } } } switch (ai.phase) { case "rest": if (ai.t <= 0) { if (inside) { // head out roughly away from the nearest wall const cx = WORLD / 2, cy = WORLD / 2; const away = Math.atan2(cy - e.y, cx - e.x); ai.outDir = away + (rnd() - 0.5) * 2.6; } else { ai.outDir = e.heading; // drifted out while resting — just make it a loop } ai.sideDir = ai.outDir + (rnd() < 0.5 ? Math.PI / 2 : -Math.PI / 2); ai.phase = "out"; ai.t = 1.0 + rnd() * 2.0; } break; case "out": e.target = ai.outDir; if (ai.t <= 0) { ai.phase = "across"; ai.t = 0.7 + rnd() * 1.5; } break; case "across": e.target = ai.sideDir; if (ai.t <= 0) ai.phase = "return"; break; case "chase": { const o = ai.chase; if (!o || !o.alive || ai.t <= 0) { ai.phase = "return"; ai.chase = null; break; } e.target = angTo(e, o.x, o.y); break; } case "return": { // steer home; refresh anchor if our anchor cell was stolen if (ai.scanT <= 0) { ai.scanT = 0.5; const aci = cellIdx(Math.min(GRID - 1, Math.max(0, (e.anchorX / CELL) | 0)), Math.min(GRID - 1, Math.max(0, (e.anchorY / CELL) | 0))); if (grid[aci] !== e.id && counts[e.id] > 0) { let best = -1, bd = Infinity; for (let ci = 0; ci < NCELLS; ci += 3) { // stride-3 scan is plenty if (grid[ci] !== e.id) continue; const d = dist2((ci % GRID) * CELL, ((ci / GRID) | 0) * CELL, e.x, e.y); if (d < bd) { bd = d; best = ci; } } if (best >= 0) { e.anchorX = (best % GRID) * CELL + CELL / 2; e.anchorY = ((best / GRID) | 0) * CELL + CELL / 2; } } } e.target = angTo(e, e.anchorX, e.anchorY); if (inside) { ai.phase = "rest"; ai.t = 0.2 + rnd() * 0.9; } break; } } // wall avoidance overrides everything except a deliberate return const margin = 6 * CELL; if (e.x < margin || e.x > WORLD - margin || e.y < margin || e.y > WORLD - margin) { e.target = Math.atan2(WORLD / 2 - e.y, WORLD / 2 - e.x); if (ai.phase === "out" || ai.phase === "across" || ai.phase === "chase") { ai.phase = "return"; ai.chase = null; } } } // ═══ SIMULATION ═══ function angDiff(a: number, b: number) { let d = a - b; while (d > Math.PI) d -= Math.PI * 2; while (d < -Math.PI) d += Math.PI * 2; return d; } function onCellEnter(e: Ent, cx: number, cy: number): boolean { // returns false if e died processing this cell const ci = cellIdx(cx, cy); // trail hit: the trail OWNER dies (Paper.io rule) — incl. self-cross const to = trailOwner[ci]; if (to !== 0) { if (to === e.id) { const n = e.trail.length; let recent = false; for (let i = Math.max(0, n - SELF_TRAIL_GRACE); i < n; i++) if (e.trail[i] === ci) { recent = true; break; } if (!recent) { kill(e, e, "self"); return false; } } else { kill(entities[to - 1], e, "cut"); } } if (grid[ci] === e.id) { if (e.trail.length > 0) capture(e); } else if (trailOwner[ci] === 0) { trailOwner[ci] = e.id; e.trail.push(ci); paintTrailCell(e, ci); } return e.alive; } function stepEntity(e: Ent, dt: number) { if (!e.alive) { e.respawnT -= dt; if (e.respawnT <= 0) spawn(e); return; } if (e.isBot) botThink(e, dt); // smooth steering: turn heading toward target at TURN_RATE const d = angDiff(e.target, e.heading); const maxTurn = TURN_RATE * dt; e.heading += Math.abs(d) <= maxTurn ? d : Math.sign(d) * maxTurn; e.x += Math.cos(e.heading) * SPEED * dt; e.y += Math.sin(e.heading) * SPEED * dt; // host-side soft reconciliation toward a remote peer's reported position — // bounded to < 1 cell per tick so cell-enter logic never skips cells. if (e.peer && e !== player && e.pullX !== undefined && e.pullY !== undefined) { const px = e.pullX - e.x, py = e.pullY - e.y; const pd = Math.hypot(px, py); if (pd < 1.5) { e.pullX = e.pullY = undefined; } else { const step = Math.min(pd, 2.5); e.x += (px / pd) * step; e.y += (py / pd) * step; } } // lethal border if (e.x < HEAD_R || e.x > WORLD - HEAD_R || e.y < HEAD_R || e.y > WORLD - HEAD_R) { kill(e, null, "wall"); return; } const cx = (e.x / CELL) | 0, cy = (e.y / CELL) | 0; if (cx !== e.cellX || cy !== e.cellY) { e.cellX = cx; e.cellY = cy; if (!onCellEnter(e, cx, cy)) return; } } function inOwnTerritory(e: Ent): boolean { return grid[cellIdx(e.cellX, e.cellY)] === e.id; } function stepSim(dt: number) { if (mpRole === "client") { clientSim(dt); return; } // non-host peers mirror the host (§ MULTIPLAYER) simClock += dt; for (const f of killFeed) f.ttl -= dt; while (killFeed.length && killFeed[killFeed.length - 1].ttl <= 0) killFeed.pop(); if (phase === "over") { overT -= dt; if (overT <= 0) newRound(); return; } readPlayerInput(); for (const e of entities) stepEntity(e, dt); // head-on collisions: head inside its own territory survives; outside dies for (let i = 0; i < entities.length; i++) { const a = entities[i]; if (!a.alive) continue; for (let j = i + 1; j < entities.length; j++) { const b = entities[j]; if (!b.alive) continue; if (dist2(a.x, a.y, b.x, b.y) < (HEAD_R * 2) * (HEAD_R * 2)) { const aIn = inOwnTerritory(a), bIn = inOwnTerritory(b); if (aIn && !bIn) kill(b, a, "headon"); else if (bIn && !aIn) kill(a, b, "headon"); else if (!aIn && !bIn) { kill(a, b, "headon"); kill(b, a, "headon"); } } } } // total turf loss is lethal (all territory stolen while alive) for (const e of entities) { if (e.alive && counts[e.id] === 0) kill(e, null, "turfloss"); } roundT -= dt; if (roundT <= 0) { phase = "over"; overT = WIN_SCREEN_SEC; ranking = [...entities].sort((a, b) => counts[b.id] - counts[a.id]); } } function newRound() { grid.fill(0); trailOwner.fill(0); counts.fill(0); trailClearAll(); // was trailCtx.clearRect(0,0,GRID,GRID) in the 2D build — same render-layer full-clear, zero sim effect terDirty = true; killFeed.length = 0; for (const e of entities) { e.trail.length = 0; e.kills = 0; spawn(e); } roundT = ROUND_SEC; roundNum++; phase = "play"; } // fixed-step advance; used by the RAF loop AND by the debug/test hook let acc = 0; function advance(ms: number) { acc += ms / 1000; if (acc > 2 && !document.hidden) acc = 0.1; // tab-return guard (debug step bypasses via loop below) let steps = 0; while (acc >= FIXED_DT && steps < 100000) { stepSim(FIXED_DT); acc -= FIXED_DT; steps++; } } function advanceExact(ms: number) { // deterministic: always simulates the full span let s = ms / 1000; while (s > 1e-9) { const dt = Math.min(FIXED_DT, s); stepSim(dt); s -= dt; } } // ═══ RENDER (three.js 2.5D pass + 2D HUD overlay pass) ═══ const tmpV = new THREE.Vector3(); function render() { if (terDirty) syncTerritoryTiles(); terLayer.flush(); trailLayer.flush(); syncEntityViews(performance.now() / 1000); // camera follows player — IDENTICAL target point + clamp math as the 2D build // (debug/spectate override: window.__turf.camOverride = {x,y} — used by tests, phase-3 spectate hook) const camO = (window as any).__turf?.camOverride; const halfW = VW / 2 / ZOOM, halfH = VH / 2 / ZOOM; let camX = camO ? camO.x : player.x, camY = camO ? camO.y : player.y; camX = Math.max(Math.min(camX, WORLD - halfW * 0.2), halfW * 0.2); camY = Math.max(Math.min(camY, WORLD - halfH * 0.2), halfH * 0.2); camera.position.set(camX, CAM_H, camY + CAM_D); camera.lookAt(camX, 0, camY); renderer.render(scene, camera); // 2D overlay: clear, then name tags (world -> screen projection) + HUD ctx.setTransform(DPR, 0, 0, DPR, 0, 0); ctx.clearRect(0, 0, VW, VH); ctx.font = "600 11px system-ui, sans-serif"; ctx.textAlign = "center"; for (const e of entities) { if (!e.alive) continue; tmpV.set(e.x, 18, e.y).project(camera); if (tmpV.z > 1) continue; const sx = (tmpV.x * 0.5 + 0.5) * VW, sy = (-tmpV.y * 0.5 + 0.5) * VH; ctx.fillStyle = "rgba(255,255,255,0.85)"; ctx.fillText(e.name, sx, sy - 8); } renderHud(); } // ═══ HUD ═══ function pct(id: number) { return (counts[id] / NCELLS) * 100; } function fmtTime(s: number) { const t = Math.max(0, Math.ceil(s)); return `${(t / 60) | 0}:${String(t % 60).padStart(2, "0")}`; } function renderHud() { ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // your territory % + round timer (top center) ctx.textAlign = "center"; ctx.font = "800 30px system-ui, sans-serif"; ctx.fillStyle = PLAYER_COLOR; ctx.fillText(pct(player.id).toFixed(2) + "%", VW / 2, 40); ctx.font = "600 15px system-ui, sans-serif"; ctx.fillStyle = "rgba(255,255,255,0.75)"; ctx.fillText(fmtTime(roundT), VW / 2, 62); // leaderboard top 5 (top right) const lb = [...entities].sort((a, b) => counts[b.id] - counts[a.id]).slice(0, 5); const lbX = VW - 176, lbY = 16; ctx.fillStyle = "rgba(10,12,24,0.55)"; ctx.beginPath(); ctx.roundRect(lbX, lbY, 160, 24 + lb.length * 21, 8); ctx.fill(); ctx.font = "700 11px system-ui, sans-serif"; ctx.textAlign = "left"; ctx.fillStyle = "rgba(255,255,255,0.6)"; ctx.fillText("TURF LEADERS", lbX + 12, lbY + 17); ctx.font = "600 12px system-ui, sans-serif"; lb.forEach((e, i) => { const y = lbY + 37 + i * 21; ctx.fillStyle = e.color; ctx.beginPath(); ctx.arc(lbX + 17, y - 4, 4.5, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = e === player ? "#fff" : "rgba(255,255,255,0.82)"; ctx.fillText(e.name, lbX + 28, y); ctx.textAlign = "right"; ctx.fillText(pct(e.id).toFixed(1) + "%", lbX + 148, y); ctx.textAlign = "left"; }); // kill feed (top left, fading) ctx.font = "600 12px system-ui, sans-serif"; killFeed.forEach((f, i) => { ctx.fillStyle = `rgba(255,255,255,${Math.min(1, f.ttl / 1.2) * 0.85})`; ctx.fillText(f.text, 16, 26 + i * 18); }); // touch joystick if (joy.active) { const [bx, by] = [joy.baseX, joy.baseY]; ctx.strokeStyle = "rgba(255,255,255,0.25)"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(bx, by, JOY_R, 0, Math.PI * 2); ctx.stroke(); const m = Math.hypot(joy.dx, joy.dy) || 1; const kx = bx + (joy.dx / m) * Math.min(m, JOY_R); const ky = by + (joy.dy / m) * Math.min(m, JOY_R); ctx.fillStyle = "rgba(255,255,255,0.35)"; ctx.beginPath(); ctx.arc(kx, ky, 20, 0, Math.PI * 2); ctx.fill(); } // player death overlay if (!player.alive && phase === "play") { ctx.fillStyle = "rgba(8,8,16,0.55)"; ctx.fillRect(0, 0, VW, VH); ctx.textAlign = "center"; ctx.font = "800 44px system-ui, sans-serif"; ctx.fillStyle = "#ff3860"; ctx.fillText("BUSTED", VW / 2, VH / 2 - 12); ctx.font = "600 16px system-ui, sans-serif"; ctx.fillStyle = "rgba(255,255,255,0.85)"; ctx.fillText(`back on the job in ${Math.max(0, player.respawnT).toFixed(1)}s`, VW / 2, VH / 2 + 20); } // ═══ ROUND / WIN SCREEN ═══ if (phase === "over") { ctx.fillStyle = "rgba(8,8,16,0.78)"; ctx.fillRect(0, 0, VW, VH); ctx.textAlign = "center"; ctx.font = "800 40px system-ui, sans-serif"; ctx.fillStyle = "#ffd23e"; ctx.fillText("TURF HEIST", VW / 2, VH / 2 - 118); const winner = ranking[0]; ctx.font = "700 22px system-ui, sans-serif"; ctx.fillStyle = winner?.color ?? "#fff"; ctx.fillText(`${winner?.name ?? "?"} pulled off the heist!`, VW / 2, VH / 2 - 78); ctx.font = "600 15px system-ui, sans-serif"; ranking.slice(0, 7).forEach((e, i) => { ctx.fillStyle = e === player ? "#fff" : "rgba(255,255,255,0.8)"; ctx.fillText(`${i + 1}. ${e.name}: ${pct(e.id).toFixed(2)}% (${e.kills} kills)`, VW / 2, VH / 2 - 40 + i * 24); }); ctx.fillStyle = "rgba(255,255,255,0.6)"; ctx.fillText(`new round in ${Math.max(0, overT).toFixed(0)}s`, VW / 2, VH / 2 - 40 + 7 * 24 + 14); } } // ═══ MULTIPLAYER (§128 managed multiplayer — MCPity hosted relay) ═══ // Netcode model (host-authoritative, documented cheat tradeoff): // - The `.isHost` peer (lowest player uuid) runs the FULL sim in this file — // grid, captures, kills, round timer, and the bots (bots fill the empty // slots; a joining real player takes over a bot slot, a leaving one hands // the slot back to a bot). // - Host broadcasts at 15Hz: entity states (pos/heading/alive/name/kills) + // the newest trail cells; and a FULL grid+trail RLE snapshot every ~500ms // or immediately after a capture/kill/round event. Full-snapshot cadence // doubles as free late-join sync: a joiner is caught up within ≤500ms. // - Non-host clients send their desired heading + their own position at 15Hz // and mirror host state. Own movement is locally predicted (heading applied // instantly) with host correction; territory/kills are host-only. // - CHEAT TRADEOFF: headings (and, softly, positions) are client-authoritative // — a hacked client can steer itself anywhere, but territory, captures and // kills are computed only on the host, so it cannot award itself turf. // - Host migration: when the host leaves, the next-lowest uuid promotes // itself, adopts its last mirrored snapshot as authoritative (rebuilds // counts + per-entity trail arrays from the mirrored grids) and resumes // the sim, converting orphaned peer slots back into bots. // - Solo-first: the game starts vs bots instantly; matchmaking runs in the // background and NEVER blocks (matchmaking/realtime failure = stay solo). const MP_SUPABASE_URL = "https://xglqrnxxjyypwcjcyzgn.supabase.co"; const MP_MATCHMAKE_URL = MP_SUPABASE_URL + "/functions/v1/web-multiplayer"; const MP_REALTIME_URL = MP_SUPABASE_URL + "/realtime/v1"; const MP_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhnbHFybnh4anl5cHdjamN5emduIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzMwNDAxODksImV4cCI6MjA4ODYxNjE4OX0.8Mf4OP1cGM6sjX6DXdMhdiyzrRpKYWK5x1wNE7E6VOU"; // public anon key — safe to ship const MP_GAME_KEY = (window as any).__TURF_GAME_KEY || "turf-heist"; // override hook for isolated test rooms const MP_MAX_PLAYERS = 8; const MP_SEND_HZ = 15; // ── MCPityMultiplayer bus — inlined from pattern multiplayer.realtime-web (PRD §128) ── // Hosted relay + auto-matchmaking over Supabase Realtime. Self-connecting. (function () { if ((window as any).MCPityMultiplayer && (window as any).MCPityMultiplayer.__mcpity) return; const MATCHMAKE_URL = MP_MATCHMAKE_URL; const REALTIME_URL = MP_REALTIME_URL; const ANON_KEY = MP_ANON_KEY; const GAME_KEY = MP_GAME_KEY; const MAX_PLAYERS = MP_MAX_PLAYERS; const SEND_MIN_MS = Math.max(16, Math.round(1000 / Math.max(1, MP_SEND_HZ))); type Listener = (arg: any) => void; const listeners: Record = { ready: [], players: [], join: [], leave: [], message: [], status: [] }; function emit(evt: string, arg?: any) { (listeners[evt] || []).forEach((fn) => { try { fn(arg); } catch (e) { console.warn("[MCPityMultiplayer] listener", e); } }); } const api: any = { __mcpity: true, id: "", name: "", roomId: "", players: [] as any[], isHost: false, connected: false, status: "connecting", ready: null as Promise | null, on(evt: string, cb: Listener) { (listeners[evt] = listeners[evt] || []).push(cb); return api; }, off(evt: string, cb: Listener) { listeners[evt] = (listeners[evt] || []).filter((f) => f !== cb); return api; }, send(_state: any) { /* replaced once connected */ }, track(_meta: any) { /* replaced once connected */ }, }; (window as any).MCPityMultiplayer = api; function setStatus(s: string) { if (api.status === s) return; api.status = s; emit("status", s); } api.ready = (async () => { // 1) Matchmake - find/create an open room for this game. let room: any; try { const resp = await fetch(MATCHMAKE_URL, { method: "POST", headers: { "Content-Type": "application/json", apikey: ANON_KEY, Authorization: "Bearer " + ANON_KEY }, body: JSON.stringify({ action: "quick_match", game_key: GAME_KEY, capacity: MAX_PLAYERS }), }); room = await resp.json(); if (!resp.ok || !room || !room.topic) throw new Error((room && room.message) || "matchmaking failed"); } catch (e) { console.warn("[MCPityMultiplayer] matchmaking failed:", e); setStatus("offline"); return; } api.id = room.player_id; api.name = room.player_name; api.roomId = room.room_id; // 2) Connect to Supabase Realtime - presence (roster) + broadcast (state). let RealtimeClient: any; try { const mod: any = await import("@supabase/realtime-js"); RealtimeClient = mod.RealtimeClient || (mod.default && mod.default.RealtimeClient) || mod.default; } catch (e) { console.warn("[MCPityMultiplayer] could not load realtime client:", e); setStatus("offline"); return; } const client = new RealtimeClient(REALTIME_URL, { params: { apikey: ANON_KEY } }); const channel = client.channel(room.topic, { config: { presence: { key: api.id }, broadcast: { self: false } } }); let meta: any = { id: api.id, name: api.name }; function recomputeRoster() { const state = channel.presenceState() || {}; const list: any[] = []; Object.keys(state).forEach((k) => { const arr = state[k]; if (arr && arr[0]) list.push(arr[0]); }); list.sort((a, b) => String(a.id).localeCompare(String(b.id))); api.players = list; api.isHost = list.length > 0 && String(list[0].id) === String(api.id); emit("players", api.players); } channel.on("presence", { event: "sync" }, recomputeRoster); channel.on("presence", { event: "join" }, (e: any) => { recomputeRoster(); emit("join", e); }); channel.on("presence", { event: "leave" }, (e: any) => { recomputeRoster(); emit("leave", e); }); channel.on("broadcast", { event: "s" }, (m: any) => emit("message", m && m.payload)); // Throttled state broadcast. let lastSend = 0; let pending: any = null; let timer: any = null; function flush() { timer = null; if (pending == null) return; const p = pending; pending = null; lastSend = Date.now(); try { channel.send({ type: "broadcast", event: "s", payload: p }); } catch (_e) { /* not ready */ } } api.send = (state: any) => { pending = state; const dt = Date.now() - lastSend; if (dt >= SEND_MIN_MS) flush(); else if (!timer) timer = setTimeout(flush, SEND_MIN_MS - dt); }; api.track = (extra: any) => { meta = { ...meta, ...extra }; if (api.connected) channel.track(meta); }; let resolvedReady = false; await new Promise((resolve) => { channel.subscribe(async (status: string) => { if (status === "SUBSCRIBED") { api.connected = true; setStatus("online"); try { await channel.track(meta); } catch (_e) { /* ignore */ } recomputeRoster(); emit("ready"); if (!resolvedReady) { resolvedReady = true; resolve(); } } else if (status === "CHANNEL_ERROR" || status === "TIMED_OUT" || status === "CLOSED") { api.connected = false; setStatus("offline"); } }); }); // Best-effort leave on tab close (frees the matchmaking slot). const leave = () => { try { navigator.sendBeacon && navigator.sendBeacon(MATCHMAKE_URL, new Blob([JSON.stringify({ action: "leave", room_id: api.roomId })], { type: "application/json" })); } catch (_e) {} }; window.addEventListener("pagehide", leave); window.addEventListener("beforeunload", leave); })(); })(); // ── end inlined pattern ── // ── game glue: host-authoritative sim over the MCPityMultiplayer bus ── type MpRole = "solo" | "host" | "client"; let mpRole: MpRole = "solo"; let mpHaveHostState = false; // client: at least one host state applied let mpOwnSynced = false; // client: own entity snapped to host at least once let mpLastSend = 0; // our own 15Hz pacing (avoids the bus coalescing two payload kinds) let mpLastGridSend = 0; let mpLastEventMark = -1; const mpBus = () => (window as any).MCPityMultiplayer; function colorForId(id: number) { return id === 1 ? PLAYER_COLOR : BOT_COLORS[(id - 2 + BOT_COLORS.length) % BOT_COLORS.length]; } function botNameForId(id: number) { return BOT_NAMES[(id - 2 + BOT_NAMES.length * 2) % BOT_NAMES.length]; } function freshAi() { return { phase: "rest", t: 0.5 + rnd() * 0.5, outDir: 0, sideDir: 0, scanT: 0, chase: null }; } function rleEncode(a: Uint8Array): number[] { const out: number[] = []; let v = a[0], run = 1; for (let i = 1; i < a.length; i++) { if (a[i] === v && run < 0xffff) run++; else { out.push(v, run); v = a[i]; run = 1; } } out.push(v, run); return out; } function rleDecode(rle: number[], dst: Uint8Array) { let p = 0; for (let i = 0; i < rle.length; i += 2) { dst.fill(rle[i], p, p + rle[i + 1]); p += rle[i + 1]; } } function recountFromGrid() { counts.fill(0); for (let ci = 0; ci < NCELLS; ci++) if (grid[ci]) counts[grid[ci]]++; } function rebuildTrailCanvas() { // rebuilds the 3D trail layer from trailOwner (name kept from the 2D build) trailClearAll(); for (let ci = 0; ci < NCELLS; ci++) { const o = trailOwner[ci]; if (o && entities[o - 1]) paintTrailCell(entities[o - 1], ci); } } function rebuildTrailArrays() { // order lost (mirror has no ordering) — only self-cross grace is slightly off for one trail for (const e of entities) e.trail.length = 0; for (let ci = 0; ci < NCELLS; ci++) { const o = trailOwner[ci]; if (o && entities[o - 1]) entities[o - 1].trail.push(ci); } } function mpEnsureEntity(id: number): Ent { while (entities.length < id) { const nid = entities.length + 1; entities.push(makeEnt(nid, botNameForId(nid), colorForId(nid), true)); } return entities[id - 1]; } // HOST: keep entity slots in sync with the live roster (bots fill the rest). function mpReconcileSlots() { const bus = mpBus(); if (!bus) return; entities[0].peer = bus.id || null; if (bus.name) entities[0].name = bus.name; const present = new Set((bus.players || []).map((p: any) => String(p.id))); for (const e of entities) { if (e.id !== 1 && e.peer && !present.has(e.peer)) { // peer left -> slot goes back to a bot (bot inherits the turf) feed(`${e.name} bailed, a bot takes over`); e.peer = null; e.isBot = true; e.name = botNameForId(e.id); e.ai = freshAi(); e.pullX = e.pullY = undefined; } } for (const p of bus.players || []) { const pid = String(p.id); if (pid === String(bus.id)) continue; if (entities.some((e) => e.peer === pid)) continue; let e = entities.find((en) => en.id !== 1 && !en.peer); if (!e && entities.length < MP_MAX_PLAYERS) e = mpEnsureEntity(entities.length + 1); if (!e) continue; // no free slot (shouldn't happen: room capacity == MP_MAX_PLAYERS) clearTrail(e); // fresh spawn for the joining player; the bot's turf is released for (let ci = 0; ci < NCELLS; ci++) if (grid[ci] === e.id) setOwner(ci, 0); e.peer = pid; e.isBot = false; e.ai = null; e.kills = 0; e.name = (p.name && String(p.name).slice(0, 16)) || "Heister"; spawn(e); feed(`${e.name} joined the heist`); } } // Adopt the last mirrored snapshot as authoritative (host migration / everyone left). function mpPromote() { const bus = mpBus(); recountFromGrid(); rebuildTrailArrays(); const present = new Set(((bus && bus.players) || []).map((p: any) => String(p.id))); for (const e of entities) { if (e.peer && (!bus || e.peer !== String(bus.id)) && !present.has(e.peer)) { e.peer = null; e.isBot = true; e.name = botNameForId(e.id); } if (e.isBot && !e.ai) e.ai = freshAi(); if (!e.alive && e.respawnT > RESPAWN_SEC) e.respawnT = RESPAWN_SEC; e.cellX = (e.x / CELL) | 0; e.cellY = (e.y / CELL) | 0; e.anchorX = e.x; e.anchorY = e.y; } const own = bus && entities.find((e) => e.peer === String(bus.id)); if (own) player = own; terDirty = true; } function mpUpdateRole() { const bus = mpBus(); const n = bus && bus.connected ? (bus.players || []).length : 0; const next: MpRole = n >= 2 ? (bus.isHost ? "host" : "client") : "solo"; if (next === mpRole) { if (mpRole === "host") mpReconcileSlots(); return; } const prev = mpRole; mpRole = next; if (next === "client") { mpHaveHostState = false; mpOwnSynced = false; } if (prev === "client" && next !== "client") mpPromote(); if (next === "host") mpReconcileSlots(); } // HOST → all: entity states 15Hz + full grid/trail RLE snapshot (500ms cadence // or immediately on capture/kill/round events; also serves late joiners). function mpHostSend(now: number) { const bus = mpBus(); if (!bus || !bus.connected) return; if (now - mpLastSend < 1000 / MP_SEND_HZ) return; mpLastSend = now; const msg: any = { t: "h", rt: Math.round(roundT * 100) / 100, ph: phase, ot: Math.round(overT * 100) / 100, rn: roundNum, fd: killFeed.slice(0, 4).map((f) => f.text), e: entities.map((e) => ({ id: e.id, n: e.name, b: e.isBot ? 1 : 0, p: e.peer || 0, a: e.alive ? 1 : 0, x: Math.round(e.x * 10) / 10, y: Math.round(e.y * 10) / 10, h: Math.round(e.heading * 1000) / 1000, k: e.kills, rs: Math.round(e.respawnT * 10) / 10, tl: e.trail.length ? e.trail.slice(-10) : [], })), }; const evtMark = capturesTotal * 4096 + killLog.length * 16 + roundNum; if (now - mpLastGridSend > 500 || evtMark !== mpLastEventMark) { mpLastGridSend = now; mpLastEventMark = evtMark; msg.g = rleEncode(grid); msg.tw = rleEncode(trailOwner); } bus.send(msg); } // CLIENT → host: desired heading + own predicted position, 15Hz. function mpClientSend(now: number) { const bus = mpBus(); if (!bus || !bus.connected || !mpHaveHostState || !player.peer) return; if (now - mpLastSend < 1000 / MP_SEND_HZ) return; mpLastSend = now; bus.send({ t: "c", p: bus.id, tg: Math.round(player.target * 1000) / 1000, x: Math.round(player.x * 10) / 10, y: Math.round(player.y * 10) / 10 }); } // HOST: apply a client's input. Heading is trusted (cheat tradeoff, see header); // position only softly reconciled and ignored when implausible. function mpApplyClientInput(m: any) { const e = entities.find((en) => en.peer === String(m.p)); if (!e || !e.alive || typeof m.tg !== "number") return; e.target = m.tg; if (typeof m.x === "number" && typeof m.y === "number") { const d = Math.hypot(m.x - e.x, m.y - e.y); if (d > 1 && d < 150) { e.pullX = m.x; e.pullY = m.y; } } } // CLIENT: mirror a host state message. function mpApplyHostState(m: any) { const bus = mpBus(); mpHaveHostState = true; for (const s of m.e || []) { if (typeof s.id !== "number" || s.id < 1 || s.id > 15) continue; const e = mpEnsureEntity(s.id); e.name = s.n || e.name; e.isBot = !!s.b; e.peer = s.p ? String(s.p) : null; if (e.isBot && !e.ai) e.ai = freshAi(); if (!e.isBot) e.ai = null; e.kills = s.k || 0; e.respawnT = s.rs || 0; const wasAlive = e.alive; e.alive = !!s.a; if (bus && e.peer === String(bus.id)) { player = e; const d = Math.hypot(e.x - s.x, e.y - s.y); if (!mpOwnSynced || (!wasAlive && e.alive) || d > 120) { e.x = s.x; e.y = s.y; e.heading = e.target = s.h; mpOwnSynced = true; } else if (d > 24) { e.x += (s.x - e.x) * 0.25; e.y += (s.y - e.y) * 0.25; } // host correction } else { e.netX = s.x; e.netY = s.y; e.netH = s.h; if ((!wasAlive && e.alive) || Math.hypot(e.x - s.x, e.y - s.y) > 200) { e.x = s.x; e.y = s.y; e.heading = s.h; } } if (Array.isArray(s.tl)) { // near-realtime trail tail; snapshots are the truth for (const ci of s.tl) { if (ci >= 0 && ci < NCELLS && trailOwner[ci] === 0) { trailOwner[ci] = e.id; e.trail.push(ci); paintTrailCell(e, ci); } } } } roundT = m.rt; overT = m.ot; roundNum = m.rn; if (m.ph !== phase) phase = m.ph; const fd: string[] = m.fd || []; if (fd.join("\n") !== killFeed.map((f) => f.text).join("\n")) { killFeed.length = 0; fd.forEach((text, i) => killFeed.push({ text, ttl: KILLFEED_TTL - i * 0.5 })); } if (m.g && m.tw) { rleDecode(m.g, grid); rleDecode(m.tw, trailOwner); recountFromGrid(); rebuildTrailCanvas(); terDirty = true; } } // CLIENT: lightweight local sim — own-entity prediction + remote lerp; no game rules. function clientSim(dt: number) { simClock += dt; for (const f of killFeed) f.ttl -= dt; while (killFeed.length && killFeed[killFeed.length - 1].ttl <= 0) killFeed.pop(); roundT = Math.max(0, roundT - dt); if (phase === "over") { ranking = [...entities].sort((a, b) => counts[b.id] - counts[a.id]); return; } readPlayerInput(); if (player.peer && player.alive && mpOwnSynced) { const d = angDiff(player.target, player.heading); const maxTurn = TURN_RATE * dt; player.heading += Math.abs(d) <= maxTurn ? d : Math.sign(d) * maxTurn; player.x = Math.max(HEAD_R, Math.min(WORLD - HEAD_R, player.x + Math.cos(player.heading) * SPEED * dt)); player.y = Math.max(HEAD_R, Math.min(WORLD - HEAD_R, player.y + Math.sin(player.heading) * SPEED * dt)); } else if (!player.alive) { player.respawnT = Math.max(0, player.respawnT - dt); } const k = 1 - Math.exp(-10 * dt); for (const e of entities) { if (e === player || !e.alive || e.netX === undefined || e.netY === undefined || e.netH === undefined) continue; e.x += (e.netX - e.x) * k; e.y += (e.netY - e.y) * k; e.heading += angDiff(e.netH, e.heading) * k; } } // Per-frame net pump (called from the RAF loop; deterministic tests never touch it). function mpNetTick(now: number) { if (mpRole === "host") mpHostSend(now); else if (mpRole === "client") mpClientSend(now); } // Bus wiring — never blocks; if matchmaking fails we silently stay solo. (function mpWire() { const bus = mpBus(); if (!bus) return; bus.on("ready", () => { entities[0].peer = bus.id || null; if (bus.name && mpRole !== "client") entities[0].name = bus.name; mpUpdateRole(); }); bus.on("players", mpUpdateRole); bus.on("status", mpUpdateRole); bus.on("message", (m: any) => { if (!m || typeof m !== "object") return; if (m.t === "h" && mpRole === "client") mpApplyHostState(m); else if (m.t === "c" && mpRole === "host") mpApplyClientInput(m); }); })(); // ═══ DEBUG ═══ // Always-on for v1 (harmless, powers automated playtests). (window as any).__turf = { entities, killLog, gridStats: () => { let free = 0; for (let ci = 0; ci < NCELLS; ci++) if (grid[ci] === 0) free++; return { free, counts: entities.map((e) => ({ name: e.name, cells: counts[e.id], pct: pct(e.id) })), captures: capturesTotal, round: roundNum, roundT, phase, simClock, }; }, step: (ms: number) => advanceExact(ms), skipRound: () => { roundT = Math.min(roundT, 0.05); }, player: () => player, camOverride: null as { x: number; y: number } | null, renderInfo: () => ({ calls: renderer.info.render.calls, triangles: renderer.info.render.triangles, geometries: renderer.info.memory.geometries }), // additive (perf probes); existing keys unchanged mp: { role: () => mpRole, roomId: () => (mpBus() && mpBus().roomId) || "", status: () => (mpBus() && mpBus().status) || "none", players: () => (mpBus() && mpBus().players) || [], myEntityId: () => player.id, haveHostState: () => mpHaveHostState, }, }; void preloadAssets(); // store-build roller swap; no-op on /play (Assets.getModel() -> null) // ═══ INIT ═══ for (const e of entities) spawn(e); // ═══ LOOP ═══ let lastT = performance.now(); function frame(now: number) { const dtMs = Math.min(now - lastT, 100); lastT = now; advance(dtMs); mpNetTick(Date.now()); render(); // ═══ PLATFORM ═══ // template convention: expose the local player's position each frame (window as any).MCPityPlayer = { x: player.x, y: player.y, z: 0 }; requestAnimationFrame(frame); } requestAnimationFrame(frame);