// Hearthwood Jigsaw - MCPity Web Engine game. A cozy 3D tabletop jigsaw puzzle. // 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 warm wooden table under soft lamplight. Beveled, wood-backed 3D // jigsaw pieces are cut from a hand-painted scene. Drag pieces from the tray onto // the board; they snap with a soft click when they find their home. Pick a cozy // picture (Meadow / Autumn / Ocean, plus Season Pass exclusives), a piece count, // and an optional rotation challenge. Finish the picture for a warm celebration. // // 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: drag pieces with the mouse. mobile: drag pieces with a finger. // - 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: mug, plant, lamp, frame. // =========================================================================== 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 // three base collections + relaxed/cozy/classic counts) 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). Cozy, warm, on-brand for Hearthwood Jigsaw. // =========================================================================== W.__MCPITY_SHELL_CONFIG = { title: "Hearthwood Jigsaw", tagline: "A cozy tabletop jigsaw. Pull up a chair, pour some tea, and piece together a warm little scene.", accent: "#c8843c", panel: "#241b13", ink: "#f4ece0", subink: "#c7b6a2", controls: [ "Drag a piece from the tray onto the board.", "A piece clicks into place when it finds its home.", "Pick a picture and a piece count from the menu.", "Turn on Rotate mode for an extra challenge.", ], }; // ---- 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.02; 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(0x1a130d); scene.fog = new THREE.Fog(0x1a130d, 16, 34); var camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100); camera.position.set(0, 8.6, 7.4); camera.lookAt(0, 0, 1.1); function sizeRenderer() { var w = root.clientWidth || window.innerWidth; var h = root.clientHeight || window.innerHeight; renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix(); } sizeRenderer(); if (typeof ResizeObserver !== "undefined") { try { new ResizeObserver(sizeRenderer).observe(root); } catch (_e) {} } window.addEventListener("resize", sizeRenderer); function mat(color: number, rough: number, metal: number): THREE.Material { if (HIGH_QUALITY) return new THREE.MeshStandardMaterial({ color: color, roughness: rough, metalness: metal }); return new THREE.MeshLambertMaterial({ color: color }); } function box(w: number, h: number, d: number, m: THREE.Material): THREE.Mesh { var mesh = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), m); if (HIGH_QUALITY) { mesh.castShadow = true; mesh.receiveShadow = true; } return mesh; } // ---- lighting: warm lamplight + soft fill ---- var ambient = new THREE.AmbientLight(0x6b5842, 0.62); scene.add(ambient); var lamp = new THREE.PointLight(0xffd39a, 1.5, 26, 1.5); lamp.position.set(-1.2, 6.2, 3.0); if (HIGH_QUALITY) { lamp.castShadow = true; lamp.shadow.mapSize.set(1024, 1024); lamp.shadow.bias = -0.0006; } scene.add(lamp); var key = new THREE.DirectionalLight(0xfff0d8, 0.55); key.position.set(4, 8, 6); if (HIGH_QUALITY) { key.castShadow = true; key.shadow.mapSize.set(1024, 1024); key.shadow.camera.left = -8; key.shadow.camera.right = 8; key.shadow.camera.top = 8; key.shadow.camera.bottom = -8; key.shadow.bias = -0.0006; } scene.add(key); var fill = new THREE.DirectionalLight(0x9fb0c8, 0.22); fill.position.set(-5, 4, -3); scene.add(fill); // =========================================================================== // TABLE - a warm wooden table under the board, with an optional gold trim that // is the Season Pass cosmetic (advisory). Decorative Meshy dressing props sit // at the edges and never block gameplay. // =========================================================================== var BOARD = 6; // the picture area is BOARD x BOARD world units var tableTop = new THREE.Mesh(new THREE.BoxGeometry(13, 0.5, 12), mat(0x5a3d24, 0.82, 0.04)); tableTop.position.set(0, -0.28, 0.8); if (HIGH_QUALITY) tableTop.receiveShadow = true; scene.add(tableTop); // a soft felt mat under the board var felt = new THREE.Mesh(new THREE.BoxGeometry(BOARD + 1.2, 0.06, BOARD + 1.2), mat(0x39301f, 0.98, 0)); felt.position.set(0, -0.01, 0); if (HIGH_QUALITY) felt.receiveShadow = true; scene.add(felt); // board recess frame (thin border showing where pieces belong) var frameMat = mat(0x4a3016, 0.7, 0.05); function frameBar(w: number, d: number, x: number, z: number) { var b = box(w, 0.05, d, frameMat); b.position.set(x, 0.03, z); scene.add(b); return b; } var FT = 0.16; frameBar(BOARD + FT * 2, FT, 0, -BOARD / 2 - FT / 2); frameBar(BOARD + FT * 2, FT, 0, BOARD / 2 + FT / 2); frameBar(FT, BOARD, -BOARD / 2 - FT / 2, 0); frameBar(FT, BOARD, BOARD / 2 + FT / 2, 0); // season-pass gold trim (cosmetic, toggled on entitlement) var goldTrim = new THREE.Mesh(new THREE.BoxGeometry(BOARD + FT * 4, 0.02, BOARD + FT * 4), mat(0xcaa14a, 0.35, 0.8)); goldTrim.position.set(0, 0.015, 0); goldTrim.visible = false; scene.add(goldTrim); // decorative dressing props (Meshy slots -> procedural fallback). Placed at the // far corners of the table so they never overlap the board or the tray. function placeProp(slot: string, x: number, y: number, z: number, targetH: number, builder: () => THREE.Object3D) { var m = getSlot(slot); var obj: THREE.Object3D; if (m) { var bbox = new THREE.Box3().setFromObject(m); var size = new THREE.Vector3(); bbox.getSize(size); var s = size.y > 0.001 ? targetH / size.y : 1; m.scale.setScalar(s); m.traverse(function (o: any) { if (o.isMesh && HIGH_QUALITY) { o.castShadow = true; o.receiveShadow = true; } }); obj = m; } else { obj = builder(); } obj.position.set(x, y, z); scene.add(obj); return obj; } function buildMug(): THREE.Object3D { var g = new THREE.Group(); var body = new THREE.Mesh(new THREE.CylinderGeometry(0.24, 0.2, 0.42, 20), mat(0xb5563a, 0.8, 0.05)); body.position.y = 0.21; var handle = new THREE.Mesh(new THREE.TorusGeometry(0.12, 0.035, 8, 16), mat(0xa04a32, 0.8, 0.05)); handle.position.set(0.26, 0.22, 0); handle.rotation.y = Math.PI / 2; var cocoa = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.03, 20), mat(0x3a241a, 0.6, 0)); cocoa.position.y = 0.4; g.add(body, handle, cocoa); if (HIGH_QUALITY) g.traverse(function (o: any) { if (o.isMesh) { o.castShadow = true; } }); return g; } function buildPlant(): THREE.Object3D { var g = new THREE.Group(); var pot = new THREE.Mesh(new THREE.CylinderGeometry(0.26, 0.2, 0.34, 16), mat(0x8a5a3a, 0.85, 0.03)); pot.position.y = 0.17; g.add(pot); var leafM = mat(0x5a7a3a, 0.9, 0); for (var i = 0; i < 6; i++) { var s = new THREE.Mesh(new THREE.SphereGeometry(0.16 + (i % 3) * 0.03, 10, 10), leafM); var a = (i / 6) * Math.PI * 2; s.position.set(Math.cos(a) * 0.12, 0.42 + (i % 2) * 0.1, Math.sin(a) * 0.12); g.add(s); } if (HIGH_QUALITY) g.traverse(function (o: any) { if (o.isMesh) { o.castShadow = true; } }); return g; } function buildLampProp(): THREE.Object3D { var g = new THREE.Group(); var base = new THREE.Mesh(new THREE.CylinderGeometry(0.24, 0.28, 0.1, 16), mat(0x3a3a3a, 0.5, 0.6)); base.position.y = 0.05; var stem = box(0.06, 1.0, 0.06, mat(0x2f2f2f, 0.5, 0.6)); stem.position.y = 0.6; var shadeM = mat(0xe8c887, 0.6, 0.05); var shade = new THREE.Mesh(new THREE.ConeGeometry(0.4, 0.42, 22, 1, true), shadeM); shade.position.y = 1.24; shade.rotation.x = Math.PI; if (HIGH_QUALITY) (shadeM as THREE.MeshStandardMaterial).emissive = new THREE.Color(0x8a6a2a); g.add(base, stem, shade); if (HIGH_QUALITY) g.traverse(function (o: any) { if (o.isMesh) { o.castShadow = true; } }); return g; } function buildFrameProp(): THREE.Object3D { // a decorative standing picture frame leaning at the back corner var g = new THREE.Group(); var f = box(1.0, 1.3, 0.06, mat(0x6b4a2c, 0.7, 0.06)); var inner = box(0.8, 1.1, 0.02, mat(0x2b3a4a, 0.9, 0)); inner.position.z = 0.03; g.add(f, inner); g.rotation.x = -0.16; if (HIGH_QUALITY) g.traverse(function (o: any) { if (o.isMesh) { o.castShadow = true; } }); return g; } placeProp("mug", 4.6, 0, -3.6, 0.44, buildMug); placeProp("plant", -4.9, 0, -3.4, 0.66, buildPlant); placeProp("lamp", -5.2, 0, 3.4, 1.46, buildLampProp); placeProp("frame", 4.9, 0.4, -4.3, 1.3, buildFrameProp); // =========================================================================== // PICTURES - cozy hand-painted scenes drawn on a canvas -> CanvasTexture. A // tiny seeded RNG keeps every scene stable + designed (not random noise). // =========================================================================== function mkRng(seed: number) { var s = seed >>> 0; return function () { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; }; } var PIC_RES = 1024; interface Collection { id: string; name: string; premium: boolean; draw: (c: CanvasRenderingContext2D, rng: () => number) => void; } function vgrad(c: CanvasRenderingContext2D, stops: Array<[number, string]>) { var g = c.createLinearGradient(0, 0, 0, PIC_RES); for (var i = 0; i < stops.length; i++) g.addColorStop(stops[i][0], stops[i][1]); c.fillStyle = g; c.fillRect(0, 0, PIC_RES, PIC_RES); } function hillBand(c: CanvasRenderingContext2D, baseY: number, amp: number, color: string, rng: () => number) { c.fillStyle = color; c.beginPath(); c.moveTo(0, PIC_RES); var ph = rng() * 6.28, fr = 1.4 + rng() * 1.8; c.lineTo(0, baseY); for (var x = 0; x <= PIC_RES; x += 16) { var y = baseY + Math.sin(x / PIC_RES * Math.PI * fr + ph) * amp; c.lineTo(x, y); } c.lineTo(PIC_RES, PIC_RES); c.closePath(); c.fill(); } function softSun(c: CanvasRenderingContext2D, x: number, y: number, r: number, inner: string, outer: string) { var g = c.createRadialGradient(x, y, 0, x, y, r); g.addColorStop(0, inner); g.addColorStop(1, outer); c.fillStyle = g; c.beginPath(); c.arc(x, y, r, 0, 6.29); c.fill(); } var COLLECTIONS: Collection[] = [ { id: "meadow", name: "Meadow at Dawn", premium: false, draw: function (c, rng) { vgrad(c, [[0, "#f6c98a"], [0.34, "#f2b075"], [0.5, "#d9d089"], [0.62, "#a9c86e"]]); softSun(c, PIC_RES * 0.7, PIC_RES * 0.2, 190, "rgba(255,247,214,0.95)", "rgba(255,247,214,0)"); hillBand(c, PIC_RES * 0.6, 40, "#8fb464", rng); hillBand(c, PIC_RES * 0.72, 54, "#6f9e4f", rng); hillBand(c, PIC_RES * 0.85, 40, "#557f3c", rng); for (var i = 0; i < 40; i++) { c.fillStyle = ["#f2f0d8", "#f4b8cf", "#f6d879"][Math.floor(rng() * 3)]; var fx = rng() * PIC_RES, fy = PIC_RES * (0.78 + rng() * 0.2); c.beginPath(); c.arc(fx, fy, 5 + rng() * 4, 0, 6.29); c.fill(); } }, }, { id: "autumn", name: "Autumn Woods", premium: false, draw: function (c, rng) { vgrad(c, [[0, "#f6d79a"], [0.4, "#eaa758"], [0.7, "#c9793a"], [1, "#8a4a24"]]); softSun(c, PIC_RES * 0.28, PIC_RES * 0.24, 150, "rgba(255,236,190,0.9)", "rgba(255,236,190,0)"); for (var t = 0; t < 7; t++) { var tx = (t + 0.5) / 7 * PIC_RES + (rng() - 0.5) * 60; c.strokeStyle = "#4a2f1c"; c.lineWidth = 16 + rng() * 8; c.beginPath(); c.moveTo(tx, PIC_RES); c.lineTo(tx, PIC_RES * (0.42 + rng() * 0.1)); c.stroke(); var canopy = ["#d76a2c", "#e5953a", "#c0491f", "#e7b23a"][Math.floor(rng() * 4)]; c.fillStyle = canopy; for (var b = 0; b < 5; b++) { c.beginPath(); c.arc(tx + (rng() - 0.5) * 130, PIC_RES * (0.36 + rng() * 0.14), 70 + rng() * 40, 0, 6.29); c.fill(); } } for (var l = 0; l < 60; l++) { c.fillStyle = ["#d76a2c", "#e7b23a", "#c0491f"][Math.floor(rng() * 3)]; c.save(); c.translate(rng() * PIC_RES, rng() * PIC_RES); c.rotate(rng() * 6.29); c.beginPath(); c.ellipse(0, 0, 9, 5, 0, 0, 6.29); c.fill(); c.restore(); } }, }, { id: "ocean", name: "Quiet Cove", premium: false, draw: function (c, rng) { vgrad(c, [[0, "#bfe3f0"], [0.42, "#7fc0dd"], [0.5, "#3f93b8"], [1, "#1f5f80"]]); softSun(c, PIC_RES * 0.5, PIC_RES * 0.22, 160, "rgba(255,250,224,0.9)", "rgba(255,250,224,0)"); c.fillStyle = "#e9d9a8"; c.beginPath(); c.moveTo(0, PIC_RES); c.lineTo(0, PIC_RES * 0.9); for (var x = 0; x <= PIC_RES; x += 20) c.lineTo(x, PIC_RES * 0.9 + Math.sin(x / 90 + rng()) * 8); c.lineTo(PIC_RES, PIC_RES); c.closePath(); c.fill(); for (var wv = 0; wv < 16; wv++) { c.strokeStyle = "rgba(255,255,255," + (0.16 + rng() * 0.2).toFixed(2) + ")"; c.lineWidth = 3 + rng() * 3; var wy = PIC_RES * (0.5 + wv * 0.024); c.beginPath(); for (var wx = 0; wx <= PIC_RES; wx += 16) c.lineTo(wx, wy + Math.sin(wx / 60 + wv) * 6); c.stroke(); } }, }, { id: "aurora", name: "Aurora Nights", premium: true, draw: function (c, rng) { vgrad(c, [[0, "#0b1030"], [0.5, "#122246"], [1, "#04060f"]]); for (var st = 0; st < 140; st++) { c.fillStyle = "rgba(255,255,255," + (0.3 + rng() * 0.6).toFixed(2) + ")"; c.beginPath(); c.arc(rng() * PIC_RES, rng() * PIC_RES * 0.7, rng() * 1.8 + 0.4, 0, 6.29); c.fill(); } var cols = ["rgba(80,230,170,0.5)", "rgba(120,150,255,0.42)", "rgba(190,120,255,0.4)"]; for (var r2 = 0; r2 < 3; r2++) { c.strokeStyle = cols[r2]; c.lineWidth = 46 + rng() * 30; c.lineCap = "round"; var baseY = PIC_RES * (0.24 + r2 * 0.1), ph = rng() * 6.29; c.beginPath(); for (var ax = 0; ax <= PIC_RES; ax += 14) c.lineTo(ax, baseY + Math.sin(ax / 150 + ph) * 70 + Math.sin(ax / 40) * 14); c.stroke(); } hillBand(c, PIC_RES * 0.82, 34, "#0a1420", rng); hillBand(c, PIC_RES * 0.9, 24, "#050a12", rng); }, }, { id: "blossom", name: "Blossom Lane", premium: true, draw: function (c, rng) { vgrad(c, [[0, "#fce4ee"], [0.45, "#f7cfe0"], [1, "#e7a9c6"]]); softSun(c, PIC_RES * 0.74, PIC_RES * 0.22, 170, "rgba(255,248,236,0.9)", "rgba(255,248,236,0)"); c.strokeStyle = "#5a3b2a"; c.lineWidth = 26; c.beginPath(); c.moveTo(-10, PIC_RES * 0.95); c.quadraticCurveTo(PIC_RES * 0.3, PIC_RES * 0.5, PIC_RES * 0.6, PIC_RES * 0.2); c.stroke(); c.lineWidth = 12; for (var br = 0; br < 6; br++) { var bx = PIC_RES * (0.2 + br * 0.09), by = PIC_RES * (0.7 - br * 0.09); c.beginPath(); c.moveTo(bx, by); c.quadraticCurveTo(bx + 80, by - 90, bx + 40 + rng() * 60, by - 150); c.stroke(); } for (var p = 0; p < 130; p++) { c.fillStyle = ["#fbd0e2", "#f7b7d3", "#ffffff", "#f49bc0"][Math.floor(rng() * 4)]; var px = rng() * PIC_RES, py = rng() * PIC_RES; c.beginPath(); c.arc(px, py, 5 + rng() * 6, 0, 6.29); c.fill(); } }, }, ]; function drawCollection(col: Collection): HTMLCanvasElement { var cv = document.createElement("canvas"); cv.width = PIC_RES; cv.height = PIC_RES; var c = cv.getContext("2d") as CanvasRenderingContext2D; var seed = 0; for (var i = 0; i < col.id.length; i++) seed = (seed * 31 + col.id.charCodeAt(i)) >>> 0; col.draw(c, mkRng(seed + 7)); return cv; } var picTexture = new THREE.CanvasTexture(document.createElement("canvas")); picTexture.colorSpace = THREE.SRGBColorSpace; picTexture.wrapS = THREE.ClampToEdgeWrapping; picTexture.wrapT = THREE.ClampToEdgeWrapping; picTexture.repeat.set(1 / BOARD, 1 / BOARD); var picMat = new THREE.MeshStandardMaterial({ map: picTexture, roughness: 0.86, metalness: 0.02 }); var woodEdgeMat = new THREE.MeshStandardMaterial({ color: 0x6b4a2c, roughness: 0.72, metalness: 0.04 }); if (!HIGH_QUALITY) { (picMat as any).flatShading = false; } function setPicture(col: Collection) { var cv = drawCollection(col); picTexture.image = cv; picTexture.needsUpdate = true; } // a faint "ghost" of the full picture on the board, as a solving aid (Peek). var ghostTex = new THREE.CanvasTexture(document.createElement("canvas")); ghostTex.colorSpace = THREE.SRGBColorSpace; var ghost = new THREE.Mesh( new THREE.PlaneGeometry(BOARD, BOARD), new THREE.MeshBasicMaterial({ map: ghostTex, transparent: true, opacity: 0.0, depthWrite: false }) ); ghost.rotation.x = -Math.PI / 2; ghost.position.set(0, 0.045, 0); scene.add(ghost); function refreshGhost(col: Collection) { ghostTex.image = drawCollection(col); ghostTex.needsUpdate = true; } // =========================================================================== // JIGSAW GEOMETRY - each piece is a real jigsaw shape (tabs + blanks) extruded // with a bevel for thickness. Two materials: the picture on the caps, wood on // the edges. UVs come from board coordinates so the assembled pieces show one // continuous picture. See notes above setPicture for the mapping. // =========================================================================== function jigsawEdge(shape: THREE.Shape, x0: number, y0: number, x1: number, y1: number, sign: number) { if (sign === 0) { shape.lineTo(x1, y1); return; } var dx = x1 - x0, dy = y1 - y0, L = Math.sqrt(dx * dx + dy * dy); var ux = dx / L, uy = dy / L; // along direction var nx = uy, ny = -ux; // right normal (outward for CCW winding) function pt(a: number, b: number): [number, number] { return [x0 + ux * (a * L) + nx * (b * L), y0 + uy * (a * L) + ny * (b * L)]; } var s = sign; var q1 = pt(0.42, 0); var c1 = pt(0.36, s * 0.16), c2 = pt(0.36, s * 0.34), top = pt(0.5, s * 0.34); var c3 = pt(0.64, s * 0.34), c4 = pt(0.64, s * 0.16), q2 = pt(0.58, 0); shape.lineTo(q1[0], q1[1]); shape.bezierCurveTo(c1[0], c1[1], c2[0], c2[1], top[0], top[1]); shape.bezierCurveTo(c3[0], c3[1], c4[0], c4[1], q2[0], q2[1]); shape.lineTo(x1, y1); } var THICK = 0.16, BEVEL = 0.028; function buildPieceGeometry(c: number, r: number, cols: number, rows: number, eTop: number, eBot: number, eLef: number, eRig: number): THREE.BufferGeometry { var cell = BOARD / cols; // square cells (cols === rows for our counts) var cx0 = c * cell, cx1 = (c + 1) * cell; var cy0 = r * cell, cy1 = (r + 1) * cell; var shape = new THREE.Shape(); shape.moveTo(cx0, cy0); jigsawEdge(shape, cx0, cy0, cx1, cy0, eBot); // bottom edge (+x), outward = -y jigsawEdge(shape, cx1, cy0, cx1, cy1, eRig); // right edge (+y), outward = +x jigsawEdge(shape, cx1, cy1, cx0, cy1, eTop); // top edge (-x), outward = +y jigsawEdge(shape, cx0, cy1, cx0, cy0, eLef); // left edge (-y), outward = -x shape.closePath(); var geo = new THREE.ExtrudeGeometry(shape, { depth: THICK, bevelEnabled: true, bevelThickness: BEVEL, bevelSize: BEVEL, bevelSegments: 2, steps: 1, }); // recenter the geometry on the piece cell center (UVs are already baked from // the board-coord shape, so this does not disturb the picture mapping) var ccx = (cx0 + cx1) / 2, ccy = (cy0 + cy1) / 2; geo.translate(-ccx, -ccy, 0); return geo; } // =========================================================================== // PUZZLE - build pieces, scatter them on the tray, drive drag + snap + finish. // =========================================================================== interface Piece { group: THREE.Group; homeX: number; homeZ: number; placed: boolean; quarter: number; // 0..3 rotation state (rotation mode only) } var COUNTS = [ { label: "Relaxed", n: 3, premium: false }, // 9 pieces { label: "Cozy", n: 4, premium: false }, // 16 pieces { label: "Classic", n: 6, premium: false }, // 36 pieces { label: "Challenge", n: 8, premium: true }, // 64 pieces ]; var pieces: Piece[] = []; var pieceMeshes: THREE.Mesh[] = []; var placedCount = 0, totalPieces = 0; var currentCol = COLLECTIONS[0]; var currentCount = COUNTS[1]; var rotationMode = false; var puzzleSeed = 1; var complete = false; var timeMs = 0; var PIECE_BASE_Y = 0.0; function clearPieces() { for (var i = 0; i < pieces.length; i++) { var g = pieces[i].group; scene.remove(g); g.traverse(function (o: any) { if (o.isMesh) { if (o.geometry) o.geometry.dispose(); } }); } pieces = []; pieceMeshes = []; placedCount = 0; complete = false; } function newPuzzle() { clearPieces(); setPicture(currentCol); refreshGhost(currentCol); var cols = currentCount.n, rows = currentCount.n; totalPieces = cols * rows; var rng = mkRng((puzzleSeed * 2654435761) >>> 0); // seam signs var eTop: number[][] = [], eBot: number[][] = [], eLef: number[][] = [], eRig: number[][] = []; for (var r = 0; r < rows; r++) { eTop[r] = []; eBot[r] = []; eLef[r] = []; eRig[r] = []; for (var c = 0; c < cols; c++) { eTop[r][c] = 0; eBot[r][c] = 0; eLef[r][c] = 0; eRig[r][c] = 0; } } for (var r2 = 1; r2 < rows; r2++) for (var c2 = 0; c2 < cols; c2++) { var sh = rng() < 0.5 ? 1 : -1; eBot[r2][c2] = sh; eTop[r2 - 1][c2] = -sh; } for (var c3 = 1; c3 < cols; c3++) for (var r3 = 0; r3 < rows; r3++) { var sv = rng() < 0.5 ? 1 : -1; eLef[r3][c3] = sv; eRig[r3][c3 - 1] = -sv; } var cell = BOARD / cols; for (var rr = 0; rr < rows; rr++) { for (var cc = 0; cc < cols; cc++) { var geo = buildPieceGeometry(cc, rr, cols, rows, eTop[rr][cc], eBot[rr][cc], eLef[rr][cc], eRig[rr][cc]); var mesh = new THREE.Mesh(geo, [picMat, woodEdgeMat]); mesh.rotation.x = -Math.PI / 2; // lay flat, picture face up if (HIGH_QUALITY) { mesh.castShadow = true; mesh.receiveShadow = true; } var group = new THREE.Group(); group.add(mesh); var centerX = (cc + 0.5) * cell, centerY = (rr + 0.5) * cell; var homeX = centerX - BOARD / 2; var homeZ = -(centerY - BOARD / 2); // scatter on the tray (front of board) or the side aprons var tx: number, tz: number; var side = rng(); if (side < 0.72) { tx = (rng() - 0.5) * (BOARD + 2.6); tz = BOARD / 2 + 0.7 + rng() * 2.0; } else if (side < 0.86) { tx = -(BOARD / 2 + 0.7 + rng() * 1.6); tz = (rng() - 0.5) * (BOARD + 1.0); } else { tx = (BOARD / 2 + 0.7 + rng() * 1.6); tz = (rng() - 0.5) * (BOARD + 1.0); } group.position.set(tx, PIECE_BASE_Y, tz); var quarter = rotationMode ? Math.floor(rng() * 4) : 0; group.rotation.y = -quarter * Math.PI / 2; scene.add(group); var p: Piece = { group: group, homeX: homeX, homeZ: homeZ, placed: false, quarter: quarter }; (group as any).__piece = p; pieces.push(p); pieceMeshes.push(mesh); } } goldTrim.visible = hasPass(); timeMs = 0; complete = false; updateHud(); } // =========================================================================== // INPUT - pick + drag pieces with the mouse or a finger; snap into place. // =========================================================================== var ray = new THREE.Raycaster(); var ndc = new THREE.Vector2(); var dragPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); var dragging: Piece | null = null; var selected: Piece | null = null; var dragOffX = 0, dragOffZ = 0; var GRAB_LIFT = 0.5; function setNdc(clientX: number, clientY: number) { var rect = canvas.getBoundingClientRect(); ndc.x = ((clientX - rect.left) / rect.width) * 2 - 1; ndc.y = -((clientY - rect.top) / rect.height) * 2 + 1; } function planeHit(y: number): THREE.Vector3 | null { dragPlane.constant = -y; var out = new THREE.Vector3(); var hit = ray.ray.intersectPlane(dragPlane, out); return hit ? out : null; } function snapRadius(): number { return (BOARD / currentCount.n) * 0.5; } function pickPiece(): Piece | null { ray.setFromCamera(ndc, camera); var hits = ray.intersectObjects(pieceMeshes, false); for (var i = 0; i < hits.length; i++) { var g = hits[i].object.parent as any; if (g && g.__piece && !g.__piece.placed) return g.__piece as Piece; } return null; } function onDown(clientX: number, clientY: number) { if (!W.__mcpityStarted || complete) return; setNdc(clientX, clientY); ray.setFromCamera(ndc, camera); var p = pickPiece(); if (!p) return; dragging = p; selected = p; var gp = planeHit(PIECE_BASE_Y); if (gp) { dragOffX = p.group.position.x - gp.x; dragOffZ = p.group.position.z - gp.z; } else { dragOffX = 0; dragOffZ = 0; } p.group.position.y = GRAB_LIFT; // bring to top so it renders above resting pieces p.group.renderOrder = 10; } function onMove(clientX: number, clientY: number) { if (!dragging) return; setNdc(clientX, clientY); ray.setFromCamera(ndc, camera); var gp = planeHit(GRAB_LIFT); if (!gp) return; var nx = gp.x + dragOffX, nz = gp.z + dragOffZ; nx = Math.max(-8, Math.min(8, nx)); nz = Math.max(-6, Math.min(6.6, nz)); dragging.group.position.x = nx; dragging.group.position.z = nz; } function onUp() { if (!dragging) return; var p = dragging; dragging = null; p.group.renderOrder = 0; var rotOk = !rotationMode || (p.quarter % 4 === 0); var dx = p.group.position.x - p.homeX, dz = p.group.position.z - p.homeZ; var dist = Math.sqrt(dx * dx + dz * dz); if (rotOk && dist < snapRadius()) { p.group.position.set(p.homeX, PIECE_BASE_Y, p.homeZ); p.group.rotation.y = 0; p.quarter = 0; p.placed = true; placedCount++; playSfx("snap"); sparkleAt(p.homeX, p.homeZ); updateHud(); if (placedCount >= totalPieces && !complete) finishPuzzle(); } else { p.group.position.y = PIECE_BASE_Y; playSfx("soft"); } } function rotateSelected() { if (!rotationMode || !selected || selected.placed) return; selected.quarter = (selected.quarter + 1) % 4; selected.group.rotation.y = -selected.quarter * Math.PI / 2; playSfx("click"); } canvas.addEventListener("pointerdown", function (e: PointerEvent) { e.preventDefault(); try { canvas.setPointerCapture(e.pointerId); } catch (_x) {} onDown(e.clientX, e.clientY); }); canvas.addEventListener("pointermove", function (e: PointerEvent) { onMove(e.clientX, e.clientY); }); canvas.addEventListener("pointerup", function () { onUp(); }); canvas.addEventListener("pointercancel", function () { onUp(); }); 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) {} } // =========================================================================== // SPARKLE + CONFETTI - a warm little burst on each snap and on completion. // =========================================================================== interface Spark { pts: THREE.Points; vel: Float32Array; life: number; max: number; } var sparks: Spark[] = []; function makeSpark(x: number, z: number, count: number, spread: number, up: number, colorA: number, colorB: number) { 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(colorA), cB = new THREE.Color(colorB); for (var i = 0; i < count; i++) { pos[i * 3] = x; pos[i * 3 + 1] = 0.2; pos[i * 3 + 2] = z; var a = Math.random() * 6.29, sp = Math.random() * spread; vel[i * 3] = Math.cos(a) * sp; vel[i * 3 + 1] = up * (0.6 + Math.random()); vel[i * 3 + 2] = Math.sin(a) * sp; var m = cA.clone().lerp(cB, Math.random()); 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.14, 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: 1.1 }); } function sparkleAt(x: number, z: number) { makeSpark(x, z, 26, 0.9, 2.0, 0xffe6a8, 0xffb24a); } function confetti() { for (var i = 0; i < 5; i++) { setTimeout(function () { makeSpark((Math.random() - 0.5) * BOARD, (Math.random() - 0.5) * BOARD, 60, 2.4, 3.2, 0xffd27a, 0xf49bc0); }, i * 160); } } 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] -= 5.4 * 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.05) { pos[j * 3 + 1] = 0.05; 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); } } } // =========================================================================== // HUD - cozy overlay: collection + count + rotation + peek, progress, menus. // =========================================================================== var css = document.createElement("style"); css.textContent = "#hj-ui{position:absolute;inset:0;pointer-events:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#f4ece0;user-select:none;-webkit-user-select:none}" + "#hj-panel{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:8px;pointer-events:auto;max-width:min(90vw,320px)}" + ".hj-card{background:rgba(28,20,13,.82);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:11px 12px;backdrop-filter:blur(4px)}" + ".hj-lab{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#c7b6a2;font-weight:700;margin-bottom:7px}" + ".hj-row{display:flex;flex-wrap:wrap;gap:6px}" + ".hj-chip{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#f4ece0;border-radius:99px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}" + ".hj-chip.on{background:#c8843c;border-color:#c8843c;color:#241b13}" + ".hj-chip.lock{opacity:.7}" + ".hj-chip .k{font-size:11px;opacity:.85;margin-left:4px}" + "#hj-actions{display:flex;gap:6px;flex-wrap:wrap}" + ".hj-btn{border:1px solid rgba(255,255,255,.16);background:rgba(28,20,13,.82);color:#f4ece0;border-radius:11px;padding:9px 13px;font-size:13px;font-weight:700;cursor:pointer}" + ".hj-btn.pri{background:#c8843c;border-color:#c8843c;color:#241b13}" + "#hj-prog{position:absolute;top:12px;left:50%;transform:translateX(-50%);pointer-events:none}" + "#hj-prog .chip{background:rgba(28,20,13,.82);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}" + "#hj-toast{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);background:rgba(28,20,13,.92);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}" + "#hj-toast.show{opacity:1}" + "#hj-rotate{position:absolute;right:16px;bottom:120px;width:70px;height:70px;border-radius:50%;border:1.5px solid rgba(255,217,138,.5);background:rgba(70,52,20,.7);color:#ffe6a8;font-size:26px;font-weight:800;pointer-events:auto;cursor:pointer;display:none;align-items:center;justify-content:center}" + "#hj-rotate.on{display:flex}" + "#hj-win{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:rgba(16,10,6,.78);pointer-events:auto;padding:24px}" + "#hj-win.on{display:flex}" + "#hj-win .big{font-size:32px;font-weight:800}" + "#hj-win .sub{font-size:15px;color:#c7b6a2}"; document.head.appendChild(css); var ui = document.createElement("div"); ui.id = "hj-ui"; ui.innerHTML = "

" + "

Picture

" + "

Pieces

" + "

" + "" + "" + "" + "

" + "

0 / 0 placed

" + "

" + "" + "

Puzzle complete!

"; root.appendChild(ui); function $(id: string): HTMLElement { return document.getElementById(id) as HTMLElement; } var elToast = $("hj-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"); }, 2400); } function locked(item: { premium: boolean }): boolean { return item.premium && !hasPass(); } function renderChips() { var colsWrap = $("hj-cols"); colsWrap.innerHTML = ""; for (var i = 0; i < COLLECTIONS.length; i++) { (function (col: Collection) { var chip = document.createElement("button"); chip.className = "hj-chip" + (col === currentCol ? " on" : "") + (locked(col) ? " lock" : ""); chip.innerHTML = col.name + (locked(col) ? " ★ Pass" : ""); chip.addEventListener("click", function () { if (locked(col)) { toast(col.name + " is a Season Pass picture. Unlock it with the Season Pass."); return; } currentCol = col; playSfx("click"); newPuzzle(); renderChips(); }); colsWrap.appendChild(chip); })(COLLECTIONS[i]); } var cntWrap = $("hj-counts"); cntWrap.innerHTML = ""; for (var j = 0; j < COUNTS.length; j++) { (function (cnt: { label: string; n: number; premium: boolean }) { var chip = document.createElement("button"); chip.className = "hj-chip" + (cnt === currentCount ? " on" : "") + (locked(cnt) ? " lock" : ""); chip.innerHTML = cnt.label + " " + (cnt.n * cnt.n) + "" + (locked(cnt) ? " ★" : ""); chip.addEventListener("click", function () { if (locked(cnt)) { toast("The " + (cnt.n * cnt.n) + "-piece challenge is a Season Pass count. Unlock it with the Season Pass."); return; } currentCount = cnt; playSfx("click"); newPuzzle(); renderChips(); }); cntWrap.appendChild(chip); })(COUNTS[j]); } } function updateHud() { $("hj-progtxt").textContent = placedCount + " / " + totalPieces + " placed"; $("hj-rotate").className = rotationMode ? "on" : ""; } $("hj-new").addEventListener("click", function () { puzzleSeed++; playSfx("click"); newPuzzle(); }); $("hj-win-again").addEventListener("click", function () { $("hj-win").classList.remove("on"); puzzleSeed++; playSfx("click"); newPuzzle(); }); var peeking = false, peekTimer: any = null; $("hj-peek").addEventListener("click", function () { peeking = true; (ghost.material as THREE.MeshBasicMaterial).opacity = 0.32; if (peekTimer) clearTimeout(peekTimer); peekTimer = setTimeout(function () { peeking = false; }, 2600); }); $("hj-rot").addEventListener("click", function () { rotationMode = !rotationMode; ($("hj-rot") as HTMLElement).textContent = "Rotate: " + (rotationMode ? "On" : "Off"); updateHud(); toast(rotationMode ? "Rotate mode on. Pieces start turned. Select a piece and press the turn button." : "Rotate mode off."); puzzleSeed++; newPuzzle(); }); $("hj-rotate").addEventListener("click", function () { rotateSelected(); }); try { ENT.on("change", function () { renderChips(); goldTrim.visible = hasPass(); }); } catch (_e) {} function finishPuzzle() { complete = true; playSfx("win"); confetti(); $("hj-win-t").textContent = "You finished " + currentCol.name + " in " + fmtTime(timeMs) + "."; $("hj-win").classList.add("on"); } function fmtTime(ms: number): string { var s = Math.floor(ms / 1000), mm = Math.floor(s / 60), ss = s % 60; return (mm < 10 ? "0" : "") + mm + ":" + (ss < 10 ? "0" : "") + ss; } // =========================================================================== // 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; if (started && !complete) { timeMs += dt * 1000; } // ghost peek fade var gm = ghost.material as THREE.MeshBasicMaterial; var target = peeking ? 0.32 : 0.0; gm.opacity += (target - gm.opacity) * Math.min(1, dt * 6); updateSparks(dt); var pt = $("hj-progtxt"); if (pt) pt.textContent = placedCount + " / " + totalPieces + " placed · " + fmtTime(timeMs); renderer.render(scene, camera); } // build a starter puzzle behind the splash, then begin the timer on Play renderChips(); newPuzzle(); requestAnimationFrame(frame); if (W.MCPityShell && W.MCPityShell.onStart) { W.MCPityShell.onStart(function () { timeMs = 0; }); } // 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) {}