// Chroma Conveyor - MCPity Web Engine game. A one-tap conveyor color-match shooter. // 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 here. No template literals (backticks) and no template // interpolation anywhere, so the exact bytes embed verbatim inside a String.raw // constant + the staged publish SQL dollar-quote literal. // // The game: a pixel-art picture is built from glossy toy cubes on a purple-blue // board, framed by a looping conveyor track. You have cute jelly robot units // waiting to be launched, each a specific color with an ammo number above its // head. Tap a unit to send it onto the conveyor through the entry hatch. As it // rides the loop it auto-fires ONLY at cubes of its own color within range - zero // aiming. Launch order and timing are the whole strategy. Each shot spends one // ammo; when a unit runs out it leaves the track, and when it finishes a loop // with ammo left it parks in a waiting slot so you can launch it again. Only a // few units ride at once. Clear every cube to reveal the finished picture. // // 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: click a unit. mobile: tap a unit. Zero aiming either way. // - gates play on window.__mcpityStarted (the shell splash sets it on Play). // // Optional harness shims (all guarded; absent means a plain single-player game): // - window.MCPityAssets : slot to GLB registry (section 171 asset auto-wire). // - window.MCPityEntitlements : advisory Season Pass gating (section 167). // - window.MCPityShell / MCPityMusic : splash + settings + audio (inlined below). import * as THREE from "three"; var W = window as any; // =========================================================================== // ASSETS - optional Meshy/GLB slot registry (section 171). Every prop has a // procedural fallback so the game is fully playable and pretty with ZERO assets. // Named slots the founder can fill with Meshy GLB URLs: mascot, track, hatch, tray. // The single mascot mesh is tinted per unit color in code (six color variants), so // one generated mascot covers every color. // =========================================================================== 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; } // =========================================================================== // COMMERCE - inline MCPityEntitlements shim (section 167). Advisory Season Pass // snapshot relayed from the authed parent over the coop seam under the __ent tag. // Client entitlement is UX-only; the server holds the real gate. Free play (the // five base pictures + the standard mascot units) is ALWAYS available. // =========================================================================== 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; })(); function hasPass(): boolean { try { return !!(ENT && ENT.season_pass); } catch (_e) { return false; } } // =========================================================================== // SHELL CONFIG - branding for the reusable MCPity Game Shell (set BEFORE the // shell block below runs). Bright, candy, on-brand for Chroma Conveyor. // =========================================================================== W.__MCPITY_SHELL_CONFIG = { title: "Chroma Conveyor", tagline: "Send your color-bots down the belt. They auto-blast matching cubes to reveal a picture. No aiming - just perfect timing.", accent: "#8b6cff", panel: "#20183a", ink: "#f2ecff", subink: "#b6a8dd", controls: [ "Tap a bot in a waiting slot to send it onto the belt.", "A bot fires only at cubes of its own color - no aiming needed.", "Each shot spends one ammo. Ammo left after a lap parks the bot to reuse.", "Only a few bots ride at once. Clear every cube to reveal the picture.", "Tap a bot on the belt to recall it into a free slot.", ], }; // ---- MCPITY GAME SHELL - BEGIN ---- // CONFIG (set window.__MCPITY_SHELL_CONFIG before this block runs): // { title, tagline, accent, panel, ink, subink, // quality?: { label, get:()=>boolean, set:(on:boolean)=>void }, // controls?: string[], credit? } (function () { var SW = window as any; if (SW.__mcpityShellInstalled) return; SW.__mcpityShellInstalled = true; var CFG = SW.__MCPITY_SHELL_CONFIG || {}; var TITLE = CFG.title || "MCPity Game"; var TAGLINE = CFG.tagline || ""; var ACCENT = CFG.accent || "#c8843c"; var PANEL = CFG.panel || "#241b13"; var INK = CFG.ink || "#f4ece0"; var SUBINK = CFG.subink || "#c7b6a2"; var CREDIT = CFG.credit || "Made by MCPity"; var CONTROLS: string[] = Array.isArray(CFG.controls) ? CFG.controls : []; var QUALITY = CFG.quality || null; // ---- audio bus (reused if a prior block installed it) ---- var AC = SW.AudioContext || SW.webkitAudioContext; var existingAudio = SW.MCPityAudio; var ctx: AudioContext = existingAudio ? existingAudio.context : (AC ? new AC() : null); function mkBus(initial: number, parent: AudioNode) { var g = ctx.createGain(); g.gain.value = Math.max(0, Math.min(1, initial)); g.connect(parent); return { gain: g, set: function (v: number) { g.gain.setTargetAtTime(Math.max(0, Math.min(1, v)), ctx.currentTime, 0.02); }, get value() { return g.gain.value; } }; } var master: any, music: any, sfxBus: any; if (existingAudio) { master = existingAudio.bus.master; music = existingAudio.bus.music; sfxBus = existingAudio.bus.sfx; } else if (ctx) { master = mkBus(0.85, ctx.destination); music = mkBus(0.55, master.gain); sfxBus = mkBus(0.9, master.gain); SW.MCPityAudio = { context: ctx, bus: { master: master, music: music, sfx: sfxBus } }; } var resumed = false; function resume() { if (!ctx || resumed) return; if (ctx.state === "suspended") { try { ctx.resume(); } catch (e) {} } resumed = ctx.state === "running"; } // ---- cozy procedural music bed + one-shot SFX (reused if present) ---- var musicOn = true, playing = false, chords: number[][] = [[0, 4, 7], [9, 12, 16], [5, 9, 12], [7, 11, 14]]; var voices: OscillatorNode[] = [], lfo: OscillatorNode | null = null, mgain: GainNode | null = null, chordTimer: any = null, chordIdx = 0; var ROOT = 174.6; // F3, warm function hz(semi: number) { return ROOT * Math.pow(2, semi / 12); } function startMusic() { if (!ctx || playing || !musicOn) return; resume(); if (ctx.state === "suspended") { try { ctx.resume(); } catch (e) {} } playing = true; mgain = ctx.createGain(); mgain.gain.value = 0.32; mgain.connect(music ? music.gain : ctx.destination); lfo = ctx.createOscillator(); var lg = ctx.createGain(); lfo.frequency.value = 0.13; lg.gain.value = 0.06; lfo.connect(lg); lg.connect(mgain.gain); lfo.start(); var voiceFor = function (chord: number[]) { for (var i = 0; i < voices.length; i++) { try { voices[i].stop(); } catch (e) {} } voices = []; for (var j = 0; j < chord.length; j++) { var osc = ctx.createOscillator(); osc.type = "triangle"; osc.frequency.value = hz(chord[j]); var vg = ctx.createGain(); vg.gain.value = 0.3; osc.connect(vg); vg.connect(mgain!); osc.start(); voices.push(osc); } }; voiceFor(chords[chordIdx]); chordTimer = setInterval(function () { if (!playing) return; chordIdx = (chordIdx + 1) % chords.length; voiceFor(chords[chordIdx]); }, 3400); } function stopMusic() { if (!playing) return; playing = false; if (chordTimer) { clearInterval(chordTimer); chordTimer = null; } for (var i = 0; i < voices.length; i++) { try { voices[i].stop(); } catch (e) {} } voices = []; if (lfo) { try { lfo.stop(); } catch (e) {} lfo = null; } if (mgain) { try { mgain.disconnect(); } catch (e) {} mgain = null; } } function sfx(name: string) { if (!ctx) return; if (ctx.state === "suspended") { try { ctx.resume(); } catch (e) {} } var now = ctx.currentTime, osc = ctx.createOscillator(), g = ctx.createGain(); osc.connect(g); g.connect(sfxBus ? sfxBus.gain : ctx.destination); var dur = 0.12; if (name === "snap") { osc.type = "triangle"; osc.frequency.setValueAtTime(520, now); osc.frequency.exponentialRampToValueAtTime(880, now + 0.08); dur = 0.12; } else if (name === "win") { osc.type = "triangle"; osc.frequency.setValueAtTime(523, now); osc.frequency.setValueAtTime(659, now + 0.11); osc.frequency.setValueAtTime(784, now + 0.22); dur = 0.4; } else if (name === "soft") { osc.type = "sine"; osc.frequency.setValueAtTime(330, now); osc.frequency.exponentialRampToValueAtTime(260, now + 0.1); dur = 0.12; } else { osc.type = "sine"; osc.frequency.setValueAtTime(760, now); dur = 0.06; } g.gain.setValueAtTime(0.0001, now); g.gain.exponentialRampToValueAtTime(0.22, now + 0.01); g.gain.exponentialRampToValueAtTime(0.0001, now + dur); osc.start(now); osc.stop(now + dur + 0.02); } if (!SW.MCPityMusic) { SW.MCPityMusic = { get playing() { return playing; }, start: function () { startMusic(); }, stop: function () { stopMusic(); }, setEnabled: function (on: boolean) { musicOn = on; if (!on) stopMusic(); else if (SW.__mcpityStarted) startMusic(); }, sfx: sfx, }; } // ---- shared DOM helpers ---- function el(tag: string, css: string, txt?: string) { var e = document.createElement(tag); e.style.cssText = css; if (txt !== undefined) e.textContent = txt; return e; } var FONT = "system-ui,-apple-system,Segoe UI,Roboto,sans-serif"; function brandMark(size: number) { // a tasteful "Made by MCPity" lockup: a small warm gem glyph + wordmark. var wrap = el("div", "display:inline-flex;align-items:center;gap:7px;font-family:" + FONT); var gem = el("span", "width:" + size + "px;height:" + size + "px;border-radius:6px;background:linear-gradient(135deg," + ACCENT + ",#e7b878);box-shadow:0 2px 8px rgba(0,0,0,.35);display:inline-block"); var word = el("span", "font-size:" + (size - 1) + "px;font-weight:700;letter-spacing:.3px;color:" + SUBINK, CREDIT); wrap.appendChild(gem); wrap.appendChild(word); return wrap; } // ---- settings overlay ---- var soundOn = true; var settingsEl: HTMLDivElement | null = null; function buildSettings() { if (settingsEl) return; settingsEl = el("div", "position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;background:rgba(10,7,4,.72);font-family:" + FONT + ";color:" + INK) as HTMLDivElement; var card = el("div", "background:" + PANEL + ";border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px;width:min(92vw,420px);max-height:86vh;overflow:auto;box-shadow:0 26px 80px rgba(0,0,0,.55)"); var head = el("div", "display:flex;align-items:center;justify-content:space-between;margin-bottom:14px"); head.appendChild(el("div", "font-size:18px;font-weight:800;letter-spacing:.3px", "Settings")); var x = el("button", "background:transparent;border:0;color:" + INK + ";font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px", "✕"); x.addEventListener("click", function () { closeSettings(); }); head.appendChild(x); card.appendChild(head); function sectionLabel(t: string) { return el("div", "font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:" + SUBINK + ";margin:14px 0 8px;font-weight:700", t); } function toggleRow(label: string, get: () => boolean, set: (on: boolean) => void) { var row = el("div", "display:flex;align-items:center;justify-content:space-between;padding:7px 0"); row.appendChild(el("label", "font-size:14px;color:" + INK, label)); var btn = el("button", "") as HTMLButtonElement; var paint = function () { var on = get(); btn.textContent = on ? "On" : "Off"; btn.style.cssText = "border:0;border-radius:99px;padding:6px 16px;font-size:13px;font-weight:700;cursor:pointer;background:" + (on ? ACCENT : "#3a2f24") + ";color:" + (on ? "#241b13" : SUBINK); }; paint(); btn.addEventListener("click", function () { set(!get()); paint(); }); row.appendChild(btn); return row; } function sliderRow(label: string, get: () => number, set: (v: number) => void) { var row = el("div", "display:flex;align-items:center;gap:12px;padding:7px 0"); row.appendChild(el("label", "min-width:84px;font-size:14px;color:" + INK, label)); var input = document.createElement("input"); input.type = "range"; input.min = "0"; input.max = "1"; input.step = "0.01"; input.value = String(get()); input.style.cssText = "flex:1;accent-color:" + ACCENT; var val = el("span", "min-width:40px;font-size:12px;color:" + SUBINK + ";text-align:right", Math.round(get() * 100) + "%"); input.addEventListener("input", function () { var v = parseFloat(input.value); set(v); val.textContent = Math.round(v * 100) + "%"; }); row.appendChild(input); row.appendChild(val); return row; } card.appendChild(sectionLabel("Audio")); card.appendChild(toggleRow("Music", function () { return musicOn; }, function (on) { musicOn = on; if (SW.MCPityMusic) SW.MCPityMusic.setEnabled(on); })); card.appendChild(toggleRow("Sound effects", function () { return soundOn; }, function (on) { soundOn = on; })); card.appendChild(sliderRow("Volume", function () { return master ? master.value : 0.85; }, function (v) { if (master) master.set(v); })); if (QUALITY && typeof QUALITY.get === "function" && typeof QUALITY.set === "function") { card.appendChild(sectionLabel("Display")); card.appendChild(toggleRow(QUALITY.label || "High quality", function () { return !!QUALITY.get(); }, function (on) { QUALITY.set(on); })); } if (CONTROLS.length) { card.appendChild(sectionLabel("How to play")); var list = el("div", "font-size:13px;line-height:1.55;color:" + SUBINK); for (var i = 0; i < CONTROLS.length; i++) { var line = el("div", "padding:2px 0", CONTROLS[i]); list.appendChild(line); } card.appendChild(list); } var credit = el("div", "margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center"); credit.appendChild(brandMark(15)); card.appendChild(credit); settingsEl.appendChild(card); settingsEl.addEventListener("click", function (ev) { if (ev.target === settingsEl) closeSettings(); }); document.body.appendChild(settingsEl); } function openSettings() { buildSettings(); settingsEl!.style.display = "flex"; } function closeSettings() { if (settingsEl) settingsEl.style.display = "none"; } SW.MCPitySettings = { open: openSettings, close: closeSettings }; // expose the "is sound on" flag for game SFX gating SW.__mcpitySoundOn = function () { return soundOn; }; // ---- persistent badge (settings gear + small brand) ---- function mountBadge() { if (document.getElementById("mcpity-shell-badge")) return; var badge = el("div", "position:fixed;right:12px;bottom:12px;z-index:99000;display:flex;align-items:center;gap:8px;font-family:" + FONT); badge.id = "mcpity-shell-badge"; var gear = el("button", "width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(20,14,9,.72);color:" + INK + ";font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center", "⚙") as HTMLButtonElement; gear.title = "Settings"; gear.addEventListener("mouseenter", function () { gear.style.background = "rgba(20,14,9,.94)"; }); gear.addEventListener("mouseleave", function () { gear.style.background = "rgba(20,14,9,.72)"; }); gear.addEventListener("click", function () { if (soundOn) sfx("click"); openSettings(); }); var mark = el("div", "padding:5px 9px;border-radius:9px;background:rgba(20,14,9,.6);border:1px solid rgba(255,255,255,.1)"); mark.appendChild(brandMark(13)); badge.appendChild(mark); badge.appendChild(gear); document.body.appendChild(badge); } // ---- splash / title screen ---- var startCbs: Array<() => void> = []; function doStart() { SW.__mcpityStarted = true; resume(); if (musicOn && SW.MCPityMusic) SW.MCPityMusic.start(); if (soundOn) sfx("click"); window.dispatchEvent(new CustomEvent("mcpity:game-new")); for (var i = 0; i < startCbs.length; i++) { try { startCbs[i](); } catch (e) {} } } function mountSplash() { var sp = el("div", "position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:" + FONT + ";color:" + INK + ";background:radial-gradient(ellipse at 50% 38%, #3a2b1d 0%, #211610 62%, #160e08 100%)") as HTMLDivElement; sp.id = "mcpity-shell-splash"; var gem = el("div", "width:66px;height:66px;border-radius:18px;margin-bottom:18px;background:linear-gradient(135deg," + ACCENT + ",#e7b878);box-shadow:0 12px 34px rgba(200,132,60,.4),inset 0 2px 6px rgba(255,255,255,.4)"); sp.appendChild(gem); var title = el("div", "font-size:38px;font-weight:800;letter-spacing:.4px;line-height:1.1;max-width:9ch", TITLE); sp.appendChild(title); if (TAGLINE) sp.appendChild(el("div", "margin-top:10px;font-size:15px;color:" + SUBINK + ";max-width:24ch;line-height:1.4", TAGLINE)); var play = el("button", "margin-top:26px;background:" + ACCENT + ";color:#241b13;border:0;border-radius:14px;padding:15px 42px;font-size:19px;font-weight:800;letter-spacing:.3px;cursor:pointer;box-shadow:0 10px 28px rgba(200,132,60,.36);min-width:200px", "Play") as HTMLButtonElement; play.addEventListener("mouseenter", function () { play.style.transform = "scale(1.03)"; }); play.addEventListener("mouseleave", function () { play.style.transform = ""; }); play.addEventListener("click", function () { sp.remove(); doStart(); }); sp.appendChild(play); var settingsBtn = el("button", "margin-top:12px;background:transparent;color:" + INK + ";border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:9px 22px;font-size:14px;font-weight:600;cursor:pointer;min-width:200px", "Settings") as HTMLButtonElement; settingsBtn.addEventListener("click", function () { openSettings(); }); sp.appendChild(settingsBtn); var footer = el("div", "position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center"); footer.appendChild(brandMark(16)); sp.appendChild(footer); document.body.appendChild(sp); } SW.MCPityShell = { get started() { return !!SW.__mcpityStarted; }, onStart: function (cb: () => void) { startCbs.push(cb); }, openSettings: openSettings, }; function boot() { mountBadge(); mountSplash(); } if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot); else boot(); })(); // ---- MCPITY GAME SHELL - END ---- // =========================================================================== // 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(0x171233); scene.fog = new THREE.Fog(0x171233, 26, 52); var camera = new THREE.PerspectiveCamera(44, 1, 0.1, 120); camera.position.set(0, 15.6, 13.2); camera.lookAt(0, 0, 0.6); function sizeRenderer() { var w = root.clientWidth || window.innerWidth; var h = root.clientHeight || window.innerHeight; renderer.setSize(w, h, false); camera.aspect = w / h; // pull the camera back a touch on tall/narrow phone screens so the whole // board + waiting slots stay in frame. var aspect = w / h; var back = aspect < 0.85 ? 4.2 : (aspect < 1.15 ? 1.8 : 0); camera.position.set(0, 15.6 + back * 0.7, 13.2 + back); camera.lookAt(0, 0, 0.6); camera.updateProjectionMatrix(); } sizeRenderer(); if (typeof ResizeObserver !== "undefined") { try { new ResizeObserver(sizeRenderer).observe(root); } catch (_e) {} } window.addEventListener("resize", sizeRenderer); 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 }); } // ---- lighting: bright candy studio light ---- var ambient = new THREE.AmbientLight(0x8f88c8, 0.72); scene.add(ambient); var keyLight = new THREE.DirectionalLight(0xfff4e8, 1.05); keyLight.position.set(5, 13, 8); if (HIGH_QUALITY) { keyLight.castShadow = true; keyLight.shadow.mapSize.set(1024, 1024); keyLight.shadow.camera.left = -13; keyLight.shadow.camera.right = 13; keyLight.shadow.camera.top = 13; keyLight.shadow.camera.bottom = -13; keyLight.shadow.bias = -0.0006; } scene.add(keyLight); var rim = new THREE.DirectionalLight(0x7ea8ff, 0.4); rim.position.set(-6, 7, -6); scene.add(rim); var fillPt = new THREE.PointLight(0xff9ad8, 0.5, 40, 1.6); fillPt.position.set(0, 9, 10); scene.add(fillPt); // =========================================================================== // PALETTE - candy colors. Each picture cell is a single-char key mapping to one // of these. Units carry a color and only fire at cubes sharing it. // =========================================================================== var CH: { [k: string]: number } = { r: 0xff5a6e, o: 0xff9f43, y: 0xffd93d, g: 0x4bd47a, b: 0x4aa8ff, p: 0xb57bff, k: 0xff8ad4, w: 0xfdf3e3, n: 0xa9744f, d: 0x394264, }; var COLOR_NAME: { [k: string]: string } = { r: "Cherry", o: "Tangerine", y: "Lemon", g: "Mint", b: "Sky", p: "Grape", k: "Bubblegum", w: "Cream", n: "Cocoa", d: "Slate", }; // =========================================================================== // PICTURES - pixel-art levels. Each is a 12-wide grid of color keys ('.' empty). // Clearing every cube reveals the printed picture glowing on the board floor. // Free pictures are always playable; premium ones ride the Season Pass. // =========================================================================== interface Picture { id: string; name: string; premium: boolean; rows: string[]; } var PICTURES: Picture[] = [ { id: "heart", name: "Sweetheart", premium: false, rows: [ "..rr....rr..", ".rrrr..rrrr.", "rrkrrrrrrrrr", "rrkkrrrrrrrr", "rrrrrrrrrrrr", ".rrrrrrrrrr.", "..rrrrrrrr..", "...rrrrrr...", "....rrrr....", ".....rr.....", "............", "............", ], }, { id: "star", name: "Wish Star", premium: false, rows: [ ".....yy.....", ".....yy.....", "....yooy....", "yyyyyooyyyyy", ".yyyyooyyyy.", "..yyyyyyyy..", "..yyyyyyyy..", ".yyyy..yyyy.", ".yyy....yyy.", "yy........yy", "............", "............", ], }, { id: "melon", name: "Watermelon", premium: false, rows: [ "............", "............", "gggggggggggg", "grrrrrrrrrrg", "grrrdrrdrrrg", ".grrrrrrrrg.", ".grrdrrrdrg.", "..grrrrrrg..", "...grrrrg...", "....grrg....", ".....gg.....", "............", ], }, { id: "cat", name: "Pixel Cat", premium: false, rows: [ ".pp......pp.", ".pkp....pkp.", "pppppppppppp", "pwwppppppwwp", "pwdppppppwdp", "pppppkpppppp", "ppppkkkppppp", ".pppppppppp.", "..pppppppp..", "...pp..pp...", "............", "............", ], }, { id: "flower", name: "Daisy", premium: false, rows: [ "...kk..kk...", "..kkkkkkkk..", ".kkkkyykkkk.", ".kkkyyyykkk.", ".kkkkyykkkk.", "..kkkkkkkk..", "...kk..kk...", ".....gg.....", ".....gggg...", "...gggg.....", ".....gg.....", ".....gg.....", ], }, { id: "diamond", name: "Sky Gem", premium: true, rows: [ "............", "...bbwwbb...", "..bbbwwbbb..", ".bbbbbbbbbb.", "bbbbbbbbbbbb", ".bbbbbbbbbb.", "..bbbbbbbb..", "...bbbbbb...", "....bbbb....", ".....bb.....", "............", "............", ], }, { id: "rocket", name: "Star Rocket", premium: true, rows: [ ".....rr.....", "....rrrr....", "....rwwr....", "....rwwr....", "....rrrr....", "....rrrr....", "...brrrrb...", "..b.rrrr.b..", "....oooo....", ".....oo.....", "............", "............", ], }, ]; // =========================================================================== // BOARD - a rounded purple-blue platform. Cubes stand on it (the targets); a // flat tile sits under each cube and lights up when the cube is cleared, so the // finished board glows with the revealed picture. // =========================================================================== var GRID = 12, CELL = 1.0; var BOARD_HALF = (GRID * CELL) / 2; // 6.0 var boardBase = new THREE.Mesh(new THREE.BoxGeometry(GRID * CELL + 2.6, 0.7, GRID * CELL + 2.6), mat(0x2a2358, 0.7, 0.12)); boardBase.position.set(0, -0.36, 0); if (HIGH_QUALITY) boardBase.receiveShadow = true; scene.add(boardBase); var boardTop = new THREE.Mesh(new THREE.BoxGeometry(GRID * CELL + 1.0, 0.14, GRID * CELL + 1.0), mat(0x3a2f74, 0.82, 0.05)); boardTop.position.set(0, -0.01, 0); if (HIGH_QUALITY) boardTop.receiveShadow = true; scene.add(boardTop); // helper to map grid (col,row) -> world (x,z). row 0 is the far (back) edge. function cellWorldX(col: number): number { return (col + 0.5) * CELL - BOARD_HALF; } function cellWorldZ(row: number): number { return (row + 0.5) * CELL - BOARD_HALF; } // cube + tile instanced meshes are (re)built per level. var CUBE_H = 0.9, CUBE_S = 0.82, CUBE_Y = 0.52; var cubeGeo = new THREE.BoxGeometry(CUBE_S, CUBE_H, CUBE_S); var cubeMat = HIGH_QUALITY ? new THREE.MeshStandardMaterial({ roughness: 0.28, metalness: 0.06 }) : new THREE.MeshLambertMaterial({}); var tileGeo = new THREE.BoxGeometry(0.92, 0.1, 0.92); var tileMat = HIGH_QUALITY ? new THREE.MeshStandardMaterial({ roughness: 0.55, metalness: 0.0 }) : new THREE.MeshLambertMaterial({}); var cubesMesh: THREE.InstancedMesh | null = null; var tilesMesh: THREE.InstancedMesh | null = null; interface Cell { col: number; row: number; x: number; z: number; colorKey: string; colorHex: number; filled: boolean; } var cells: Cell[] = []; var filledCount = 0; var tmpObj = new THREE.Object3D(); var tmpColor = new THREE.Color(); // =========================================================================== // CONVEYOR - a looping rounded-rect belt around the board. buildLoop samples the // perimeter into points + an arc-length table; loopPoint(t) returns a position // and heading for a unit riding at fraction t. A scrolling stripe texture on the // belt ribbon sells the motion. // =========================================================================== var LOOP_HX = BOARD_HALF + 1.35, LOOP_HZ = BOARD_HALF + 1.35, LOOP_R = 2.3, LOOP_Y = 0.42; var loopPts: THREE.Vector3[] = []; var loopCum: number[] = []; var loopTotal = 0; (function buildLoop() { var hx = LOOP_HX, hz = LOOP_HZ, r = LOOP_R, y = LOOP_Y; var S = 22, C = 10; function line(x0: number, z0: number, x1: number, z1: number, n: number) { for (var i = 0; i < n; i++) { var t = i / n; loopPts.push(new THREE.Vector3(x0 + (x1 - x0) * t, y, z0 + (z1 - z0) * t)); } } function arc(cx: number, cz: number, a0: number, a1: number, n: number) { for (var i = 0; i < n; i++) { var t = i / n; var a = a0 + (a1 - a0) * t; loopPts.push(new THREE.Vector3(cx + Math.cos(a) * r, y, cz + Math.sin(a) * r)); } } // clockwise, starting at the front edge (z = +hz), which faces the camera. line(-(hx - r), hz, (hx - r), hz, S); arc(hx - r, hz - r, Math.PI / 2, 0, C); line(hx, hz - r, hx, -(hz - r), S); arc(hx - r, -(hz - r), 0, -Math.PI / 2, C); line(hx - r, -hz, -(hx - r), -hz, S); arc(-(hx - r), -(hz - r), -Math.PI / 2, -Math.PI, C); line(-hx, -(hz - r), -hx, hz - r, S); arc(-(hx - r), hz - r, Math.PI, Math.PI / 2, C); // cumulative arc length (closed loop) var acc = 0; for (var i = 0; i < loopPts.length; i++) { loopCum.push(acc); var next = loopPts[(i + 1) % loopPts.length]; acc += loopPts[i].distanceTo(next); } loopTotal = acc; })(); var loopOut = new THREE.Vector3(); var loopHeading = new THREE.Vector3(); function loopPoint(t: number): THREE.Vector3 { t = t - Math.floor(t); var target = t * loopTotal; // find segment (linear scan is fine; ~64 points) var n = loopPts.length; var idx = 0; for (var i = 0; i < n; i++) { var a = loopCum[i]; var b = (i + 1 < n) ? loopCum[i + 1] : loopTotal; if (target >= a && target <= b) { idx = i; break; } } var pA = loopPts[idx], pB = loopPts[(idx + 1) % n]; var segLen = ((idx + 1 < n) ? loopCum[idx + 1] : loopTotal) - loopCum[idx]; var f = segLen > 0.0001 ? (target - loopCum[idx]) / segLen : 0; loopOut.copy(pA).lerp(pB, f); loopHeading.copy(pB).sub(pA).normalize(); return loopOut; } // belt ribbon: a flat strip following the loop, inner + outer offset, scrolling // stripe texture along its length. var BELT_W = 1.15; var beltTex = (function () { var cv = document.createElement("canvas"); cv.width = 128; cv.height = 32; var c = cv.getContext("2d") as CanvasRenderingContext2D; c.fillStyle = "#4a3f86"; c.fillRect(0, 0, 128, 32); c.fillStyle = "#5b4fa0"; for (var i = -32; i < 128; i += 24) { c.beginPath(); c.moveTo(i, 0); c.lineTo(i + 12, 0); c.lineTo(i + 12 + 32, 32); c.lineTo(i + 32, 32); c.closePath(); c.fill(); } c.strokeStyle = "rgba(255,255,255,0.10)"; c.lineWidth = 2; c.strokeRect(0, 1, 128, 30); var t = new THREE.CanvasTexture(cv); t.wrapS = THREE.RepeatWrapping; t.wrapT = THREE.ClampToEdgeWrapping; t.colorSpace = THREE.SRGBColorSpace; return t; })(); (function buildBelt() { var n = loopPts.length; var verts: number[] = [], uvs: number[] = [], idx: number[] = []; var up = new THREE.Vector3(0, 1, 0), tan = new THREE.Vector3(), nrm = new THREE.Vector3(); var uScale = 1 / 1.9; for (var i = 0; i <= n; i++) { var p = loopPts[i % n]; var pNext = loopPts[(i + 1) % n]; var pPrev = loopPts[(i - 1 + n) % n]; tan.copy(pNext).sub(pPrev).normalize(); nrm.copy(tan).cross(up).normalize(); // horizontal perpendicular var ox = nrm.x * (BELT_W / 2), oz = nrm.z * (BELT_W / 2); verts.push(p.x + ox, LOOP_Y, p.z + oz); verts.push(p.x - ox, LOOP_Y, p.z - oz); var u = (i < n ? loopCum[i] : loopTotal) * uScale; uvs.push(u, 0); uvs.push(u, 1); } for (var s = 0; s < n; s++) { var a = s * 2, b = s * 2 + 1, c2 = s * 2 + 2, dd = s * 2 + 3; idx.push(a, b, c2, b, dd, c2); } var geo = new THREE.BufferGeometry(); geo.setAttribute("position", new THREE.Float32BufferAttribute(verts, 3)); geo.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2)); geo.setIndex(idx); geo.computeVertexNormals(); var m = HIGH_QUALITY ? new THREE.MeshStandardMaterial({ map: beltTex, roughness: 0.6, metalness: 0.1, side: THREE.DoubleSide }) : new THREE.MeshLambertMaterial({ map: beltTex, side: THREE.DoubleSide }); var belt = new THREE.Mesh(geo, m); if (HIGH_QUALITY) belt.receiveShadow = true; scene.add(belt); })(); // entry hatch at loopPoint(0) (front). Meshy slot 'hatch' -> procedural. var HATCH_T = 0.0; (function placeHatch() { var pos = loopPoint(HATCH_T).clone(); var m = getSlot("hatch"); var obj: THREE.Object3D; if (m) { var bbox = new THREE.Box3().setFromObject(m); var sz = new THREE.Vector3(); bbox.getSize(sz); var s = sz.y > 0.001 ? 1.5 / sz.y : 1; m.scale.setScalar(s); m.traverse(function (o: any) { if (o.isMesh && HIGH_QUALITY) { o.castShadow = true; } }); obj = m; } else { var g = new THREE.Group(); var post = mat(0x6d5fd0, 0.5, 0.2); var l = new THREE.Mesh(new THREE.BoxGeometry(0.28, 1.5, 0.28), post); l.position.set(-0.75, 0.75, 0); var rr = new THREE.Mesh(new THREE.BoxGeometry(0.28, 1.5, 0.28), post); rr.position.set(0.75, 0.75, 0); var top = new THREE.Mesh(new THREE.BoxGeometry(2.0, 0.32, 0.4), mat(0x8b6cff, 0.4, 0.25)); top.position.set(0, 1.55, 0); var glow = new THREE.Mesh(new THREE.BoxGeometry(1.5, 1.4, 0.06), new THREE.MeshBasicMaterial({ color: 0x8b6cff, transparent: true, opacity: 0.16 })); glow.position.set(0, 0.8, 0); g.add(l, rr, top, glow); if (HIGH_QUALITY) g.traverse(function (o: any) { if (o.isMesh) { o.castShadow = true; } }); obj = g; } obj.position.set(pos.x, 0, pos.z + 0.2); scene.add(obj); })(); // decorative conveyor track segments along the belt edges (Meshy slot 'track' -> // procedural rollers). Purely cosmetic - they never block a unit or a shot. (function placeTrackDecor() { var ts = [0.06, 0.31, 0.56, 0.81]; for (var i = 0; i < ts.length; i++) { var p = loopPoint(ts[i]).clone(); var hy = Math.atan2(loopHeading.x, loopHeading.z); var m = getSlot("track"); var obj: THREE.Object3D; if (m) { var bbox = new THREE.Box3().setFromObject(m); var sz = new THREE.Vector3(); bbox.getSize(sz); var s = sz.y > 0.001 ? 0.5 / sz.y : 1; m.scale.setScalar(s); m.traverse(function (o: any) { if (o.isMesh && HIGH_QUALITY) { o.castShadow = true; o.receiveShadow = true; } }); obj = m; } else { var g = new THREE.Group(); var frameM = mat(0x4a3f86, 0.6, 0.15); for (var rll = 0; rll < 3; rll++) { var roller = new THREE.Mesh(new THREE.CylinderGeometry(0.12, 0.12, 1.0, 12), frameM); roller.rotation.x = Math.PI / 2; roller.position.set((rll - 1) * 0.34, -0.06, 0); g.add(roller); } obj = g; if (HIGH_QUALITY) g.traverse(function (o: any) { if (o.isMesh) { o.receiveShadow = true; } }); } obj.position.set(p.x, LOOP_Y - 0.18, p.z); obj.rotation.y = hy; scene.add(obj); } })(); // =========================================================================== // UNITS - cute jelly-robot bots. One mascot mesh (Meshy slot 'mascot' -> a // procedural bot) is tinted per unit color. Each unit floats an ammo number // above its head. Units wait in slots, ride the belt, and park when they finish // a lap with ammo left. // =========================================================================== var eyeWhiteMat = HIGH_QUALITY ? new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.3 }) : new THREE.MeshLambertMaterial({ color: 0xffffff }); var eyePupilMat = new THREE.MeshBasicMaterial({ color: 0x201838 }); function buildProceduralBot(hex: number): THREE.Group { var g = new THREE.Group(); var bodyMat = HIGH_QUALITY ? new THREE.MeshStandardMaterial({ color: hex, roughness: 0.22, metalness: 0.08 }) : new THREE.MeshLambertMaterial({ color: hex }); var body = new THREE.Mesh(new THREE.SphereGeometry(0.5, 22, 18), bodyMat); body.position.y = 0.52; body.scale.set(1, 0.94, 1); var belly = new THREE.Mesh(new THREE.CircleGeometry(0.28, 20), new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.16 })); belly.position.set(0, 0.5, 0.47); belly.rotation.x = 0; var eyeL = new THREE.Mesh(new THREE.SphereGeometry(0.13, 14, 12), eyeWhiteMat); eyeL.position.set(-0.17, 0.6, 0.42); var eyeR = new THREE.Mesh(new THREE.SphereGeometry(0.13, 14, 12), eyeWhiteMat); eyeR.position.set(0.17, 0.6, 0.42); var pupL = new THREE.Mesh(new THREE.SphereGeometry(0.06, 10, 8), eyePupilMat); pupL.position.set(-0.17, 0.6, 0.53); var pupR = new THREE.Mesh(new THREE.SphereGeometry(0.06, 10, 8), eyePupilMat); pupR.position.set(0.17, 0.6, 0.53); var footL = new THREE.Mesh(new THREE.SphereGeometry(0.16, 12, 10), bodyMat); footL.position.set(-0.22, 0.14, 0.05); footL.scale.set(1, 0.6, 1.2); var footR = new THREE.Mesh(new THREE.SphereGeometry(0.16, 12, 10), bodyMat); footR.position.set(0.22, 0.14, 0.05); footR.scale.set(1, 0.6, 1.2); var antenna = new THREE.Mesh(new THREE.CylinderGeometry(0.03, 0.03, 0.26, 8), bodyMat); antenna.position.set(0, 1.02, 0); var bulb = new THREE.Mesh(new THREE.SphereGeometry(0.1, 12, 10), new THREE.MeshBasicMaterial({ color: hex })); bulb.position.set(0, 1.18, 0); g.add(body, belly, eyeL, eyeR, pupL, pupR, footL, footR, antenna, bulb); if (HIGH_QUALITY) g.traverse(function (o: any) { if (o.isMesh) { o.castShadow = true; } }); return g; } function tintObject(obj: THREE.Object3D, hex: number) { obj.traverse(function (o: any) { if (o.isMesh && o.material) { var mtl = (Array.isArray(o.material) ? o.material : [o.material]); var out: any[] = []; for (var i = 0; i < mtl.length; i++) { var c = mtl[i].clone(); if (c.color) c.color.setHex(hex); out.push(c); } o.material = Array.isArray(o.material) ? out : out[0]; if (HIGH_QUALITY) o.castShadow = true; } }); } function makeBotMesh(hex: number): THREE.Group { var m = getSlot("mascot"); if (m) { var wrap = new THREE.Group(); var bbox = new THREE.Box3().setFromObject(m); var sz = new THREE.Vector3(); bbox.getSize(sz); var s = sz.y > 0.001 ? 1.1 / sz.y : 1; m.scale.setScalar(s); var bbox2 = new THREE.Box3().setFromObject(m); m.position.y -= bbox2.min.y; // sit on ground tintObject(m, hex); // a small color ring so the color reads even on a monochrome mesh var ring = new THREE.Mesh(new THREE.TorusGeometry(0.42, 0.07, 8, 20), new THREE.MeshBasicMaterial({ color: hex })); ring.rotation.x = Math.PI / 2; ring.position.y = 0.06; wrap.add(m, ring); return wrap; } return buildProceduralBot(hex); } // ammo label: a camera-facing sprite showing the number on a color pill. function makeAmmoSprite(): THREE.Sprite { var cv = document.createElement("canvas"); cv.width = 128; cv.height = 72; var tex = new THREE.CanvasTexture(cv); tex.colorSpace = THREE.SRGBColorSpace; var mtl = new THREE.SpriteMaterial({ map: tex, depthTest: false, transparent: true }); var sp = new THREE.Sprite(mtl); sp.scale.set(0.86, 0.48, 1); (sp as any).__cv = cv; (sp as any).__tex = tex; return sp; } function paintAmmoSprite(sp: THREE.Sprite, ammo: number, hex: number, power: boolean) { var cv = (sp as any).__cv as HTMLCanvasElement; var c = cv.getContext("2d") as CanvasRenderingContext2D; c.clearRect(0, 0, 128, 72); var col = new THREE.Color(hex); var rr = Math.round(col.r * 255), gg = Math.round(col.g * 255), bb = Math.round(col.b * 255); c.fillStyle = "rgba(20,16,38,0.82)"; roundRect(c, 8, 12, 112, 48, 22); c.fill(); c.fillStyle = "rgb(" + rr + "," + gg + "," + bb + ")"; roundRect(c, 12, 16, 104, 40, 18); c.fill(); if (power) { c.strokeStyle = "#fff2b0"; c.lineWidth = 4; roundRect(c, 12, 16, 104, 40, 18); c.stroke(); } c.fillStyle = "#20152e"; c.font = "bold 40px system-ui,-apple-system,Segoe UI,Roboto,sans-serif"; c.textAlign = "center"; c.textBaseline = "middle"; c.fillText(String(ammo), 64, 38); (sp as any).__tex.needsUpdate = true; } function roundRect(c: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) { c.beginPath(); c.moveTo(x + r, y); c.arcTo(x + w, y, x + w, y + h, r); c.arcTo(x + w, y + h, x, y + h, r); c.arcTo(x, y + h, x, y, r); c.arcTo(x, y, x + w, y, r); c.closePath(); } interface Unit { group: THREE.Group; sprite: THREE.Sprite; colorKey: string; colorHex: number; ammo: number; power: boolean; state: string; // "slot" | "ride" | "exit" | "park" slotIdx: number; // when in a slot t: number; // loop fraction when riding fireTimer: number; animT: number; // for exit/park/enter tweens fromX: number; fromZ: number; // park tween source bob: number; // idle bob phase } // =========================================================================== // SLOTS + SUPPLY - five waiting slots along the front. Units park here and are // launched from here. A per-level supply refills empty slots. // =========================================================================== var SLOT_COUNT = 5; var SLOT_Z = LOOP_HZ + 2.15; var slotX: number[] = []; (function () { for (var i = 0; i < SLOT_COUNT; i++) slotX.push((i - (SLOT_COUNT - 1) / 2) * 2.55); })(); // slot trays (Meshy slot 'tray' -> procedural pad) (function placeTrays() { for (var i = 0; i < SLOT_COUNT; i++) { var m = getSlot("tray"); var obj: THREE.Object3D; if (m) { var mm = m.clone(true); var bbox = new THREE.Box3().setFromObject(mm); var sz = new THREE.Vector3(); bbox.getSize(sz); var s = sz.y > 0.001 ? 0.42 / sz.y : 1; mm.scale.setScalar(s); mm.traverse(function (o: any) { if (o.isMesh && HIGH_QUALITY) { o.receiveShadow = true; } }); obj = mm; } else { var pad = new THREE.Mesh(new THREE.CylinderGeometry(0.86, 0.96, 0.22, 22), mat(0x362c66, 0.7, 0.1)); var ringM = new THREE.Mesh(new THREE.TorusGeometry(0.78, 0.06, 8, 24), new THREE.MeshBasicMaterial({ color: 0x8b6cff, transparent: true, opacity: 0.5 })); ringM.rotation.x = Math.PI / 2; ringM.position.y = 0.12; var gg = new THREE.Group(); gg.add(pad, ringM); obj = gg; if (HIGH_QUALITY) pad.receiveShadow = true; } obj.position.set(slotX[i], 0, SLOT_Z); scene.add(obj); } })(); var slots: (Unit | null)[] = [null, null, null, null, null]; var riding: Unit[] = []; var supply: Unit[] = []; var allUnits: Unit[] = []; var CAPACITY = 3; var FIRE_RANGE = 8.4, FIRE_INTERVAL = 0.26, LOOP_SECONDS = 7.6; function makeUnit(colorKey: string, ammo: number, power: boolean): Unit { var hex = CH[colorKey]; var group = makeBotMesh(hex); group.scale.setScalar(0.82); var sprite = makeAmmoSprite(); sprite.position.set(0, 1.7, 0); group.add(sprite); var u: Unit = { group: group, sprite: sprite, colorKey: colorKey, colorHex: hex, ammo: ammo, power: power, state: "slot", slotIdx: -1, t: 0, fireTimer: 0, animT: 0, fromX: 0, fromZ: 0, bob: Math.random() * 6.28, }; paintAmmoSprite(sprite, ammo, hex, power); allUnits.push(u); return u; } function positionSlotUnit(u: Unit) { u.group.position.set(slotX[u.slotIdx], 0, SLOT_Z); u.group.rotation.y = 0; u.group.visible = true; } function refillSlots() { for (var i = 0; i < SLOT_COUNT; i++) { if (!slots[i] && supply.length > 0) { var u = supply.shift() as Unit; u.state = "slot"; u.slotIdx = i; slots[i] = u; scene.add(u.group); positionSlotUnit(u); } } updateHud(); } // =========================================================================== // LEVEL BUILD - lay the picture into cubes + tiles, compute the unit supply. // =========================================================================== var currentPic = PICTURES[0]; var levelState = "play"; // "play" | "won" | "lost" function disposeInstanced() { if (cubesMesh) { scene.remove(cubesMesh); cubesMesh.dispose(); cubesMesh = null; } if (tilesMesh) { scene.remove(tilesMesh); tilesMesh.dispose(); tilesMesh = null; } } function clearUnits() { for (var i = 0; i < allUnits.length; i++) { var g = allUnits[i].group; scene.remove(g); g.traverse(function (o: any) { if (o.isMesh && o.geometry && o.geometry.dispose) { /* shared geos kept */ } }); } allUnits = []; slots = [null, null, null, null, null]; riding = []; supply = []; } function buildLevel(pic: Picture) { currentPic = pic; levelState = "play"; disposeInstanced(); clearUnits(); cells = []; filledCount = 0; var colorCount: { [k: string]: number } = {}; for (var r = 0; r < pic.rows.length && r < GRID; r++) { var rowStr = pic.rows[r]; for (var c = 0; c < rowStr.length && c < GRID; c++) { var ch = rowStr.charAt(c); if (ch === "." || ch === " ") continue; if (!CH[ch]) continue; cells.push({ col: c, row: r, x: cellWorldX(c), z: cellWorldZ(r), colorKey: ch, colorHex: CH[ch], filled: true }); colorCount[ch] = (colorCount[ch] || 0) + 1; } } filledCount = cells.length; cubesMesh = new THREE.InstancedMesh(cubeGeo, cubeMat, cells.length); cubesMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); if (HIGH_QUALITY) { cubesMesh.castShadow = true; cubesMesh.receiveShadow = true; } tilesMesh = new THREE.InstancedMesh(tileGeo, tileMat, cells.length); if (HIGH_QUALITY) tilesMesh.receiveShadow = true; for (var i = 0; i < cells.length; i++) { var cell = cells[i]; tmpObj.position.set(cell.x, CUBE_Y, cell.z); tmpObj.rotation.set(0, 0, 0); tmpObj.scale.set(1, 1, 1); tmpObj.updateMatrix(); cubesMesh.setMatrixAt(i, tmpObj.matrix); cubesMesh.setColorAt(i, tmpColor.setHex(cell.colorHex)); tmpObj.position.set(cell.x, 0.06, cell.z); tmpObj.scale.set(1, 1, 1); tmpObj.updateMatrix(); tilesMesh.setMatrixAt(i, tmpObj.matrix); // dim tile until the cube above is cleared (a dark version of the color) tmpColor.setHex(cell.colorHex).multiplyScalar(0.16); tilesMesh.setColorAt(i, tmpColor); } cubesMesh.instanceMatrix.needsUpdate = true; if (cubesMesh.instanceColor) cubesMesh.instanceColor.needsUpdate = true; tilesMesh.instanceMatrix.needsUpdate = true; if (tilesMesh.instanceColor) tilesMesh.instanceColor.needsUpdate = true; scene.add(tilesMesh); scene.add(cubesMesh); // supply: cover each color with a little slack. power units (Season Pass) add // two big-ammo bots to the front of the queue. var keys: string[] = []; for (var kk in colorCount) if (colorCount.hasOwnProperty(kk)) keys.push(kk); keys.sort(function (a, b) { return colorCount[b] - colorCount[a]; }); var built: Unit[] = []; for (var ki = 0; ki < keys.length; ki++) { var key = keys[ki]; var need = Math.ceil(colorCount[key] * 1.35) + 1; var made = 0, step = 0; var ammoCycle = [6, 8, 5, 7]; while (made < need) { var a = Math.min(ammoCycle[step % ammoCycle.length], need - made); if (a < 3) a = 3; built.push(makeUnit(key, a, false)); made += a; step++; if (step > 40) break; } } // interleave colors so the queue is varied (round-robin by color) supply = interleaveByColor(built); if (hasPass() && keys.length > 0) { // power boosters at the front: 20-ammo of the most common color, 50-ammo of // the second (or the same if only one color). var pk1 = keys[0], pk2 = keys[Math.min(1, keys.length - 1)]; supply.unshift(makeUnit(pk2, 50, true)); supply.unshift(makeUnit(pk1, 20, true)); } refillSlots(); hideWin(); hideLose(); updateHud(); toast("Send a bot down the belt - it blasts its own color."); } function interleaveByColor(list: Unit[]): Unit[] { var byColor: { [k: string]: Unit[] } = {}; var order: string[] = []; for (var i = 0; i < list.length; i++) { var k = list[i].colorKey; if (!byColor[k]) { byColor[k] = []; order.push(k); } byColor[k].push(list[i]); } var out: Unit[] = [], added = true; while (added) { added = false; for (var o = 0; o < order.length; o++) { var arr = byColor[order[o]]; if (arr.length) { out.push(arr.shift() as Unit); added = true; } } } return out; } // =========================================================================== // LAUNCH / RIDE / AUTO-FIRE - the whole game verb set. // =========================================================================== function launchFromSlot(slotIdx: number) { if (levelState !== "play") return; var u = slots[slotIdx]; if (!u) return; if (riding.length >= CAPACITY) { toast("Belt is full - wait for a bot to finish its lap."); playSfx("soft"); return; } slots[slotIdx] = null; u.slotIdx = -1; u.state = "ride"; u.t = HATCH_T; u.fireTimer = 0.15; u.animT = 0; var p = loopPoint(u.t); u.group.position.set(p.x, 0, p.z); u.group.scale.setScalar(0.2); // pop-in from the hatch riding.push(u); playSfx("snap"); refillSlots(); updateHud(); } function recallToSlot(u: Unit): boolean { var free = -1; for (var i = 0; i < SLOT_COUNT; i++) if (!slots[i]) { free = i; break; } if (free < 0) return false; var idx = riding.indexOf(u); if (idx >= 0) riding.splice(idx, 1); u.state = "park"; u.slotIdx = free; slots[free] = u; var p = u.group.position; u.fromX = p.x; u.fromZ = p.z; u.animT = 0; updateHud(); return true; } function nearestTargetCell(u: Unit, px: number, pz: number): number { var best = -1, bestD = FIRE_RANGE * FIRE_RANGE; for (var i = 0; i < cells.length; i++) { var cell = cells[i]; if (!cell.filled || cell.colorKey !== u.colorKey) continue; var dx = cell.x - px, dz = cell.z - pz; var d = dx * dx + dz * dz; if (d < bestD) { bestD = d; best = i; } } return best; } function updateRiding(dt: number) { var loopStep = dt / LOOP_SECONDS; for (var i = riding.length - 1; i >= 0; i--) { var u = riding[i]; if (u.state !== "ride") { riding.splice(i, 1); continue; } // pop-in scale if (u.group.scale.x < 0.82) u.group.scale.setScalar(Math.min(0.82, u.group.scale.x + dt * 2.6)); var prevT = u.t; u.t += loopStep; var p = loopPoint(u.t); u.bob += dt * 8; u.group.position.set(p.x, 0.06 + Math.sin(u.bob) * 0.05, p.z); // face along the belt heading var hy = Math.atan2(loopHeading.x, loopHeading.z); u.group.rotation.y = hy; // auto-fire u.fireTimer -= dt; if (u.fireTimer <= 0 && u.ammo > 0) { var ci = nearestTargetCell(u, p.x, p.z); if (ci >= 0) { fireProjectile(u, p.x, p.z, ci); u.ammo -= 1; paintAmmoSprite(u.sprite, u.ammo, u.colorHex, u.power); u.fireTimer = FIRE_INTERVAL; if (u.ammo <= 0) { beginExit(u); riding.splice(i, 1); continue; } } else { u.fireTimer = FIRE_INTERVAL * 0.5; // scan again shortly } } // completed a lap? if (prevT < 1 && u.t >= 1) { u.t -= 1; if (u.ammo > 0) { if (!recallToSlot(u)) { /* no free slot -> keep riding another lap */ } else { riding.splice(i, 1); continue; } } } } } function beginExit(u: Unit) { u.state = "exit"; u.animT = 0; playSfx("soft"); } function updateExits(dt: number) { for (var i = allUnits.length - 1; i >= 0; i--) { var u = allUnits[i]; if (u.state === "exit") { u.animT += dt; u.group.position.y += dt * 2.2; var s = Math.max(0, 0.82 * (1 - u.animT / 0.45)); u.group.scale.setScalar(s); u.group.rotation.y += dt * 8; if (u.animT >= 0.45) { scene.remove(u.group); allUnits.splice(i, 1); } } else if (u.state === "park") { u.animT += dt; var f = Math.min(1, u.animT / 0.4); var ease = 1 - (1 - f) * (1 - f); u.group.position.x = u.fromX + (slotX[u.slotIdx] - u.fromX) * ease; u.group.position.z = u.fromZ + (SLOT_Z - u.fromZ) * ease; u.group.position.y = Math.sin(f * Math.PI) * 0.6; u.group.scale.setScalar(0.82); if (f >= 1) { u.state = "slot"; positionSlotUnit(u); } } } } // =========================================================================== // PROJECTILES - little glossy candy blobs that arc from a bot to a target cube. // =========================================================================== interface Projectile { mesh: THREE.Mesh; sx: number; sz: number; cellIdx: number; t: number; dur: number; colorHex: number; } var projectiles: Projectile[] = []; var projGeo = new THREE.SphereGeometry(0.17, 12, 10); function fireProjectile(u: Unit, sx: number, sz: number, cellIdx: number) { var m = new THREE.Mesh(projGeo, new THREE.MeshBasicMaterial({ color: u.colorHex })); m.position.set(sx, 0.7, sz); scene.add(m); projectiles.push({ mesh: m, sx: sx, sz: sz, cellIdx: cellIdx, t: 0, dur: 0.24, colorHex: u.colorHex }); } function updateProjectiles(dt: number) { for (var i = projectiles.length - 1; i >= 0; i--) { var pr = projectiles[i]; pr.t += dt; var f = Math.min(1, pr.t / pr.dur); var cell = cells[pr.cellIdx]; var tx = cell.x, tz = cell.z; pr.mesh.position.x = pr.sx + (tx - pr.sx) * f; pr.mesh.position.z = pr.sz + (tz - pr.sz) * f; pr.mesh.position.y = 0.7 + Math.sin(f * Math.PI) * 1.4; // arc if (f >= 1) { scene.remove(pr.mesh); (pr.mesh.material as THREE.Material).dispose(); projectiles.splice(i, 1); popCube(pr.cellIdx); } } } // =========================================================================== // POP + REVEAL - hide the cube, light up the printed tile beneath, spray candy // confetti. When the last cube pops, the finished picture glows -> win. // =========================================================================== interface Popping { idx: number; life: number; } var popping: Popping[] = []; function popCube(idx: number) { var cell = cells[idx]; if (!cell || !cell.filled || !cubesMesh || !tilesMesh) return; cell.filled = false; filledCount--; // brighten the printed tile beneath (reveal) tilesMesh.setColorAt(idx, tmpColor.setHex(cell.colorHex)); if (tilesMesh.instanceColor) tilesMesh.instanceColor.needsUpdate = true; popping.push({ idx: idx, life: 0 }); spawnConfetti(cell.x, CUBE_Y, cell.z, cell.colorHex); playSfx("snap"); if (filledCount <= 0 && levelState === "play") winLevel(); } function updatePopping(dt: number) { if (!cubesMesh || popping.length === 0) return; var changed = false; for (var i = popping.length - 1; i >= 0; i--) { var pp = popping[i]; pp.life += dt; var f = Math.min(1, pp.life / 0.22); var cell = cells[pp.idx]; var s = Math.max(0.0001, 1 - f); tmpObj.position.set(cell.x, CUBE_Y + f * 0.6, cell.z); tmpObj.rotation.set(f * 2, f * 3, 0); tmpObj.scale.set(s, s, s); tmpObj.updateMatrix(); cubesMesh.setMatrixAt(pp.idx, tmpObj.matrix); changed = true; if (f >= 1) { // hide fully tmpObj.position.set(cell.x, -50, cell.z); tmpObj.scale.set(0.0001, 0.0001, 0.0001); tmpObj.rotation.set(0, 0, 0); tmpObj.updateMatrix(); cubesMesh.setMatrixAt(pp.idx, tmpObj.matrix); popping.splice(i, 1); } } if (changed) cubesMesh.instanceMatrix.needsUpdate = true; } // confetti particle bursts interface Spark { pts: THREE.Points; vel: Float32Array; life: number; max: number; } var sparks: Spark[] = []; function spawnConfetti(x: number, y: number, z: number, colorHex: number) { var count = 18; var geo = new THREE.BufferGeometry(); var pos = new Float32Array(count * 3); var vel = new Float32Array(count * 3); var col = new Float32Array(count * 3); var cA = new THREE.Color(colorHex), cB = new THREE.Color(0xffffff); for (var i = 0; i < count; i++) { pos[i * 3] = x; pos[i * 3 + 1] = y + 0.3; pos[i * 3 + 2] = z; var a = Math.random() * 6.29, sp = Math.random() * 2.2; vel[i * 3] = Math.cos(a) * sp; vel[i * 3 + 1] = 2.4 + Math.random() * 2.4; vel[i * 3 + 2] = Math.sin(a) * sp; var m = cA.clone().lerp(cB, Math.random() * 0.5); col[i * 3] = m.r; col[i * 3 + 1] = m.g; col[i * 3 + 2] = m.b; } geo.setAttribute("position", new THREE.BufferAttribute(pos, 3)); geo.setAttribute("color", new THREE.BufferAttribute(col, 3)); var pmat = new THREE.PointsMaterial({ size: 0.2, vertexColors: true, transparent: true, opacity: 1, depthWrite: false }); var pts = new THREE.Points(geo, pmat); scene.add(pts); sparks.push({ pts: pts, vel: vel, life: 0, max: 0.95 }); } function bigConfetti() { for (var i = 0; i < 6; i++) { setTimeout(function () { var keys = Object.keys(CH); spawnConfetti((Math.random() - 0.5) * (GRID * CELL), 2.5, (Math.random() - 0.5) * (GRID * CELL), CH[keys[Math.floor(Math.random() * keys.length)]]); }, i * 150); } } function updateSparks(dt: number) { for (var i = sparks.length - 1; i >= 0; i--) { var s = sparks[i]; s.life += dt; var pos = (s.pts.geometry.getAttribute("position") as THREE.BufferAttribute).array as Float32Array; var n = pos.length / 3; for (var j = 0; j < n; j++) { s.vel[j * 3 + 1] -= 6.2 * dt; pos[j * 3] += s.vel[j * 3] * dt; pos[j * 3 + 1] += s.vel[j * 3 + 1] * dt; pos[j * 3 + 2] += s.vel[j * 3 + 2] * dt; if (pos[j * 3 + 1] < 0.06) { pos[j * 3 + 1] = 0.06; s.vel[j * 3 + 1] *= -0.3; } } (s.pts.geometry.getAttribute("position") as THREE.BufferAttribute).needsUpdate = true; (s.pts.material as THREE.PointsMaterial).opacity = Math.max(0, 1 - s.life / s.max); if (s.life >= s.max) { scene.remove(s.pts); s.pts.geometry.dispose(); (s.pts.material as THREE.Material).dispose(); sparks.splice(i, 1); } } } function playSfx(name: string) { try { var soundOn = W.__mcpitySoundOn ? W.__mcpitySoundOn() : true; if (soundOn && W.MCPityMusic && W.MCPityMusic.sfx) W.MCPityMusic.sfx(name); } catch (_e) {} } // =========================================================================== // WIN / LOSE // =========================================================================== function winLevel() { levelState = "won"; playSfx("win"); bigConfetti(); $("cc-win-t").textContent = "You revealed " + currentPic.name + "!"; $("cc-win").classList.add("on"); } function checkLose() { if (levelState !== "play") return; if (filledCount <= 0) return; // no rideable ammo left anywhere? if (riding.length > 0 || supply.length > 0) return; for (var i = 0; i < SLOT_COUNT; i++) if (slots[i]) return; // any parking/exiting units still animating? for (var j = 0; j < allUnits.length; j++) if (allUnits[j].state === "park") return; levelState = "lost"; $("cc-lose").classList.add("on"); } function hideWin() { var e = document.getElementById("cc-win"); if (e) e.classList.remove("on"); } function hideLose() { var e = document.getElementById("cc-lose"); if (e) e.classList.remove("on"); } // =========================================================================== // HUD - level picker (free + Season Pass), status, controls, win/lose overlays. // =========================================================================== var css = document.createElement("style"); css.textContent = "#cc-ui{position:absolute;inset:0;pointer-events:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#f2ecff;user-select:none;-webkit-user-select:none}" + "#cc-panel{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:8px;pointer-events:auto;max-width:min(92vw,340px)}" + ".cc-card{background:rgba(24,18,46,.84);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:11px 12px;backdrop-filter:blur(4px)}" + ".cc-lab{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#b6a8dd;font-weight:700;margin-bottom:7px}" + ".cc-row{display:flex;flex-wrap:wrap;gap:6px}" + ".cc-chip{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#f2ecff;border-radius:99px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}" + ".cc-chip.on{background:#8b6cff;border-color:#8b6cff;color:#1a1330}" + ".cc-chip.lock{opacity:.72}" + ".cc-chip .k{font-size:11px;opacity:.85;margin-left:4px}" + "#cc-actions{display:flex;gap:6px;flex-wrap:wrap}" + ".cc-btn{border:1px solid rgba(255,255,255,.16);background:rgba(24,18,46,.84);color:#f2ecff;border-radius:11px;padding:9px 13px;font-size:13px;font-weight:700;cursor:pointer}" + ".cc-btn.pri{background:#8b6cff;border-color:#8b6cff;color:#1a1330}" + "#cc-prog{position:absolute;top:12px;left:50%;transform:translateX(-50%);pointer-events:none;display:flex;gap:8px}" + "#cc-prog .chip{background:rgba(24,18,46,.84);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:8px 14px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}" + "#cc-toast{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);background:rgba(24,18,46,.94);border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:9px 15px;font-size:14px;max-width:82%;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}" + "#cc-toast.show{opacity:1}" + ".cc-over{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:rgba(14,10,30,.8);pointer-events:auto;padding:24px}" + ".cc-over.on{display:flex}" + ".cc-over .big{font-size:32px;font-weight:800}" + ".cc-over .sub{font-size:15px;color:#b6a8dd}"; document.head.appendChild(css); var ui = document.createElement("div"); ui.id = "cc-ui"; ui.innerHTML = "

" + "

Picture

" + "

" + "" + "" + "

" + "

0 cubes

Belt 0/3

" + "

Picture complete!

" + "

Out of bots!

Some cubes are still standing. Give this picture another go.

"; root.appendChild(ui); function $(id: string): HTMLElement { return document.getElementById(id) as HTMLElement; } var elToast = $("cc-toast"), toastTimer: any = null; function toast(t: string) { elToast.textContent = t; elToast.classList.add("show"); if (toastTimer) clearTimeout(toastTimer); toastTimer = setTimeout(function () { elToast.classList.remove("show"); }, 2600); } function picLocked(pic: Picture): boolean { return pic.premium && !hasPass(); } function renderPicChips() { var wrap = $("cc-pics"); wrap.innerHTML = ""; for (var i = 0; i < PICTURES.length; i++) { (function (pic: Picture) { var chip = document.createElement("button"); chip.className = "cc-chip" + (pic === currentPic ? " on" : "") + (picLocked(pic) ? " lock" : ""); chip.innerHTML = pic.name + (picLocked(pic) ? " ★ Pass" : ""); chip.addEventListener("click", function () { if (picLocked(pic)) { toast(pic.name + " is a Season Pass picture. Unlock the pass to play it."); return; } playSfx("click"); buildLevel(pic); renderPicChips(); }); wrap.appendChild(chip); })(PICTURES[i]); } } function updateHud() { var cubesEl = document.getElementById("cc-cubes"); if (cubesEl) cubesEl.textContent = filledCount + (filledCount === 1 ? " cube" : " cubes"); var beltEl = document.getElementById("cc-belt"); if (beltEl) beltEl.textContent = "Belt " + riding.length + "/" + CAPACITY; } $("cc-restart").addEventListener("click", function () { playSfx("click"); buildLevel(currentPic); }); $("cc-help").addEventListener("click", function () { if (W.MCPityShell) W.MCPityShell.openSettings(); }); $("cc-win-next").addEventListener("click", function () { hideWin(); playSfx("click"); // advance to the next unlocked picture var start = PICTURES.indexOf(currentPic); for (var i = 1; i <= PICTURES.length; i++) { var pic = PICTURES[(start + i) % PICTURES.length]; if (!picLocked(pic)) { buildLevel(pic); renderPicChips(); return; } } buildLevel(currentPic); renderPicChips(); }); $("cc-lose-again").addEventListener("click", function () { hideLose(); playSfx("click"); buildLevel(currentPic); }); try { ENT.on("change", function () { renderPicChips(); if (levelState === "play") { supplyRefreshPowerUnits(); } }); } catch (_e) {} // if the pass arrives mid-level and there are no power units queued yet, add them. function supplyRefreshPowerUnits() { if (!hasPass()) return; for (var i = 0; i < supply.length; i++) if (supply[i].power) return; for (var j = 0; j < allUnits.length; j++) if (allUnits[j].power) return; // find colors present var counts: { [k: string]: number } = {}; for (var c = 0; c < cells.length; c++) if (cells[c].filled) counts[cells[c].colorKey] = (counts[cells[c].colorKey] || 0) + 1; var keys: string[] = []; for (var kk in counts) if (counts.hasOwnProperty(kk)) keys.push(kk); if (!keys.length) return; keys.sort(function (a, b) { return counts[b] - counts[a]; }); supply.unshift(makeUnit(keys[Math.min(1, keys.length - 1)], 50, true)); supply.unshift(makeUnit(keys[0], 20, true)); refillSlots(); toast("Season Pass boosters added to your queue."); } // =========================================================================== // INPUT - tap/click a bot in a slot to launch it; tap a riding bot to recall it. // =========================================================================== var ray = new THREE.Raycaster(); var ndc = new THREE.Vector2(); function pickUnitAt(clientX: number, clientY: number): Unit | null { var rect = canvas.getBoundingClientRect(); ndc.x = ((clientX - rect.left) / rect.width) * 2 - 1; ndc.y = -((clientY - rect.top) / rect.height) * 2 + 1; ray.setFromCamera(ndc, camera); var meshes: THREE.Object3D[] = []; for (var i = 0; i < allUnits.length; i++) { if (allUnits[i].state === "slot" || allUnits[i].state === "ride") meshes.push(allUnits[i].group); } var hits = ray.intersectObjects(meshes, true); if (!hits.length) return null; var obj: THREE.Object3D | null = hits[0].object; while (obj) { for (var u = 0; u < allUnits.length; u++) if (allUnits[u].group === obj) return allUnits[u]; obj = obj.parent; } return null; } function onTap(clientX: number, clientY: number) { if (!W.__mcpityStarted || levelState !== "play") return; var u = pickUnitAt(clientX, clientY); if (!u) return; if (u.state === "slot") { launchFromSlot(u.slotIdx); } else if (u.state === "ride") { if (recallToSlot(u)) { playSfx("soft"); } } } canvas.addEventListener("pointerdown", function (e: PointerEvent) { e.preventDefault(); onTap(e.clientX, e.clientY); }); // =========================================================================== // LOOP // =========================================================================== var last = 0; function frame(t: number) { requestAnimationFrame(frame); var dt = Math.min(0.05, (t - last) / 1000 || 0); last = t; var started = !!W.__mcpityStarted; // scroll the belt stripes to sell the conveyor motion beltTex.offset.x -= dt * (started && levelState === "play" ? 0.55 : 0.12); // idle bob for waiting bots for (var s = 0; s < SLOT_COUNT; s++) { var su = slots[s]; if (su && su.state === "slot") { su.bob += dt * 3; su.group.position.y = Math.abs(Math.sin(su.bob)) * 0.09; } } if (started && levelState === "play") { updateRiding(dt); updateProjectiles(dt); updatePopping(dt); updateExits(dt); checkLose(); updateHud(); } else { updateExits(dt); updatePopping(dt); } updateSparks(dt); // keep ammo sprites upright + readable renderer.render(scene, camera); } // build the first picture behind the splash, then begin on Play. renderPicChips(); buildLevel(PICTURES[0]); requestAnimationFrame(frame); if (W.MCPityShell && W.MCPityShell.onStart) { W.MCPityShell.onStart(function () { if (levelState !== "play") buildLevel(currentPic); toast("Tap a bot to send it down the belt."); }); } // =========================================================================== // DISPOSE - harness teardown hook. // =========================================================================== (window as any).__mcpity_dispose = function () { try { renderer.setAnimationLoop(null); disposeInstanced(); for (var i = 0; i < sparks.length; i++) { scene.remove(sparks[i].pts); } renderer.dispose(); var c = renderer.domElement; if (c && c.parentNode) c.parentNode.removeChild(c); var uiEl = document.getElementById("cc-ui"); if (uiEl && uiEl.parentNode) uiEl.parentNode.removeChild(uiEl); } catch (_e) {} }; // 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) {}