/* ============================================================================ GEM SORT 3D — Museum Heist Edition MCPity Web Engine single-file game. Presentation-only upgrade of the 2D canvas version: identical state layer + test hook, Three.js rendering. Mounts into #mcpity-root; pointer-first; safe storage; synth Web Audio. Test hook: (window as any).__gemsort (same shape as the 2D build) ========================================================================== */ import * as THREE from "three"; /* --------------------------------------------------------------------------- Asset-swap seam (INLINE shim of games/_shared/asset-provider.ts WindowAssets). INLINED, not imported, on purpose: the /play build (scripts/build-game.mjs) writes ONE self-contained dist/index.ts and serves that single file to the in-browser esbuild-wasm bundler with no sibling files present. An `import { Assets } from "../../_shared/asset-provider"` would fail to resolve at bundle time and break the game at /play. This tiny object reproduces WindowAssets' runtime behavior with zero external imports: it reads window.MCPityAssets when a native store wrapper has injected it (via installAssetPack, see games/gem-sort/store-boot.ts), else returns null so every hero factory takes its procedural branch. On /play there is no MCPityAssets, so getModel() resolves to null and NOTHING changes — the game stays 100% procedural. ------------------------------------------------------------------------- */ interface InjectedAssetGlobal { has?(key: string): boolean; getModel?(key: string): Promise | THREE.Object3D | null; getTexture?(key: string): THREE.Texture | null; } const Assets = { has(key: string): boolean { try { const g = (globalThis as unknown as { MCPityAssets?: InjectedAssetGlobal }).MCPityAssets; if (g && typeof g.has === "function") return !!g.has(key); } catch (_e) { /* absent / broken global -> procedural */ } return false; }, async getModel(key: string): Promise { try { const g = (globalThis as unknown as { MCPityAssets?: InjectedAssetGlobal }).MCPityAssets; if (g && typeof g.getModel === "function") { const model = await g.getModel(key); return model ?? null; } } catch (_e) { /* fall through to procedural */ } return null; }, getTexture(key: string): THREE.Texture | null { try { const g = (globalThis as unknown as { MCPityAssets?: InjectedAssetGlobal }).MCPityAssets; if (g && typeof g.getTexture === "function") return g.getTexture(key) ?? null; } catch (_e) { /* fall through to procedural */ } return null; }, }; // ------------------------------ Types & data ------------------------------- // (state layer copied verbatim from the 2D build) interface Level { level: number; colors: number; cases: number; layers: number; minMoves: number; seed: number; arrangement: number[][]; // bottom -> top color indices per case } const LEVELS: Level[] = [{"level":1,"colors":3,"cases":5,"layers":4,"minMoves":13,"seed":100001,"arrangement":[[2,0,1,0],[2,0,1,2],[0,1,2,1],[],[]]},{"level":2,"colors":3,"cases":5,"layers":4,"minMoves":8,"seed":200001,"arrangement":[[1,2,0,1],[0,0,2,2],[0,1,1,2],[],[]]},{"level":3,"colors":3,"cases":5,"layers":4,"minMoves":6,"seed":300001,"arrangement":[[2,1,1,1],[0,0,0,2],[0,2,1,2],[],[]]},{"level":4,"colors":4,"cases":6,"layers":4,"minMoves":13,"seed":400001,"arrangement":[[0,2,3,2],[0,3,1,0],[3,2,1,1],[2,0,3,1],[],[]]},{"level":5,"colors":4,"cases":6,"layers":4,"minMoves":19,"seed":500001,"arrangement":[[0,1,2,1],[2,1,3,2],[3,0,3,0],[2,1,3,0],[],[]]},{"level":6,"colors":4,"cases":6,"layers":4,"minMoves":19,"seed":600001,"arrangement":[[0,3,3,2],[3,2,1,0],[1,0,2,1],[0,1,2,3],[],[]]},{"level":7,"colors":4,"cases":6,"layers":4,"minMoves":10,"seed":700001,"arrangement":[[2,0,3,1],[2,0,1,3],[1,1,0,0],[3,3,2,2],[],[]]},{"level":8,"colors":4,"cases":6,"layers":4,"minMoves":19,"seed":800001,"arrangement":[[2,2,3,0],[1,2,1,0],[3,2,3,0],[1,0,3,1],[],[]]},{"level":9,"colors":5,"cases":7,"layers":4,"minMoves":18,"seed":900001,"arrangement":[[1,1,4,4],[0,2,4,2],[0,3,0,3],[3,2,1,0],[3,1,2,4],[],[]]},{"level":10,"colors":5,"cases":7,"layers":4,"minMoves":19,"seed":1000001,"arrangement":[[3,1,0,0],[3,4,2,4],[0,2,4,0],[2,3,1,3],[2,1,1,4],[],[]]},{"level":11,"colors":5,"cases":7,"layers":4,"minMoves":18,"seed":1100001,"arrangement":[[2,3,1,0],[1,4,1,2],[2,0,4,3],[0,3,4,3],[1,4,2,0],[],[]]},{"level":12,"colors":5,"cases":7,"layers":4,"minMoves":16,"seed":1200001,"arrangement":[[0,2,2,4],[2,1,4,3],[2,3,0,3],[0,0,4,1],[3,1,1,4],[],[]]},{"level":13,"colors":5,"cases":7,"layers":4,"minMoves":18,"seed":1300001,"arrangement":[[1,2,1,3],[0,2,0,3],[0,2,4,4],[3,2,0,1],[1,4,4,3],[],[]]},{"level":14,"colors":5,"cases":7,"layers":4,"minMoves":22,"seed":1400001,"arrangement":[[2,4,3,1],[3,1,2,1],[2,0,0,3],[0,4,1,3],[2,4,0,4],[],[]]},{"level":15,"colors":5,"cases":7,"layers":4,"minMoves":15,"seed":1500001,"arrangement":[[4,3,4,4],[1,1,0,2],[4,2,2,0],[1,0,3,3],[3,1,2,0],[],[]]},{"level":16,"colors":6,"cases":8,"layers":4,"minMoves":23,"seed":1600001,"arrangement":[[2,2,3,1],[3,4,0,0],[4,5,5,4],[3,5,1,1],[2,4,0,2],[0,5,3,1],[],[]]},{"level":17,"colors":6,"cases":8,"layers":4,"minMoves":23,"seed":1700001,"arrangement":[[0,0,3,1],[3,4,1,2],[0,1,3,5],[0,3,2,2],[4,5,5,4],[4,2,5,1],[],[]]},{"level":18,"colors":6,"cases":8,"layers":4,"minMoves":20,"seed":1800001,"arrangement":[[5,4,2,4],[5,3,0,4],[1,0,4,1],[2,2,3,0],[5,3,1,2],[3,0,5,1],[],[]]},{"level":19,"colors":6,"cases":8,"layers":4,"minMoves":21,"seed":1900001,"arrangement":[[2,2,3,5],[3,4,4,3],[4,0,4,1],[5,1,2,1],[1,5,0,0],[3,2,0,5],[],[]]},{"level":20,"colors":6,"cases":8,"layers":4,"minMoves":19,"seed":2000001,"arrangement":[[5,4,4,1],[3,4,5,2],[5,1,0,0],[5,4,2,2],[1,3,0,1],[0,3,3,2],[],[]]},{"level":21,"colors":6,"cases":8,"layers":4,"minMoves":21,"seed":2100001,"arrangement":[[2,5,0,0],[1,0,2,3],[3,2,2,4],[0,3,1,1],[4,5,4,1],[5,3,5,4],[],[]]},{"level":22,"colors":6,"cases":8,"layers":4,"minMoves":24,"seed":2200001,"arrangement":[[1,2,0,3],[0,1,2,3],[0,4,5,5],[3,4,4,1],[0,5,2,3],[1,2,5,4],[],[]]},{"level":23,"colors":7,"cases":9,"layers":4,"minMoves":22,"seed":2300001,"arrangement":[[2,2,0,4],[3,4,5,3],[2,3,5,1],[5,6,6,4],[6,6,1,0],[3,0,2,1],[1,0,4,5],[],[]]},{"level":24,"colors":7,"cases":9,"layers":4,"minMoves":22,"seed":2400001,"arrangement":[[6,6,0,3],[1,1,6,0],[4,0,6,2],[4,5,3,3],[2,1,2,2],[4,0,3,1],[5,5,4,5],[],[]]},{"level":25,"colors":7,"cases":9,"layers":4,"minMoves":22,"seed":2500001,"arrangement":[[5,5,4,1],[4,1,0,4],[6,6,6,5],[1,2,0,4],[0,5,2,3],[0,2,2,3],[3,3,1,6],[],[]]},{"level":26,"colors":7,"cases":9,"layers":4,"minMoves":29,"seed":2600001,"arrangement":[[3,5,3,0],[0,1,4,5],[2,3,6,6],[3,1,0,1],[2,5,2,4],[4,6,4,5],[2,1,6,0],[],[]]},{"level":27,"colors":7,"cases":9,"layers":4,"minMoves":32,"seed":2700001,"arrangement":[[0,5,3,0],[6,2,0,0],[4,6,1,2],[1,6,3,4],[2,6,1,1],[4,2,3,4],[5,3,5,5],[],[]]},{"level":28,"colors":7,"cases":9,"layers":4,"minMoves":36,"seed":2800001,"arrangement":[[1,3,1,2],[5,2,3,4],[3,6,2,5],[5,6,6,1],[4,0,1,0],[3,5,4,0],[6,0,2,4],[],[]]},{"level":29,"colors":7,"cases":9,"layers":4,"minMoves":29,"seed":2900001,"arrangement":[[6,4,1,4],[4,0,5,5],[3,2,5,3],[0,4,2,6],[1,5,0,1],[0,1,2,6],[3,2,6,3],[],[]]},{"level":30,"colors":7,"cases":9,"layers":4,"minMoves":25,"seed":3000001,"arrangement":[[5,6,6,4],[1,5,1,0],[3,0,1,6],[2,0,2,2],[4,3,0,2],[4,5,4,5],[3,3,1,6],[],[]]},{"level":31,"colors":8,"cases":10,"layers":4,"minMoves":30,"seed":3100001,"arrangement":[[2,2,0,7],[3,0,2,1],[1,0,5,6],[5,2,3,4],[7,4,5,6],[0,7,6,4],[1,5,3,1],[3,7,4,6],[],[]]},{"level":32,"colors":8,"cases":10,"layers":4,"minMoves":34,"seed":3200001,"arrangement":[[1,0,1,6],[3,3,6,2],[7,7,0,3],[7,1,5,6],[1,2,5,2],[0,7,3,4],[6,2,5,4],[0,4,4,5],[],[]]},{"level":33,"colors":8,"cases":10,"layers":4,"minMoves":27,"seed":3300001,"arrangement":[[6,4,7,6],[0,0,2,6],[7,5,6,5],[7,2,1,0],[7,3,4,3],[2,2,5,1],[1,3,3,0],[4,1,4,5],[],[]]},{"level":34,"colors":8,"cases":10,"layers":4,"minMoves":29,"seed":3400001,"arrangement":[[7,3,6,6],[0,0,1,4],[1,0,2,3],[1,4,1,6],[3,2,5,2],[2,5,7,5],[3,7,4,5],[0,4,6,7],[],[]]},{"level":35,"colors":8,"cases":10,"layers":4,"minMoves":38,"seed":3500001,"arrangement":[[5,0,1,1],[1,7,4,0],[2,1,3,0],[5,0,3,6],[2,4,6,2],[3,7,3,6],[7,4,2,7],[4,6,5,5],[],[]]},{"level":36,"colors":8,"cases":10,"layers":4,"minMoves":36,"seed":3600001,"arrangement":[[6,3,5,6],[7,3,1,7],[5,2,0,2],[3,5,0,6],[5,4,1,0],[7,1,1,2],[4,7,4,6],[3,0,2,4],[],[]]},{"level":37,"colors":8,"cases":10,"layers":4,"minMoves":30,"seed":3700001,"arrangement":[[0,5,0,1],[0,4,2,7],[0,4,4,3],[6,5,1,3],[6,3,3,5],[4,2,1,1],[7,6,5,2],[7,2,6,7],[],[]]},{"level":38,"colors":8,"cases":10,"layers":4,"minMoves":27,"seed":3800001,"arrangement":[[2,4,3,5],[4,7,0,0],[1,2,6,2],[3,1,2,1],[3,4,0,6],[5,5,7,7],[0,1,4,6],[6,5,7,3],[],[]]},{"level":39,"colors":8,"cases":10,"layers":4,"minMoves":27,"seed":3900001,"arrangement":[[1,1,0,6],[0,4,3,7],[7,0,2,4],[0,6,5,7],[5,5,2,4],[3,1,7,5],[2,1,6,6],[3,3,4,2],[],[]]},{"level":40,"colors":9,"cases":10,"layers":4,"minMoves":28,"seed":4000421,"arrangement":[[8,8,0,8],[3,5,7,5],[7,2,1,7],[2,6,0,3],[6,3,0,1],[8,0,2,3],[5,5,6,4],[1,7,1,2],[6,4,4,4],[]]},{"level":41,"colors":9,"cases":11,"layers":4,"minMoves":34,"seed":4100001,"arrangement":[[5,3,4,1],[1,8,1,6],[8,2,4,5],[7,0,0,5],[0,5,0,8],[7,6,4,7],[8,3,3,1],[2,2,4,2],[3,6,7,6],[],[]]},{"level":42,"colors":9,"cases":11,"layers":4,"minMoves":46,"seed":4200001,"arrangement":[[4,3,7,5],[5,2,3,0],[4,0,7,0],[2,1,5,7],[3,5,3,1],[6,6,1,2],[6,8,2,8],[7,8,4,0],[8,4,1,6],[],[]]},{"level":43,"colors":9,"cases":10,"layers":4,"minMoves":25,"seed":4300057,"arrangement":[[0,0,1,7],[8,3,5,4],[1,6,7,2],[2,8,0,3],[6,4,1,7],[5,5,5,0],[1,2,6,7],[4,2,3,6],[3,4,8,8],[]]},{"level":44,"colors":9,"cases":11,"layers":4,"minMoves":35,"seed":4400001,"arrangement":[[7,4,3,7],[8,1,5,4],[1,2,7,5],[6,8,2,8],[4,3,1,0],[0,6,2,2],[5,0,3,0],[6,7,3,4],[6,5,8,1],[],[]]},{"level":45,"colors":9,"cases":11,"layers":4,"minMoves":41,"seed":4500001,"arrangement":[[3,7,6,2],[1,0,8,5],[4,5,3,0],[2,4,0,1],[0,8,7,8],[2,6,2,1],[5,6,4,3],[6,3,5,1],[7,4,7,8],[],[]]},{"level":46,"colors":10,"cases":11,"layers":4,"minMoves":33,"seed":4600190,"arrangement":[[9,5,9,8],[1,1,3,8],[9,2,7,7],[3,5,4,5],[0,6,2,2],[0,0,4,7],[1,0,9,8],[2,1,5,8],[4,7,6,6],[6,3,4,3],[]]},{"level":47,"colors":10,"cases":12,"layers":4,"minMoves":36,"seed":4700001,"arrangement":[[2,7,5,8],[8,5,0,8],[9,3,3,6],[6,3,7,1],[7,2,1,6],[7,1,4,1],[2,0,5,9],[4,4,9,2],[5,8,6,0],[3,4,0,9],[],[]]},{"level":48,"colors":10,"cases":12,"layers":4,"minMoves":46,"seed":4800001,"arrangement":[[5,9,8,5],[4,1,2,1],[7,3,8,5],[0,3,8,9],[5,7,2,4],[7,1,1,0],[7,6,6,0],[3,9,8,6],[9,2,3,6],[0,4,4,2],[],[]]},{"level":49,"colors":10,"cases":11,"layers":4,"minMoves":31,"seed":4900239,"arrangement":[[5,5,6,6],[0,1,2,2],[3,7,0,8],[2,0,9,5],[1,0,3,9],[4,7,4,1],[6,8,7,9],[8,4,9,7],[8,2,4,5],[3,6,1,3],[]]},{"level":50,"colors":10,"cases":12,"layers":4,"minMoves":43,"seed":5000001,"arrangement":[[9,2,4,1],[9,1,5,0],[3,9,8,0],[8,5,8,1],[3,0,6,8],[5,2,7,0],[7,5,6,7],[3,6,4,9],[4,6,2,3],[7,2,1,4],[],[]]}] as Level[]; const CAP = 4; const MAX_UNDOS = 5; // Rarity-ordered gem roster (same 10 colors as the 2D build). const GEM_COLORS = [ "#3ddc68", // Common green "#3b82f6", // Rare blue "#a855f7", // Epic purple "#f5c542", // Legendary gold "#ef4444", // crimson "#22d3ee", // cyan "#ec4899", // pink "#f97316", // orange "#e5e7eb", // white "#14b8a6", // teal ]; const NEON_CYAN = 0x22d3ee; const NEON_MAGENTA = 0xe879f9; const GOLD = 0xf5c542; // --------------------------- Safe storage wrapper --------------------------- // (verbatim from 2D) const memStore: Record = {}; function storeGet(k: string): string | null { try { return window.localStorage.getItem(k); } catch { return k in memStore ? memStore[k] : null; } } function storeSet(k: string, v: string): void { try { window.localStorage.setItem(k, v); } catch { /* opaque origin */ } memStore[k] = v; } interface Progress { unlocked: number; completed: number[]; } function loadProgress(): Progress { try { const raw = storeGet("gemsort:progress"); if (raw) { const p = JSON.parse(raw); if (typeof p.unlocked === "number" && Array.isArray(p.completed)) return p; } } catch { /* ignore */ } return { unlocked: 1, completed: [] }; } function saveProgress(p: Progress): void { storeSet("gemsort:progress", JSON.stringify(p)); } // ------------------------------- Audio (synth) ------------------------------ // (verbatim from 2D) let actx: AudioContext | null = null; function audio(): AudioContext | null { if (!actx) { try { const AC = (window as any).AudioContext || (window as any).webkitAudioContext; if (AC) actx = new AC(); } catch { actx = null; } } if (actx && actx.state === "suspended") { actx.resume().catch(() => {}); } return actx; } function tone(freq: number, start: number, dur: number, type: OscillatorType, vol: number, slide = 0): void { const ac = actx; if (!ac) return; try { const t0 = ac.currentTime + start; const osc = ac.createOscillator(); const g = ac.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, t0); if (slide !== 0) osc.frequency.exponentialRampToValueAtTime(Math.max(30, freq + slide), t0 + dur); g.gain.setValueAtTime(0.0001, t0); g.gain.exponentialRampToValueAtTime(vol, t0 + 0.008); g.gain.exponentialRampToValueAtTime(0.0001, t0 + dur); osc.connect(g); g.connect(ac.destination); osc.start(t0); osc.stop(t0 + dur + 0.02); } catch { /* audio best-effort */ } } function sfxClink(delay: number, gemColor: number): void { if (!audio()) return; const base = 720 + gemColor * 55 + Math.random() * 60; tone(base, delay, 0.11, "triangle", 0.16); tone(base * 2.01, delay, 0.06, "sine", 0.07); } function sfxError(): void { if (!audio()) return; tone(180, 0, 0.12, "square", 0.09, -60); tone(120, 0.06, 0.12, "square", 0.08, -40); } function sfxSolved(delay: number): void { if (!audio()) return; tone(880, delay, 0.16, "sine", 0.14); tone(1318.5, delay + 0.09, 0.22, "sine", 0.13); } function sfxFanfare(delay: number): void { if (!audio()) return; const notes = [523.25, 659.25, 783.99, 1046.5, 1318.5, 1567.98]; notes.forEach((f, i) => { tone(f, delay + i * 0.09, 0.28, "triangle", 0.13); tone(f / 2, delay + i * 0.09, 0.3, "sine", 0.05); }); tone(2093, delay + notes.length * 0.09, 0.5, "sine", 0.08); } // -------------------------------- Game state -------------------------------- // (verbatim from 2D; Flight/Particle are now 3D visual records) type Screen = "map" | "game"; interface Snapshot { tubes: number[][]; boosterUsed: boolean; } let screen: Screen = "map"; let progress: Progress = loadProgress(); let levelIdx = 0; // 0-based into LEVELS let tubes: number[][] = []; let selected = -1; let undoStack: Snapshot[] = []; let undosLeft = MAX_UNDOS; let boosterUsed = false; let won = false; let wonAt = 0; let moveCount = 0; let shakes: { idx: number; t0: number }[] = []; let solvedGlowSince: Record = {}; let now = 0; // updated each frame (performance.now()) function deepTubes(src: number[][]): number[][] { return src.map((t) => t.slice()); } function isTubeSolved(t: number[]): boolean { return t.length === CAP && t.every((c) => c === t[0]); } function isWonState(ts: number[][]): boolean { return ts.every((t) => t.length === 0 || isTubeSolved(t)); } function topRun(t: number[]): number { if (t.length === 0) return 0; const top = t[t.length - 1]; let run = 1; while (run < t.length && t[t.length - 1 - run] === top) run++; return run; } function canPour(src: number, dst: number): number { if (src === dst) return 0; const s = tubes[src], d = tubes[dst]; if (!s || !d || s.length === 0 || d.length === CAP) return 0; if (isTubeSolved(s)) return 0; const run = topRun(s); if (d.length > 0 && d[d.length - 1] !== s[s.length - 1]) return 0; return Math.min(run, CAP - d.length); } // ------------------------------ Mount + renderer ----------------------------- const rootEl: HTMLElement = document.getElementById("mcpity-root") || document.body; if (rootEl === document.body) { document.body.style.margin = "0"; document.body.style.overflow = "hidden"; document.body.style.position = "relative"; document.body.style.minHeight = "100vh"; } rootEl.style.margin = "0"; rootEl.style.background = "#04050b"; const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" }); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.15; renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); const glCanvas = renderer.domElement; glCanvas.style.display = "block"; glCanvas.style.width = "100%"; glCanvas.style.height = "100%"; glCanvas.style.touchAction = "none"; glCanvas.style.userSelect = "none"; (glCanvas.style as any).webkitTapHighlightColor = "transparent"; rootEl.appendChild(glCanvas); let cssW = 0, cssH = 0; // --------------------------------- Scene ------------------------------------ const scene = new THREE.Scene(); scene.background = new THREE.Color(0x04050b); scene.fog = new THREE.Fog(0x04050b, 12, 40); const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100); const camBase = new THREE.Vector3(0, 1.2, 9); const camTarget = new THREE.Vector3(0, 0, 0); // Lights (budget: 4 total) const ambLight = new THREE.AmbientLight(0x2a3448, 1.1); const keyLight = new THREE.DirectionalLight(0xffe2b0, 1.7); // warm key keyLight.position.set(3.5, 7, 6); const rimCyan = new THREE.PointLight(NEON_CYAN, 90, 40, 2); // neon rim rimCyan.position.set(-4.8, 2.6, 3.8); const rimMagenta = new THREE.PointLight(NEON_MAGENTA, 80, 40, 2); // neon rim rimMagenta.position.set(4.8, 1.2, 4.4); scene.add(ambLight, keyLight, rimCyan, rimMagenta); // Museum backdrop: vertical-gradient wall plane (fog disabled so gradient reads) const bgGeom = new THREE.PlaneGeometry(70, 45, 1, 1); { const top = new THREE.Color(0x020308); const bot = new THREE.Color(0x16223a); const cols = new Float32Array([ top.r, top.g, top.b, top.r, top.g, top.b, // top-left, top-right bot.r, bot.g, bot.b, bot.r, bot.g, bot.b, // bottom-left, bottom-right ]); bgGeom.setAttribute("color", new THREE.BufferAttribute(cols, 3)); } const bgPlane = new THREE.Mesh(bgGeom, new THREE.MeshBasicMaterial({ vertexColors: true, fog: false })); bgPlane.position.set(0, 2, -9); scene.add(bgPlane); // Dark glossy floor (reflection-fake: low roughness + metal picks up the neon rims) const floorMesh = new THREE.Mesh( new THREE.PlaneGeometry(60, 60), new THREE.MeshStandardMaterial({ color: 0x10141f, roughness: 0.16, metalness: 0.4 }), ); floorMesh.rotation.x = -Math.PI / 2; scene.add(floorMesh); // ------------------------- Case + gem geometry/materials --------------------- const CASE_W = 0.8, CASE_H = 2.3, CASE_D = 0.8; const GAP_X = 0.42, ROW_GAP = 1.05; const SLOT_H = (CASE_H - 0.16) / CAP; const LIFT_AMT = SLOT_H * 0.62; const caseBoxGeom = new THREE.BoxGeometry(CASE_W, CASE_H, CASE_D); const caseEdgeGeom = new THREE.EdgesGeometry(caseBoxGeom); const pedestalGeom = new THREE.BoxGeometry(CASE_W + 0.3, 0.16, CASE_D + 0.3); const hitGeom = new THREE.BoxGeometry(CASE_W + 0.3, CASE_H + 0.8, CASE_D + 0.4); const glassBaseMat = new THREE.MeshPhysicalMaterial({ color: 0x9fd4ff, transparent: true, opacity: 0.14, roughness: 0.08, metalness: 0, clearcoat: 0.6, depthWrite: false, }); const pedestalMat = new THREE.MeshStandardMaterial({ color: 0x1c2436, roughness: 0.3, metalness: 0.45 }); const hitMat = new THREE.MeshBasicMaterial({ visible: false }); // Faceted brilliant-cut gem: lathe profile (crown + girdle + pavilion), 8 sides, // flat shading gives the hard facet look. const gemGeom = new THREE.LatheGeometry([ new THREE.Vector2(0.001, -0.30), // pavilion tip new THREE.Vector2(0.30, -0.05), // girdle bottom new THREE.Vector2(0.32, 0.03), // girdle top new THREE.Vector2(0.18, 0.14), // crown new THREE.Vector2(0.001, 0.16), // table center ], 8); const GEM_SCALE = Math.min((CASE_W - 0.14) / 0.64, (SLOT_H - 0.04) / 0.46); const gemMats = GEM_COLORS.map((hex) => { const c = new THREE.Color(hex); return new THREE.MeshPhysicalMaterial({ color: c, flatShading: true, metalness: 0.1, roughness: 0.15, clearcoat: 1, clearcoatRoughness: 0.2, emissive: c.clone().multiplyScalar(0.25), }); }); const COL_CYAN = new THREE.Color(NEON_CYAN); const COL_MAGENTA = new THREE.Color(NEON_MAGENTA); const COL_GOLD = new THREE.Color(GOLD); // -------------------------- Case scene-graph state --------------------------- interface CaseVis { group: THREE.Group; baseX: number; bottomY: number; // world y of case interior floor glassMat: THREE.MeshPhysicalMaterial; edgeMat: THREE.LineBasicMaterial; hit: THREE.Mesh; lift: number; // 0..1 eased lift of selected top run } let caseVis: CaseVis[] = []; let gemMeshes: (THREE.Object3D | null)[][] = []; // [case][slot] const pendingReveal = new Set(); // "case:slot" hidden until flight lands interface Flight3D { mesh: THREE.Object3D; p0: THREE.Vector3; pc: THREE.Vector3; p1: THREE.Vector3; t0: number; dur: number; dst: number; slot: number; } let flights3d: Flight3D[] = []; function disposeCaseVis(): void { for (const cv of caseVis) { scene.remove(cv.group); cv.glassMat.dispose(); cv.edgeMat.dispose(); } caseVis = []; gemMeshes = []; } function rebuildCases(): void { disposeCaseVis(); clearFlights(); const n = tubes.length; const rows = n > 6 ? 2 : 1; const firstRow = rows === 2 ? Math.ceil(n / 2) : n; for (let i = 0; i < n; i++) { const row = rows === 2 && i >= firstRow ? 1 : 0; const inRow = rows === 2 ? (row === 0 ? firstRow : n - firstRow) : n; const idxInRow = row === 0 ? i : i - firstRow; const x = (idxInRow - (inRow - 1) / 2) * (CASE_W + GAP_X); const centerY = rows === 2 ? (row === 0 ? (CASE_H + ROW_GAP) / 2 : -(CASE_H + ROW_GAP) / 2) : 0; const bottomY = centerY - CASE_H / 2 + 0.08; const group = new THREE.Group(); group.position.set(x, bottomY, 0); const glassMat = glassBaseMat.clone(); const glass = new THREE.Mesh(caseBoxGeom, glassMat); glass.position.y = CASE_H / 2 - 0.08; glass.renderOrder = 2; const edgeMat = new THREE.LineBasicMaterial({ color: NEON_CYAN, transparent: true, opacity: 0.95 }); const edges = new THREE.LineSegments(caseEdgeGeom, edgeMat); edges.position.copy(glass.position); const pedestal = new THREE.Mesh(pedestalGeom, pedestalMat); pedestal.position.y = -0.16; const hit = new THREE.Mesh(hitGeom, hitMat); hit.position.y = CASE_H / 2 + 0.15; hit.userData.caseIndex = i; group.add(glass, edges, pedestal, hit); scene.add(group); caseVis.push({ group, baseX: x, bottomY, glassMat, edgeMat, hit, lift: 0 }); } // floor sits under the lowest pedestal let minBottom = Infinity; for (const cv of caseVis) minBottom = Math.min(minBottom, cv.bottomY); floorMesh.position.y = (isFinite(minBottom) ? minBottom : 0) - 0.24; bgPlane.position.y = 2; rebuildGems(); frameCamera(); } function slotLocalY(slot: number): number { return (slot + 0.5) * SLOT_H; } function slotWorldPos(caseIdx: number, slot: number, out: THREE.Vector3): THREE.Vector3 { const cv = caseVis[caseIdx]; return out.set(cv.baseX, cv.bottomY + slotLocalY(slot), 0); } /* -------------------------- Asset-swap preload ----------------------------- */ // Store builds can inject a GLB model per gem flavor via the asset seam above. // We preload each once at boot (see void preloadAssets() near the bottom), cache // the template, and clone-per-instance in makeGemMesh. On /play every // getModel() returns null, so gemTemplates stays EMPTY and makeGemMesh falls // through to its existing procedural lathe gem — nothing changes on /play. // // Flavor int -> gem model key (one per GEM_COLORS roster entry). A partial pack // degrades per-key: any flavor without an injected model stays procedural. const GEM_MODEL_KEYS = [ "gem_green", // 0 common green "gem_blue", // 1 rare blue "gem_purple", // 2 epic purple "gem_gold", // 3 legendary gold "gem_crimson", // 4 crimson "gem_cyan", // 5 cyan "gem_pink", // 6 pink "gem_orange", // 7 orange "gem_white", // 8 white "gem_teal", // 9 teal ]; const gemTemplates = new Map(); // flavor -> loaded template // Uniformly scale a cloned template to match the procedural gem's footprint // (diameter ~0.64 * GEM_SCALE, height ~0.46 * GEM_SCALE) and center it in a // Group so the caller's position.set(...) places it like the procedural mesh. function fitGemTemplate(template: THREE.Object3D): THREE.Object3D { const inst = template.clone(true); const box = new THREE.Box3().setFromObject(inst); const size = box.getSize(new THREE.Vector3()); const targetH = 0.46 * GEM_SCALE; // procedural lathe height * scale const targetD = 0.64 * GEM_SCALE; // procedural lathe diameter * scale const sHeight = size.y > 1e-4 ? targetH / size.y : 1; const maxXZ = Math.max(size.x, size.z); const sWidth = maxXZ > 1e-4 ? targetD / maxXZ : 1; inst.scale.setScalar(Math.min(sHeight, sWidth)); const centered = new THREE.Box3().setFromObject(inst); const center = centered.getCenter(new THREE.Vector3()); inst.position.sub(center); const group = new THREE.Group(); group.add(inst); return group; } function makeGemMesh(color: number): THREE.Object3D { // Store build: swap in the injected GLB (fitted + centered) when preloaded. // /play: gemTemplates is empty -> procedural lathe gem (unchanged). SYNC on // purpose (called in rebuildGems / attemptPour hot paths) by reading the // preloaded cache, never awaiting. const template = gemTemplates.get(color); const m: THREE.Object3D = template ? fitGemTemplate(template) : new THREE.Mesh(gemGeom, gemMats[color]); if (!template) (m as THREE.Mesh).scale.setScalar(GEM_SCALE); m.rotation.y = Math.random() * Math.PI * 2; m.userData.spin = (0.25 + Math.random() * 0.5) * (Math.random() < 0.5 ? -1 : 1); return m; } // One-time boot preload. Fills gemTemplates from the injected pack; on /play // every getModel() is null so the cache stays empty (zero visual change). If a // model loaded and a level is already showing, rebuild to swap it in live. async function preloadAssets(): Promise { try { for (let flavor = 0; flavor < GEM_MODEL_KEYS.length; flavor++) { const model = await Assets.getModel(GEM_MODEL_KEYS[flavor]); if (model) gemTemplates.set(flavor, model); } } catch (_e) { /* any failure -> everything stays procedural */ } if (gemTemplates.size > 0 && screen === "game") { rebuildGems(); } } function rebuildGems(): void { for (let i = 0; i < gemMeshes.length; i++) { for (const g of gemMeshes[i]) if (g && g.parent) g.parent.remove(g); } gemMeshes = []; for (let i = 0; i < tubes.length; i++) { const col: (THREE.Object3D | null)[] = []; for (let s = 0; s < tubes[i].length; s++) { const gem = makeGemMesh(tubes[i][s]); gem.position.set(0, slotLocalY(s), 0); gem.userData.baseY = slotLocalY(s); gem.userData.slot = s; if (pendingReveal.has(i + ":" + s)) gem.visible = false; caseVis[i].group.add(gem); col.push(gem); } gemMeshes.push(col); } } function clearFlights(): void { for (const f of flights3d) scene.remove(f.mesh); flights3d = []; pendingReveal.clear(); } // -------------------------------- Camera framing ----------------------------- function frameCamera(): void { if (caseVis.length === 0) return; let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity; for (const cv of caseVis) { minX = Math.min(minX, cv.baseX - CASE_W / 2 - 0.35); maxX = Math.max(maxX, cv.baseX + CASE_W / 2 + 0.35); minY = Math.min(minY, cv.bottomY - 0.45); maxY = Math.max(maxY, cv.bottomY + CASE_H + 0.75); } const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2; const halfW = (maxX - minX) / 2, halfH = (maxY - minY) / 2; const fovV = THREE.MathUtils.degToRad(camera.fov) / 2; const fovH = Math.atan(Math.tan(fovV) * camera.aspect); // HUD bands eat ~20% of vertical space; pad accordingly const dV = (halfH * 1.24) / Math.tan(fovV); const dH = (halfW * 1.08) / Math.tan(fovH); const dist = Math.max(dV, dH) + CASE_D; // Aim slightly below content center so the case row rides higher on screen, // balancing the gap beneath the HUD against the footer band. camTarget.set(cx, cy - dist * 0.045, 0); camBase.set(cx, cy + dist * 0.10, dist); camera.position.copy(camBase); camera.lookAt(camTarget); } function resize(): void { const r = rootEl.getBoundingClientRect(); cssW = Math.max(200, r.width || window.innerWidth); cssH = Math.max(200, r.height || window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.setSize(cssW, cssH, false); camera.aspect = cssW / cssH; camera.updateProjectionMatrix(); frameCamera(); } // ------------------------------ Sparkles / glints ---------------------------- function makeStarTexture(): THREE.Texture { const c = document.createElement("canvas"); c.width = 64; c.height = 64; const g = c.getContext("2d")!; const cx = 32, cy = 32; const grad = g.createRadialGradient(cx, cy, 0, cx, cy, 30); grad.addColorStop(0, "rgba(255,255,255,1)"); grad.addColorStop(0.25, "rgba(255,255,255,0.5)"); grad.addColorStop(1, "rgba(255,255,255,0)"); g.fillStyle = grad; g.fillRect(0, 0, 64, 64); g.strokeStyle = "rgba(255,255,255,0.95)"; g.lineWidth = 2; g.beginPath(); g.moveTo(cx - 28, cy); g.lineTo(cx + 28, cy); g.moveTo(cx, cy - 28); g.lineTo(cx, cy + 28); g.stroke(); const tex = new THREE.CanvasTexture(c); tex.colorSpace = THREE.SRGBColorSpace; return tex; } const starTex = makeStarTexture(); interface Spark { sprite: THREE.Sprite; active: boolean; t0: number; life: number; pos: THREE.Vector3; vel: THREE.Vector3; baseScale: number; } const SPARK_POOL = 26; const sparks: Spark[] = []; for (let i = 0; i < SPARK_POOL; i++) { const mat = new THREE.SpriteMaterial({ map: starTex, blending: THREE.AdditiveBlending, transparent: true, depthWrite: false, color: i % 3 === 0 ? 0xffffff : GOLD, }); const sprite = new THREE.Sprite(mat); sprite.visible = false; scene.add(sprite); sparks.push({ sprite, active: false, t0: 0, life: 1, pos: new THREE.Vector3(), vel: new THREE.Vector3(), baseScale: 0.2 }); } function spawnBurst(pos: THREE.Vector3, count: number, delay: number, big: boolean): void { let placed = 0; for (const sp of sparks) { if (placed >= count) break; if (sp.active && now - sp.t0 < sp.life) continue; sp.active = true; sp.t0 = now + delay; sp.life = 420 + Math.random() * 380; sp.pos.copy(pos).add(new THREE.Vector3((Math.random() - 0.5) * 0.3, (Math.random() - 0.5) * 0.3, 0.2)); const a = Math.random() * Math.PI * 2; const spd = (big ? 0.9 : 0.5) * (0.4 + Math.random()); sp.vel.set(Math.cos(a) * spd, Math.sin(a) * spd + 0.4, 0.15 * Math.random()); sp.baseScale = (big ? 0.34 : 0.2) * (0.6 + Math.random() * 0.8); sp.sprite.visible = false; placed++; } } // Continuous subtle glints on random gems (max 8 alive) interface Glint { sprite: THREE.Sprite; t0: number; dur: number; nextAt: number; anchor: THREE.Vector3; } const glints: Glint[] = []; for (let i = 0; i < 8; i++) { const mat = new THREE.SpriteMaterial({ map: starTex, blending: THREE.AdditiveBlending, transparent: true, depthWrite: false, color: 0xffffff, opacity: 0.85, }); const sprite = new THREE.Sprite(mat); sprite.visible = false; scene.add(sprite); glints.push({ sprite, t0: 0, dur: 900, nextAt: i * 450, anchor: new THREE.Vector3() }); } const _tmpV = new THREE.Vector3(); function retargetGlint(gl: Glint): void { const flat: THREE.Object3D[] = []; for (const col of gemMeshes) for (const g of col) if (g && g.visible) flat.push(g); if (flat.length === 0) { gl.nextAt = now + 800; return; } const g = flat[(Math.random() * flat.length) | 0]; g.getWorldPosition(gl.anchor); gl.anchor.x += (Math.random() - 0.5) * 0.22; gl.anchor.y += (Math.random() - 0.5) * 0.18; gl.anchor.z += 0.28; gl.t0 = now; gl.dur = 700 + Math.random() * 600; gl.nextAt = gl.t0 + gl.dur + 400 + Math.random() * 1600; } // --------------------------------- Confetti ---------------------------------- const CONF_N = 150; const confGeom = new THREE.PlaneGeometry(0.1, 0.055); const confMat = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, fog: false }); const confetti = new THREE.InstancedMesh(confGeom, confMat, CONF_N); confetti.visible = false; confetti.frustumCulled = false; scene.add(confetti); const confPos: THREE.Vector3[] = []; const confVel: THREE.Vector3[] = []; const confAxis: THREE.Vector3[] = []; const confRot: number[] = []; let confT0 = -1; const CONF_LIFE = 2900; { const c = new THREE.Color(); for (let i = 0; i < CONF_N; i++) { confPos.push(new THREE.Vector3()); confVel.push(new THREE.Vector3()); confAxis.push(new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize()); confRot.push((Math.random() - 0.5) * 10); confetti.setColorAt(i, c.set(GEM_COLORS[i % GEM_COLORS.length])); } if (confetti.instanceColor) confetti.instanceColor.needsUpdate = true; } const _dummy = new THREE.Object3D(); function spawnConfetti(): void { confT0 = now; const top = camTarget.y + 1.4; for (let i = 0; i < CONF_N; i++) { confPos[i].set(camTarget.x + (Math.random() - 0.5) * 1.6, top + (Math.random() - 0.5) * 0.7, 0.6 + Math.random() * 1.2); const a = Math.random() * Math.PI * 2; const sp = 0.8 + Math.random() * 2.2; confVel[i].set(Math.cos(a) * sp, Math.sin(a) * sp + 1.6, (Math.random() - 0.5) * 0.8); } confetti.visible = true; } function tickConfetti(dt: number): void { if (confT0 < 0) return; const age = now - confT0; if (age > CONF_LIFE) { confT0 = -1; confetti.visible = false; return; } const fade = age > CONF_LIFE - 500 ? (CONF_LIFE - age) / 500 : 1; for (let i = 0; i < CONF_N; i++) { confVel[i].y -= 4.2 * dt; confVel[i].multiplyScalar(1 - 0.6 * dt); confPos[i].addScaledVector(confVel[i], dt); _dummy.position.copy(confPos[i]); _dummy.quaternion.setFromAxisAngle(confAxis[i], confRot[i] * age * 0.001); _dummy.scale.setScalar(Math.max(0.001, fade)); _dummy.updateMatrix(); confetti.setMatrixAt(i, _dummy.matrix); } confetti.instanceMatrix.needsUpdate = true; } // ----------------------------- Level flow (verbatim) ------------------------- function loadLevelByIndex(i: number): void { levelIdx = Math.max(0, Math.min(LEVELS.length - 1, i)); const lv = LEVELS[levelIdx]; tubes = deepTubes(lv.arrangement); selected = -1; undoStack = []; undosLeft = MAX_UNDOS; boosterUsed = false; won = false; moveCount = 0; shakes = []; solvedGlowSince = {}; screen = "game"; // 3D visual sync (presentation only) clearFlights(); confT0 = -1; confetti.visible = false; rebuildCases(); showScreen(); updateHud(); } function markWon(): void { won = true; wonAt = now; const lvNum = LEVELS[levelIdx].level; if (!progress.completed.includes(lvNum)) progress.completed.push(lvNum); if (lvNum + 1 > progress.unlocked) progress.unlocked = Math.min(LEVELS.length, lvNum + 1); saveProgress(progress); spawnConfetti(); sfxFanfare(0.25); updateHud(); } // Core pour — the ONE code path used by taps and by the test hook. // State transitions are verbatim from 2D and applied SYNCHRONOUSLY; // only the flight visualization is 3D now. function attemptPour(src: number, dst: number): boolean { const n = canPour(src, dst); if (n <= 0) return false; undoStack.push({ tubes: deepTubes(tubes), boosterUsed }); if (undoStack.length > 24) undoStack.shift(); const color = tubes[src][tubes[src].length - 1]; const dstStart = tubes[dst].length; // synchronous state change for (let k = 0; k < n; k++) tubes[dst].push(tubes[src].pop()!); moveCount++; // 3D flights (state already applied; destination slots hidden until landing) const sv = caseVis[src], dv = caseVis[dst]; if (sv && dv) { for (let k = 0; k < n; k++) { const slot = dstStart + k; pendingReveal.add(dst + ":" + slot); const p0 = new THREE.Vector3(sv.baseX, sv.bottomY + CASE_H + 0.32, 0); const p1 = slotWorldPos(dst, slot, new THREE.Vector3()); const pc = new THREE.Vector3((p0.x + p1.x) / 2, Math.max(p0.y, dv.bottomY + CASE_H + 0.3) + 0.85, 0.55); const mesh = makeGemMesh(color); mesh.visible = false; scene.add(mesh); flights3d.push({ mesh, p0, pc, p1, t0: now + k * 45, dur: 300, dst, slot }); sfxClink(k * 0.045, color); } } else { for (let k = 0; k < n; k++) sfxClink(k * 0.045, color); } if (isTubeSolved(tubes[dst])) { solvedGlowSince[dst] = now + n * 45 + 300; sfxSolved(0.05 + n * 0.045 + 0.22); if (dv) { const p = new THREE.Vector3(dv.baseX, dv.bottomY + CASE_H / 2, 0.35); spawnBurst(p, 12, n * 45 + 320, true); } } selected = -1; if (isWonState(tubes) && !won) markWon(); rebuildGems(); updateHud(); return true; } function doUndo(): boolean { if (won || undosLeft <= 0 || undoStack.length === 0) return false; const snap = undoStack.pop()!; tubes = snap.tubes; boosterUsed = snap.boosterUsed; undosLeft--; selected = -1; clearFlights(); solvedGlowSince = {}; for (let i = 0; i < tubes.length; i++) if (isTubeSolved(tubes[i])) solvedGlowSince[i] = now - 9999; // 3D sync: an undo can revert addCase, changing the case COUNT — the case // scene graph must be rebuilt, not just the gems (a stale extra CaseVis made // tick() read tubes[i] past the end and killed the rAF loop). if (caseVis.length !== tubes.length) rebuildCases(); else rebuildGems(); updateHud(); return true; } function doAddCase(): boolean { if (won || boosterUsed) return false; undoStack.push({ tubes: deepTubes(tubes), boosterUsed }); boosterUsed = true; tubes.push([]); selected = -1; rebuildCases(); updateHud(); return true; } function rejectTap(idx: number): void { shakes.push({ idx, t0: now }); sfxError(); } // ----------------------------------- HUD ------------------------------------- const hudStyle = document.createElement("style"); hudStyle.id = "gs-style"; hudStyle.textContent = ` #gs-hud { position: absolute; inset: 0; pointer-events: none; overflow: hidden; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #dce6f2; -webkit-user-select: none; user-select: none; } #gs-hud * { box-sizing: border-box; } .gs-panel { background: linear-gradient(160deg, rgba(16,21,32,0.78), rgba(10,13,21,0.86)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(214,178,94,0.28); border-radius: 14px; } .gs-btn { pointer-events: auto; cursor: pointer; appearance: none; outline: none; background: linear-gradient(160deg, rgba(18,24,36,0.85), rgba(10,13,21,0.9)); border: 1px solid rgba(34,211,238,0.45); color: #bfeaf5; border-radius: 12px; font: 600 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; padding: 13px 18px; transition: border-color .15s, color .15s, opacity .15s, transform .08s; } .gs-btn:active { transform: scale(0.97); } .gs-btn[disabled] { opacity: 0.32; pointer-events: none; } .gs-btn.gold { border-color: rgba(245,197,66,0.55); color: #f2d489; } .gs-btn.magenta { border-color: rgba(232,121,249,0.5); color: #eec6f5; } #gs-header { position: absolute; top: 0; left: 0; right: 0; height: 58px; display: flex; align-items: center; padding: 8px 10px; gap: 10px; background: linear-gradient(rgba(4,5,11,0.85), rgba(4,5,11,0)); } #gs-back { width: 44px; padding: 13px 0; text-align: center; } #gs-hlevel { flex: 1; text-align: center; } #gs-hlevel .lv { font: 700 17px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.22em; color: #eef5fc; } #gs-hlevel .meta { font: 500 10px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.18em; color: #6d7f96; } #gs-hspacer { width: 44px; } #gs-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 14px 16px; display: flex; gap: 12px; justify-content: center; background: linear-gradient(rgba(4,5,11,0), rgba(4,5,11,0.85)); } #gs-footer .gs-btn { min-width: 132px; } #gs-win { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(4,6,11,0.62); opacity: 0; transition: opacity .5s ease .25s; pointer-events: none; } #gs-win.show { display: flex; opacity: 1; pointer-events: auto; } #gs-win h1 { margin: 0; font: 800 clamp(20px, 6vw, 36px)/1.15 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.12em; white-space: nowrap; text-align: center; color: #f5c542; text-shadow: 0 0 26px rgba(245,197,66,0.55); } #gs-win .sub { font: 500 13px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.12em; color: #9fb3c8; } #gs-win .gs-btn { margin-top: 14px; font-size: 13px; padding: 16px 34px; } #gs-map { position: absolute; inset: 0; display: none; overflow-y: auto; pointer-events: auto; background: linear-gradient(180deg, #05070d 0%, #0a0f1a 55%, #060810 100%); padding: 26px 16px 40px; } #gs-map.show { display: block; } #gs-map .title { text-align: center; font: 800 clamp(30px, 11vw, 52px)/1.1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.14em; color: #22d3ee; text-shadow: 0 0 30px rgba(232,121,249,0.45); margin-top: 8px; } #gs-map .subtitle { text-align: center; font: 600 clamp(9px, 2.6vw, 12px)/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.5em; color: #d6b25e; margin: 6px 0 26px; } #gs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 470px; margin: 0 auto; } .gs-tile { aspect-ratio: 1; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; border: 1px solid rgba(34,211,238,0.4); background: rgba(16,21,32,0.9); color: #cfe6f5; font: 700 clamp(15px, 5vw, 22px)/1 ui-sans-serif, system-ui, sans-serif; box-shadow: 0 0 10px rgba(34,211,238,0.10) inset; transition: transform .08s; } .gs-tile:active { transform: scale(0.95); } .gs-tile.done { border-color: rgba(245,197,66,0.6); color: #f5c542; box-shadow: 0 0 12px rgba(245,197,66,0.14) inset; } .gs-tile.done .tick { font-size: 12px; color: #3ddc68; margin-top: 3px; } .gs-tile.locked { border-color: #232b3a; background: rgba(10,13,20,0.9); color: #3c485c; cursor: default; } .gs-tile.locked svg { opacity: 0.65; } `; document.head.appendChild(hudStyle); const hud = document.createElement("div"); hud.id = "gs-hud"; const LOCK_SVG = ``; hud.innerHTML = `

LEVEL 1

HEIST COMPLETE

GEM SORT

MUSEUM HEIST EDITION

`; rootEl.appendChild(hud); const elHeader = hud.querySelector("#gs-header") as HTMLElement; const elFooter = hud.querySelector("#gs-footer") as HTMLElement; const elLevel = hud.querySelector("#gs-hlevel .lv") as HTMLElement; const elMeta = hud.querySelector("#gs-hlevel .meta") as HTMLElement; const elUndo = hud.querySelector("#gs-undo") as HTMLButtonElement; const elCase = hud.querySelector("#gs-case") as HTMLButtonElement; const elBack = hud.querySelector("#gs-back") as HTMLButtonElement; const elWin = hud.querySelector("#gs-win") as HTMLElement; const elWinSub = hud.querySelector("#gs-win .sub") as HTMLElement; const elNext = hud.querySelector("#gs-next") as HTMLButtonElement; const elMap = hud.querySelector("#gs-map") as HTMLElement; const elGrid = hud.querySelector("#gs-grid") as HTMLElement; function showScreen(): void { const map = screen === "map"; elMap.classList.toggle("show", map); elHeader.style.display = map ? "none" : "flex"; elFooter.style.display = map ? "none" : "flex"; if (map) { elWin.classList.remove("show"); renderMapGrid(); } } function updateHud(): void { if (screen !== "game") return; const lv = LEVELS[levelIdx]; elLevel.textContent = "LEVEL " + lv.level; elMeta.textContent = "MOVES " + moveCount + " · GEMS " + lv.colors + " · CASES " + tubes.length; elUndo.textContent = "UNDO (" + undosLeft + ")"; elUndo.disabled = !(undosLeft > 0 && undoStack.length > 0 && !won); elCase.disabled = !( !boosterUsed && !won ); if (won) { elWinSub.textContent = "Level " + lv.level + " cleared in " + moveCount + " moves"; elNext.textContent = levelIdx >= LEVELS.length - 1 ? "BACK TO MAP" : "NEXT LEVEL"; elWin.classList.add("show"); } else { elWin.classList.remove("show"); } } function renderMapGrid(): void { elGrid.innerHTML = ""; for (let i = 0; i < LEVELS.length; i++) { const lvNum = i + 1; const done = progress.completed.includes(lvNum); const unlocked = lvNum <= progress.unlocked; const tile = document.createElement("div"); tile.className = "gs-tile" + (done ? " done" : "") + (unlocked ? "" : " locked"); if (unlocked) { tile.innerHTML = "" + lvNum + "" + (done ? `✓` : ""); tile.addEventListener("click", () => { audio(); sfxClink(0, 3); loadLevelByIndex(i); }); } else { tile.innerHTML = LOCK_SVG; tile.addEventListener("click", () => { audio(); sfxError(); }); } elGrid.appendChild(tile); } } elBack.addEventListener("click", () => { audio(); screen = "map"; selected = -1; showScreen(); }); elUndo.addEventListener("click", () => { audio(); if (!doUndo()) sfxError(); }); elCase.addEventListener("click", () => { audio(); if (!doAddCase()) sfxError(); }); elNext.addEventListener("click", () => { audio(); if (!won || now - wonAt <= 400) return; if (levelIdx >= LEVELS.length - 1) { screen = "map"; showScreen(); } else loadLevelByIndex(levelIdx + 1); }); // ---------------------------------- Input ------------------------------------ const raycaster = new THREE.Raycaster(); const pointerNdc = new THREE.Vector2(); function onPointerDown(e: PointerEvent): void { audio(); // lazy init on first gesture if (screen !== "game" || won) return; const rect = glCanvas.getBoundingClientRect(); pointerNdc.set( ((e.clientX - rect.left) / rect.width) * 2 - 1, -((e.clientY - rect.top) / rect.height) * 2 + 1, ); raycaster.setFromCamera(pointerNdc, camera); const hitsList = raycaster.intersectObjects(caseVis.map((cv) => cv.hit), false); const hit = hitsList.length > 0 ? (hitsList[0].object.userData.caseIndex as number) : -1; // selection semantics verbatim from the 2D build if (hit < 0) { selected = -1; return; } if (selected === -1) { if (tubes[hit].length === 0 || isTubeSolved(tubes[hit])) { rejectTap(hit); return; } selected = hit; sfxClink(0, tubes[hit][tubes[hit].length - 1]); } else if (selected === hit) { selected = -1; // deselect } else { if (!attemptPour(selected, hit)) { rejectTap(hit); selected = -1; } } e.preventDefault(); } glCanvas.addEventListener("pointerdown", onPointerDown); window.addEventListener("resize", resize); // ----------------------------------- Loop ------------------------------------ const _colTmp = new THREE.Color(); let rafId = 0; let disposed = false; let lastT = 0; let selEase = 0; // camera nudge when a case is selected function tick(t: number): void { if (disposed) return; now = t; const dt = Math.min(0.05, lastT > 0 ? (t - lastT) / 1000 : 0.016); lastT = t; if (screen === "game") { // per-case visuals for (let i = 0; i < caseVis.length; i++) { const cv = caseVis[i]; // shake let ox = 0; for (const s of shakes) { if (s.idx === i) { const sdt = now - s.t0; if (sdt < 300) ox += Math.sin(sdt * 0.09) * 0.05 * (1 - sdt / 300); } } cv.group.position.x = cv.baseX + ox; // selection lift ease const liftTarget = i === selected ? 1 : 0; cv.lift += (liftTarget - cv.lift) * Math.min(1, dt * 14); // edge tint + glass glow const solved = isTubeSolved(tubes[i]); const target = solved ? COL_GOLD : i === selected ? COL_MAGENTA : COL_CYAN; cv.edgeMat.color.lerp(target, Math.min(1, dt * 10)); if (solved) { let since = solvedGlowSince[i] != null ? now - solvedGlowSince[i] : 9999; if (since < 0) since = 0; const k = since < 900 ? 0.55 - (since / 900) * 0.32 : 0.2 + Math.sin(now * 0.004 + i) * 0.07; cv.glassMat.emissive.copy(COL_GOLD).multiplyScalar(k); cv.glassMat.opacity = 0.2; } else { cv.glassMat.emissive.setRGB(0, 0, 0); cv.glassMat.opacity = i === selected ? 0.18 : 0.14; } // gems: idle spin + lifted run const col = gemMeshes[i]; if (col) { const run = cv.lift > 0.01 ? topRun(tubes[i]) : 0; for (let s = 0; s < col.length; s++) { const g = col[s]; if (!g) continue; g.rotation.y += g.userData.spin * dt; const inRun = run > 0 && s >= tubes[i].length - run; g.position.y = g.userData.baseY + (inRun ? cv.lift * LIFT_AMT : 0); } } } shakes = shakes.filter((s) => now - s.t0 < 320); // flights for (let fi = flights3d.length - 1; fi >= 0; fi--) { const f = flights3d[fi]; const ft = (now - f.t0) / f.dur; if (ft >= 1) { scene.remove(f.mesh); flights3d.splice(fi, 1); pendingReveal.delete(f.dst + ":" + f.slot); const g = gemMeshes[f.dst] && gemMeshes[f.dst][f.slot]; if (g) g.visible = true; spawnBurst(f.p1, 4, 0, false); continue; } if (ft < 0) { f.mesh.visible = false; continue; } f.mesh.visible = true; const e2 = ft < 0.5 ? 2 * ft * ft : 1 - Math.pow(-2 * ft + 2, 2) / 2; // easeInOutQuad const u = 1 - e2; f.mesh.position.set( u * u * f.p0.x + 2 * u * e2 * f.pc.x + e2 * e2 * f.p1.x, u * u * f.p0.y + 2 * u * e2 * f.pc.y + e2 * e2 * f.p1.y, u * u * f.p0.z + 2 * u * e2 * f.pc.z + e2 * e2 * f.p1.z, ); f.mesh.rotation.y += dt * 5; } // sparks for (const sp of sparks) { if (!sp.active) continue; const age = now - sp.t0; if (age < 0) { sp.sprite.visible = false; continue; } if (age > sp.life) { sp.active = false; sp.sprite.visible = false; continue; } const k = age / sp.life; sp.pos.addScaledVector(sp.vel, dt); sp.vel.y -= 1.4 * dt; sp.sprite.position.copy(sp.pos); const sc = sp.baseScale * (k < 0.2 ? k / 0.2 : 1 - (k - 0.2) / 0.8); sp.sprite.scale.setScalar(Math.max(0.001, sc)); sp.sprite.visible = true; (sp.sprite.material as THREE.SpriteMaterial).opacity = 1 - k * 0.7; } // glints for (const gl of glints) { if (now >= gl.nextAt) retargetGlint(gl); const age = now - gl.t0; if (age >= 0 && age < gl.dur) { const k = age / gl.dur; const pulse = Math.sin(k * Math.PI); gl.sprite.position.copy(gl.anchor); gl.sprite.scale.setScalar(Math.max(0.001, 0.16 * pulse)); (gl.sprite.material as THREE.SpriteMaterial).opacity = 0.75 * pulse; gl.sprite.visible = true; } else { gl.sprite.visible = false; } } tickConfetti(dt); // camera: subtle idle sway (about half a degree) + ease-in on selection const selTarget = selected >= 0 ? 1 : 0; selEase += (selTarget - selEase) * Math.min(1, dt * 6); const dist = camBase.z; camera.position.set( camBase.x + Math.sin(now * 0.00037) * dist * 0.0087, camBase.y + Math.sin(now * 0.00023) * dist * 0.005, camBase.z * (1 - selEase * 0.018), ); camera.lookAt(camTarget); } renderer.render(scene, camera); rafId = requestAnimationFrame(tick); } // Store build only: load any injected gem GLB models, then swap them in if a // level is already showing. No-op on /play (no window.MCPityAssets). void preloadAssets(); resize(); showScreen(); rafId = requestAnimationFrame(tick); // ------------------------------ Test hook ----------------------------------- // (same shape + semantics as the 2D build) (window as any).__gemsort = { getState() { return { screen, level: LEVELS[levelIdx].level, colors: LEVELS[levelIdx].colors, tubes: deepTubes(tubes), undosLeft, boosterUsed, moveCount, won, unlocked: progress.unlocked, completed: progress.completed.slice(), // Test/debug-only field (3D playtest): per-case screen coords in CSS px, // from projecting each case's world center through the current camera. // Presentation read-out only; no game logic reads this. caseScreenXY: (() => { camera.updateMatrixWorld(); camera.matrixWorldInverse.copy(camera.matrixWorld).invert(); return caseVis.map((cv) => { _tmpV.set(cv.baseX, cv.bottomY + CASE_H / 2, 0).project(camera); return { x: ((_tmpV.x + 1) / 2) * cssW, y: ((1 - _tmpV.y) / 2) * cssH }; }); })(), }; }, pour(srcIdx: number, dstIdx: number): boolean { return attemptPour(srcIdx, dstIdx); }, undo(): boolean { return doUndo(); }, loadLevel(n: number): void { loadLevelByIndex(n - 1); }, reset(): void { loadLevelByIndex(levelIdx); }, addCase(): boolean { return doAddCase(); }, isWon(): boolean { return isWonState(tubes); }, }; // ------------------------------- Dispose ------------------------------------ (window as any).__mcpity_dispose = () => { disposed = true; cancelAnimationFrame(rafId); glCanvas.removeEventListener("pointerdown", onPointerDown); window.removeEventListener("resize", resize); disposeCaseVis(); clearFlights(); for (const sp of sparks) { scene.remove(sp.sprite); (sp.sprite.material as THREE.Material).dispose(); } for (const gl of glints) { scene.remove(gl.sprite); (gl.sprite.material as THREE.Material).dispose(); } scene.remove(confetti); confGeom.dispose(); confMat.dispose(); gemGeom.dispose(); caseBoxGeom.dispose(); caseEdgeGeom.dispose(); pedestalGeom.dispose(); hitGeom.dispose(); bgGeom.dispose(); for (const m of gemMats) m.dispose(); glassBaseMat.dispose(); pedestalMat.dispose(); hitMat.dispose(); starTex.dispose(); renderer.dispose(); if (glCanvas.parentNode) glCanvas.parentNode.removeChild(glCanvas); if (hud.parentNode) hud.parentNode.removeChild(hud); if (hudStyle.parentNode) hudStyle.parentNode.removeChild(hudStyle); if (actx) { try { actx.close(); } catch { /* noop */ } actx = null; } delete (window as any).__gemsort; };