// Escape Room 3D — MCPity Web Engine game. First-person, single-file, Three.js. // The ONLY bare import is "three" (the /play bundler marks it external and // resolves it via an import map to esm.sh/three@0.168.0). Everything else lives // in this one self-contained file. No template literals (backticks) are used // anywhere so the exact bytes embed verbatim inside a String.raw constant. // // The game: you wake locked inside a study. Find the hidden key, unlock the // desk drawer, read the clue note, inspect the painting, deduce the 4-digit // code, punch it into the keypad by the door, and walk out. A timer counts up; // a win screen shows your escape time. // // Harness contract: // - mounts into #mcpity-root (fallback document.body); NEVER sets // root.style.position (the host stylesheet already positions it). // - posts a ready beacon on boot (try/catch). // - desktop: WASD move + pointer-lock mouse-look + reticle raycast (E / click // to interact). mobile: on-screen move stick + look pad + interact button. // // Optional harness shims (all guarded / optional-chained; absent means plain // single-player): // - window.MCPityAssets : slot -> GLB registry (§171 asset auto-wire). // - window.MCPityRooms : hosted-room relay for co-op solving (§60/§128). // - window.MCPityEntitlements : advisory Season Pass gating (§167). // // Degrades gracefully: WebAudio blocked or no relay means it stays a fully // playable solo escape room with procedural props. import * as THREE from "three"; // ═══════════════════════════════════════════════════════════════════════════ // ═══ ASSETS ═══ optional Meshy/GLB slot registry. Every prop has a procedural // fallback so the game is fully playable with ZERO assets wired. // ═══════════════════════════════════════════════════════════════════════════ var W = window as any; // getSlot(name) returns a THREE.Object3D (a fresh clone) or null. With no // manifest wired the registry returns null and each builder's procedural mesh // is used instead. Named slots the founder can later fill with Meshy GLB URLs: // desk, drawer, keypad, door, key, clue_note, chest, painting, bookshelf, // rug, lamp. function getSlot(name: string): THREE.Object3D | null { try { var reg = W && W.MCPityAssets; if (reg && typeof reg.getModel === "function") { var m = reg.getModel(name); return m || null; } } catch (_e) {} return null; } // ═══════════════════════════════════════════════════════════════════════════ // ═══ ROOMS ═══ inline MCPityRooms-compatible bridge. Relays via the parent // page's Supabase channel on /play/g?room=CODE; inert + single-device in the // solo demo. Same coop-event/coop-apply protocol the §60 relay speaks. // ═══════════════════════════════════════════════════════════════════════════ var MR = (function () { var msg: ((m: { from: string; data: any }) => void)[] = []; var pres: ((p: { count: number; me: string | null }) => void)[] = []; var stReq: ((from: string) => void)[] = []; var stGot: ((data: any) => void)[] = []; var api = { ready: false, me: null as string | null, count: 1, active: false, send: function (data: any) { emit({ __mr: 1, k: "msg", data: data }); }, onMessage: function (cb: (m: { from: string; data: any }) => void) { msg.push(cb); }, onPresence: function (cb: (p: { count: number; me: string | null }) => void) { pres.push(cb); }, requestState: function () { emit({ __mr: 1, k: "state-req" }); }, onStateRequest: function (cb: (from: string) => void) { stReq.push(cb); }, provideState: function (to: string, data: any) { emit({ __mr: 1, k: "state", to: to, data: data }); }, onState: function (cb: (data: any) => void) { stGot.push(cb); }, }; W.MCPityRooms = api; function emit(p: Record) { try { if (window.parent && window.parent !== window) { window.parent.postMessage({ mcpity: true, dir: "game->studio", type: "coop-event", payload: p }, "*"); } } catch (_e) {} } function fire(a: any[], x: any) { for (var i = 0; i < a.length; i++) { try { a[i](x); } catch (_e) {} } } window.addEventListener("message", function (ev: MessageEvent) { var d: any = ev && ev.data; if (!d || d.mcpity !== true || d.dir !== "studio->game" || d.type !== "coop-apply") return; var p: any = d.payload; if (!p || p.__mr !== 1) return; if (p.k === "presence") { api.me = p.me || api.me; api.count = typeof p.count === "number" ? p.count : api.count; if (api.me) { api.ready = true; api.active = true; } fire(pres, { count: api.count, me: api.me }); return; } if (p.k === "msg") { fire(msg, { from: p.from, data: p.data }); return; } if (p.k === "state-req") { fire(stReq, p.from); return; } if (p.k === "state") { if (!p.to || p.to === api.me) fire(stGot, p.data); return; } }); emit({ __mr: 1, k: "hello" }); return api; })(); // ═══════════════════════════════════════════════════════════════════════════ // ═══ COMMERCE ═══ inline MCPityEntitlements shim (§167). Advisory Season Pass // snapshot relayed from the authed parent over the SAME coop seam under the // __ent tag. Client entitlement is UX-only; the server holds the real gate. // ═══════════════════════════════════════════════════════════════════════════ var ENT = (function () { if (W.MCPityEntitlements) return W.MCPityEntitlements; var changeCbs: ((s: any) => void)[] = []; var state = { ready: false, season_pass: false, expires_at: null as string | null, cosmetics: [] as string[] }; var api = { get ready() { return state.ready; }, get season_pass() { return state.season_pass; }, get expires_at() { return state.expires_at; }, get cosmetics() { return state.cosmetics.slice(); }, has: function (sku: string) { return state.cosmetics.indexOf(sku) >= 0; }, snapshot: function () { return { season_pass: state.season_pass, cosmetics: state.cosmetics.slice(), expires_at: state.expires_at }; }, on: function (evt: string, cb: (s: any) => void) { if (evt === "change") changeCbs.push(cb); }, }; W.MCPityEntitlements = api; window.addEventListener("message", function (ev: MessageEvent) { var d: any = ev && ev.data; if (!d || d.mcpity !== true || d.dir !== "studio->game" || d.type !== "coop-apply") return; var p: any = d.payload; if (!p || p.__ent !== 1) return; state.season_pass = !!p.season_pass; state.expires_at = (typeof p.expires_at === "string") ? p.expires_at : null; state.cosmetics = Array.isArray(p.cosmetics) ? p.cosmetics.slice() : []; state.ready = true; for (var i = 0; i < changeCbs.length; i++) { try { changeCbs[i](api.snapshot()); } catch (_e) {} } }); try { if (window.parent && window.parent !== window) { window.parent.postMessage({ mcpity: true, dir: "game->studio", type: "coop-event", payload: { __ent: 1, k: "hello" } }, "*"); } } catch (_e) {} return api; })(); // ═══════════════════════════════════════════════════════════════════════════ // ═══ STATE ═══ shared solve-state (synced over the room) + local play state. // ═══════════════════════════════════════════════════════════════════════════ var CODE = "0426"; // note reveals "04", painting reveals "26" var S = { rugLifted: false, // the rug has been pulled aside keyTaken: false, // the brass key is in the inventory drawerOpen: false, // the desk drawer is unlocked + open noteRead: false, // the clue note has been read paintingRead: false,// the painting's digits have been seen codeOK: false, // the keypad accepted the code doorOpen: false, // the exit door has swung open }; var won = false; // local: this player walked out (each escapes on their own) var timeMs = 0; // local play timer // A merge-friendly snapshot of the SHARED solve-state (a solved lock stays // solved for everyone; a taken key becomes unavailable for everyone). function snapshot() { return { rugLifted: S.rugLifted, keyTaken: S.keyTaken, drawerOpen: S.drawerOpen, noteRead: S.noteRead, paintingRead: S.paintingRead, codeOK: S.codeOK, doorOpen: S.doorOpen, }; } // Merge a peer snapshot: OR every solve flag so progress only ever moves forward. function applyState(s: any) { if (!s || typeof s !== "object") return; S.rugLifted = S.rugLifted || !!s.rugLifted; S.keyTaken = S.keyTaken || !!s.keyTaken; S.drawerOpen = S.drawerOpen || !!s.drawerOpen; S.noteRead = S.noteRead || !!s.noteRead; S.paintingRead = S.paintingRead || !!s.paintingRead; S.codeOK = S.codeOK || !!s.codeOK; S.doorOpen = S.doorOpen || !!s.doorOpen; reflectState(); updateHud(); } // ═══════════════════════════════════════════════════════════════════════════ // ═══ BOOT ═══ renderer / scene / camera. Sizes to #mcpity-root and fills it. // ═══════════════════════════════════════════════════════════════════════════ var root: HTMLElement = document.getElementById("mcpity-root") || document.body; var HIGH_QUALITY = !/Edg\//.test(navigator.userAgent); // Edge -> simpler pipeline var renderer = new THREE.WebGLRenderer({ antialias: HIGH_QUALITY, alpha: false, powerPreference: "high-performance" }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); if (HIGH_QUALITY) { renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; } renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.05; renderer.outputColorSpace = THREE.SRGBColorSpace; var canvas = renderer.domElement; canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.style.touchAction = "none"; root.appendChild(canvas); var scene = new THREE.Scene(); scene.background = new THREE.Color(0x0b0e14); scene.fog = new THREE.Fog(0x0b0e14, 9, 22); var camera = new THREE.PerspectiveCamera(72, 1, 0.05, 100); camera.rotation.order = "YXZ"; var EYE = 1.62; var player = { x: 0, z: 3.6 }; // start near the door, facing the room var yaw = Math.PI; // look toward -Z (into the room) var pitch = 0; camera.position.set(player.x, EYE, player.z); function sizeRenderer() { var w = root.clientWidth || window.innerWidth; var h = root.clientHeight || window.innerHeight; renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix(); } sizeRenderer(); if (typeof ResizeObserver !== "undefined") { try { new ResizeObserver(sizeRenderer).observe(root); } catch (_e) {} } window.addEventListener("resize", sizeRenderer); // ═══════════════════════════════════════════════════════════════════════════ // ═══ ROOM ═══ procedural study + props. Each prop uses its Meshy slot when // wired, else a procedural build. Interactables register a raycast id. // ═══════════════════════════════════════════════════════════════════════════ function mat(color: number, rough: number, metal: number): THREE.Material { if (HIGH_QUALITY) return new THREE.MeshStandardMaterial({ color: color, roughness: rough, metalness: metal }); return new THREE.MeshLambertMaterial({ color: color }); } function box(w: number, h: number, d: number, m: THREE.Material): THREE.Mesh { var mesh = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), m); if (HIGH_QUALITY) { mesh.castShadow = true; mesh.receiveShadow = true; } return mesh; } var HALF = 5; // room is 10 x 10 var WALL_H = 3.2; var interactMeshes: THREE.Mesh[] = []; function addInteract(obj: THREE.Object3D, iid: string) { obj.userData.iid = iid; obj.traverse(function (o: any) { if (o.isMesh) interactMeshes.push(o); }); } function findIid(o: any): string | null { while (o) { if (o.userData && o.userData.iid) return o.userData.iid as string; o = o.parent; } return null; } function findRoot(o: any): THREE.Object3D | null { while (o) { if (o.userData && o.userData.iid) return o as THREE.Object3D; o = o.parent; } return null; } // ── lighting ── var ambient = new THREE.AmbientLight(0x6b7280, 0.55); scene.add(ambient); var lamp = new THREE.PointLight(0xffcf99, 1.4, 16, 1.6); lamp.position.set(-0.4, 2.4, -3.4); if (HIGH_QUALITY) { lamp.castShadow = true; lamp.shadow.mapSize.set(1024, 1024); lamp.shadow.bias = -0.0008; } scene.add(lamp); var fill = new THREE.DirectionalLight(0x8899bb, 0.35); fill.position.set(3, 5, 4); scene.add(fill); // ── shell: floor, ceiling, 4 walls (south wall has a door gap) ── var floor = new THREE.Mesh(new THREE.PlaneGeometry(HALF * 2, HALF * 2), mat(0x2a2320, 0.95, 0.02)); floor.rotation.x = -Math.PI / 2; if (HIGH_QUALITY) floor.receiveShadow = true; scene.add(floor); var ceil = new THREE.Mesh(new THREE.PlaneGeometry(HALF * 2, HALF * 2), mat(0x171a22, 1, 0)); ceil.rotation.x = Math.PI / 2; ceil.position.y = WALL_H; scene.add(ceil); var wallMat = mat(0x39414f, 0.92, 0.02); function wall(w: number, d: number, x: number, z: number) { var m = box(w, WALL_H, d, wallMat); m.position.set(x, WALL_H / 2, z); scene.add(m); } var T = 0.4; // wall thickness wall(HALF * 2, T, 0, -HALF + T / 2); // north wall(T, HALF * 2, -HALF + T / 2, 0); // west wall(T, HALF * 2, HALF - T / 2, 0); // east var GAP = 1.3; // door opening half-width span wall(HALF - GAP / 2, T, -(HALF + GAP / 2) / 2, HALF - T / 2); // south-left wall(HALF - GAP / 2, T, (HALF + GAP / 2) / 2, HALF - T / 2); // south-right // lintel above the door opening var lintel = box(GAP + 0.2, WALL_H - 2.2, T, wallMat); lintel.position.set(0, WALL_H - (WALL_H - 2.2) / 2, HALF - T / 2); scene.add(lintel); // baseboard trim for a little polish var trimMat = mat(0x20252e, 0.8, 0.05); var trim = box(HALF * 2, 0.12, HALF * 2, trimMat); // unused visual guard (kept subtle) trim.visible = false; scene.add(trim); // ── collision solids (XZ AABBs). The door solid is dropped once open. ── var solids: { minx: number; maxx: number; minz: number; maxz: number; door?: boolean }[] = [ { minx: -HALF, maxx: HALF, minz: -HALF, maxz: -HALF + T }, // north { minx: -HALF, maxx: -HALF + T, minz: -HALF, maxz: HALF }, // west { minx: HALF - T, maxx: HALF, minz: -HALF, maxz: HALF }, // east { minx: -HALF, maxx: -GAP / 2, minz: HALF - T, maxz: HALF }, // south-left { minx: GAP / 2, maxx: HALF, minz: HALF - T, maxz: HALF }, // south-right { minx: -GAP / 2, maxx: GAP / 2, minz: HALF - T, maxz: HALF, door: true }, // the door ]; var PLAYER_R = 0.34; function collides(x: number, z: number): boolean { for (var i = 0; i < solids.length; i++) { var s = solids[i]; if (s.door && S.doorOpen) continue; if (x > s.minx - PLAYER_R && x < s.maxx + PLAYER_R && z > s.minz - PLAYER_R && z < s.maxz + PLAYER_R) return true; } return false; } function addSolid(cx: number, cz: number, sx: number, sz: number) { solids.push({ minx: cx - sx / 2, maxx: cx + sx / 2, minz: cz - sz / 2, maxz: cz + sz / 2 }); } // helper: place a slot GLB (fit to a target height) or fall back to a builder function placeSlot(slot: string, tx: number, ty: number, tz: number, targetH: number, builder: () => THREE.Object3D): THREE.Object3D { var m = getSlot(slot); if (m) { var bbox = new THREE.Box3().setFromObject(m); var size = new THREE.Vector3(); bbox.getSize(size); var s = size.y > 0.001 ? targetH / size.y : 1; m.scale.setScalar(s); m.position.set(tx, ty, tz); m.traverse(function (o: any) { if (o.isMesh && HIGH_QUALITY) { o.castShadow = true; o.receiveShadow = true; } }); scene.add(m); return m; } var g = builder(); g.position.set(tx, ty, tz); scene.add(g); return g; } // ── DESK (north wall) with a DRAWER that slides open ── function buildDesk(): THREE.Object3D { var g = new THREE.Group(); var woodM = mat(0x5b3a24, 0.7, 0.05); var top = box(2.0, 0.1, 0.9, woodM); top.position.y = 0.86; g.add(top); var legPos = [[-0.9, -0.38], [0.9, -0.38], [-0.9, 0.38], [0.9, 0.38]]; for (var i = 0; i < legPos.length; i++) { var leg = box(0.12, 0.82, 0.12, woodM); leg.position.set(legPos[i][0], 0.41, legPos[i][1]); g.add(leg); } var body = box(1.9, 0.5, 0.85, woodM); body.position.set(0, 0.55, -0.02); g.add(body); return g; } var desk = placeSlot("desk", 0, 0, -4.35, 0.9, buildDesk); addSolid(0, -4.35, 2.0, 0.9); // DRAWER — a separate group we slide on the +Z axis when unlocked. var drawerGroup = new THREE.Group(); var drawerFront = box(0.7, 0.34, 0.06, mat(0x6b4526, 0.7, 0.05)); drawerFront.position.set(0, 0, 0.44); var drawerHandle = box(0.24, 0.05, 0.05, mat(0xcaa14a, 0.4, 0.7)); drawerHandle.position.set(0, 0, 0.49); var drawerBox = box(0.66, 0.3, 0.7, mat(0x3a2818, 0.9, 0.02)); drawerBox.position.set(0, 0, 0.12); drawerGroup.add(drawerBox, drawerFront, drawerHandle); drawerGroup.position.set(0, 0.55, -4.0); scene.add(drawerGroup); addInteract(drawerGroup, "drawer"); var drawerClosedZ = -4.0; var drawerOpenZ = -3.55; // CLUE NOTE — sits inside the drawer, only reachable/legible once open. var note = new THREE.Group(); var paper = box(0.26, 0.02, 0.34, mat(0xe9e2cf, 0.95, 0)); var inkA = box(0.18, 0.021, 0.03, mat(0x2a2a2a, 1, 0)); inkA.position.set(0, 0.001, -0.08); var inkB = box(0.14, 0.021, 0.03, mat(0x2a2a2a, 1, 0)); inkB.position.set(0, 0.001, 0.0); note.add(paper, inkA, inkB); note.position.set(0, 0.42, -3.98); scene.add(note); addInteract(note, "note"); // ── KEY hidden under the RUG ── var rug = new THREE.Group(); var rugCloth = new THREE.Mesh(new THREE.CircleGeometry(1.15, 32), mat(0x7a2b2b, 0.95, 0)); rugCloth.rotation.x = -Math.PI / 2; rugCloth.position.y = 0.011; if (HIGH_QUALITY) rugCloth.receiveShadow = true; var rugTrim = new THREE.Mesh(new THREE.RingGeometry(1.0, 1.12, 32), mat(0xc9a24a, 0.9, 0.05)); rugTrim.rotation.x = -Math.PI / 2; rugTrim.position.y = 0.012; rug.add(rugCloth, rugTrim); rug.position.set(0, 0, 0); scene.add(rug); addInteract(rug, "rug"); var rugHomeX = 0, rugAsideX = 1.7; var keyObj = new THREE.Group(); var keyMat = mat(0xd8b24a, 0.35, 0.85); var keyBow = new THREE.Mesh(new THREE.TorusGeometry(0.06, 0.02, 8, 16), keyMat); keyBow.rotation.x = Math.PI / 2; var keyShaft = box(0.03, 0.02, 0.2, keyMat); keyShaft.position.z = 0.13; var keyBit = box(0.03, 0.06, 0.03, keyMat); keyBit.position.set(0, -0.02, 0.21); keyObj.add(keyBow, keyShaft, keyBit); keyObj.position.set(0, 0.06, 0); keyObj.visible = false; scene.add(keyObj); addInteract(keyObj, "key"); // ── PAINTING (west wall) ── function buildPainting(): THREE.Object3D { var g = new THREE.Group(); var frame = box(0.08, 1.1, 0.9, mat(0x2f2416, 0.6, 0.1)); var canvasArt = box(0.02, 0.92, 0.72, mat(0x36506a, 0.9, 0)); canvasArt.position.x = 0.03; var stripe = box(0.021, 0.5, 0.16, mat(0xb9c6d6, 0.9, 0)); stripe.position.set(0.031, 0.1, -0.15); g.add(frame, canvasArt, stripe); g.rotation.y = Math.PI / 2; return g; } var painting = placeSlot("painting", -4.78, 1.65, 0.8, 1.1, buildPainting); addInteract(painting, "painting"); // ── KEYPAD (south wall, beside the door) ── function buildKeypad(): THREE.Object3D { var g = new THREE.Group(); var panel = box(0.5, 0.7, 0.08, mat(0x14171d, 0.5, 0.4)); var screen = box(0.36, 0.14, 0.02, mat(0x1f6f4a, 0.4, 0.1)); screen.position.set(0, 0.22, 0.05); if (HIGH_QUALITY) (screen.material as THREE.MeshStandardMaterial).emissive = new THREE.Color(0x0e5a3a); g.add(panel, screen); for (var r = 0; r < 3; r++) { for (var c = 0; c < 3; c++) { var b = box(0.09, 0.09, 0.02, mat(0x2b3038, 0.6, 0.2)); b.position.set((c - 1) * 0.12, -0.02 - r * 0.13, 0.05); g.add(b); } } g.rotation.y = Math.PI; return g; } var keypad = placeSlot("keypad", 1.7, 1.3, 4.72, 0.7, buildKeypad); addInteract(keypad, "keypad"); // ── DOOR (south gap), hinged on a pivot so it swings open ── var doorPivot = new THREE.Object3D(); doorPivot.position.set(-GAP / 2, 0, HALF - T + 0.02); scene.add(doorPivot); function buildDoor(): THREE.Object3D { var g = new THREE.Group(); var slab = box(GAP - 0.06, 2.15, 0.08, mat(0x4a2f1c, 0.7, 0.05)); slab.position.set((GAP - 0.06) / 2, 1.08, 0); var handle = new THREE.Mesh(new THREE.SphereGeometry(0.05, 12, 12), mat(0xcaa14a, 0.35, 0.8)); handle.position.set(GAP - 0.22, 1.05, 0.06); g.add(slab, handle); return g; } var door = getSlot("door"); if (door) { var dbox = new THREE.Box3().setFromObject(door); var dsz = new THREE.Vector3(); dbox.getSize(dsz); var ds = dsz.y > 0.001 ? 2.15 / dsz.y : 1; door.scale.setScalar(ds); door.position.set(0, 0, 0); } else { door = buildDoor(); } doorPivot.add(door); addInteract(doorPivot, "door"); var doorTargetAngle = 0; // 0 closed, negative swings outward // ── CHEST (NE corner) — decorative flavor prop ── function buildChest(): THREE.Object3D { var g = new THREE.Group(); var base = box(0.9, 0.5, 0.6, mat(0x4a3420, 0.8, 0.05)); var lid = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.3, 0.9, 16, 1, false, 0, Math.PI), mat(0x3a2818, 0.8, 0.05)); lid.rotation.z = Math.PI / 2; lid.position.y = 0.25; var lock = box(0.12, 0.14, 0.06, mat(0xcaa14a, 0.4, 0.7)); lock.position.set(0, 0.05, 0.31); g.add(base, lid, lock); return g; } var chest = placeSlot("chest", 4.0, 0.25, -4.0, 0.7, buildChest); addInteract(chest, "chest"); addSolid(4.0, -4.0, 0.9, 0.6); // ── BOOKSHELF (north wall, beside desk) — decorative flavor prop ── function buildBookshelf(): THREE.Object3D { var g = new THREE.Group(); var frame = box(1.2, 2.2, 0.4, mat(0x3a2a1a, 0.85, 0.03)); g.add(frame); var cols = [0xa04a3a, 0x3a6a8a, 0x5a7a4a, 0xa08a3a, 0x7a4a7a]; for (var s = 0; s < 4; s++) { for (var bk = 0; bk < 6; bk++) { var bookH = 0.32 + (bk % 3) * 0.05; var bookM = mat(cols[(s + bk) % cols.length], 0.9, 0); var b2 = box(0.09, bookH, 0.28, bookM); b2.position.set(-0.5 + bk * 0.18, -0.75 + s * 0.55 + bookH / 2, 0.06); g.add(b2); } } return g; } var bookshelf = placeSlot("bookshelf", -3.6, 1.1, -4.55, 2.2, buildBookshelf); addInteract(bookshelf, "bookshelf"); addSolid(-3.6, -4.55, 1.2, 0.4); // ── LAMP (desk) — the season-pass cosmetic upgrades this to a golden lantern ── function buildLamp(): THREE.Object3D { var g = new THREE.Group(); var stem = box(0.05, 0.5, 0.05, mat(0x3a3a3a, 0.5, 0.6)); stem.position.y = 0.25; var shadeMat = mat(0xe0c890, 0.6, 0.1); var shade = new THREE.Mesh(new THREE.ConeGeometry(0.22, 0.28, 20, 1, true), shadeMat); shade.position.y = 0.56; shade.rotation.x = Math.PI; if (HIGH_QUALITY) (shadeMat as THREE.MeshStandardMaterial).emissive = new THREE.Color(0x7a5a2a); g.add(stem, shade); g.userData.shade = shade; return g; } var lampObj = buildLamp(); lampObj.position.set(-0.7, 0.91, -4.35); scene.add(lampObj); // ═══════════════════════════════════════════════════════════════════════════ // ═══ HUD ═══ overlay DOM: reticle, prompt, timer, inventory, coop badge, // modals (note/painting/keypad), win screen, mobile controls, toasts, hint. // ═══════════════════════════════════════════════════════════════════════════ var css = document.createElement("style"); css.textContent = "#er-ui{position:absolute;inset:0;pointer-events:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#eef2f8;user-select:none;-webkit-user-select:none}" + "#er-ret{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);box-shadow:0 0 4px rgba(0,0,0,.6);transition:transform .1s,border-color .1s}" + "#er-ret.hot{transform:scale(1.7);border-color:#ffd98a}" + "#er-prompt{position:absolute;left:50%;top:calc(50% + 22px);transform:translateX(-50%);background:rgba(8,10,16,.72);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:7px 12px;font-size:14px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .12s}" + "#er-prompt.show{opacity:1}" + "#er-top{position:absolute;top:12px;left:14px;display:flex;flex-direction:column;gap:6px}" + ".er-chip{background:rgba(8,10,16,.66);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:6px 11px;font-size:13px;font-weight:600}" + "#er-time{font-variant-numeric:tabular-nums}" + "#er-inv{position:absolute;top:12px;right:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}" + ".er-slot{display:flex;align-items:center;gap:7px;background:rgba(8,10,16,.66);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:6px 11px;font-size:13px;font-weight:600}" + ".er-slot.dim{opacity:.4}" + "#er-coop{background:rgba(30,58,80,.72);border-color:rgba(120,180,240,.35);display:none}" + "#er-coop.on{display:block}" + "#er-adv{max-width:260px;font-weight:500;font-size:12px;line-height:1.35;color:#cdd6e4;display:none}" + "#er-adv.on{display:block}" + "#er-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);pointer-events:auto;background:rgba(8,10,16,.7);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer}" + "#er-hint:active{transform:translateX(-50%) scale(.97)}" + "#er-toast{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);background:rgba(8,10,16,.85);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:9px 15px;font-size:14px;max-width:82%;text-align:center;opacity:0;transition:opacity .2s}" + "#er-toast.show{opacity:1}" + ".er-modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,4,8,.62);pointer-events:auto;padding:20px}" + ".er-modal.on{display:flex}" + ".er-card{background:#141821;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:22px;max-width:340px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}" + ".er-card h3{margin:0 0 10px;font-size:16px;letter-spacing:.5px}" + ".er-note{white-space:pre-wrap;font-size:15px;line-height:1.5;color:#e7ecf4;background:rgba(233,226,207,.06);border-radius:10px;padding:14px;font-family:ui-monospace,Menlo,Consolas,monospace}" + ".er-btn{margin-top:14px;width:100%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#eef2f8;border-radius:11px;padding:12px;font-size:15px;font-weight:700;cursor:pointer}" + ".er-btn:active{transform:scale(.98)}" + ".er-btn.pri{background:#2f6f4a;border-color:#3c9a63}" + "#er-disp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;letter-spacing:10px;text-align:center;background:#0d2b1e;border:1px solid #1f6f4a;border-radius:10px;padding:12px;color:#7ef0b6;min-height:30px}" + "#er-disp.bad{animation:er-shake .3s}" + "@keyframes er-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}" + "#er-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}" + ".er-key{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#eef2f8;border-radius:11px;padding:15px 0;font-size:20px;font-weight:700;cursor:pointer}" + ".er-key:active{background:rgba(255,255,255,.14)}" + ".er-padrow{display:flex;gap:8px;margin-top:8px}.er-padrow>*{flex:1}" + "#er-win{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:rgba(4,8,14,.86);pointer-events:auto;padding:24px}" + "#er-win.on{display:flex}" + "#er-win .big{font-size:34px;font-weight:800;letter-spacing:.5px}" + "#er-win .sub{font-size:16px;color:#bcc7d6}" + "#er-move{position:absolute;left:20px;bottom:20px;width:120px;height:120px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);background:rgba(8,10,16,.4);pointer-events:auto;touch-action:none;display:none}" + "#er-move .nub{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.28)}" + "#er-look{position:absolute;right:0;bottom:0;width:46%;height:52%;pointer-events:auto;touch-action:none;display:none}" + "#er-act{position:absolute;right:24px;bottom:150px;width:78px;height:78px;border-radius:50%;border:1.5px solid rgba(255,217,138,.5);background:rgba(70,52,20,.62);color:#ffe6a8;font-size:13px;font-weight:800;pointer-events:auto;touch-action:none;display:none}" + "#er-act:active{transform:scale(.95)}" + ".er-mob #er-move,.er-mob #er-look,.er-mob #er-act{display:block}"; document.head.appendChild(css); var ui = document.createElement("div"); ui.id = "er-ui"; ui.innerHTML = "

" + "

00:00

" + "

You are locked in. Find a way out.

" + "

🔑Key

" + "

👥 Co-op

" + "

Solo play is free. Co-op rooms and the season room are a Season Pass perk.

" + "

Need a hint?

" + "

" + "" + "" + "

You escaped!

" + "

" + ""; root.appendChild(ui); function $(id: string): HTMLElement { return document.getElementById(id) as HTMLElement; } var elRet = $("er-ret"), elPrompt = $("er-prompt"), elTime = $("er-time"), elKeySlot = $("er-key"); var elCoop = $("er-coop"), elAdv = $("er-adv"), elToast = $("er-toast"); var toastTimer: any = null; function toast(text: string) { elToast.textContent = text; elToast.classList.add("show"); if (toastTimer) clearTimeout(toastTimer); toastTimer = setTimeout(function () { elToast.classList.remove("show"); }, 2600); } var modalOpen = false; function setModalOpen(on: boolean) { modalOpen = on; if (on) { try { document.exitPointerLock(); } catch (_e) {} } } // ── read modal (note + painting) ── var elRead = $("er-read"); function openRead(title: string, body: string) { $("er-read-t").textContent = title; $("er-read-b").textContent = body; elRead.classList.add("on"); setModalOpen(true); } $("er-read-x").onclick = function () { elRead.classList.remove("on"); setModalOpen(false); }; // ── keypad modal ── var elKp = $("er-kp"), elDisp = $("er-disp"); var kpBuf = ""; function renderDisp() { elDisp.textContent = kpBuf.length ? kpBuf : ""; } (function buildPad() { var pad = $("er-pad"); var order = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", ""]; for (var i = 0; i < order.length; i++) { if (!order[i]) { var sp = document.createElement("div"); pad.appendChild(sp); continue; } (function (dg: string) { var b = document.createElement("button"); b.className = "er-key"; b.textContent = dg; b.onclick = function () { if (kpBuf.length < 4) { kpBuf += dg; renderDisp(); } }; pad.appendChild(b); })(order[i]); } })(); function openKeypad() { if (S.doorOpen) { toast("The door is already open."); return; } kpBuf = ""; renderDisp(); elKp.classList.add("on"); setModalOpen(true); } function closeKeypad() { elKp.classList.remove("on"); setModalOpen(false); } $("er-clr").onclick = function () { kpBuf = ""; renderDisp(); }; $("er-kp-x").onclick = function () { closeKeypad(); }; $("er-ent").onclick = function () { if (kpBuf === CODE) { S.codeOK = true; S.doorOpen = true; closeKeypad(); toast("A heavy click. The door unlocks."); onChange(); } else { elDisp.classList.add("bad"); setTimeout(function () { elDisp.classList.remove("bad"); }, 320); kpBuf = ""; renderDisp(); toast("Wrong code. Look again for both halves."); } }; // ── win screen ── var elWin = $("er-win"); function fmt(ms: number): string { var s = Math.floor(ms / 1000); var mm = Math.floor(s / 60); var ss = s % 60; return (mm < 10 ? "0" : "") + mm + ":" + (ss < 10 ? "0" : "") + ss; } function showWin() { $("er-win-t").textContent = "Escape time " + fmt(timeMs); elWin.classList.add("on"); setModalOpen(true); } $("er-win-again").onclick = function () { resetGame(); }; // ── hint ── var hintShownAt = -1; $("er-hint").onclick = function () { toast(computeHint()); }; function computeHint(): string { if (!S.rugLifted && !S.keyTaken) return "Some things are hidden. Try looking under the rug in the middle of the room."; if (S.rugLifted && !S.keyTaken) return "Grab that brass key from under the rug."; if (S.keyTaken && !S.drawerOpen) return "Use the key on the desk drawer."; if (S.drawerOpen && !S.noteRead) return "Read the note inside the open drawer."; if (S.noteRead && !S.paintingRead) return "The note points to the painting on the wall. Go inspect it."; if (!S.doorOpen) return "You have both halves of the code. Enter it on the keypad by the door."; return "The way out is open. Walk through the door to escape."; } // ═══════════════════════════════════════════════════════════════════════════ // ═══ PUZZLES ═══ interaction logic + state reflection into the meshes. // ═══════════════════════════════════════════════════════════════════════════ function reflectState() { // rug slides aside once lifted rug.position.x = S.rugLifted ? rugAsideX : rugHomeX; // key visible only after the rug is lifted and before it's taken keyObj.visible = S.rugLifted && !S.keyTaken; // inventory slot if (S.keyTaken) elKeySlot.classList.remove("dim"); else elKeySlot.classList.add("dim"); // drawer slides out when open drawerGroup.position.z = S.drawerOpen ? drawerOpenZ : drawerClosedZ; note.visible = S.drawerOpen; // door target angle doorTargetAngle = S.doorOpen ? -Math.PI * 0.52 : 0; } function getPrompt(iid: string | null): string | null { if (iid === "rug") return S.rugLifted ? null : "Look under the rug"; if (iid === "key") return (S.rugLifted && !S.keyTaken) ? "Take the key" : null; if (iid === "drawer") return S.drawerOpen ? null : (S.keyTaken ? "Unlock the drawer" : "Locked. Find a key"); if (iid === "note") return S.drawerOpen ? (S.noteRead ? "Read the note again" : "Read the note") : null; if (iid === "painting") return S.paintingRead ? "Look at the painting again" : "Inspect the painting"; if (iid === "keypad") return S.doorOpen ? null : "Use the keypad"; if (iid === "door") return S.doorOpen ? "Go through the door" : "The door is locked"; if (iid === "chest") return "It won't budge"; if (iid === "bookshelf") return "Dusty old books"; return null; } function interact(iid: string | null) { if (!iid) return; if (iid === "rug") { if (!S.rugLifted) { S.rugLifted = true; toast("You pull the rug aside. Something metal glints underneath."); onChange(); } return; } if (iid === "key") { if (S.rugLifted && !S.keyTaken) { S.keyTaken = true; toast("You pocket a small brass key."); onChange(); } return; } if (iid === "drawer") { if (S.drawerOpen) { toast("The drawer is already open."); return; } if (!S.keyTaken) { toast("It's locked. You need a key."); return; } S.drawerOpen = true; toast("The key turns. The drawer slides open, revealing a folded note."); onChange(); return; } if (iid === "note") { if (!S.drawerOpen) return; S.noteRead = true; openRead("Note", "SECURITY MEMO\n\nThe door code starts with:\n\n0 4 _ _\n\nThe last two digits are hidden on the painting."); onChange(); return; } if (iid === "painting") { S.paintingRead = true; openRead("The Painting", "Scratched into the lower corner of the frame:\n\n_ _ 2 6\n\nHalf a code is no code. Find the other half."); onChange(); return; } if (iid === "keypad") { openKeypad(); return; } if (iid === "door") { if (S.doorOpen) toast("It's open. Step through to escape."); else toast("Locked tight. Try the keypad beside it."); return; } if (iid === "chest") { toast("Locked and far too heavy. The way out is the door."); return; } if (iid === "bookshelf") { toast("Rows of dusty books. Nothing hidden here."); return; } } var broadcastQueued = false; function onChange() { reflectState(); updateHud(); broadcastQueued = true; // batched-broadcast next frame so rapid changes coalesce } function resetGame() { S.rugLifted = false; S.keyTaken = false; S.drawerOpen = false; S.noteRead = false; S.paintingRead = false; S.codeOK = false; S.doorOpen = false; won = false; timeMs = 0; hintShownAt = -1; player.x = 0; player.z = 3.6; yaw = Math.PI; pitch = 0; elWin.classList.remove("on"); elRead.classList.remove("on"); elKp.classList.remove("on"); setModalOpen(false); reflectState(); updateHud(); broadcastQueued = true; } // ═══════════════════════════════════════════════════════════════════════════ // ═══ INPUT ═══ desktop (WASD + pointer-lock look + reticle raycast) and mobile // (on-screen move stick + look pad + interact button, via pointer/touch events). // ═══════════════════════════════════════════════════════════════════════════ var keys: any = { w: false, a: false, s: false, d: false }; function keyName(e: KeyboardEvent): string | null { var k = (e.key || "").toLowerCase(); if (k === "w" || k === "arrowup") return "w"; if (k === "s" || k === "arrowdown") return "s"; if (k === "a" || k === "arrowleft") return "a"; if (k === "d" || k === "arrowright") return "d"; return null; } window.addEventListener("keydown", function (e: KeyboardEvent) { var n = keyName(e); if (n) { keys[n] = true; e.preventDefault(); return; } var k = (e.key || "").toLowerCase(); if (k === "e" || k === "f") { doInteract(); } if (k === "escape" && modalOpen) { /* modals close via their own buttons */ } }); window.addEventListener("keyup", function (e: KeyboardEvent) { var n = keyName(e); if (n) { keys[n] = false; } }); // pointer-lock mouse look (desktop) var locked = false; document.addEventListener("pointerlockchange", function () { locked = document.pointerLockElement === canvas; }); canvas.addEventListener("mousemove", function (e: MouseEvent) { if (!locked || modalOpen) return; var sens = 0.0024; yaw -= e.movementX * sens; pitch -= e.movementY * sens; pitch = Math.max(-1.2, Math.min(1.2, pitch)); }); canvas.addEventListener("click", function () { if (modalOpen) return; if (!locked && !isMobile()) { try { canvas.requestPointerLock(); } catch (_e) {} return; } doInteract(); }); function doInteract() { if (modalOpen) return; interact(currentHover); } // Mobile controls (pointer + touch events). Build them inline (no dead helper). var mobileActive = false; function isMobile(): boolean { return mobileActive; } function enableMobile() { if (mobileActive) return; mobileActive = true; ui.classList.add("er-mob"); } if (("ontouchstart" in window) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) || (window.matchMedia && window.matchMedia("(pointer: coarse)").matches)) { enableMobile(); } window.addEventListener("touchstart", function () { enableMobile(); }, { passive: true }); var moveInput = { x: 0, y: 0 }; var moveZone = $("er-move"), moveNub = $("er-nub"); var moveId = -1, moveCx = 0, moveCy = 0; function moveStart(id: number, x: number, y: number) { var r = moveZone.getBoundingClientRect(); moveId = id; moveCx = r.left + r.width / 2; moveCy = r.top + r.height / 2; moveMoveTo(x, y); } function moveMoveTo(x: number, y: number) { var dx = x - moveCx, dy = y - moveCy; var max = 46; var len = Math.sqrt(dx * dx + dy * dy) || 1; var cl = Math.min(len, max); var nx = (dx / len) * cl, ny = (dy / len) * cl; moveNub.style.transform = "translate(" + nx + "px," + ny + "px)"; moveInput.x = nx / max; moveInput.y = -ny / max; // screen-up is forward } function moveEnd() { moveId = -1; moveInput.x = 0; moveInput.y = 0; moveNub.style.transform = "translate(0,0)"; } moveZone.addEventListener("pointerdown", function (e: any) { e.preventDefault(); moveStart(e.pointerId, e.clientX, e.clientY); try { moveZone.setPointerCapture(e.pointerId); } catch (_x) {} }); moveZone.addEventListener("pointermove", function (e: any) { if (e.pointerId === moveId) { e.preventDefault(); moveMoveTo(e.clientX, e.clientY); } }); moveZone.addEventListener("pointerup", function (e: any) { if (e.pointerId === moveId) moveEnd(); }); moveZone.addEventListener("pointercancel", function () { moveEnd(); }); moveZone.addEventListener("touchstart", function (e: any) { e.preventDefault(); }, { passive: false }); var lookZone = $("er-look"); var lookId = -1, lookLastX = 0, lookLastY = 0; lookZone.addEventListener("pointerdown", function (e: any) { e.preventDefault(); lookId = e.pointerId; lookLastX = e.clientX; lookLastY = e.clientY; try { lookZone.setPointerCapture(e.pointerId); } catch (_x) {} }); lookZone.addEventListener("pointermove", function (e: any) { if (e.pointerId !== lookId || modalOpen) return; e.preventDefault(); var dx = e.clientX - lookLastX, dy = e.clientY - lookLastY; lookLastX = e.clientX; lookLastY = e.clientY; var sens = 0.005; yaw -= dx * sens; pitch -= dy * sens; pitch = Math.max(-1.2, Math.min(1.2, pitch)); }); lookZone.addEventListener("pointerup", function (e: any) { if (e.pointerId === lookId) lookId = -1; }); lookZone.addEventListener("pointercancel", function () { lookId = -1; }); lookZone.addEventListener("touchstart", function (e: any) { e.preventDefault(); }, { passive: false }); var actBtn = $("er-act"); actBtn.addEventListener("pointerdown", function (e: any) { e.preventDefault(); doInteract(); }); actBtn.addEventListener("touchstart", function (e: any) { e.preventDefault(); }, { passive: false }); // ═══════════════════════════════════════════════════════════════════════════ // ═══ SYNC ═══ broadcast solve-state + my position to peers; merge inbound. // (Solo, MR.active is false so nothing is sent; the game is fully single-player.) // ═══════════════════════════════════════════════════════════════════════════ function sendState() { if (!MR.active) return; MR.send({ t: "st", s: snapshot(), p: { x: player.x, z: player.z, ry: yaw } }); } MR.onStateRequest(function (from: string) { if (MR.active) MR.provideState(from, snapshot()); }); MR.onState(function (s: any) { applyState(s); }); MR.onMessage(function (m: any) { var d = m && m.data; if (!d || d.t !== "st") return; if (d.s) applyState(d.s); if (d.p && m.from) upsertPeer(m.from, d.p); }); MR.onPresence(function () { updateHud(); if (MR.active) sendState(); }); // simple peer avatars (a capsule per remote player) var peers: { [id: string]: { mesh: THREE.Object3D; seen: number } } = {}; function upsertPeer(id: string, p: any) { if (!id || id === MR.me) return; var e = peers[id]; if (!e) { var g = new THREE.Group(); var body = new THREE.Mesh(new THREE.CapsuleGeometry(0.28, 1.0, 4, 8), mat(0x5aa0ff, 0.6, 0.1)); body.position.y = 0.9; if (HIGH_QUALITY) (body.material as THREE.MeshStandardMaterial).emissive = new THREE.Color(0x18324f); var headM = new THREE.Mesh(new THREE.SphereGeometry(0.16, 12, 12), mat(0xdfe8f5, 0.6, 0)); headM.position.y = 1.55; g.add(body, headM); scene.add(g); e = peers[id] = { mesh: g, seen: 0 }; } e.mesh.position.x = typeof p.x === "number" ? p.x : e.mesh.position.x; e.mesh.position.z = typeof p.z === "number" ? p.z : e.mesh.position.z; e.mesh.rotation.y = typeof p.ry === "number" ? p.ry : e.mesh.rotation.y; e.mesh.visible = true; e.seen = performance.now(); } // ═══════════════════════════════════════════════════════════════════════════ // ═══ HUD update + season-pass cosmetic ═══ // ═══════════════════════════════════════════════════════════════════════════ var advShown = false; function updateHud() { if (MR.active && MR.count > 1) elCoop.classList.add("on"); else elCoop.classList.remove("on"); var pass = false; try { pass = !!(ENT && ENT.season_pass); } catch (_e) {} // advisory: co-op rooms + the season room are a pass perk (client is advisory; // the solo escape is always free + never blocked). if (MR.active && !pass) { elAdv.classList.add("on"); advShown = true; } else { elAdv.classList.remove("on"); } applyPremium(pass); } // Season cosmetic: a warm "golden lantern" glow + gold door trim when entitled. var premiumOn = false; function applyPremium(on: boolean) { if (on === premiumOn) return; premiumOn = on; var shade: any = (lampObj as any).userData ? (lampObj as any).userData.shade : null; if (shade && shade.material && shade.material.emissive) { shade.material.emissive.set(on ? 0xffbf5a : 0x7a5a2a); shade.material.color.set(on ? 0xffe6a8 : 0xe0c890); } lamp.color.set(on ? 0xffdca8 : 0xffcf99); lamp.intensity = on ? 1.85 : 1.4; ambient.intensity = on ? 0.62 : 0.55; } try { ENT.on("change", function () { updateHud(); }); } catch (_e) {} // ═══════════════════════════════════════════════════════════════════════════ // ═══ LOOP ═══ movement + hover + timer + door + broadcast + render. // ═══════════════════════════════════════════════════════════════════════════ var currentHover: string | null = null; var hoverRoot: THREE.Object3D | null = null; var ray = new THREE.Raycaster(); var ndcCenter = new THREE.Vector2(0, 0); function updateHover() { ray.setFromCamera(ndcCenter, camera); var hits = ray.intersectObjects(interactMeshes, false); var iid: string | null = null; var rootObj: THREE.Object3D | null = null; for (var i = 0; i < hits.length; i++) { if (hits[i].distance > 2.6) break; var got = findIid(hits[i].object); if (got && getPrompt(got) !== null) { iid = got; rootObj = findRoot(hits[i].object); break; } if (got && iid === null) { iid = got; rootObj = findRoot(hits[i].object); } } // apply highlight if (rootObj !== hoverRoot) { if (hoverRoot) setHighlight(hoverRoot, false); if (rootObj) setHighlight(rootObj, true); hoverRoot = rootObj; } currentHover = iid; var promptText = getPrompt(iid); if (promptText) { elPrompt.textContent = (isMobile() ? "" : "[E] ") + promptText; elPrompt.classList.add("show"); elRet.classList.add("hot"); } else { elPrompt.classList.remove("show"); elRet.classList.remove("hot"); } } function setHighlight(rootObj: THREE.Object3D, on: boolean) { rootObj.traverse(function (o: any) { if (!o.isMesh || !o.material || !o.material.emissive) return; if (on) { if (o.userData.emoSaved === undefined) o.userData.emoSaved = o.material.emissive.getHex(); o.material.emissive.setHex(0x3a2f10); } else if (o.userData.emoSaved !== undefined) { o.material.emissive.setHex(o.userData.emoSaved); o.userData.emoSaved = undefined; } }); } function updateMovement(dt: number) { if (modalOpen || won) return; var fwd = (keys.w ? 1 : 0) - (keys.s ? 1 : 0) + moveInput.y; var str = (keys.d ? 1 : 0) - (keys.a ? 1 : 0) + moveInput.x; fwd = Math.max(-1, Math.min(1, fwd)); str = Math.max(-1, Math.min(1, str)); if (fwd === 0 && str === 0) return; var fX = -Math.sin(yaw), fZ = -Math.cos(yaw); var rX = -fZ, rZ = fX; var mx = fX * fwd + rX * str, mz = fZ * fwd + rZ * str; var len = Math.sqrt(mx * mx + mz * mz) || 1; if (len > 1) { mx /= len; mz /= len; } var speed = 2.7; var nx = player.x + mx * speed * dt; var nz = player.z + mz * speed * dt; if (!collides(nx, player.z)) player.x = nx; if (!collides(player.x, nz)) player.z = nz; // walked out through the open door -> win if (!won && S.doorOpen && player.z > HALF + 0.25) { won = true; showWin(); } } var last = 0; var lastBroadcast = 0; function frame(t: number) { requestAnimationFrame(frame); var dt = Math.min(0.05, (t - last) / 1000 || 0); last = t; // Completeness start-gate: hold the escape timer + movement until the player // presses Play on the title screen (window.__mcpityStarted, set by the // completeness HUD on mcpity:game-new / mcpity:game-continue). Absent the // completeness block the flag stays undefined and play is gated; the title // always dispatches the event so it clears on Play. var __started = !!(W as any).__mcpityStarted; if (__started && !modalOpen && !won) { timeMs += dt * 1000; } if (__started) updateMovement(dt); camera.position.set(player.x, EYE, player.z); camera.rotation.y = yaw; camera.rotation.x = pitch; updateHover(); // door swing var cur = doorPivot.rotation.y; if (Math.abs(cur - doorTargetAngle) > 0.001) { doorPivot.rotation.y += (doorTargetAngle - cur) * Math.min(1, dt * 4); } // timer chip elTime.textContent = fmt(timeMs); // auto-hint nudge after ~90s stuck if (hintShownAt < 0 && timeMs > 90000 && !won) { hintShownAt = timeMs; toast(computeHint()); } // broadcast solve-state / position (batched + throttled) if (MR.active) { if (broadcastQueued) { sendState(); broadcastQueued = false; lastBroadcast = t; } else if (t - lastBroadcast > 160) { sendState(); lastBroadcast = t; } // fade out stale peers var now = performance.now(); for (var id in peers) { if (peers[id].mesh.visible && now - peers[id].seen > 4000) peers[id].mesh.visible = false; } } renderer.render(scene, camera); } // ── initial paint + boot ── reflectState(); updateHud(); requestAnimationFrame(frame); // ready beacon (harness handshake; harmless if no parent) try { if (window.parent && window.parent !== window) { window.parent.postMessage({ type: "mcpity:web-engine:ready" }, "*"); } } catch (_e) {} // =========================================================================== // === COMPLETENESS === title/splash + settings + procedural music/SFX + // rewarded-ad monetization. Reuses the MCPity pattern-library bodies verbatim // (platform.audio-bus / platform.background-music / platform.settings-menu / // platform.start-menu / platform.rewarded-ad), each wrapped in its own IIFE so // the five bodies never collide. Installs window.MCPity* globals + a small HUD; // purely additive. Ads pay the developer directly via their OWN account, MCPity 0% (PRD 140). // =========================================================================== // -- platform.audio-bus (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; }, }; })(); // -- platform.background-music (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 }); }); } })(); // -- platform.settings-menu (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: "7d112041-5eb1-583a-9ce9-54651090b0bc", 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', }, }; })(); // -- platform.start-menu (launch.start-menu-web) -- (() => { // MCPityStartMenu - pattern: launch.start-menu-web. const _MENU_OPTS = { accent: "#06b6d4", leaderboard: "high_score", autoOpen: true, }; 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); } })(); // -- platform.rewarded-ad (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); } })(); // -- MCPity completeness HUD + wiring (identical across every published game) -- // Purely additive: a persistent Settings gear + a sound on/off mute + a rewarded // ad "bonus" button. The rewarded ad pays the DEVELOPER directly via their OWN // AdSense account (project settings: adsensePublisherId / adsenseSlotId) -- MCPity // takes 0 percent (PRD section 140). Does not modify the game's own loop. (() => { var W = window as any; if (W.__mcpityCompletenessHud) return; W.__mcpityCompletenessHud = true; function cxToast(msg: string) { var t = document.createElement("div"); t.textContent = msg; t.style.cssText = "position:fixed;left:50%;bottom:66px;transform:translateX(-50%);z-index:99001;background:rgba(13,17,23,.94);color:#fff;padding:10px 16px;border-radius:10px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px;border:1px solid #ffffff20;pointer-events:none;max-width:88vw;text-align:center"; document.body.appendChild(t); setTimeout(function () { try { t.remove(); } catch (e) {} }, 2600); } function sfx(name: string) { try { if (W.MCPityMusic && W.MCPityMusic.sfx) W.MCPityMusic.sfx(name); } catch (e) {} } function mkBtn(label: string, title: string): HTMLButtonElement { var b = document.createElement("button"); b.textContent = label; b.title = title; b.setAttribute("aria-label", title); b.style.cssText = "width:40px;height:40px;border-radius:10px;border:1px solid #ffffff20;background:rgba(13,17,23,.72);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center"; b.onmouseenter = function () { b.style.background = "rgba(13,17,23,.94)"; }; b.onmouseleave = function () { b.style.background = "rgba(13,17,23,.72)"; }; return b; } function mountHud() { if (document.getElementById("mcpity-cx-hud")) return; var hud = document.createElement("div"); hud.id = "mcpity-cx-hud"; hud.style.cssText = "position:fixed;right:10px;bottom:10px;z-index:99000;display:flex;gap:8px"; var gear = mkBtn("⚙", "Settings"); gear.onclick = function () { sfx("click"); try { if (W.MCPitySettings && W.MCPitySettings.open) W.MCPitySettings.open(); } catch (e) {} }; var muted = false; var mute = mkBtn("🔊", "Sound on / off"); mute.onclick = function () { muted = !muted; mute.textContent = muted ? "🔇" : "🔊"; try { if (W.MCPityAudio && W.MCPityAudio.bus) W.MCPityAudio.bus.master.set(muted ? 0 : 0.85); } catch (e) {} try { if (W.MCPityMusic && W.MCPityMusic.setEnabled) W.MCPityMusic.setEnabled(!muted); } catch (e) {} }; hud.appendChild(gear); hud.appendChild(mute); // Rewarded-ad "bonus" -- only when a rewarded ad can actually be requested. var adsAvail = false; try { adsAvail = !!(W.MCPityAds && W.MCPityAds.isRewardedAvailable && W.MCPityAds.isRewardedAvailable()); } catch (e) {} if (adsAvail) { var bonus = mkBtn("🎁", "Watch a short ad for a bonus (supports the developer)"); bonus.onclick = function () { sfx("click"); if (!(W.MCPityAds && W.MCPityAds.showRewarded)) return; try { W.MCPityAds.showRewarded({ tag: "hud_bonus", on_reward: function () { sfx("win"); cxToast("Bonus unlocked. Thanks for supporting the developer."); }, on_fail: function () { cxToast("No ad available right now."); }, }); } catch (e) { cxToast("No ad available right now."); } }; hud.appendChild(bonus); } document.body.appendChild(hud); } // The title screen (start menu) dispatches these on Play / Continue. Mark the // game as started (games that gate their loop read W.__mcpityStarted), start // the music bed, and play a click. function onStart() { W.__mcpityStarted = true; try { if (W.MCPityMusic && W.MCPityMusic.start) W.MCPityMusic.start(); } catch (e) {} sfx("click"); } W.addEventListener("mcpity:game-new", onStart); W.addEventListener("mcpity:game-continue", function () { W.__mcpityStarted = true; try { if (W.MCPityMusic && W.MCPityMusic.start) W.MCPityMusic.start(); } catch (e) {} }); if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mountHud); else mountHud(); })();

Note

Door Keypad