// BlockWorld — first-person voxel building game (creative mode, phase 3). // MCPity Web Engine · Three.js r168 · single self-contained file · zero external assets. // Pointer-lock WASD + mouse-look · voxel DDA targeting · left-click break · right-click place. // Phase 2: hotbar UI (10 blocks, wheel + tap), cloud save/load (sparse diff over the // seed world → player-save edge fn), touch controls (virtual joystick + look-drag + // JUMP/PLACE/BREAK + tap-to-target), pooled particles, WebAudio SFX. // Phase 3: preview save bridge — in the sandboxed Studio preview (no __mcpityEnv), // saves persist through the parent's authenticated session via the generic // player-save / player-save-result / player-save-state postMessage contract // implemented by web-game-preview.tsx, so edits survive full page reloads. // // Architecture: // WORLD — block enum, chunked Uint8Array storage, seeded procedural island gen, // base-world snapshot + sparse edit diff (the save format) // MESHING — canvas texture atlas, per-chunk face-culled BufferGeometry (opaque+transparent), vertex AO // PLAYER — swept per-axis AABB physics, gravity, jump (keyboard + analog joystick input) // INPUT — thin abstraction over keyboard/mouse/touch // INTERACTION — Amanatides-Woo voxel raycast, highlight box, break/place (+ tap-to-target rays) // PARTICLES — pooled InstancedMesh burst on break/place (no allocation churn) // AUDIO — WebAudio-synthesized SFX (no files), resumed on first user gesture // SAVE/LOAD — v1 payload: RLE/varint sparse diff (base64) + player state. // Transport mirrors save.cloud-save-web: window.__mcpityEnv {url,anonKey,jwt} // (+ window.__mcpitySupabase session) → POST /functions/v1/player-save. // No env (the sandboxed Studio preview iframe): the PREVIEW SAVE // BRIDGE — post {type:"player-save"} to the parent, which persists // via its authenticated session (web-game-preview.tsx), acks with // "player-save-result" and pushes "player-save-state" on load. // window.__bwSaveCache still gives in-session hot-reload restore. // HUD — crosshair, stats, hint, HOTBAR (10 slots, canvas swatches), save button // TOUCH — virtual joystick (left-bottom quadrant), look-drag, JUMP/PLACE/BREAK buttons // MAIN — boot, save restore, dirty-chunk remesh queue, autosave timer, render loop // // Debug hook (used by automated playtests; NOT dev-only, keep it): // window.__bw = { getBlock, setBlock, blockTypes, playerPos, setPlayerPos, setLook, getLook, // simulateKeys, breakTargeted, placeTargeted, getTarget, setSelected, getSelected, // stats, saveNow, getSavePayload, applySave, saveInfo, particlesActive, audioInfo } 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 ONE self-contained file to the in-browser bundler with no sibling files present, so an `import` from `games/_shared` would fail to resolve and break the game on /play. This tiny object reproduces WindowAssets' runtime behavior with zero external imports. BlockWorld is a TEXTURE-ATLAS game (no hero GLB): the ONLY swappable asset is the block texture atlas, resolved SYNC via getTexture("block_atlas"). A native store wrapper can inject window.MCPityAssets (via installAssetPack, see games/blockworld/store-boot.ts) to serve a real atlas; on /play there is no MCPityAssets so getTexture() returns null and the procedural buildAtlas() is used -- NOTHING changes on /play. getModel is a stub (BlockWorld has no 3D hero model) kept only so the shim matches the shared AssetProvider shape. ------------------------------------------------------------------------- */ interface InjectedAssetGlobal { has?(key: string): boolean; getModel?(key: string): Promise | THREE.Object3D | null; getTexture?(key: string): THREE.Texture | null; } const Assets = { 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) { /* absent / broken global -> procedural */ } return null; }, // BlockWorld has no hero GLB; this stub keeps the shim shape-compatible with // the shared AssetProvider (a store build never calls it for this game). getModel(_key: string): Promise { return Promise.resolve(null); }, }; // ═══ CONSTANTS + BLOCK TYPES ════════════════════════════════════════ const SEED = 1337; // fixed world seed — deterministic island const CHUNK = 16; // blocks per chunk side (x/z) const CHUNKS = 6; // 6×6 chunk grid const WORLD = CHUNK * CHUNKS; // 96×96 blocks const HEIGHT = 32; // world height const WATER_LEVEL = 6; // sea level (blocks at or below are flooded) // Full 10-type enum (byte values are the on-disk save format — never renumber). const B = { AIR: 0, GRASS: 1, DIRT: 2, STONE: 3, PLANK: 4, GLASS: 5, BRICK: 6, GOLD: 7, LEAVES: 8, WATER: 9, // decorative — non-solid, no fluid sim NEON: 10, // jewel/neon accent block }; const BLOCK_NAMES = ["air", "grass", "dirt", "stone", "plank", "glass", "brick", "gold", "leaves", "water", "neon"]; const IS_TRANSPARENT = (t: number) => t === B.GLASS || t === B.WATER; // 2nd render pass + no-cull neighbors const IS_SOLID = (t: number) => t !== B.AIR && t !== B.WATER; // blocks player + raycast // Representative palette color per block (particle bursts). Matches the atlas base fills. const BLOCK_PALETTE: Record = { [B.GRASS]: 0x5fae3f, [B.DIRT]: 0x8a6244, [B.STONE]: 0x8e8e93, [B.PLANK]: 0xb08347, [B.GLASS]: 0xcfe6ff, [B.BRICK]: 0x9c4a37, [B.GOLD]: 0xe8b62c, [B.LEAVES]: 0x3e7d2c, [B.WATER]: 0x306ebe, [B.NEON]: 0xc32bd8, }; const PLAYER_W = 0.6, PLAYER_H = 1.8, EYE = 1.62; const MOVE_SPEED = 5.0, RUN_MULT = 1.6, GRAVITY = 25, JUMP_VEL = 8.4, REACH = 6; // Save plumbing (see SAVE/LOAD section). const SAVE_FORMAT_VERSION = 1; const SAVE_PROJECT_ID = "9f02ee6b-8dc3-408b-ae24-5b08637456ed"; // BlockWorld projects row const SAVE_SLOT = 0; const SAVE_ENDPOINT = "/functions/v1/player-save"; const AUTOSAVE_SECONDS = 30; const BRIDGE_ACK_TIMEOUT_MS = 4000; // preview-save-bridge ack wait (no ack = no bridge host) // ═══ WORLD (data + seeded procedural generation) ════════════════════ // Storage: one flat Uint8Array per 16×16×32 chunk; index = (y<<8)|(z<<4)|x. // Save format: sparse diff vs the freshly-generated gen(SEED) base world — // baseChunks snapshots the world right after generateWorld(); `edits` maps // linear voxel index → current type for every voxel that differs from base. const chunks: Uint8Array[] = []; for (let i = 0; i < CHUNKS * CHUNKS; i++) chunks.push(new Uint8Array(CHUNK * CHUNK * HEIGHT)); const baseChunks: Uint8Array[] = []; // filled once in MAIN, right after generateWorld() const edits = new Map(); // linear index → type (voxels differing from base) let applyingSave = false; // suppress save-dirty marking while restoring const vidx = (lx: number, y: number, lz: number) => (y << 8) | (lz << 4) | lx; const lidx = (x: number, y: number, z: number) => (y * WORLD + z) * WORLD + x; // linear save index function getBlock(x: number, y: number, z: number): number { if (y < 0) return B.STONE; // solid bedrock below the world if (y >= HEIGHT || x < 0 || z < 0 || x >= WORLD || z >= WORLD) return B.AIR; return chunks[(z >> 4) * CHUNKS + (x >> 4)][vidx(x & 15, y, z & 15)]; } function setBlockRaw(x: number, y: number, z: number, t: number): void { // gen-time, no dirty marking if (y < 0 || y >= HEIGHT || x < 0 || z < 0 || x >= WORLD || z >= WORLD) return; chunks[(z >> 4) * CHUNKS + (x >> 4)][vidx(x & 15, y, z & 15)] = t; } // ── Seeded PRNG + 2D value noise ── function hash2(ix: number, iz: number, salt: number): number { let h = (ix * 374761393 + iz * 668265263 + (SEED + salt) * 2246822519) | 0; h = Math.imul(h ^ (h >>> 13), 1274126177); return ((h ^ (h >>> 16)) >>> 0) / 4294967296; // [0,1) } function valueNoise(x: number, z: number, salt: number): number { const ix = Math.floor(x), iz = Math.floor(z); const fx = x - ix, fz = z - iz; const sx = fx * fx * (3 - 2 * fx), sz = fz * fz * (3 - 2 * fz); // smoothstep const a = hash2(ix, iz, salt), b = hash2(ix + 1, iz, salt); const c = hash2(ix, iz + 1, salt), d = hash2(ix + 1, iz + 1, salt); return a + (b - a) * sx + (c - a) * sz + (a - b - c + d) * sx * sz; } const heightMap = new Int8Array(WORLD * WORLD); function terrainHeight(x: number, z: number): number { return heightMap[z * WORLD + x]; } function generateWorld(): void { const cx = WORLD / 2 - 0.5, cz = WORLD / 2 - 0.5; // Heights: gently rolling island, edges sink below the water level. for (let z = 0; z < WORLD; z++) { for (let x = 0; x < WORLD; x++) { const n = 0.65 * valueNoise(x / 28, z / 28, 11) + 0.35 * valueNoise(x / 9, z / 9, 77); const r = Math.hypot(x - cx, z - cz) / 50; // 0 center → ~1.35 corner const island = Math.max(0, 1 - r * r); // radial falloff let h = Math.round(2 + island * (4 + n * 12)); h = Math.max(1, Math.min(HEIGHT - 8, h)); heightMap[z * WORLD + x] = h; for (let y = 0; y <= h; y++) { const t = y === h ? (h >= WATER_LEVEL ? B.GRASS : B.DIRT) // submerged tops read as dirt : (y >= h - 2 ? B.DIRT : B.STONE); setBlockRaw(x, y, z, t); } for (let y = h + 1; y <= WATER_LEVEL; y++) setBlockRaw(x, y, z, B.WATER); } } // Trees: one deterministic candidate per chunk cell → trunk (plank) + leaf blob. for (let gz = 0; gz < CHUNKS; gz++) { for (let gx = 0; gx < CHUNKS; gx++) { if (hash2(gx, gz, 500) > 0.62) continue; const tx = gx * CHUNK + 3 + Math.floor(hash2(gx, gz, 501) * 10); const tz = gz * CHUNK + 3 + Math.floor(hash2(gx, gz, 502) * 10); const h = terrainHeight(tx, tz); if (getBlock(tx, h, tz) !== B.GRASS || h < WATER_LEVEL + 1 || h > HEIGHT - 10) continue; const th = 4 + Math.floor(hash2(gx, gz, 503) * 2); // trunk height 4-5 for (let y = 1; y <= th; y++) setBlockRaw(tx, h + y, tz, B.PLANK); const cy = h + th; // canopy center for (let dy = -1; dy <= 2; dy++) for (let dz = -2; dz <= 2; dz++) for (let dx = -2; dx <= 2; dx++) { if (dx * dx + dy * dy + dz * dz > 5) continue; if (getBlock(tx + dx, cy + dy, tz + dz) === B.AIR) setBlockRaw(tx + dx, cy + dy, tz + dz, B.LEAVES); } } } } // ═══ MOUNT + RENDERER ═══════════════════════════════════════════════ const root = document.getElementById("mcpity-root") || document.body; root.innerHTML = ""; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.outputColorSpace = THREE.SRGBColorSpace; root.appendChild(renderer.domElement); renderer.domElement.style.touchAction = "none"; // we own all touch gestures on the canvas // ═══ SCENE + FOG + LIGHTING ═════════════════════════════════════════ const SKY = 0x8fc4e8; const scene = new THREE.Scene(); scene.background = new THREE.Color(SKY); scene.fog = new THREE.Fog(SKY, 48, 150); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 320); camera.rotation.order = "YXZ"; scene.add(camera); const sun = new THREE.DirectionalLight(0xfff4e0, 1.35); sun.position.set(60, 95, 35); scene.add(sun); scene.add(new THREE.HemisphereLight(0xcfe4ff, 0x6e6046, 0.85)); // ═══ MESHING (texture atlas + chunk mesh builder) ═══════════════════ // Canvas-generated atlas (no external URLs): 4×3 grid of 16px tiles. const T = { GRASS_TOP: 0, GRASS_SIDE: 1, DIRT: 2, STONE: 3, PLANK: 4, GLASS: 5, BRICK: 6, GOLD: 7, LEAVES: 8, WATER: 9, NEON: 10 }; // blockType → [topTile, sideTile, bottomTile] const BLOCK_TILES: Record = { [B.GRASS]: [T.GRASS_TOP, T.GRASS_SIDE, T.DIRT], [B.DIRT]: [T.DIRT, T.DIRT, T.DIRT], [B.STONE]: [T.STONE, T.STONE, T.STONE], [B.PLANK]: [T.PLANK, T.PLANK, T.PLANK], [B.GLASS]: [T.GLASS, T.GLASS, T.GLASS], [B.BRICK]: [T.BRICK, T.BRICK, T.BRICK], [B.GOLD]: [T.GOLD, T.GOLD, T.GOLD], [B.LEAVES]: [T.LEAVES, T.LEAVES, T.LEAVES], [B.WATER]: [T.WATER, T.WATER, T.WATER], [B.NEON]: [T.NEON, T.NEON, T.NEON], }; const ATLAS_COLS = 4, ATLAS_ROWS = 3, TILE = 16; let atlasCanvas: HTMLCanvasElement; // kept for hotbar swatch rendering function buildAtlas(): THREE.CanvasTexture { const cv = document.createElement("canvas"); cv.width = ATLAS_COLS * TILE; cv.height = ATLAS_ROWS * TILE; atlasCanvas = cv; const g = cv.getContext("2d")!; let rs = SEED >>> 0; // tiny seeded PRNG so the atlas is deterministic too const rnd = () => { rs = (rs * 1664525 + 1013904223) >>> 0; return rs / 4294967296; }; const px = (ti: number, x: number, y: number, css: string) => { g.fillStyle = css; g.fillRect((ti % ATLAS_COLS) * TILE + x, Math.floor(ti / ATLAS_COLS) * TILE + y, 1, 1); }; const fill = (ti: number, css: string) => { g.fillStyle = css; g.fillRect((ti % ATLAS_COLS) * TILE, Math.floor(ti / ATLAS_COLS) * TILE, TILE, TILE); }; const speckle = (ti: number, colors: string[], n: number) => { for (let i = 0; i < n; i++) px(ti, Math.floor(rnd() * TILE), Math.floor(rnd() * TILE), colors[Math.floor(rnd() * colors.length)]); }; // grass top fill(T.GRASS_TOP, "#5fae3f"); speckle(T.GRASS_TOP, ["#6fbe4c", "#529939", "#7cc958"], 90); // grass side: dirt with turf strip fill(T.GRASS_SIDE, "#8a6244"); speckle(T.GRASS_SIDE, ["#7a563c", "#966c4c"], 70); g.fillStyle = "#5fae3f"; g.fillRect((T.GRASS_SIDE % ATLAS_COLS) * TILE, Math.floor(T.GRASS_SIDE / ATLAS_COLS) * TILE, TILE, 4); for (let i = 0; i < TILE; i++) if (rnd() < 0.5) px(T.GRASS_SIDE, i, 4, "#5fae3f"); // dirt fill(T.DIRT, "#8a6244"); speckle(T.DIRT, ["#7a563c", "#966c4c", "#6d4c34"], 90); // stone fill(T.STONE, "#8e8e93"); speckle(T.STONE, ["#7d7d82", "#9d9da2", "#6f6f74"], 90); // plank: warm wood + grain lines fill(T.PLANK, "#b08347"); speckle(T.PLANK, ["#a1763e", "#bd9052"], 50); g.fillStyle = "#8f6a37"; for (const yy of [3, 7, 11, 15]) g.fillRect((T.PLANK % ATLAS_COLS) * TILE, Math.floor(T.PLANK / ATLAS_COLS) * TILE + yy, TILE, 1); // glass: mostly transparent pane with frame + sheen fill(T.GLASS, "rgba(200,230,255,0.14)"); g.strokeStyle = "rgba(230,245,255,0.85)"; g.strokeRect((T.GLASS % ATLAS_COLS) * TILE + 0.5, Math.floor(T.GLASS / ATLAS_COLS) * TILE + 0.5, TILE - 1, TILE - 1); for (let i = 2; i < 7; i++) px(T.GLASS, i, 9 - i, "rgba(255,255,255,0.55)"); // brick fill(T.BRICK, "#9c4a37"); g.fillStyle = "#d8cdc4"; for (const yy of [0, 5, 10, 15]) g.fillRect((T.BRICK % ATLAS_COLS) * TILE, Math.floor(T.BRICK / ATLAS_COLS) * TILE + yy, TILE, 1); for (let row = 0; row < 3; row++) for (const xx of [row % 2 ? 4 : 10]) g.fillRect((T.BRICK % ATLAS_COLS) * TILE + xx, Math.floor(T.BRICK / ATLAS_COLS) * TILE + row * 5 + 1, 1, 4); speckle(T.BRICK, ["#8d4230", "#aa5440"], 40); // gold fill(T.GOLD, "#e8b62c"); speckle(T.GOLD, ["#f7d158", "#c99a1f", "#fff0a8"], 60); // leaves fill(T.LEAVES, "#3e7d2c"); speckle(T.LEAVES, ["#356d25", "#4c9636", "#2c5a1e", "#5aa843"], 110); // water (semi-transparent) fill(T.WATER, "rgba(48,110,190,0.62)"); speckle(T.WATER, ["rgba(90,150,220,0.65)", "rgba(40,95,170,0.65)"], 50); // neon jewel fill(T.NEON, "#c32bd8"); speckle(T.NEON, ["#e355f5", "#8e1ba1", "#ff7bff"], 70); g.fillStyle = "#ffd6ff"; g.fillRect((T.NEON % ATLAS_COLS) * TILE + 3, Math.floor(T.NEON / ATLAS_COLS) * TILE + 3, 2, 2); const tex = new THREE.CanvasTexture(cv); tex.magFilter = THREE.NearestFilter; tex.minFilter = THREE.NearestFilter; tex.colorSpace = THREE.SRGBColorSpace; return tex; } // Asset-swap seam: a store build can inject a real block texture atlas at // window.MCPityAssets.getTexture("block_atlas"); on /play there is no global so // injectedAtlas is null and the procedural atlas is used unchanged. // buildAtlas() is ALWAYS called (never skipped): it populates atlasCanvas, which // the hotbar swatches draw from, and its result is the /play texture -- so /play // is byte-for-byte unchanged and the store build's hotbar never breaks. const proceduralAtlas = buildAtlas(); const injectedAtlas = Assets.getTexture("block_atlas"); if (injectedAtlas) { // Match the procedural atlas's texture settings so an injected atlas still // maps to the 4x3 grid of 16px tiles the UVs assume (crisp nearest voxels). injectedAtlas.magFilter = THREE.NearestFilter; injectedAtlas.minFilter = THREE.NearestFilter; injectedAtlas.colorSpace = THREE.SRGBColorSpace; injectedAtlas.wrapS = proceduralAtlas.wrapS; injectedAtlas.wrapT = proceduralAtlas.wrapT; injectedAtlas.needsUpdate = true; } const atlas: THREE.Texture = injectedAtlas ?? proceduralAtlas; const opaqueMat = new THREE.MeshLambertMaterial({ map: atlas, vertexColors: true }); const transMat = new THREE.MeshLambertMaterial({ map: atlas, vertexColors: true, transparent: true, depthWrite: false, side: THREE.DoubleSide, }); // Face table (three.js voxel-geometry convention): dir + 4 corners with in-tile UVs. // Quad indices: 0,1,2, 2,1,3. const FACES = [ { dir: [-1, 0, 0], corners: [{ pos: [0, 1, 0], uv: [0, 1] }, { pos: [0, 0, 0], uv: [0, 0] }, { pos: [0, 1, 1], uv: [1, 1] }, { pos: [0, 0, 1], uv: [1, 0] }] }, { dir: [1, 0, 0], corners: [{ pos: [1, 1, 1], uv: [0, 1] }, { pos: [1, 0, 1], uv: [0, 0] }, { pos: [1, 1, 0], uv: [1, 1] }, { pos: [1, 0, 0], uv: [1, 0] }] }, { dir: [0, -1, 0], corners: [{ pos: [1, 0, 1], uv: [1, 0] }, { pos: [0, 0, 1], uv: [0, 0] }, { pos: [1, 0, 0], uv: [1, 1] }, { pos: [0, 0, 0], uv: [0, 1] }] }, { dir: [0, 1, 0], corners: [{ pos: [0, 1, 1], uv: [1, 1] }, { pos: [1, 1, 1], uv: [0, 1] }, { pos: [0, 1, 0], uv: [1, 0] }, { pos: [1, 1, 0], uv: [0, 0] }] }, { dir: [0, 0, -1], corners: [{ pos: [1, 0, 0], uv: [0, 0] }, { pos: [0, 0, 0], uv: [1, 0] }, { pos: [1, 1, 0], uv: [0, 1] }, { pos: [0, 1, 0], uv: [1, 1] }] }, { dir: [0, 0, 1], corners: [{ pos: [0, 0, 1], uv: [0, 0] }, { pos: [1, 0, 1], uv: [1, 0] }, { pos: [0, 1, 1], uv: [0, 1] }, { pos: [1, 1, 1], uv: [1, 1] }] }, ]; // Per-chunk mesh registry. interface ChunkMeshes { opaque: THREE.Mesh | null; trans: THREE.Mesh | null } const chunkMeshes: ChunkMeshes[] = []; for (let i = 0; i < CHUNKS * CHUNKS; i++) chunkMeshes.push({ opaque: null, trans: null }); let chunkRebuilds = 0; // exposed via __bw.stats() so the harness can assert remeshes const occludesAO = (t: number) => t !== B.AIR && !IS_TRANSPARENT(t); // leaves DO occlude a little function vertexAO(nx: number, ny: number, nz: number, dir: number[], cpos: number[]): number { // Tangent axes perpendicular to the face normal. let a1: number[], a2: number[], c1: number, c2: number; if (dir[0] !== 0) { a1 = [0, 1, 0]; a2 = [0, 0, 1]; c1 = cpos[1]; c2 = cpos[2]; } else if (dir[1] !== 0) { a1 = [1, 0, 0]; a2 = [0, 0, 1]; c1 = cpos[0]; c2 = cpos[2]; } else { a1 = [1, 0, 0]; a2 = [0, 1, 0]; c1 = cpos[0]; c2 = cpos[1]; } const s1 = c1 ? 1 : -1, s2 = c2 ? 1 : -1; const o1 = occludesAO(getBlock(nx + s1 * a1[0], ny + s1 * a1[1], nz + s1 * a1[2])) ? 1 : 0; const o2 = occludesAO(getBlock(nx + s2 * a2[0], ny + s2 * a2[1], nz + s2 * a2[2])) ? 1 : 0; const oc = occludesAO(getBlock(nx + s1 * a1[0] + s2 * a2[0], ny + s1 * a1[1] + s2 * a2[1], nz + s1 * a1[2] + s2 * a2[2])) ? 1 : 0; const level = o1 && o2 ? 3 : o1 + o2 + oc; return 1 - level * 0.16; } // Baked face shading on top of the Lambert lights: tops bright, bottoms dark. const FACE_SHADE = [0.82, 0.82, 0.55, 1.0, 0.72, 0.72]; interface GeoBuf { pos: number[]; nrm: number[]; uv: number[]; col: number[]; idx: number[] } const newBuf = (): GeoBuf => ({ pos: [], nrm: [], uv: [], col: [], idx: [] }); function buildChunkMesh(ccx: number, ccz: number): void { const ci = ccz * CHUNKS + ccx; const data = chunks[ci]; const ob = newBuf(), tb = newBuf(); const x0 = ccx * CHUNK, z0 = ccz * CHUNK; for (let y = 0; y < HEIGHT; y++) { for (let lz = 0; lz < CHUNK; lz++) { for (let lx = 0; lx < CHUNK; lx++) { const t = data[vidx(lx, y, lz)]; if (t === B.AIR) continue; const wx = x0 + lx, wz = z0 + lz; const tiles = BLOCK_TILES[t]; for (let f = 0; f < 6; f++) { const face = FACES[f]; const n = getBlock(wx + face.dir[0], y + face.dir[1], wz + face.dir[2]); // Emit only faces exposed to air or a DIFFERENT transparent block. if (!(n === B.AIR || (IS_TRANSPARENT(n) && n !== t))) continue; const buf = IS_TRANSPARENT(t) ? tb : ob; const tile = f === 3 ? tiles[0] : f === 2 ? tiles[2] : tiles[1]; const tcx = (tile % ATLAS_COLS) * TILE, tcy = Math.floor(tile / ATLAS_COLS) * TILE; const base = buf.pos.length / 3; const shade = FACE_SHADE[f]; for (const c of face.corners) { buf.pos.push(wx + c.pos[0], y + c.pos[1], wz + c.pos[2]); buf.nrm.push(face.dir[0], face.dir[1], face.dir[2]); // Half-texel inset stops atlas bleeding with nearest filtering. const u = (tcx + 0.5 + c.uv[0] * (TILE - 1)) / (ATLAS_COLS * TILE); const v = 1 - (tcy + 0.5 + (1 - c.uv[1]) * (TILE - 1)) / (ATLAS_ROWS * TILE); buf.uv.push(u, v); const ao = vertexAO(wx + face.dir[0], y + face.dir[1], wz + face.dir[2], face.dir, c.pos); const s = shade * ao; buf.col.push(s, s, s); } buf.idx.push(base, base + 1, base + 2, base + 2, base + 1, base + 3); } } } } const cm = chunkMeshes[ci]; const rebuild = (old: THREE.Mesh | null, buf: GeoBuf, mat: THREE.Material): THREE.Mesh | null => { if (old) { scene.remove(old); old.geometry.dispose(); } if (buf.idx.length === 0) return null; const geo = new THREE.BufferGeometry(); geo.setAttribute("position", new THREE.BufferAttribute(new Float32Array(buf.pos), 3)); geo.setAttribute("normal", new THREE.BufferAttribute(new Float32Array(buf.nrm), 3)); geo.setAttribute("uv", new THREE.BufferAttribute(new Float32Array(buf.uv), 2)); geo.setAttribute("color", new THREE.BufferAttribute(new Float32Array(buf.col), 3)); geo.setIndex(buf.idx); const mesh = new THREE.Mesh(geo, mat); mesh.userData.chunk = true; scene.add(mesh); return mesh; }; cm.opaque = rebuild(cm.opaque, ob, opaqueMat); cm.trans = rebuild(cm.trans, tb, transMat); chunkRebuilds++; } // Dirty-chunk queue — edits remesh ONLY the touched chunk (+ border neighbor). const dirtyChunks = new Set(); function markDirty(x: number, z: number): void { const ccx = x >> 4, ccz = z >> 4; if (ccx < 0 || ccz < 0 || ccx >= CHUNKS || ccz >= CHUNKS) return; dirtyChunks.add(ccz * CHUNKS + ccx); if ((x & 15) === 0 && ccx > 0) dirtyChunks.add(ccz * CHUNKS + ccx - 1); if ((x & 15) === 15 && ccx < CHUNKS - 1) dirtyChunks.add(ccz * CHUNKS + ccx + 1); if ((z & 15) === 0 && ccz > 0) dirtyChunks.add((ccz - 1) * CHUNKS + ccx); if ((z & 15) === 15 && ccz < CHUNKS - 1) dirtyChunks.add((ccz + 1) * CHUNKS + ccx); } let blockCount = 0; // non-air blocks in the world (HUD readout) // Edit-path setter: updates data, counters, dirty queue, and the sparse save // diff (edits vs the baseChunks snapshot). function setBlock(x: number, y: number, z: number, t: number): boolean { if (y < 0 || y >= HEIGHT || x < 0 || z < 0 || x >= WORLD || z >= WORLD) return false; const prev = getBlock(x, y, z); if (prev === t) return false; chunks[(z >> 4) * CHUNKS + (x >> 4)][vidx(x & 15, y, z & 15)] = t; if (prev === B.AIR && t !== B.AIR) blockCount++; else if (prev !== B.AIR && t === B.AIR) blockCount--; // Record the diff vs the seed world (the save payload). if (baseChunks.length) { const base = baseChunks[(z >> 4) * CHUNKS + (x >> 4)][vidx(x & 15, y, z & 15)]; const li = lidx(x, y, z); if (t === base) edits.delete(li); else edits.set(li, t); if (!applyingSave) markSaveDirty(); } markDirty(x, z); return true; } // ═══ PLAYER (physics + first-person controller) ═════════════════════ const player = { pos: new THREE.Vector3(WORLD / 2 + 0.5, 20, WORLD / 2 + 0.5), // feet position (spawn fixed in MAIN) vel: new THREE.Vector3(0, 0, 0), yaw: -0.7, pitch: -0.12, onGround: false, }; const HALF_W = PLAYER_W / 2; function playerCollidesAt(px: number, py: number, pz: number): boolean { const x0 = Math.floor(px - HALF_W), x1 = Math.floor(px + HALF_W - 1e-7); const y0 = Math.floor(py), y1 = Math.floor(py + PLAYER_H - 1e-7); const z0 = Math.floor(pz - HALF_W), z1 = Math.floor(pz + HALF_W - 1e-7); for (let y = y0; y <= y1; y++) for (let z = z0; z <= z1; z++) for (let x = x0; x <= x1; x++) if (IS_SOLID(getBlock(x, y, z))) return true; return false; } // Per-axis move + clamp-to-boundary resolution (swept per axis, stable at low fps). function moveAxis(axis: 0 | 1 | 2, amount: number): boolean { if (amount === 0) return false; const p = player.pos; const cur = axis === 0 ? p.x : axis === 1 ? p.y : p.z; let next = cur + amount; const set = (v: number) => { if (axis === 0) p.x = v; else if (axis === 1) p.y = v; else p.z = v; }; set(next); if (!playerCollidesAt(p.x, p.y, p.z)) return false; // Clamp flush against the obstruction. const EPS = 1e-4; if (axis === 1) { next = amount < 0 ? Math.floor(p.y) + 1 : Math.floor(p.y + PLAYER_H) - PLAYER_H - EPS; } else { const half = HALF_W; const c = axis === 0 ? p.x : p.z; next = amount > 0 ? Math.floor(c + half) - half - EPS : Math.floor(c - half) + 1 + half + EPS; } set(next); if (playerCollidesAt(p.x, p.y, p.z)) set(cur); // degenerate case: fully revert return true; } function updatePlayer(dt: number): void { // Wish direction: keyboard + touch joystick analog (both flow through Input). let f = (Input.down("KeyW") ? 1 : 0) - (Input.down("KeyS") ? 1 : 0) + Input.analog.f; let r = (Input.down("KeyD") ? 1 : 0) - (Input.down("KeyA") ? 1 : 0) + Input.analog.r; const sinY = Math.sin(player.yaw), cosY = Math.cos(player.yaw); let dx = -sinY * f + cosY * r; let dz = -cosY * f - sinY * r; const len = Math.hypot(dx, dz); if (len > 0) { const mag = Math.min(1, len); // partial joystick deflection = slower const speed = MOVE_SPEED * (Input.run ? RUN_MULT : 1) * mag; // full deflection = auto-run dx = (dx / len) * speed; dz = (dz / len) * speed; } if (Input.down("Space") && player.onGround) { player.vel.y = JUMP_VEL; player.onGround = false; } player.vel.y = Math.max(-40, player.vel.y - GRAVITY * dt); moveAxis(0, dx * dt); moveAxis(2, dz * dt); const hitY = moveAxis(1, player.vel.y * dt); if (hitY) { if (player.vel.y < 0) player.onGround = true; player.vel.y = 0; } else if (player.vel.y !== 0) { player.onGround = false; } // Clamp to world bounds (bounded island — no walking off the array). player.pos.x = Math.max(HALF_W, Math.min(WORLD - HALF_W, player.pos.x)); player.pos.z = Math.max(HALF_W, Math.min(WORLD - HALF_W, player.pos.z)); if (player.pos.y < -8) { spawnPlayer(); } // safety net camera.position.set(player.pos.x, player.pos.y + EYE, player.pos.z); camera.rotation.y = player.yaw; camera.rotation.x = player.pitch; } function spawnPlayer(): void { const sx = Math.floor(WORLD / 2), sz = Math.floor(WORLD / 2); const h = terrainHeight(sx, sz); player.pos.set(sx + 0.5, h + 1.01, sz + 0.5); player.vel.set(0, 0, 0); } // ═══ INPUT (thin abstraction — keyboard/mouse + touch write the same state) ═ const Input = { keys: Object.create(null) as Record, locked: false, analog: { f: 0, r: 0 }, // virtual-joystick contribution (forward, right), each -1..1 run: false, // full joystick deflection = auto-run down(code: string): boolean { return !!this.keys[code]; }, press(code: string): void { this.keys[code] = true; }, release(code: string): void { this.keys[code] = false; }, addLook(dx: number, dy: number): void { player.yaw -= dx * 0.0023; player.pitch = Math.max(-1.55, Math.min(1.55, player.pitch - dy * 0.0023)); }, }; const onKeyDown = (e: KeyboardEvent) => { ensureAudio(); Input.press(e.code); if (e.code === "Space") e.preventDefault(); // Quick block select. Digit1..Digit9,Digit0 (0 = slot 10). const m = /^Digit(\d)$/.exec(e.code); if (m) { const n = m[1] === "0" ? 10 : parseInt(m[1], 10); if (n >= 1 && n <= 10) setSelected(n); } }; const onKeyUp = (e: KeyboardEvent) => Input.release(e.code); window.addEventListener("keydown", onKeyDown); window.addEventListener("keyup", onKeyUp); const onMouseMove = (e: MouseEvent) => { if (Input.locked) Input.addLook(e.movementX, e.movementY); }; document.addEventListener("mousemove", onMouseMove); const onLockChange = () => { Input.locked = document.pointerLockElement === renderer.domElement; updateHint(); }; document.addEventListener("pointerlockchange", onLockChange); const onCanvasClick = () => { ensureAudio(); if (!Input.locked && !touchUIActive) { try { renderer.domElement.requestPointerLock(); } catch { /* headless */ } } }; renderer.domElement.addEventListener("click", onCanvasClick); const onMouseDown = (e: MouseEvent) => { ensureAudio(); if (!Input.locked) return; if (e.button === 0) breakTargeted(); else if (e.button === 2) placeTargeted(); }; renderer.domElement.addEventListener("mousedown", onMouseDown); const onCtx = (e: Event) => e.preventDefault(); renderer.domElement.addEventListener("contextmenu", onCtx); // Mouse wheel cycles the hotbar selection. const onWheel = (e: WheelEvent) => { if (e.deltaY === 0) return; const dir = e.deltaY > 0 ? 1 : -1; let next = selected + dir; if (next > 10) next = 1; if (next < 1) next = 10; setSelected(next); }; window.addEventListener("wheel", onWheel, { passive: true }); // ═══ INTERACTION (voxel raycast + highlight + break/place) ══════════ let selected: number = B.BRICK; // placement type (hotbar/wheel/digits drive this) function setSelected(t: number, silent = false): void { if (t >= 1 && t <= 10) { const changed = t !== selected; selected = t; updateHud(); updateHotbar(); if (changed && !silent) sfxTick(); } } interface RayHit { x: number; y: number; z: number; nx: number; ny: number; nz: number } // Amanatides-Woo voxel DDA — never touches Three.js meshes. function raycastVoxel(ox: number, oy: number, oz: number, dx: number, dy: number, dz: number, maxDist: number): RayHit | null { let x = Math.floor(ox), y = Math.floor(oy), z = Math.floor(oz); const stepX = dx > 0 ? 1 : -1, stepY = dy > 0 ? 1 : -1, stepZ = dz > 0 ? 1 : -1; const tDX = dx !== 0 ? Math.abs(1 / dx) : Infinity; const tDY = dy !== 0 ? Math.abs(1 / dy) : Infinity; const tDZ = dz !== 0 ? Math.abs(1 / dz) : Infinity; let tMX = dx !== 0 ? (dx > 0 ? (x + 1 - ox) : (ox - x)) * tDX : Infinity; let tMY = dy !== 0 ? (dy > 0 ? (y + 1 - oy) : (oy - y)) * tDY : Infinity; let tMZ = dz !== 0 ? (dz > 0 ? (z + 1 - oz) : (oz - z)) * tDZ : Infinity; let nx = 0, ny = 0, nz = 0, t = 0; for (let i = 0; i < 128; i++) { if (IS_SOLID(getBlock(x, y, z))) return { x, y, z, nx, ny, nz }; if (tMX <= tMY && tMX <= tMZ) { t = tMX; tMX += tDX; x += stepX; nx = -stepX; ny = 0; nz = 0; } else if (tMY <= tMZ) { t = tMY; tMY += tDY; y += stepY; nx = 0; ny = -stepY; nz = 0; } else { t = tMZ; tMZ += tDZ; z += stepZ; nx = 0; ny = 0; nz = -stepZ; } if (t > maxDist) return null; } return null; } // Direction from player yaw/pitch (NOT camera.getWorldDirection — the camera // object updates one frame later, which would make the debug hook stale). const _fwd = new THREE.Vector3(); function lookDir(): THREE.Vector3 { const cp = Math.cos(player.pitch); return _fwd.set(-Math.sin(player.yaw) * cp, Math.sin(player.pitch), -Math.cos(player.yaw) * cp); } function currentTarget(): RayHit | null { const d = lookDir(); return raycastVoxel(player.pos.x, player.pos.y + EYE, player.pos.z, d.x, d.y, d.z, REACH); } // Tap-to-target (touch): a screen tap stores a world-space ray; PLACE/BREAK // buttons act through it while fresh, then fall back to the crosshair. const TAP_TARGET_TTL_MS = 3500; let tapRay: { ox: number; oy: number; oz: number; dx: number; dy: number; dz: number; t: number } | null = null; const _tapVec = new THREE.Vector3(); function setTapTarget(clientX: number, clientY: number): void { const nx = (clientX / window.innerWidth) * 2 - 1; const ny = -(clientY / window.innerHeight) * 2 + 1; camera.updateMatrixWorld(); _tapVec.set(nx, ny, 0.5).unproject(camera).sub(camera.position).normalize(); tapRay = { ox: camera.position.x, oy: camera.position.y, oz: camera.position.z, dx: _tapVec.x, dy: _tapVec.y, dz: _tapVec.z, t: performance.now() }; } function tapTargetFresh(): boolean { return !!tapRay && performance.now() - tapRay.t < TAP_TARGET_TTL_MS; } // Target for the touch action buttons: fresh tap ray first, else crosshair. function actionTarget(): RayHit | null { if (tapTargetFresh()) { const r = tapRay!; return raycastVoxel(r.ox, r.oy, r.oz, r.dx, r.dy, r.dz, REACH + 2); } return currentTarget(); } let broken = 0, placed = 0; function doBreak(hit: RayHit | null): boolean { if (!hit) return false; const prev = getBlock(hit.x, hit.y, hit.z); if (setBlock(hit.x, hit.y, hit.z, B.AIR)) { broken++; spawnBurst(hit.x + 0.5, hit.y + 0.5, hit.z + 0.5, prev, 14); sfxBreak(prev); (window as any).MCPityMusic?.sfx?.("hit"); // completeness: break cue via the audio bus updateHud(); return true; } return false; } function doPlace(hit: RayHit | null): boolean { if (!hit) return false; const px = hit.x + hit.nx, py = hit.y + hit.ny, pz = hit.z + hit.nz; if (py < 0 || py >= HEIGHT || px < 0 || pz < 0 || px >= WORLD || pz >= WORLD) return false; const cur = getBlock(px, py, pz); if (cur !== B.AIR && cur !== B.WATER) return false; // only fill air/water if (IS_SOLID(selected)) { // reject if it would trap the player const p = player.pos; const ix = px < p.x + HALF_W && px + 1 > p.x - HALF_W; const iy = py < p.y + PLAYER_H && py + 1 > p.y; const iz = pz < p.z + HALF_W && pz + 1 > p.z - HALF_W; if (ix && iy && iz) return false; } if (setBlock(px, py, pz, selected)) { placed++; spawnBurst(px + 0.5, py + 0.5, pz + 0.5, selected, 8); sfxPlace(selected); (window as any).MCPityMusic?.sfx?.("click"); // completeness: place cue via the audio bus updateHud(); return true; } return false; } function breakTargeted(): boolean { return doBreak(currentTarget()); } function placeTargeted(): boolean { return doPlace(currentTarget()); } // Touch action buttons route through the tap-or-crosshair target; a tap ray is // single-shot (consumed by whichever action uses it). function touchBreak(): boolean { const ok = doBreak(actionTarget()); if (ok) tapRay = null; return ok; } function touchPlace(): boolean { const ok = doPlace(actionTarget()); if (ok) tapRay = null; return ok; } // Targeted-block highlight: slightly inflated wireframe box. const highlight = new THREE.LineSegments( new THREE.EdgesGeometry(new THREE.BoxGeometry(1.002, 1.002, 1.002)), new THREE.LineBasicMaterial({ color: 0x111111, transparent: true, opacity: 0.85 }), ); highlight.visible = false; scene.add(highlight); function updateHighlight(): void { // Touch users see the tap target while fresh; desktop always the crosshair. const hit = touchUIActive && tapTargetFresh() ? actionTarget() : currentTarget(); if (hit) { highlight.visible = true; highlight.position.set(hit.x + 0.5, hit.y + 0.5, hit.z + 0.5); } else { highlight.visible = false; } } // ═══ PARTICLES (pooled block-debris bursts — no allocation churn) ═══ const P_MAX = 240; // pool size (≈17 simultaneous bursts) const P_GRAVITY = 16; const pMesh = new THREE.InstancedMesh( new THREE.BoxGeometry(0.14, 0.14, 0.14), new THREE.MeshBasicMaterial(), // instance colors carry the block palette P_MAX, ); pMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); pMesh.frustumCulled = false; scene.add(pMesh); const pPos = new Float32Array(P_MAX * 3); const pVel = new Float32Array(P_MAX * 3); const pLife = new Float32Array(P_MAX); // seconds remaining; <=0 = dead const pMaxLife = new Float32Array(P_MAX); const pSize = new Float32Array(P_MAX); let pCursor = 0; // ring allocator — oldest particle is recycled let pAliveCount = 0; const _pMat4 = new THREE.Matrix4(); const _pQuat = new THREE.Quaternion(); const _pScale = new THREE.Vector3(); const _pPosV = new THREE.Vector3(); const _pColor = new THREE.Color(); // Zero out every instance at boot so the pool starts invisible. { _pMat4.makeScale(0, 0, 0); for (let i = 0; i < P_MAX; i++) pMesh.setMatrixAt(i, _pMat4); pMesh.instanceMatrix.needsUpdate = true; } function spawnBurst(x: number, y: number, z: number, blockType: number, count: number): void { const base = BLOCK_PALETTE[blockType] ?? 0xaaaaaa; for (let n = 0; n < count; n++) { const i = pCursor; pCursor = (pCursor + 1) % P_MAX; const i3 = i * 3; pPos[i3] = x + (Math.random() - 0.5) * 0.6; pPos[i3 + 1] = y + (Math.random() - 0.5) * 0.6; pPos[i3 + 2] = z + (Math.random() - 0.5) * 0.6; pVel[i3] = (Math.random() - 0.5) * 3.4; pVel[i3 + 1] = 1.6 + Math.random() * 3.2; // up-biased pVel[i3 + 2] = (Math.random() - 0.5) * 3.4; pMaxLife[i] = pLife[i] = 0.45 + Math.random() * 0.35; pSize[i] = 0.6 + Math.random() * 0.8; // Slight per-particle tint jitter around the block palette color. _pColor.setHex(base).offsetHSL(0, 0, (Math.random() - 0.5) * 0.12); pMesh.setColorAt(i, _pColor); } if (pMesh.instanceColor) pMesh.instanceColor.needsUpdate = true; } function updateParticles(dt: number): void { let alive = 0; let touched = false; for (let i = 0; i < P_MAX; i++) { if (pLife[i] <= 0) continue; touched = true; pLife[i] -= dt; const i3 = i * 3; if (pLife[i] <= 0) { _pMat4.makeScale(0, 0, 0); pMesh.setMatrixAt(i, _pMat4); continue; } alive++; pVel[i3 + 1] -= P_GRAVITY * dt; pPos[i3] += pVel[i3] * dt; pPos[i3 + 1] += pVel[i3 + 1] * dt; pPos[i3 + 2] += pVel[i3 + 2] * dt; if (pPos[i3 + 1] < 0.05 && pVel[i3 + 1] < 0) pVel[i3 + 1] *= -0.3; // soft floor bounce const s = pSize[i] * Math.max(0, pLife[i] / pMaxLife[i]); // shrink = fade _pPosV.set(pPos[i3], pPos[i3 + 1], pPos[i3 + 2]); _pScale.set(s, s, s); _pMat4.compose(_pPosV, _pQuat, _pScale); pMesh.setMatrixAt(i, _pMat4); } pAliveCount = alive; if (touched) pMesh.instanceMatrix.needsUpdate = true; } // ═══ AUDIO (WebAudio-synthesized SFX — no files, resumed on first gesture) ═ let audioCtx: AudioContext | null = null; let masterGain: GainNode | null = null; let noiseBuf: AudioBuffer | null = null; function ensureAudio(): void { try { if (!audioCtx) { const AC = (window as unknown as { AudioContext?: typeof AudioContext; webkitAudioContext?: typeof AudioContext }); const Ctor = AC.AudioContext || AC.webkitAudioContext; if (!Ctor) return; audioCtx = new Ctor(); masterGain = audioCtx.createGain(); masterGain.gain.value = 0.22; // keep volumes low masterGain.connect(audioCtx.destination); const len = Math.floor(audioCtx.sampleRate * 0.25); noiseBuf = audioCtx.createBuffer(1, len, audioCtx.sampleRate); const d = noiseBuf.getChannelData(0); for (let i = 0; i < len; i++) d[i] = Math.random() * 2 - 1; } if (audioCtx.state === "suspended") void audioCtx.resume(); // browsers require a user gesture } catch { /* audio unavailable — game runs silent */ } } type SfxCat = "stone" | "wood" | "glass" | "metal" | "soft"; function sfxCategory(t: number): SfxCat { if (t === B.PLANK) return "wood"; if (t === B.GLASS || t === B.NEON) return "glass"; if (t === B.STONE || t === B.BRICK) return "stone"; if (t === B.GOLD) return "metal"; return "soft"; // grass, dirt, leaves, water } // Soft thud/pop for placing — oscillator with a fast decay, pitch per category. function sfxPlace(t: number): void { if (!audioCtx || !masterGain || audioCtx.state !== "running") return; try { const cat = sfxCategory(t); const baseF: Record = { stone: 150, wood: 195, glass: 340, metal: 280, soft: 230 }; const f = baseF[cat] * (0.94 + Math.random() * 0.12); const t0 = audioCtx.currentTime; const osc = audioCtx.createOscillator(); osc.type = "triangle"; osc.frequency.setValueAtTime(f * 1.4, t0); osc.frequency.exponentialRampToValueAtTime(f, t0 + 0.06); const g = audioCtx.createGain(); g.gain.setValueAtTime(0.5, t0); g.gain.exponentialRampToValueAtTime(0.001, t0 + 0.09); osc.connect(g); g.connect(masterGain); osc.start(t0); osc.stop(t0 + 0.1); } catch { /* never crash on audio */ } } // Crunchier break — filtered noise burst, center frequency + rate per category. function sfxBreak(t: number): void { if (!audioCtx || !masterGain || !noiseBuf || audioCtx.state !== "running") return; try { const cat = sfxCategory(t); const centerF: Record = { stone: 700, wood: 1100, glass: 2600, metal: 1800, soft: 900 }; const t0 = audioCtx.currentTime; const src = audioCtx.createBufferSource(); src.buffer = noiseBuf; src.playbackRate.value = 0.85 + Math.random() * 0.4; // slight pitch variation const bp = audioCtx.createBiquadFilter(); bp.type = "bandpass"; bp.frequency.value = centerF[cat] * (0.9 + Math.random() * 0.2); bp.Q.value = 0.8; const g = audioCtx.createGain(); g.gain.setValueAtTime(0.7, t0); g.gain.exponentialRampToValueAtTime(0.001, t0 + 0.16); src.connect(bp); bp.connect(g); g.connect(masterGain); src.start(t0); src.stop(t0 + 0.18); if (cat === "glass") { // glass adds a bright ping const ping = audioCtx.createOscillator(); ping.type = "sine"; ping.frequency.setValueAtTime(1500, t0); ping.frequency.exponentialRampToValueAtTime(900, t0 + 0.1); const pg = audioCtx.createGain(); pg.gain.setValueAtTime(0.25, t0); pg.gain.exponentialRampToValueAtTime(0.001, t0 + 0.12); ping.connect(pg); pg.connect(masterGain); ping.start(t0); ping.stop(t0 + 0.13); } } catch { /* never crash on audio */ } } // Subtle UI tick on hotbar select. function sfxTick(): void { if (!audioCtx || !masterGain || audioCtx.state !== "running") return; try { const t0 = audioCtx.currentTime; const osc = audioCtx.createOscillator(); osc.type = "square"; osc.frequency.value = 1500; const g = audioCtx.createGain(); g.gain.setValueAtTime(0.08, t0); g.gain.exponentialRampToValueAtTime(0.001, t0 + 0.03); osc.connect(g); g.connect(masterGain); osc.start(t0); osc.stop(t0 + 0.04); } catch { /* never crash on audio */ } } // ═══ SAVE / LOAD (sparse diff over the seed world → player-save edge fn) ═══ // Payload v1 (player_saves.data jsonb): // { v: 1, seed: 1337, world: [96, 32], t: , // player: { x, y, z, yaw, pitch, sel }, // edits: , n: } // Edit stream: voxel linear indices (lidx = (y*96 + z)*96 + x) sorted ascending, // delta-encoded as LEB128 varints, each followed by ONE type byte (the B enum). // A few thousand edits ≈ 3-4 bytes each → a few KB before base64. // // Transport — identical resolution order to the save.cloud-save-web pattern: // (a) window.__mcpityEnv = { url, anonKey, jwt } (shipped exports inject // url+anonKey; jwt from the host page or the anon-auth-shim pattern) // (b) window.__mcpitySupabase.auth.getSession() for the jwt // (c) neither (the sandboxed Studio preview iframe injects NO identity): // the PREVIEW SAVE BRIDGE (web-game-preview.tsx). Envelope contract: // game→studio { mcpity:true, dir:"game->studio", type:"player-save", // id, slot, data, base_version } // studio→game { mcpity:true, dir:"studio->game", type:"player-save-result", // id, slot, ok, version?, error? } // studio→game { mcpity:true, dir:"studio->game", type:"player-save-state", // slot, data, version } (pushed on every game load) // The parent persists through the signed-in user's session, scoped to // the workspace's current project id. We still stash every payload on // window.__bwSaveCache for instant in-session hot-reload restore. let saveDirty = false; let saveLoadedFrom: "none" | "cache" | "cloud" | "bridge" = "none"; let lastSaveOk: boolean | null = null; // null = never attempted let lastSaveTransport: "cloud" | "bridge" | "none" = "none"; let cloudVersion = 0; // player_saves.version for optimistic concurrency let autosaveTimer = 0; let restoredT = 0; // payload.t of the newest state already applied function markSaveDirty(): void { saveDirty = true; } // ── Encoding ── function encodeEdits(): { b64: string; n: number } { const keys = Array.from(edits.keys()).sort((a, b) => a - b); const bytes: number[] = []; let prev = 0; for (const k of keys) { let d = k - prev; prev = k; while (d >= 0x80) { bytes.push((d & 0x7f) | 0x80); d >>>= 7; } bytes.push(d); bytes.push(edits.get(k)! & 0xff); } const u8 = new Uint8Array(bytes); let bin = ""; for (let i = 0; i < u8.length; i += 0x8000) { bin += String.fromCharCode.apply(null, Array.from(u8.subarray(i, i + 0x8000))); } return { b64: btoa(bin), n: keys.length }; } function decodeEdits(b64: string): Array<[number, number]> { const bin = atob(b64); const u8 = new Uint8Array(bin.length); for (let i = 0; i < bin.length; i++) u8[i] = bin.charCodeAt(i); const out: Array<[number, number]> = []; let i = 0, acc = 0; while (i < u8.length) { let d = 0, shift = 0; for (;;) { const b = u8[i++]; d |= (b & 0x7f) << shift; if ((b & 0x80) === 0) break; shift += 7; } acc += d; const t = u8[i++]; out.push([acc, t]); } return out; } interface SavePayloadV1 { v: number; seed: number; world: [number, number]; t: number; player: { x: number; y: number; z: number; yaw: number; pitch: number; sel: number }; edits: string; n: number; } function buildSavePayload(): SavePayloadV1 { const e = encodeEdits(); return { v: SAVE_FORMAT_VERSION, seed: SEED, world: [WORLD, HEIGHT], t: Date.now(), player: { x: +player.pos.x.toFixed(3), y: +player.pos.y.toFixed(3), z: +player.pos.z.toFixed(3), yaw: +player.yaw.toFixed(4), pitch: +player.pitch.toFixed(4), sel: selected, }, edits: e.b64, n: e.n, }; } // Apply a save over the CURRENT world (which must be the freshly-generated // seed world OR any state — setBlock reconciles the diff either way). function applySave(p: unknown): boolean { try { const s = p as SavePayloadV1; if (!s || s.v !== SAVE_FORMAT_VERSION || s.seed !== SEED || typeof s.edits !== "string") return false; applyingSave = true; // Revert any current edit not present in the incoming save (cloud is authoritative). const incoming = decodeEdits(s.edits); const incomingSet = new Set(incoming.map((e2) => e2[0])); for (const li of Array.from(edits.keys())) { if (!incomingSet.has(li)) { const x = li % WORLD, z = Math.floor(li / WORLD) % WORLD, y = Math.floor(li / (WORLD * WORLD)); const base = baseChunks[(z >> 4) * CHUNKS + (x >> 4)][vidx(x & 15, y, z & 15)]; setBlock(x, y, z, base); } } for (const [li, t] of incoming) { const x = li % WORLD, z = Math.floor(li / WORLD) % WORLD, y = Math.floor(li / (WORLD * WORLD)); if (x < WORLD && y < HEIGHT && z < WORLD && t <= 10) setBlock(x, y, z, t); } const pl = s.player; if (pl && Number.isFinite(pl.x) && Number.isFinite(pl.y) && Number.isFinite(pl.z)) { player.pos.set( Math.max(HALF_W, Math.min(WORLD - HALF_W, pl.x)), Math.max(0, Math.min(HEIGHT + 4, pl.y)), Math.max(HALF_W, Math.min(WORLD - HALF_W, pl.z)), ); player.vel.set(0, 0, 0); if (Number.isFinite(pl.yaw)) player.yaw = pl.yaw; if (Number.isFinite(pl.pitch)) player.pitch = Math.max(-1.55, Math.min(1.55, pl.pitch)); if (pl.sel >= 1 && pl.sel <= 10) setSelected(pl.sel, true); } applyingSave = false; saveDirty = false; updateHud(); return true; } catch { applyingSave = false; return false; } } // ── Transport (mirrors save.cloud-save-web env resolution) ── interface McpEnv { url: string; anonKey: string; jwt?: string } function saveEnv(): McpEnv | null { const w = window as Window & { __mcpityEnv?: McpEnv }; return (w.__mcpityEnv && w.__mcpityEnv.url) ? w.__mcpityEnv : null; } async function saveJwt(): Promise { const env = saveEnv(); if (env?.jwt) return env.jwt; const w = window as Window & { __mcpitySupabase?: { auth?: { getSession?: () => Promise<{ data: { session: { access_token?: string } | null } }> } }; }; const sb = w.__mcpitySupabase; if (sb?.auth?.getSession) { try { return (await sb.auth.getSession())?.data?.session?.access_token ?? null; } catch { return null; } } return null; } function deviceId(): string { try { const key = "mcpity:device-id"; let v = localStorage.getItem(key); if (!v) { v = crypto.randomUUID(); localStorage.setItem(key, v); } return v; } catch { // Sandboxed iframe (opaque origin) — session-stable random id. const w = window as Window & { __bwDeviceId?: string }; if (!w.__bwDeviceId) w.__bwDeviceId = "sbx-" + Math.random().toString(36).slice(2, 10); return w.__bwDeviceId; } } async function saveEdge(action: string, extra: Record, keepalive = false): Promise | null> { const env = saveEnv(); if (!env) return null; const jwt = await saveJwt(); if (!jwt) return null; const url = env.url.replace(/\/+$/, "") + SAVE_ENDPOINT; const res = await fetch(url, { method: "POST", keepalive, headers: { "Content-Type": "application/json", "Authorization": "Bearer " + jwt, "apikey": env.anonKey }, body: JSON.stringify({ action, project_id: SAVE_PROJECT_ID, slot: SAVE_SLOT, ...extra }), }); if (!res.ok) throw new Error("player-save " + action + " failed: " + res.status); return await res.json() as Record; } // ── Preview save bridge (parent-persisted saves for the sandboxed preview) ── // Message types below are the EXACT contract web-game-preview.tsx implements. interface BridgeAck { ok: boolean; version?: number; error?: string } let bridgeSeq = 0; const bridgePending = new Map void>(); // Post one save request up to the parent. Fire-and-forget when awaitAck=false // (dispose/pagehide paths); otherwise resolves with the parent's ack, or null // after BRIDGE_ACK_TIMEOUT_MS when no bridge host is listening. function bridgeSend(payload: SavePayloadV1, awaitAck: boolean): Promise { bridgeSeq++; const id = "bw-" + Date.now().toString(36) + "-" + bridgeSeq; const msg = { mcpity: true as const, dir: "game->studio" as const, type: "player-save" as const, id, slot: SAVE_SLOT, data: payload, base_version: cloudVersion, }; if (!awaitAck) { try { window.parent.postMessage(msg, "*"); } catch { /* no parent */ } return Promise.resolve(null); } return new Promise((resolve) => { const timer = setTimeout(() => { bridgePending.delete(id); resolve(null); }, BRIDGE_ACK_TIMEOUT_MS); bridgePending.set(id, (r) => { clearTimeout(timer); resolve(r); }); try { window.parent.postMessage(msg, "*"); } catch { clearTimeout(timer); bridgePending.delete(id); resolve(null); } }); } // Apply a parent-pushed save state. Stale pushes (older payload.t than what // we already restored — e.g. the parent's boot cache after a hot-reload with // newer in-session edits) only adopt the version counter. function applyBridgeState(data: unknown, version: number): void { if (typeof version === "number") cloudVersion = Math.max(cloudVersion, version); if (!data) return; const t = (data as SavePayloadV1)?.t ?? 0; if (t < restoredT) return; if (applySave(data)) { restoredT = t; saveLoadedFrom = "bridge"; updateSaveButton("Loaded ✓"); } } const onBridgeMessage = (ev: MessageEvent) => { const d = ev.data as { mcpity?: unknown; dir?: unknown; type?: unknown; id?: unknown; slot?: number; ok?: unknown; version?: number; error?: string; data?: unknown } | null; if (!d || d.mcpity !== true || d.dir !== "studio->game") return; if (d.type === "player-save-result" && typeof d.id === "string") { const cb = bridgePending.get(d.id); if (cb) { bridgePending.delete(d.id); cb({ ok: d.ok === true, version: d.version, error: d.error }); } return; } if (d.type === "player-save-state" && (d.slot ?? 0) === SAVE_SLOT) { applyBridgeState(d.data, typeof d.version === "number" ? d.version : 0); } }; window.addEventListener("message", onBridgeMessage); // Save now. Never throws; a failed save leaves saveDirty=true so the next // autosave interval retries. async function saveNow(keepalive = false): Promise { const payload = buildSavePayload(); // In-session restore cache — survives Studio preview hot-reloads regardless of transport. (window as Window & { __bwSaveCache?: SavePayloadV1 }).__bwSaveCache = payload; restoredT = Math.max(restoredT, payload.t); // our own state is the newest we know const env = saveEnv(); if (env) { try { const r = await saveEdge("write", { data: payload, device_id: deviceId(), base_version: cloudVersion }, keepalive); const saved = r?.saved as { version?: number } | undefined; if (saved && typeof saved.version === "number") cloudVersion = saved.version; lastSaveTransport = "cloud"; lastSaveOk = true; saveDirty = false; return true; } catch (e) { console.warn("[BlockWorld] cloud save failed (will retry):", e); lastSaveTransport = "cloud"; lastSaveOk = false; return false; // saveDirty stays true → autosave retries } } // No identity in this host (the sandboxed Studio preview): persist through // the preview save bridge — the parent writes to player_saves with its // authenticated session and acks. No ack = no bridge host (plain page): // stay dirty so the next interval retries; the window cache still gives // in-session restore either way. const ack = await bridgeSend(payload, !keepalive); lastSaveTransport = "bridge"; if (keepalive) return true; // fire-and-forget flush — parent persists if present if (ack && ack.ok) { if (typeof ack.version === "number") cloudVersion = ack.version; lastSaveOk = true; saveDirty = false; return true; } lastSaveOk = false; return false; // saveDirty stays true → autosave retries (e.g. rate-limited) } // Boot restore. Sync path (window cache) runs before the initial mesh build; // async cloud read applies afterwards through the dirty queue (authoritative). function bootRestoreFromCache(): boolean { const c = (window as Window & { __bwSaveCache?: unknown }).__bwSaveCache; if (c && applySave(c)) { saveLoadedFrom = "cache"; restoredT = (c as SavePayloadV1).t ?? 0; // guard against stale bridge/cloud pushes return true; } return false; } async function bootRestoreFromCloud(): Promise { try { const r = await saveEdge("read", {}); if (!r) return false; if (r.exists && r.data) { if (typeof r.version === "number") cloudVersion = r.version; if (applySave(r.data)) { saveLoadedFrom = "cloud"; restoredT = (r.data as SavePayloadV1).t ?? restoredT; updateSaveButton("Loaded ✓"); return true; } } return false; } catch (e) { console.warn("[BlockWorld] cloud load failed (starting from seed world):", e); return false; } } // Flush-on-hide: keepalive fetch mirrors the pattern's beacon semantics. const onVisChange = () => { if (document.visibilityState === "hidden" && saveDirty) void saveNow(true); }; const onPageHide = () => { if (saveDirty) void saveNow(true); }; document.addEventListener("visibilitychange", onVisChange); window.addEventListener("pagehide", onPageHide); // ═══ HUD (crosshair + readout + HOTBAR + save button) ═══════════════ const hud = document.createElement("div"); hud.style.cssText = "position:fixed;inset:0;pointer-events:none;font-family:monospace;color:#fff;z-index:5;user-select:none;-webkit-user-select:none"; hud.innerHTML = '

' + '

' + "

" + '

' + '' + '

' + '

'; document.body.appendChild(hud); const statsEl = hud.querySelector("#bw-stats") as HTMLElement; const hintEl = hud.querySelector("#bw-hint") as HTMLElement; const hotbarEl = hud.querySelector("#bw-hotbar") as HTMLElement; const hotbarLabelEl = hud.querySelector("#bw-hotbar-label") as HTMLElement; const saveBtnEl = hud.querySelector("#bw-save-btn") as HTMLButtonElement; // ── Hotbar: 10 slots with canvas-rendered swatches of each block texture ── const hotbarSlots: HTMLElement[] = []; let labelFadeTimer: ReturnType | null = null; function buildHotbar(): void { for (let t = 1; t <= 10; t++) { const slot = document.createElement("div"); slot.dataset.type = String(t); slot.style.cssText = "position:relative;border:2px solid rgba(255,255,255,.35);border-radius:6px;cursor:pointer;" + "display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);box-sizing:border-box"; const cv = document.createElement("canvas"); cv.width = 32; cv.height = 32; cv.style.cssText = "width:100%;height:100%;border-radius:4px;image-rendering:pixelated;display:block"; const g = cv.getContext("2d")!; g.imageSmoothingEnabled = false; // Swatch = the block's side tile from the SAME atlas the world uses. const tile = BLOCK_TILES[t][1]; const tcx = (tile % ATLAS_COLS) * TILE, tcy = Math.floor(tile / ATLAS_COLS) * TILE; if (IS_TRANSPARENT(t)) { g.fillStyle = "#3a4a5a"; g.fillRect(0, 0, 32, 32); } // backdrop so glass/water read g.drawImage(atlasCanvas, tcx, tcy, TILE, TILE, 0, 0, 32, 32); slot.appendChild(cv); const num = document.createElement("span"); num.textContent = String(t % 10); num.style.cssText = "position:absolute;left:3px;top:1px;font-size:9px;opacity:.8;text-shadow:0 1px 2px #000;pointer-events:none"; slot.appendChild(num); // pointerdown works for both mouse click and touch tap. slot.addEventListener("pointerdown", (e) => { e.preventDefault(); e.stopPropagation(); ensureAudio(); setSelected(t); }); hotbarEl.appendChild(slot); hotbarSlots.push(slot); } layoutHotbar(); updateHotbar(); } // Responsive slot sizing — hotbar shrinks on small screens so it never // overlaps the touch buttons. function layoutHotbar(): void { const size = Math.max(30, Math.min(48, Math.floor((window.innerWidth - 30) / 10) - 4)); for (const s of hotbarSlots) { s.style.width = size + "px"; s.style.height = size + "px"; } } function updateHotbar(): void { for (const s of hotbarSlots) { const t = parseInt(s.dataset.type!, 10); const sel = t === selected; s.style.borderColor = sel ? "#ffd75e" : "rgba(255,255,255,.35)"; s.style.transform = sel ? "translateY(-4px)" : "none"; s.style.boxShadow = sel ? "0 0 8px rgba(255,215,94,.7)" : "none"; } hotbarLabelEl.textContent = BLOCK_NAMES[selected]; hotbarLabelEl.style.opacity = "1"; if (labelFadeTimer) clearTimeout(labelFadeTimer); labelFadeTimer = setTimeout(() => { hotbarLabelEl.style.opacity = "0"; }, 1400); } // ── Save button ── let saveBtnTimer: ReturnType | null = null; function updateSaveButton(text: string, sticky = false): void { saveBtnEl.textContent = text; if (saveBtnTimer) clearTimeout(saveBtnTimer); if (!sticky) saveBtnTimer = setTimeout(() => { saveBtnEl.textContent = "Save"; }, 1800); } const onSaveClick = async (e: Event) => { e.preventDefault(); ensureAudio(); updateSaveButton("Saving…", true); const ok = await saveNow(); updateSaveButton(ok ? "Saved ✓" : "Save failed, retrying"); autosaveTimer = 0; }; saveBtnEl.addEventListener("click", onSaveClick); let hudFps = 0; function updateHud(): void { statsEl.innerHTML = "FPS " + hudFps.toFixed(0) + " · blocks " + blockCount + "
placed " + placed + " · broken " + broken + " · hand: " + BLOCK_NAMES[selected] + ""; } let hintFadeTimer: ReturnType | null = null; function updateHint(): void { if (touchUIActive) { // Above the action buttons, and fades out — touch UI is self-explanatory. hintEl.style.bottom = "240px"; hintEl.style.opacity = "1"; hintEl.style.transition = "opacity .6s"; hintEl.innerHTML = "left stick move · drag look · tap to target · BREAK / PLACE buttons"; if (hintFadeTimer) clearTimeout(hintFadeTimer); hintFadeTimer = setTimeout(() => { hintEl.style.opacity = "0"; }, 6000); return; } hintEl.innerHTML = Input.locked ? "" : "CLICK TO PLAY
WASD move · Space jump · mouse look · left-click break · right-click place · 1-0 / wheel / click hotbar"; } // ═══ TOUCH CONTROLS (virtual joystick + look-drag + action buttons) ═ let touchUIActive = false; let touchRoot: HTMLElement | null = null; let joyBase: HTMLElement | null = null; let joyKnob: HTMLElement | null = null; let joyZone: HTMLElement | null = null; let joyTouchId: number | null = null; let joyOX = 0, joyOY = 0; let lookTouchId: number | null = null; let lookLastX = 0, lookLastY = 0, lookStartT = 0, lookMoved = 0, lookStartX = 0, lookStartY = 0; const JOY_RADIUS = 52; const hasTouch = () => (navigator.maxTouchPoints ?? 0) > 0 || "ontouchstart" in window; function buildTouchUI(): void { if (touchUIActive) return; touchUIActive = true; touchRoot = document.createElement("div"); touchRoot.id = "bw-touch"; touchRoot.style.cssText = "position:fixed;inset:0;pointer-events:none;z-index:6;user-select:none;-webkit-user-select:none;font-family:monospace"; // Joystick zone: left-bottom quadrant, dynamic-origin stick. joyZone = document.createElement("div"); joyZone.id = "bw-joyzone"; joyZone.style.cssText = "position:absolute;left:0;bottom:70px;width:46%;height:46%;pointer-events:auto;touch-action:none"; joyBase = document.createElement("div"); joyBase.style.cssText = "position:fixed;width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);display:none;pointer-events:none"; joyKnob = document.createElement("div"); joyKnob.style.cssText = "position:fixed;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(255,255,255,.45);display:none;pointer-events:none"; touchRoot.appendChild(joyZone); touchRoot.appendChild(joyBase); touchRoot.appendChild(joyKnob); // Action buttons — ≥48px targets, semi-transparent, right side above the hotbar. const mkBtn = (id: string, label: string, right: number, bottom: number, size: number) => { const b = document.createElement("div"); b.id = id; b.textContent = label; b.style.cssText = `position:absolute;right:${right}px;bottom:${bottom}px;width:${size}px;height:${size}px;` + "border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;" + "display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;" + "pointer-events:auto;touch-action:none;text-shadow:0 1px 3px #000"; touchRoot!.appendChild(b); return b; }; const jumpBtn = mkBtn("bw-btn-jump", "JUMP", 14, 84, 64); const breakBtn = mkBtn("bw-btn-break", "BREAK", 90, 96, 56); const placeBtn = mkBtn("bw-btn-place", "PLACE", 44, 168, 56); const flash = (b: HTMLElement) => { b.style.background = "rgba(255,255,255,.35)"; setTimeout(() => { b.style.background = "rgba(0,0,0,.35)"; }, 120); }; // Buttons use touchstart (multi-touch safe alongside stick/look) + pointerdown // fallback for stylus/mouse-hybrid devices without double-firing. const bindBtn = (b: HTMLElement, down: () => void, up?: () => void) => { let activeTouch: number | null = null; b.addEventListener("touchstart", (e) => { e.preventDefault(); e.stopPropagation(); ensureAudio(); if (activeTouch === null) { activeTouch = e.changedTouches[0].identifier; flash(b); down(); } }, { passive: false }); const end = (e: TouchEvent) => { for (const t of Array.from(e.changedTouches)) { if (t.identifier === activeTouch) { activeTouch = null; up?.(); } } }; b.addEventListener("touchend", end); b.addEventListener("touchcancel", end); b.addEventListener("pointerdown", (e) => { if (e.pointerType === "touch") return; // touch handled above e.preventDefault(); ensureAudio(); flash(b); down(); }); b.addEventListener("pointerup", (e) => { if (e.pointerType !== "touch") up?.(); }); }; bindBtn(jumpBtn, () => Input.press("Space"), () => Input.release("Space")); bindBtn(breakBtn, () => { touchBreak(); }); bindBtn(placeBtn, () => { touchPlace(); }); // ── Virtual joystick (dynamic origin inside the left-bottom zone) ── joyZone.addEventListener("touchstart", (e) => { e.preventDefault(); ensureAudio(); if (joyTouchId !== null) return; const t = e.changedTouches[0]; joyTouchId = t.identifier; joyOX = t.clientX; joyOY = t.clientY; joyBase!.style.display = "block"; joyKnob!.style.display = "block"; joyBase!.style.left = joyOX + "px"; joyBase!.style.top = joyOY + "px"; joyKnob!.style.left = joyOX + "px"; joyKnob!.style.top = joyOY + "px"; }, { passive: false }); joyZone.addEventListener("touchmove", (e) => { e.preventDefault(); for (const t of Array.from(e.changedTouches)) { if (t.identifier !== joyTouchId) continue; let dx = t.clientX - joyOX, dy = t.clientY - joyOY; const len = Math.hypot(dx, dy); if (len > JOY_RADIUS) { dx = (dx / len) * JOY_RADIUS; dy = (dy / len) * JOY_RADIUS; } joyKnob!.style.left = (joyOX + dx) + "px"; joyKnob!.style.top = (joyOY + dy) + "px"; const mag = Math.min(1, len / JOY_RADIUS); // forward = -dy, right = dx, both already clamped to the JOY_RADIUS circle. Input.analog.f = -dy / JOY_RADIUS; Input.analog.r = dx / JOY_RADIUS; Input.run = mag > 0.93; // full deflection = auto-run } }, { passive: false }); const joyEnd = (e: TouchEvent) => { for (const t of Array.from(e.changedTouches)) { if (t.identifier !== joyTouchId) continue; joyTouchId = null; Input.analog.f = 0; Input.analog.r = 0; Input.run = false; joyBase!.style.display = "none"; joyKnob!.style.display = "none"; } }; joyZone.addEventListener("touchend", joyEnd); joyZone.addEventListener("touchcancel", joyEnd); document.body.appendChild(touchRoot); updateHint(); } // Look-drag + tap-to-target on the canvas (touches the zone divs/buttons // didn't claim reach the canvas directly). const onCanvasTouchStart = (e: TouchEvent) => { if (!touchUIActive) buildTouchUI(); // lazy-build if capability detection missed ensureAudio(); for (const t of Array.from(e.changedTouches)) { if (lookTouchId === null) { lookTouchId = t.identifier; lookLastX = lookStartX = t.clientX; lookLastY = lookStartY = t.clientY; lookStartT = performance.now(); lookMoved = 0; } } }; const onCanvasTouchMove = (e: TouchEvent) => { e.preventDefault(); // stop scroll/pinch while looking for (const t of Array.from(e.changedTouches)) { if (t.identifier !== lookTouchId) continue; const dx = t.clientX - lookLastX, dy = t.clientY - lookLastY; lookMoved += Math.abs(dx) + Math.abs(dy); Input.addLook(dx * 2.4, dy * 2.4); // touch look is ~2.4× mouse sensitivity lookLastX = t.clientX; lookLastY = t.clientY; } }; const onCanvasTouchEnd = (e: TouchEvent) => { for (const t of Array.from(e.changedTouches)) { if (t.identifier !== lookTouchId) continue; lookTouchId = null; // Quick, still touch = tap → target the block under the finger. if (performance.now() - lookStartT < 300 && lookMoved < 14) { setTapTarget(t.clientX, t.clientY); } } }; renderer.domElement.addEventListener("touchstart", onCanvasTouchStart, { passive: true }); renderer.domElement.addEventListener("touchmove", onCanvasTouchMove, { passive: false }); renderer.domElement.addEventListener("touchend", onCanvasTouchEnd); renderer.domElement.addEventListener("touchcancel", onCanvasTouchEnd); // ═══ DEBUG HOOK (playtest/harness API — window.__bw) ════════════════ (window as unknown as Record).__bw = { getBlock, setBlock, blockTypes: B, playerPos: () => ({ x: player.pos.x, y: player.pos.y, z: player.pos.z, onGround: player.onGround }), setPlayerPos: (x: number, y: number, z: number) => { player.pos.set(x, y, z); player.vel.set(0, 0, 0); }, setLook: (yaw: number, pitch: number) => { player.yaw = yaw; player.pitch = Math.max(-1.55, Math.min(1.55, pitch)); }, getLook: () => ({ yaw: player.yaw, pitch: player.pitch }), simulateKeys: (codes: string[], down: boolean) => { for (const c of codes) (down ? Input.press(c) : Input.release(c)); }, breakTargeted, placeTargeted, getTarget: currentTarget, setSelected, getSelected: () => selected, stats: () => ({ fps: hudFps, blockCount, placed, broken, chunkRebuilds, dirty: dirtyChunks.size, triangles: renderer.info.render.triangles, onGround: player.onGround, }), // Phase 2 — saveNow: () => saveNow(), getSavePayload: buildSavePayload, applySave, saveInfo: () => ({ dirty: saveDirty, editCount: edits.size, loadedFrom: saveLoadedFrom, lastSaveOk, lastSaveTransport, cloudVersion, envPresent: !!saveEnv(), }), particlesActive: () => { let n = 0; for (let i = 0; i < P_MAX; i++) if (pLife[i] > 0) n++; return n; }, audioInfo: () => ({ created: !!audioCtx, state: audioCtx ? audioCtx.state : "none" }), touchInfo: () => ({ active: touchUIActive, analog: { ...Input.analog }, run: Input.run, tapFresh: tapTargetFresh() }), }; // ═══ MAIN (boot + save restore + dirty queue + render loop) ═════════ generateWorld(); // Snapshot the pristine seed world — the save format is a diff vs this. for (const arr of chunks) baseChunks.push(new Uint8Array(arr)); { // initial census + full mesh build let c = 0; for (const arr of chunks) for (let i = 0; i < arr.length; i++) if (arr[i] !== B.AIR) c++; blockCount = c; } buildHotbar(); if (hasTouch()) buildTouchUI(); // Sync restore (hot-reload cache) BEFORE the initial mesh build — no double remesh. const restoredFromCache = bootRestoreFromCache(); for (let cz = 0; cz < CHUNKS; cz++) for (let cx = 0; cx < CHUNKS; cx++) buildChunkMesh(cx, cz); dirtyChunks.clear(); // cache-apply marked chunks dirty; the full build covered them if (!restoredFromCache) spawnPlayer(); updateHud(); updateHint(); // Async cloud restore (authoritative when it exists) — edits flow through the // dirty queue, player state is re-applied on arrival. void bootRestoreFromCloud(); let last = performance.now(); let fpsFrames = 0, fpsTime = 0, readySent = false, disposed = false; function frame(now: number): void { if (disposed) return; const dt = Math.min(0.05, (now - last) / 1000); last = now; // Remesh dirty chunks (a few per frame keeps edits <1 frame in practice). let budget = 4; for (const ci of dirtyChunks) { dirtyChunks.delete(ci); buildChunkMesh(ci % CHUNKS, Math.floor(ci / CHUNKS)); if (--budget <= 0) break; } updatePlayer(dt); updateHighlight(); updateParticles(dt); renderer.render(scene, camera); // Autosave: every 30s IF there are unsaved edits. Failed saves stay dirty // and retry on the next interval — never crash the game. autosaveTimer += dt; if (autosaveTimer >= AUTOSAVE_SECONDS) { autosaveTimer = 0; if (saveDirty) { void saveNow().then((ok) => { if (ok) updateSaveButton("Saved ✓"); }); } } // FPS: rolling 0.5s window. fpsFrames++; fpsTime += dt; if (fpsTime >= 0.5) { hudFps = fpsFrames / fpsTime; fpsFrames = 0; fpsTime = 0; updateHud(); } if (!readySent) { readySent = true; try { window.parent.postMessage({ type: "mcpity:web-engine:ready" }, "*"); } catch { /* no parent */ } } requestAnimationFrame(frame); } requestAnimationFrame(frame); // ═══ RESIZE + IFRAME HOT-RELOAD CLEANUP ═════════════════════════════ const onResize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); layoutHotbar(); }; window.addEventListener("resize", onResize); (window as unknown as Record).__mcpity_dispose = () => { disposed = true; // Flush unsaved edits before teardown: refresh the in-session cache and, // in bridge hosts, hand the parent a fire-and-forget save so a hot-reload // doesn't lose edits made since the last autosave. if (saveDirty && baseChunks.length) { try { const payload = buildSavePayload(); (window as Window & { __bwSaveCache?: SavePayloadV1 }).__bwSaveCache = payload; restoredT = Math.max(restoredT, payload.t); if (!saveEnv()) void bridgeSend(payload, false); } catch { /* never block dispose */ } } window.removeEventListener("message", onBridgeMessage); window.removeEventListener("keydown", onKeyDown); window.removeEventListener("keyup", onKeyUp); window.removeEventListener("resize", onResize); window.removeEventListener("wheel", onWheel); window.removeEventListener("pagehide", onPageHide); document.removeEventListener("mousemove", onMouseMove); document.removeEventListener("pointerlockchange", onLockChange); document.removeEventListener("visibilitychange", onVisChange); renderer.domElement.removeEventListener("click", onCanvasClick); renderer.domElement.removeEventListener("mousedown", onMouseDown); renderer.domElement.removeEventListener("contextmenu", onCtx); renderer.domElement.removeEventListener("touchstart", onCanvasTouchStart); renderer.domElement.removeEventListener("touchmove", onCanvasTouchMove); renderer.domElement.removeEventListener("touchend", onCanvasTouchEnd); renderer.domElement.removeEventListener("touchcancel", onCanvasTouchEnd); saveBtnEl.removeEventListener("click", onSaveClick); if (labelFadeTimer) clearTimeout(labelFadeTimer); if (saveBtnTimer) clearTimeout(saveBtnTimer); if (hintFadeTimer) clearTimeout(hintFadeTimer); for (const cm of chunkMeshes) { if (cm.opaque) { scene.remove(cm.opaque); cm.opaque.geometry.dispose(); } if (cm.trans) { scene.remove(cm.trans); cm.trans.geometry.dispose(); } } scene.remove(pMesh); pMesh.geometry.dispose(); (pMesh.material as THREE.Material).dispose(); atlas.dispose(); opaqueMat.dispose(); transMat.dispose(); renderer.dispose(); if (audioCtx) { try { void audioCtx.close(); } catch { /* already closed */ } audioCtx = null; } if (hud.parentNode) hud.parentNode.removeChild(hud); if (touchRoot && touchRoot.parentNode) touchRoot.parentNode.removeChild(touchRoot); }; // ═══ MCPITYPLATFORM (completeness retrofit: title menu, settings, music, ads) ═══════════ // ── BEGIN pattern:runtime.audio-bus-web ── (() => { // MCPityAudio - pattern: runtime.audio-bus-web. Shared mixer. interface _AudioBus { gain: GainNode; value: number; set(v: number): void; } interface _MCPityAudio { context: AudioContext; bus: { master: _AudioBus; music: _AudioBus; sfx: _AudioBus }; play(buffer: AudioBuffer, bus?: 'music' | 'sfx'): AudioBufferSourceNode; resume(): Promise; } // Reuse an existing instance if a prior pattern installed it. const _existingAudio = (window as Window & { MCPityAudio?: _MCPityAudio }).MCPityAudio; const _ctx: AudioContext = _existingAudio?.context ?? (() => { const AC = (window as Window & { AudioContext?: typeof AudioContext; webkitAudioContext?: typeof AudioContext }).AudioContext ?? (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext!; return new AC(); })(); function _mkBus(initial: number, parent: GainNode | AudioDestinationNode): _AudioBus { const gain = _ctx.createGain(); gain.gain.value = Math.max(0, Math.min(1, initial)); gain.connect(parent); return { gain, get value() { return gain.gain.value; }, set value(v: number) { gain.gain.setTargetAtTime(Math.max(0, Math.min(1, v)), _ctx.currentTime, 0.015); }, set(v: number) { this.value = v; }, }; } const _master = _existingAudio?.bus.master ?? _mkBus(0.85, _ctx.destination); const _music = _existingAudio?.bus.music ?? _mkBus(0.65, _master.gain); const _sfx = _existingAudio?.bus.sfx ?? _mkBus(0.9, _master.gain); // Resume on first gesture - required by autoplay policy. let _resumed = false; async function _resume(): Promise { if (_resumed) return; if (_ctx.state === 'suspended') { try { await _ctx.resume(); } catch { /* ignore */ } } _resumed = _ctx.state === 'running'; } const _gestureHandler = () => { void _resume(); }; ['pointerdown', 'keydown', 'touchstart'].forEach((ev) => { window.addEventListener(ev, _gestureHandler, { once: true, passive: true }); }); (window as Window & { MCPityAudio?: _MCPityAudio }).MCPityAudio = { context: _ctx, bus: { master: _master, music: _music, sfx: _sfx }, resume: _resume, play(buffer: AudioBuffer, bus: 'music' | 'sfx' = 'sfx'): AudioBufferSourceNode { const src = _ctx.createBufferSource(); src.buffer = buffer; src.connect(bus === 'music' ? _music.gain : _sfx.gain); src.start(); return src; }, }; })(); // ── END pattern:runtime.audio-bus-web ── // ── BEGIN pattern:runtime.background-music-web ── (() => { // MCPityMusic - pattern: runtime.background-music-web. Procedural music + SFX. interface _MusicBus { gain: GainNode; } interface _MusicMixer { context: AudioContext; bus?: { music?: _MusicBus; sfx?: _MusicBus }; resume?(): Promise; } const _MUSIC_OPTS = { bpm: 96, volume: 0.35, autostart: true, root: 196, }; // Reuse the shared audio bus (runtime.audio-bus-web) when a game installed // it, so the Settings music/sfx toggles + volume sliders control this too. const _mixer = (window as Window & { MCPityAudio?: _MusicMixer }).MCPityAudio; const _mctx: AudioContext = _mixer?.context ?? (() => { const AC = (window as Window & { AudioContext?: typeof AudioContext; webkitAudioContext?: typeof AudioContext }).AudioContext ?? (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext!; return new AC(); })(); // The node music connects INTO: the music bus if present, else destination. const _musicOut: AudioNode = _mixer?.bus?.music?.gain ?? _mctx.destination; const _sfxOut: AudioNode = _mixer?.bus?.sfx?.gain ?? _mctx.destination; let _musicGain: GainNode | null = null; let _voices: OscillatorNode[] = []; let _lfo: OscillatorNode | null = null; let _playing = false; let _enabled = true; // A calm four-chord bed (I - vi - IV - V) over the root, looping forever. const _CHORDS: number[][] = [ [0, 4, 7], // I (major triad, semitone offsets) [9, 12, 16], // vi [5, 9, 12], // IV [7, 11, 14], // V ]; function _hz(root: number, semi: number): number { return root * Math.pow(2, semi / 12); } let _chordIdx = 0; let _chordTimer: number | null = null; function _startMusic(): void { if (_playing || !_enabled) return; void _mixer?.resume?.(); if (_mctx.state === 'suspended') { void _mctx.resume(); } _playing = true; _musicGain = _mctx.createGain(); _musicGain.gain.value = Math.max(0, Math.min(1, _MUSIC_OPTS.volume)); _musicGain.connect(_musicOut); // Gentle tremolo so the bed breathes instead of sitting flat. _lfo = _mctx.createOscillator(); const lfoGain = _mctx.createGain(); _lfo.frequency.value = 0.15; lfoGain.gain.value = 0.08; _lfo.connect(lfoGain); lfoGain.connect(_musicGain.gain); _lfo.start(); const beatSec = 60 / Math.max(30, _MUSIC_OPTS.bpm); const barSec = beatSec * 4; const _voiceForChord = (chord: number[]) => { for (const v of _voices) { try { v.stop(); } catch { /* already stopped */ } } _voices = []; for (const semi of chord) { const osc = _mctx.createOscillator(); osc.type = 'triangle'; osc.frequency.value = _hz(_MUSIC_OPTS.root, semi); const vg = _mctx.createGain(); vg.gain.value = 0.33; osc.connect(vg); vg.connect(_musicGain!); osc.start(); _voices.push(osc); } }; _voiceForChord(_CHORDS[_chordIdx]); _chordTimer = window.setInterval(() => { if (!_playing) return; _chordIdx = (_chordIdx + 1) % _CHORDS.length; _voiceForChord(_CHORDS[_chordIdx]); }, Math.round(barSec * 1000)); } function _stopMusic(): void { if (!_playing) return; _playing = false; if (_chordTimer !== null) { clearInterval(_chordTimer); _chordTimer = null; } for (const v of _voices) { try { v.stop(); } catch { /* already stopped */ } } _voices = []; if (_lfo) { try { _lfo.stop(); } catch { /* already stopped */ } _lfo = null; } if (_musicGain) { try { _musicGain.disconnect(); } catch { /* ignore */ } _musicGain = null; } } // Basic one-shot SFX - short synthesised beeps, routed through the sfx bus. function _sfx(name: 'coin' | 'jump' | 'hit' | 'win' | 'click'): void { if (_mctx.state === 'suspended') { void _mctx.resume(); } const now = _mctx.currentTime; const osc = _mctx.createOscillator(); const g = _mctx.createGain(); osc.connect(g); g.connect(_sfxOut); let dur = 0.12; if (name === 'coin') { osc.type = 'triangle'; osc.frequency.setValueAtTime(660, now); osc.frequency.exponentialRampToValueAtTime(1320, now + 0.09); dur = 0.11; } else if (name === 'jump') { osc.type = 'sine'; osc.frequency.setValueAtTime(220, now); osc.frequency.exponentialRampToValueAtTime(520, now + 0.12); dur = 0.14; } else if (name === 'hit') { osc.type = 'square'; osc.frequency.setValueAtTime(160, now); osc.frequency.exponentialRampToValueAtTime(80, now + 0.16); dur = 0.18; } else if (name === 'win') { osc.type = 'triangle'; osc.frequency.setValueAtTime(523, now); osc.frequency.setValueAtTime(659, now + 0.1); osc.frequency.setValueAtTime(784, now + 0.2); dur = 0.34; } else { osc.type = 'sine'; osc.frequency.setValueAtTime(880, now); dur = 0.06; } g.gain.setValueAtTime(0.0001, now); g.gain.exponentialRampToValueAtTime(0.25, now + 0.01); g.gain.exponentialRampToValueAtTime(0.0001, now + dur); osc.start(now); osc.stop(now + dur + 0.02); } (window as Window & { MCPityMusic?: unknown }).MCPityMusic = { get playing() { return _playing; }, start() { _startMusic(); }, stop() { _stopMusic(); }, toggle() { if (_playing) { _stopMusic(); } else { _startMusic(); } return _playing; }, setEnabled(on: boolean) { _enabled = on; if (!on) { _stopMusic(); } else if (_MUSIC_OPTS.autostart) { _startMusic(); } }, sfx: _sfx, }; // Autoplay policy: arm on the first gesture, then start the bed once. if (_MUSIC_OPTS.autostart) { const _armMusic = () => { _startMusic(); }; ['pointerdown', 'keydown', 'touchstart'].forEach((ev) => { window.addEventListener(ev, _armMusic, { once: true, passive: true }); }); } })(); // ── END pattern:runtime.background-music-web ── // ── BEGIN pattern:settings.menu-web ── (() => { // MCPitySettings - pattern: settings.menu-web. interface _Settings { master: number; music: number; sfx: number; haptics: boolean; colorblind: 'none' | 'protanopia' | 'deuteranopia' | 'tritanopia'; reduceMotion: boolean; language: string; controls: Record; graphics: 'low' | 'medium' | 'high' | 'ultra'; } const _DEFAULTS: _Settings = { master: 0.85, music: 0.65, sfx: 0.9, haptics: true, colorblind: 'none', reduceMotion: false, language: 'en', controls: { jump: 'Space', left: 'ArrowLeft', right: 'ArrowRight', action: 'KeyE' }, graphics: 'high', }; const _OPTS = { projectId: "9f02ee6b-8dc3-408b-ae24-5b08637456ed", endpoint: "/functions/v1/player-settings", debounceMs: 1500, accent: "#06b6d4", title: "Settings", }; // Resolve i18n helper from Task 9 if present; otherwise identity. function _t(key: string, fallback: string): string { const i18n = (window as Window & { MCPityI18n?: { t?: (k: string, vars?: unknown) => string } }).MCPityI18n; if (i18n?.t) { const v = i18n.t(key); if (v && v !== key) return v; } return fallback; } let _state: _Settings = { ..._DEFAULTS }; let _dirty = false; let _debounceTimer: ReturnType | null = null; const _listeners: Array<(s: _Settings) => void> = []; interface _McpEnv { url: string; anonKey: string; jwt: string; } function _resolveEnv(): _McpEnv | null { return (window as Window & { __mcpityEnv?: _McpEnv }).__mcpityEnv ?? null; } const _IDB_DB = 'mcpity-settings'; function _idbOpen(): Promise { return new Promise((resolve, reject) => { const r = indexedDB.open(_IDB_DB, 1); r.onupgradeneeded = () => r.result.createObjectStore('kv'); r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); } function _idbGet(k: string): Promise { return _idbOpen().then((db) => new Promise((resolve, reject) => { const tx = db.transaction('kv', 'readonly'); const req = tx.objectStore('kv').get(k); req.onsuccess = () => resolve((req.result as T | undefined) ?? null); req.onerror = () => reject(req.error); })); } function _idbSet(k: string, v: unknown): Promise { return _idbOpen().then((db) => new Promise((resolve, reject) => { const tx = db.transaction('kv', 'readwrite'); tx.objectStore('kv').put(v, k); tx.oncomplete = () => resolve(); tx.onerror = () => reject(tx.error); })); } function _mcpDeviceId(): string { try { const k = 'mcpity:device-id'; let v = localStorage.getItem(k); if (!v) { v = (crypto && crypto.randomUUID) ? crypto.randomUUID() : Math.random().toString(36).slice(2); localStorage.setItem(k, v); } return v; } catch { return 'anon-device'; } } async function _edge(action: string, payload: Record): Promise { const env = _resolveEnv(); if (!env?.jwt) throw new Error('No auth - pair with save.anon-auth-shim-web'); const url = env.url.replace(/\/+$/, '') + _OPTS.endpoint; const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + env.jwt, 'apikey': env.anonKey, }, body: JSON.stringify({ action, project_id: _OPTS.projectId, ...payload }), }); if (!r.ok) throw new Error('settings ' + action + ' failed: ' + r.status); return r.json(); } async function _flushNow(): Promise { if (!_dirty) return; await _idbSet('cur', _state).catch(() => {}); try { await _edge('write', { settings: _state, device_id: _mcpDeviceId() }); _dirty = false; } catch (e) { console.warn('[MCPitySettings] sync failed; IDB still authoritative:', e); } } function _scheduleFlush() { _dirty = true; if (_debounceTimer) clearTimeout(_debounceTimer); _debounceTimer = setTimeout(() => { void _flushNow(); }, _OPTS.debounceMs); } // Apply settings to the runtime modules they target. function _applyAll() { const w = window as Window & { MCPityAudio?: { bus: { master: { set: (v: number) => void }; music: { set: (v: number) => void }; sfx: { set: (v: number) => void } } }; MCPityHaptics?: { enabled: boolean }; MCPityColorblind?: { set: (m: 'none' | 'protanopia' | 'deuteranopia' | 'tritanopia') => void }; MCPityI18n?: { setLocale?: (l: string) => Promise }; MCPityGraphics?: { set: (lvl: 'low' | 'medium' | 'high' | 'ultra') => void }; }; if (w.MCPityAudio) { w.MCPityAudio.bus.master.set(_state.master); w.MCPityAudio.bus.music.set(_state.music); w.MCPityAudio.bus.sfx.set(_state.sfx); } if (w.MCPityHaptics) w.MCPityHaptics.enabled = _state.haptics; if (w.MCPityColorblind) w.MCPityColorblind.set(_state.colorblind); if (w.MCPityI18n?.setLocale) void w.MCPityI18n.setLocale(_state.language); if (w.MCPityGraphics) w.MCPityGraphics.set(_state.graphics); // Reduce-motion + controls-remap have no canonical receiver - fire events so // game code can react. CSS-driven games can also gate transitions on: // document.documentElement.dataset.reduceMotion document.documentElement.dataset.reduceMotion = _state.reduceMotion ? 'true' : 'false'; window.dispatchEvent(new CustomEvent('mcpity:reduce-motion', { detail: { enabled: _state.reduceMotion } })); window.dispatchEvent(new CustomEvent('mcpity:controls-remap', { detail: { controls: _state.controls } })); for (const l of _listeners) { try { l(_state); } catch { /* ignore */ } } } // Initial load: cloud > IDB > defaults. (async () => { const local = await _idbGet<_Settings>('cur').catch(() => null); if (local) _state = { ..._DEFAULTS, ...local }; try { const r = await _edge('read', {}) as { exists: boolean; settings: _Settings | null }; if (r.exists && r.settings) { _state = { ..._DEFAULTS, ..._state, ...r.settings }; await _idbSet('cur', _state).catch(() => {}); } } catch { /* offline / no auth */ } _applyAll(); })(); // ─── Overlay UI ───────────────────────────────────────────────────── let _overlay: HTMLDivElement | null = null; function _renderOverlay() { if (_overlay) return; _overlay = document.createElement('div'); _overlay.id = 'mcpity-settings-overlay'; _overlay.style.cssText = 'position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#fff'; const card = document.createElement('div'); card.style.cssText = 'background:#0d1117;border:1px solid #ffffff15;border-radius:14px;padding:18px;width:min(94vw,460px);max-height:85vh;overflow:auto;box-shadow:0 24px 80px rgba(0,0,0,0.5)'; _overlay.appendChild(card); const header = document.createElement('div'); header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;margin-bottom:14px'; const title = document.createElement('div'); title.style.cssText = 'font-size:17px;font-weight:700'; title.textContent = _t('settings.title', _OPTS.title); const close = document.createElement('button'); close.textContent = '✕'; close.setAttribute('aria-label', 'Close settings'); close.style.cssText = 'background:transparent;color:#fff;border:0;font-size:18px;cursor:pointer;padding:6px 10px;border-radius:8px'; close.onmouseenter = () => { close.style.background = '#ffffff14'; }; close.onmouseleave = () => { close.style.background = 'transparent'; }; close.onclick = () => apiClose(); header.append(title, close); card.appendChild(header); function _mkSection(label: string): HTMLDivElement { const wrap = document.createElement('div'); wrap.style.cssText = 'margin:10px 0 14px'; const lab = document.createElement('div'); lab.textContent = label; lab.style.cssText = 'font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:#9ba1a8;margin-bottom:8px;font-weight:600'; wrap.appendChild(lab); return wrap; } function _mkSlider(label: string, key: 'master' | 'music' | 'sfx'): HTMLDivElement { const row = document.createElement('div'); row.style.cssText = 'display:flex;align-items:center;gap:10px;padding:6px 0'; const lbl = document.createElement('label'); lbl.textContent = label; lbl.style.cssText = 'min-width:96px;font-size:13px;color:#cfd6df'; const input = document.createElement('input'); input.type = 'range'; input.min = '0'; input.max = '1'; input.step = '0.01'; input.value = String(_state[key]); input.style.cssText = 'flex:1;accent-color:' + _OPTS.accent; const val = document.createElement('span'); val.style.cssText = 'min-width:42px;font-size:12px;color:#9ba1a8;text-align:right'; val.textContent = Math.round(_state[key] * 100) + '%'; input.oninput = () => { const v = parseFloat(input.value); _state[key] = v; val.textContent = Math.round(v * 100) + '%'; _scheduleFlush(); _applyAll(); }; row.append(lbl, input, val); return row; } function _mkToggle(label: string, key: 'haptics' | 'reduceMotion'): HTMLDivElement { const row = document.createElement('div'); row.style.cssText = 'display:flex;align-items:center;gap:10px;padding:6px 0'; const lbl = document.createElement('label'); lbl.textContent = label; lbl.style.cssText = 'flex:1;font-size:13px;color:#cfd6df'; const btn = document.createElement('button'); btn.type = 'button'; const paint = () => { const on = _state[key]; btn.textContent = on ? _t('settings.on', 'On') : _t('settings.off', 'Off'); btn.style.cssText = 'border:0;border-radius:99px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;background:' + (on ? _OPTS.accent : '#22272e') + ';color:' + (on ? '#0a0e17' : '#c9d1d9'); }; paint(); btn.onclick = () => { _state[key] = !_state[key]; paint(); _scheduleFlush(); _applyAll(); }; row.append(lbl, btn); return row; } function _mkPicker(label: string, key: K, opts: Array<{ value: string; label: string }>): HTMLDivElement { const row = document.createElement('div'); row.style.cssText = 'display:flex;align-items:center;gap:10px;padding:6px 0'; const lbl = document.createElement('label'); lbl.textContent = label; lbl.style.cssText = 'min-width:96px;font-size:13px;color:#cfd6df'; const sel = document.createElement('select'); sel.style.cssText = 'flex:1;background:#22272e;color:#fff;border:1px solid #ffffff10;border-radius:8px;padding:6px 10px;font-size:13px'; for (const o of opts) { const opt = document.createElement('option'); opt.value = o.value; opt.textContent = o.label; if (o.value === _state[key]) opt.selected = true; sel.appendChild(opt); } sel.onchange = () => { (_state[key] as string) = sel.value; _scheduleFlush(); _applyAll(); }; row.append(lbl, sel); return row; } const audioSec = _mkSection(_t('settings.audio', 'Audio')); audioSec.append( _mkSlider(_t('settings.master', 'Master'), 'master'), _mkSlider(_t('settings.music', 'Music'), 'music'), _mkSlider(_t('settings.sfx', 'SFX'), 'sfx'), ); card.appendChild(audioSec); // Graphics section appears only when MCPityGraphics runtime is loaded. // Without the runtime, picking a level wouldn't do anything - better to // hide the option than show a dead control. const _hasGfx = typeof (window as Window & { MCPityGraphics?: unknown }).MCPityGraphics !== 'undefined'; if (_hasGfx) { const gfxSec = _mkSection(_t('settings.graphics', 'Graphics')); gfxSec.append(_mkPicker(_t('settings.graphics.quality', 'Quality'), 'graphics', [ { value: 'low', label: _t('settings.graphics.low', 'Low') }, { value: 'medium', label: _t('settings.graphics.medium', 'Medium') }, { value: 'high', label: _t('settings.graphics.high', 'High') }, { value: 'ultra', label: _t('settings.graphics.ultra', 'Ultra') }, ])); card.appendChild(gfxSec); } const accSec = _mkSection(_t('settings.accessibility', 'Accessibility')); accSec.append( _mkPicker(_t('settings.colorblind', 'Colorblind'), 'colorblind', [ { value: 'none', label: _t('settings.cb.none', 'None') }, { value: 'protanopia', label: _t('settings.cb.prot', 'Protanopia') }, { value: 'deuteranopia', label: _t('settings.cb.deut', 'Deuteranopia') }, { value: 'tritanopia', label: _t('settings.cb.trit', 'Tritanopia') }, ]), _mkToggle(_t('settings.reduceMotion', 'Reduce motion'), 'reduceMotion'), _mkToggle(_t('settings.haptics', 'Haptics'), 'haptics'), ); card.appendChild(accSec); const langSec = _mkSection(_t('settings.language', 'Language')); langSec.append(_mkPicker(_t('settings.language', 'Language'), 'language', [ { value: 'en', label: 'English' }, { value: 'es', label: 'Español' }, { value: 'fr', label: 'Français' }, { value: 'de', label: 'Deutsch' }, { value: 'pt', label: 'Português' }, { value: 'ja', label: '日本語' }, { value: 'ko', label: '한국어' }, { value: 'zh', label: '中文' }, ])); card.appendChild(langSec); const ctrlSec = _mkSection(_t('settings.controls', 'Controls')); const ctrlHint = document.createElement('div'); ctrlHint.style.cssText = 'font-size:12px;color:#9ba1a8;margin-bottom:8px'; ctrlHint.textContent = _t('settings.controls.hint', 'Click a binding, then press the key you want.'); ctrlSec.appendChild(ctrlHint); for (const [action, key] of Object.entries(_state.controls)) { const row = document.createElement('div'); row.style.cssText = 'display:flex;align-items:center;gap:10px;padding:4px 0'; const lbl = document.createElement('label'); lbl.textContent = action; lbl.style.cssText = 'min-width:96px;font-size:13px;color:#cfd6df;text-transform:capitalize'; const btn = document.createElement('button'); btn.textContent = key; btn.style.cssText = 'flex:1;background:#22272e;color:#fff;border:1px solid #ffffff10;border-radius:8px;padding:6px 10px;font-size:13px;font-family:ui-monospace,monospace;cursor:pointer;text-align:left'; btn.onclick = () => { btn.textContent = _t('settings.controls.press', 'Press any key…'); const handler = (e: KeyboardEvent) => { e.preventDefault(); _state.controls[action] = e.code; btn.textContent = e.code; _scheduleFlush(); _applyAll(); window.removeEventListener('keydown', handler, true); }; window.addEventListener('keydown', handler, true); }; row.append(lbl, btn); ctrlSec.appendChild(row); } card.appendChild(ctrlSec); // Click backdrop to dismiss. _overlay.addEventListener('click', (ev) => { if (ev.target === _overlay) apiClose(); }); document.body.appendChild(_overlay); } function apiOpen() { _renderOverlay(); _overlay!.style.display = 'flex'; } function apiClose() { if (_overlay) _overlay.style.display = 'none'; // Always flush on close - don't make the user wait for the debounce. void _flushNow(); } // Flush on tab hide/close so leaving the menu open + closing the tab // doesn't lose the change. document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') void _flushNow(); }); window.addEventListener('beforeunload', () => { void _flushNow(); }); (window as Window & { MCPitySettings?: unknown }).MCPitySettings = { open: apiOpen, close: apiClose, get(key: keyof _Settings, fallback?: T): T | _Settings[keyof _Settings] | undefined { return (_state[key] as unknown as T) ?? fallback; }, set(key: K, value: _Settings[K]) { (_state[key] as _Settings[K]) = value; _scheduleFlush(); _applyAll(); }, all(): _Settings { return { ..._state }; }, on(_event: 'change', cb: (s: _Settings) => void) { _listeners.push(cb); }, // Capability check for the Accessibility Preflight in Studio's Ship // dashboard. Reflects which runtime modules are wired in the bundle. capabilities: { audio: typeof (window as Window & { MCPityAudio?: unknown }).MCPityAudio !== 'undefined', haptics: typeof (window as Window & { MCPityHaptics?: unknown }).MCPityHaptics !== 'undefined', colorblind: typeof (window as Window & { MCPityColorblind?: unknown }).MCPityColorblind !== 'undefined', pauseOnBlur: typeof (window as Window & { MCPityGameLoop?: unknown }).MCPityGameLoop !== 'undefined', i18n: typeof (window as Window & { MCPityI18n?: unknown }).MCPityI18n !== 'undefined', graphics: typeof (window as Window & { MCPityGraphics?: unknown }).MCPityGraphics !== 'undefined', }, }; })(); // ── END pattern:settings.menu-web ── // ── BEGIN pattern:launch.start-menu-web ── (() => { // MCPityStartMenu - pattern: launch.start-menu-web. const _MENU_OPTS = { accent: "#06b6d4", leaderboard: "high_score", autoOpen: false, }; function _t(key: string, fallback: string): string { const i18n = (window as Window & { MCPityI18n?: { t?: (k: string, f?: string) => string } }).MCPityI18n; return i18n?.t ? i18n.t(key, fallback) : fallback; } let _menuEl: HTMLDivElement | null = null; async function _hasSavedProgress(): Promise { const ms = (window as Window & { MCPitySave?: { ready?: Promise; all?: () => Record } }).MCPitySave; if (!ms?.all) return false; if (ms.ready) { try { await ms.ready; } catch { /* offline */ } } const doc = ms.all(); // Detect "real" progress: at least one non-platform key in the doc. const keys = Object.keys(doc).filter((k) => !k.startsWith('__')); return keys.length > 0; } function _mkButton(label: string, onClick: () => void, primary = false): HTMLButtonElement { const btn = document.createElement('button'); btn.textContent = label; btn.style.cssText = primary ? `background:${_MENU_OPTS.accent};color:#0a0e17;border:0;padding:14px 28px;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;margin:6px 0;min-width:220px;letter-spacing:0.3px;box-shadow:0 8px 24px rgba(6,182,212,0.3);transition:transform 120ms ease` : `background:transparent;color:#fff;border:1px solid #ffffff20;padding:10px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;margin:3px 0;min-width:220px;transition:background 120ms ease`; btn.addEventListener('mouseenter', () => { btn.style.transform = primary ? 'scale(1.03)' : ''; if (!primary) btn.style.background = '#ffffff10'; }); btn.addEventListener('mouseleave', () => { btn.style.transform = ''; if (!primary) btn.style.background = 'transparent'; }); btn.addEventListener('click', onClick); return btn; } async function _open() { if (_menuEl) return; _menuEl = document.createElement('div'); _menuEl.id = 'mcpity-start-menu'; _menuEl.style.cssText = 'position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center, rgba(13,17,23,0.92) 0%, rgba(0,0,0,0.96) 70%);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#fff'; const title = document.createElement('div'); title.textContent = _t('menu.title', 'Main Menu'); title.style.cssText = 'font-size:11px;text-transform:uppercase;letter-spacing:0.2em;color:#9ba1a8;margin-bottom:20px;font-weight:600'; _menuEl.appendChild(title); const hasProgress = await _hasSavedProgress(); if (hasProgress) { _menuEl.appendChild(_mkButton(_t('menu.continue', 'Continue'), () => { _close(); window.dispatchEvent(new CustomEvent('mcpity:game-continue')); }, true)); _menuEl.appendChild(_mkButton(_t('menu.new_game', 'New Game'), () => { _close(); window.dispatchEvent(new CustomEvent('mcpity:game-new')); })); } else { _menuEl.appendChild(_mkButton(_t('menu.play', 'Play'), () => { _close(); window.dispatchEvent(new CustomEvent('mcpity:game-new')); }, true)); } // Optional buttons - only show when the matching platform global is wired. const hasSettings = typeof (window as Window & { MCPitySettings?: unknown }).MCPitySettings !== 'undefined'; if (hasSettings) _menuEl.appendChild(_mkButton(_t('menu.settings', 'Settings'), () => { const s = (window as Window & { MCPitySettings?: { open?: () => void } }).MCPitySettings; s?.open?.(); })); const hasLeaderboard = typeof (window as Window & { MCPityLeaderboardUI?: unknown }).MCPityLeaderboardUI !== 'undefined'; if (hasLeaderboard) _menuEl.appendChild(_mkButton(_t('menu.leaderboard', 'Leaderboard'), () => { const lb = (window as Window & { MCPityLeaderboardUI?: { open?: (o: { leaderboard_id: string }) => void } }).MCPityLeaderboardUI; lb?.open?.({ leaderboard_id: _MENU_OPTS.leaderboard }); })); const hasCredits = typeof (window as Window & { MCPityCredits?: unknown }).MCPityCredits !== 'undefined'; if (hasCredits) _menuEl.appendChild(_mkButton(_t('menu.credits', 'Credits'), () => { const c = (window as Window & { MCPityCredits?: { show?: () => void } }).MCPityCredits; c?.show?.(); })); const hasLocale = typeof (window as Window & { MCPityLocalePicker?: unknown }).MCPityLocalePicker !== 'undefined'; if (hasLocale) _menuEl.appendChild(_mkButton(_t('menu.language', 'Language'), () => { const p = (window as Window & { MCPityLocalePicker?: { open?: () => void } }).MCPityLocalePicker; p?.open?.(); })); document.body.appendChild(_menuEl); } function _close() { if (_menuEl) { _menuEl.remove(); _menuEl = null; } } (window as Window & { MCPityStartMenu?: unknown }).MCPityStartMenu = { open: _open, close: _close }; // Auto-open after splash dismisses. if (_MENU_OPTS.autoOpen) { window.addEventListener('mcpity:splash-dismissed', () => { void _open(); }, { once: true }); // No splash? Open after DOMContentLoaded. setTimeout(() => { const splash = (window as Window & { MCPitySplash?: { dismissed: boolean } }).MCPitySplash; if (!splash || splash.dismissed) { void _open(); } }, 100); } })(); // ── END pattern:launch.start-menu-web ── // ── BEGIN pattern:monetization.rewarded-ad-web ── (() => { // MCPityAds - pattern: monetization.rewarded-ad-web. Unified rewarded surface. type _AdsHost = 'poki' | 'crazygames' | 'youtube' | 'adsense' | 'none'; interface _AdsRewardedOpts { /** Required - called on watched-to-completion. */ on_reward: () => void; /** Optional - called when ad was unavailable / skipped. */ on_fail?: (reason: string) => void; /** Tag emitted to analytics for funnel grouping. */ tag?: string; } function _adsDetectHost(): _AdsHost { const w = window as Window & { PokiSDK?: { rewardedBreak?: () => Promise }; CrazyGames?: { SDK?: { ad?: { requestAd?: (t: string) => Promise } } }; YouTubePlayables?: { requestRewardedAd?: (id: string) => Promise }; adsbygoogle?: unknown[]; }; if (w.PokiSDK?.rewardedBreak) return 'poki'; if (w.CrazyGames?.SDK?.ad?.requestAd) return 'crazygames'; if (w.YouTubePlayables?.requestRewardedAd) return 'youtube'; if (Array.isArray(w.adsbygoogle)) return 'adsense'; return 'none'; } const _ADS_HOST: _AdsHost = _adsDetectHost(); const _ADS_DEV_GRANT = true; // AdSense rewarded interstitials require a separate ad-unit configuration // in the AdSense dashboard. The fallback below opens a modal containing // the unit; when the user closes the modal after the minimum-watch // timer elapses (15s default per AdSense policy) we fire on_reward. async function _showAdSenseRewarded(): Promise { return new Promise((resolve) => { const overlay = document.createElement('div'); overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:99999;display:flex;align-items:center;justify-content:center;font-family:system-ui'; const card = document.createElement('div'); card.style.cssText = 'background:#0d1117;color:#fff;border-radius:12px;padding:18px;max-width:480px;width:92%;text-align:center'; const timer = document.createElement('div'); timer.style.cssText = 'font-size:13px;color:#9ba1a8;margin-bottom:10px'; const slot = document.createElement('ins'); slot.className = 'adsbygoogle'; slot.style.cssText = 'display:block;min-height:280px;background:#161b22;margin:0 auto'; slot.setAttribute('data-ad-client', "ca-pub-XXXXXXXXXXXXXXXX"); slot.setAttribute('data-ad-slot', "1234567890"); slot.setAttribute('data-ad-format', 'auto'); slot.setAttribute('data-full-width-responsive', 'true'); const closeBtn = document.createElement('button'); closeBtn.disabled = true; closeBtn.style.cssText = 'margin-top:12px;background:#22c55e;color:#000;border:0;border-radius:8px;padding:10px 18px;font-weight:600;cursor:not-allowed;opacity:.5'; const _adT = (k: string, f: string): string => { const i18n = (window as Window & { MCPityI18n?: { t?: (k: string, f?: string) => string } }).MCPityI18n; return i18n?.t ? i18n.t(k, f) : f; }; closeBtn.textContent = _adT('ads.rewarded.continue_countdown', 'Continue (15s)'); card.append(timer, slot, closeBtn); overlay.appendChild(card); document.body.appendChild(overlay); try { (window as Window & { adsbygoogle?: unknown[] }).adsbygoogle?.push({}); } catch { /* ad-block / no-ad */ } let secondsLeft = 15; const interval = setInterval(() => { secondsLeft -= 1; timer.textContent = _adT('ads.rewarded.unlocks_in', 'Reward unlocks in {seconds}s').replace('{seconds}', String(secondsLeft)); if (secondsLeft <= 0) { clearInterval(interval); closeBtn.disabled = false; closeBtn.style.cssText += 'cursor:pointer;opacity:1'; closeBtn.textContent = _adT('ads.rewarded.claim', 'Claim Reward'); } }, 1000); closeBtn.addEventListener('click', () => { if (secondsLeft > 0) return; document.body.removeChild(overlay); resolve(true); }); // Cap at 60s total. Past the cap, treat as cancelled. setTimeout(() => { if (document.body.contains(overlay)) { document.body.removeChild(overlay); clearInterval(interval); resolve(secondsLeft <= 0); } }, 60_000); }); } async function _vendorRewarded(): Promise { const w = window as Window & { PokiSDK?: { rewardedBreak?: () => Promise }; CrazyGames?: { SDK?: { ad?: { requestAd?: (t: string) => Promise } } }; YouTubePlayables?: { requestRewardedAd?: (id: string) => Promise }; }; switch (_ADS_HOST) { case 'poki': return await w.PokiSDK!.rewardedBreak!(); case 'crazygames': await w.CrazyGames!.SDK!.ad!.requestAd!('rewarded'); return true; case 'youtube': return await w.YouTubePlayables!.requestRewardedAd!('bonus'); case 'adsense': return await _showAdSenseRewarded(); case 'none': return _ADS_DEV_GRANT; } } // Public API (window as Window & { MCPityAds?: unknown }).MCPityAds = { host: _ADS_HOST, async showRewarded(opts: _AdsRewardedOpts): Promise { try { const watched = await _vendorRewarded(); if (watched) opts.on_reward(); else opts.on_fail?.('skipped_or_unavailable'); _adsEmitTelemetry('rewarded_completed', { host: _ADS_HOST, watched, tag: opts.tag }); return watched; } catch (err) { opts.on_fail?.((err as Error).message); _adsEmitTelemetry('rewarded_failed', { host: _ADS_HOST, reason: (err as Error).message, tag: opts.tag }); return false; } }, /** Capability check - returns true when a rewarded ad CAN be requested * in the current host. Game code uses this to hide / show the * rewarded-ad CTA. */ isRewardedAvailable(): boolean { return _ADS_HOST !== 'none' || _ADS_DEV_GRANT; }, }; // Optional analytics breadcrumb. Listens for a window.MCPityAnalytics // (Task 6a pattern) and emits an event when present; otherwise no-op. function _adsEmitTelemetry(name: string, props: Record) { const an = (window as Window & { MCPityAnalytics?: { track?: (n: string, p: Record) => void } }).MCPityAnalytics; an?.track?.(name, props); } })(); // ── END pattern:monetization.rewarded-ad-web ── // ── BEGIN mcpity:settings-gear ── (() => { const w = window as Window & { __mcpityGearBtn?: HTMLButtonElement }; if (w.__mcpityGearBtn || typeof document === "undefined") return; const gear = document.createElement("button"); gear.textContent = "⚙"; gear.setAttribute("aria-label", "Settings"); gear.style.cssText = "position:fixed;top:12px;right:12px;z-index:90000;width:38px;height:38px;border-radius:50%;" + "border:1px solid rgba(255,255,255,0.25);background:rgba(0,0,0,0.45);color:#fff;font-size:19px;" + "line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;" + "backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(0,0,0,0.4);"; gear.addEventListener("click", (e) => { e.stopPropagation(); (window as Window & { MCPitySettings?: { open?: () => void } }).MCPitySettings?.open?.(); }); const mount = () => { if (document.body) document.body.appendChild(gear); }; if (document.body) mount(); else window.addEventListener("DOMContentLoaded", mount, { once: true }); w.__mcpityGearBtn = gear; })(); // ── END mcpity:settings-gear ── // ── BEGIN mcpity:completeness-wiring ── // Wires the installed platform globals to this game. BlockWorld is a creative // sandbox with no scarcity economy, so the rewarded-ad pattern (MCPityAds) is // installed but not surfaced as a bonus button here (no reward to grant). (() => { const w = window as any; if (w.__mcpityWiredBlockworld || typeof document === "undefined") return; w.__mcpityWiredBlockworld = true; // Platform title menu "Play"/"Continue" ensures the music bed is on. const entry = () => { try { w.MCPityMusic?.start?.(); } catch { /* noop */ } }; window.addEventListener("mcpity:game-new", entry); window.addEventListener("mcpity:game-continue", entry); })(); // ── END mcpity:completeness-wiring ──