// Wrenchwood - MCPity Web Engine game. A cozy 3D candy-contraption unscrew 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 bright little workshop under a soft sky. Candy-colored low-poly // toy contraptions (a cabin, a biplane, a ferris wheel, a rocket, and more) are // held together by oversized cartoon screws. Tap a screw to twist it out, but // only when no plate is resting on top of it (a dependency puzzle, not physics). // Removing every screw holding a plate lets the plate fall away and frees the // screws beneath. Twisted-out screws fly into color trays; fill a tray with 3 of // a color and it pops and clears. Only a few trays are open at once, so choose // your order. No timers - just twist, sort, and take each toy gently apart. // // 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: tap screws and trays with the mouse. mobile: tap 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: hero_toy, crate, cloud, tray. // The interactive plates + screws stay PROCEDURAL (they need per-piece control). // =========================================================================== 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 // four base contraptions + the workshop helpers) 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; } } // =========================================================================== // QUALITY - a holder the settings quality toggle drives (defined before the // shell block so the shell CONFIG.quality closures can reference it). The real // apply() is assigned once the renderer exists. // =========================================================================== var QUALITY = { high: !/Edg\//.test(navigator.userAgent), apply: function (_on: boolean) {} }; // =========================================================================== // SHELL CONFIG - branding for the reusable MCPity Game Shell (set BEFORE the // shell block below runs). Bright, candy-workshop, on-brand for Wrenchwood. // =========================================================================== W.__MCPITY_SHELL_CONFIG = { title: "Wrenchwood", tagline: "A cozy little workshop of candy contraptions. Twist out the screws, sort them by color, and take each toy gently apart.", accent: "#ff8a5c", panel: "#241b13", ink: "#f6efe4", subink: "#cdbba6", quality: { label: "High detail", get: function () { return QUALITY.high; }, set: function (on: boolean) { QUALITY.high = on; QUALITY.apply(on); }, }, controls: [ "Tap a screw to twist it out.", "A screw only comes out when no plate is resting on top of it.", "Screws fly into color trays. Fill a tray with 3 to clear it.", "Only a few trays are open at once, so choose your order.", ], }; // ---- 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 renderer = new THREE.WebGLRenderer({ antialias: QUALITY.high, alpha: false, powerPreference: "high-performance" }); var DPR = window.devicePixelRatio || 1; renderer.setPixelRatio(Math.min(DPR, 2)); if (QUALITY.high) { renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; } renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.05; renderer.outputColorSpace = THREE.SRGBColorSpace; var canvas = renderer.domElement; canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.style.touchAction = "none"; root.appendChild(canvas); var scene = new THREE.Scene(); // soft sky gradient backdrop drawn to a CanvasTexture. function makeSkyTexture(): THREE.CanvasTexture { var cv = document.createElement("canvas"); cv.width = 16; cv.height = 256; var c = cv.getContext("2d") as CanvasRenderingContext2D; var g = c.createLinearGradient(0, 0, 0, 256); g.addColorStop(0, "#aee3ff"); g.addColorStop(0.55, "#cdeeff"); g.addColorStop(1, "#eef7de"); c.fillStyle = g; c.fillRect(0, 0, 16, 256); var t = new THREE.CanvasTexture(cv); t.colorSpace = THREE.SRGBColorSpace; return t; } scene.background = makeSkyTexture(); scene.fog = new THREE.Fog(0xd6efff, 22, 46); var camera = new THREE.PerspectiveCamera(44, 1, 0.1, 120); camera.position.set(0, 6.4, 9.2); camera.lookAt(0, 1.7, 0.2); 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); // live quality apply (settings toggle). Rebuilds shadow + pixel ratio state. QUALITY.apply = function (on: boolean) { renderer.shadowMap.enabled = on; renderer.setPixelRatio(on ? Math.min(DPR, 2) : 1); scene.traverse(function (o: any) { if (o && o.isMesh) { o.castShadow = on && o.userData && o.userData.shad !== false; o.receiveShadow = on && o.userData && o.userData.recv === true; } }); renderer.shadowMap.needsUpdate = true; }; function stdMat(color: number, rough: number, metal: number): THREE.Material { if (QUALITY.high) return new THREE.MeshStandardMaterial({ color: color, roughness: rough, metalness: metal }); return new THREE.MeshLambertMaterial({ color: color }); } function shadowOn(o: THREE.Object3D, cast: boolean, recv: boolean) { o.traverse(function (n: any) { if (n && n.isMesh) { n.userData = n.userData || {}; n.userData.shad = cast; n.userData.recv = recv; if (QUALITY.high) { n.castShadow = cast; n.receiveShadow = recv; } } }); } // =========================================================================== // LIGHTING - bright, cheerful daylight with a soft warm key. // =========================================================================== scene.add(new THREE.AmbientLight(0xbcd6e8, 0.7)); var hemi = new THREE.HemisphereLight(0xffffff, 0x9fb890, 0.55); scene.add(hemi); var sun = new THREE.DirectionalLight(0xfff2d8, 1.15); sun.position.set(5, 10, 6); if (QUALITY.high) { sun.castShadow = true; sun.shadow.mapSize.set(1024, 1024); sun.shadow.camera.left = -8; sun.shadow.camera.right = 8; sun.shadow.camera.top = 8; sun.shadow.camera.bottom = -8; sun.shadow.camera.near = 1; sun.shadow.camera.far = 30; sun.shadow.bias = -0.0005; } scene.add(sun); var rim = new THREE.DirectionalLight(0x9ec8ff, 0.3); rim.position.set(-5, 5, -4); scene.add(rim); // =========================================================================== // GROUND + PEDESTAL - a grassy disc, a workbench pedestal, and (Season Pass) // a golden trim ring. Decorative Meshy props sit around the edges. // =========================================================================== var ground = new THREE.Mesh(new THREE.CircleGeometry(16, 40), stdMat(0x8fca6a, 0.98, 0)); ground.rotation.x = -Math.PI / 2; ground.position.y = -0.02; ground.userData = { recv: true }; if (QUALITY.high) ground.receiveShadow = true; scene.add(ground); var pedestal = new THREE.Mesh(new THREE.CylinderGeometry(2.9, 3.3, 0.5, 32), stdMat(0xcaa06a, 0.9, 0.03)); pedestal.position.y = 0.13; shadowOn(pedestal, false, true); scene.add(pedestal); var pedTop = new THREE.Mesh(new THREE.CylinderGeometry(2.75, 2.9, 0.14, 32), stdMat(0xe6c896, 0.85, 0.03)); pedTop.position.y = 0.4; shadowOn(pedTop, false, true); scene.add(pedTop); // Season Pass golden trim ring (advisory cosmetic). var goldTrim = new THREE.Mesh(new THREE.TorusGeometry(2.92, 0.09, 12, 40), stdMat(0xe8b94a, 0.3, 0.85)); goldTrim.rotation.x = Math.PI / 2; goldTrim.position.y = 0.42; goldTrim.visible = false; scene.add(goldTrim); // gentle drifting clouds (procedural), plus one Meshy cloud slot. var clouds: THREE.Object3D[] = []; function buildCloud(): THREE.Object3D { var g = new THREE.Group(); var m = stdMat(0xffffff, 1, 0); var puffs = [[0, 0, 0, 1.1], [1.0, 0.1, 0, 0.8], [-1.0, 0.05, 0.1, 0.85], [0.4, 0.5, 0, 0.7], [-0.4, 0.45, 0.1, 0.65]]; for (var i = 0; i < puffs.length; i++) { var s = new THREE.Mesh(new THREE.SphereGeometry(puffs[i][3], 12, 10), m); s.position.set(puffs[i][0], puffs[i][1], puffs[i][2]); g.add(s); } return g; } function placeCloud(x: number, y: number, z: number, scale: number, useSlot: boolean) { var c: THREE.Object3D | null = useSlot ? getSlot("cloud") : null; var obj = c ? c : buildCloud(); if (c) { var bb = new THREE.Box3().setFromObject(c); var sz = new THREE.Vector3(); bb.getSize(sz); var s = sz.y > 0.001 ? (2.0 * scale) / sz.y : scale; obj.scale.setScalar(s); } else { obj.scale.setScalar(scale); } obj.position.set(x, y, z); scene.add(obj); clouds.push(obj); } placeCloud(-8, 7.5, -8, 1.3, true); placeCloud(9, 8.6, -10, 1.6, false); placeCloud(-11, 9.4, -13, 2.0, false); // decorative dressing props (Meshy slots -> procedural fallback), placed off to // the sides so they never overlap the contraption or the trays. 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); shadowOn(m, true, false); obj = m; } else { obj = builder(); } obj.position.set(x, y, z); scene.add(obj); return obj; } function buildHeroToy(): THREE.Object3D { var g = new THREE.Group(); var base = new THREE.Mesh(new THREE.BoxGeometry(1.0, 0.7, 1.0), stdMat(0xff9ec7, 0.6, 0.05)); base.position.y = 0.35; var roof = new THREE.Mesh(new THREE.ConeGeometry(0.85, 0.6, 4), stdMat(0xffd36e, 0.6, 0.05)); roof.position.y = 1.0; roof.rotation.y = Math.PI / 4; var dot = new THREE.Mesh(new THREE.SphereGeometry(0.12, 12, 10), stdMat(0x4dabf7, 0.4, 0.2)); dot.position.set(0, 0.4, 0.51); g.add(base, roof, dot); shadowOn(g, true, false); return g; } function buildCrate(): THREE.Object3D { var g = new THREE.Group(); var box = new THREE.Mesh(new THREE.BoxGeometry(1.1, 0.7, 0.9), stdMat(0xc98a52, 0.85, 0.04)); box.position.y = 0.35; var colors = [0xff6b6b, 0xffd93d, 0x7ed957, 0x4dabf7]; for (var i = 0; i < 5; i++) { var b = new THREE.Mesh(new THREE.CylinderGeometry(0.09, 0.09, 0.18, 10), stdMat(colors[i % colors.length], 0.5, 0.2)); b.position.set((i - 2) * 0.16, 0.72, (i % 2) * 0.14 - 0.07); b.rotation.x = 1.2 + i * 0.2; g.add(b); } g.add(box); shadowOn(g, true, false); return g; } function buildBench(): THREE.Object3D { var g = new THREE.Group(); var top = new THREE.Mesh(new THREE.BoxGeometry(1.6, 0.16, 0.8), stdMat(0xb07a45, 0.9, 0.03)); top.position.y = 0.7; var legM = stdMat(0x8a5c34, 0.9, 0.03); var lp = [[-0.7, -0.32], [0.7, -0.32], [-0.7, 0.32], [0.7, 0.32]]; for (var i = 0; i < 4; i++) { var l = new THREE.Mesh(new THREE.BoxGeometry(0.12, 0.7, 0.12), legM); l.position.set(lp[i][0], 0.35, lp[i][1]); g.add(l); } g.add(top); shadowOn(g, true, false); return g; } placeProp("hero_toy", -4.6, 0.0, -2.2, 1.3, buildHeroToy); placeProp("crate", 4.7, 0.0, -1.9, 0.95, buildCrate); placeProp("tray", 4.9, 0.0, 2.6, 0.7, function () { var g = new THREE.Group(); var t = new THREE.Mesh(new THREE.BoxGeometry(0.9, 0.3, 0.6), stdMat(0xffb454, 0.7, 0.05)); t.position.y = 0.15; g.add(t); shadowOn(g, true, false); return g; }); placeProp("bench", -5.1, 0.0, 2.2, 0.86, buildBench); // =========================================================================== // PALETTE - candy screw colors. // =========================================================================== interface Swatch { name: string; hex: number; } var PALETTE: Swatch[] = [ { name: "Cherry", hex: 0xff5d5d }, { name: "Sunny", hex: 0xffd23d }, { name: "Mint", hex: 0x64d67f }, { name: "Sky", hex: 0x4dabf7 }, { name: "Grape", hex: 0xb197fc }, { name: "Bubble", hex: 0xff92c2 }, ]; // =========================================================================== // CONTRAPTION THEMES - each theme is a stack of pastel plates (layered by // height) with a screw count per plate. A screw is "covered" by any plate on a // higher layer whose footprint overlaps it, so you must peel plates top-down. // The two premium themes are Season Pass exclusives. // =========================================================================== interface PlateSpec { x: number; z: number; w: number; d: number; color: number; layer: number; shape: string; screws: number; } interface Theme { id: string; name: string; premium: boolean; plates: PlateSpec[]; } var THEMES: Theme[] = [ { id: "cabin", name: "Cabin", premium: false, plates: [ { x: 0, z: 0, w: 3.2, d: 2.4, color: 0xe0b789, layer: 0, shape: "box", screws: 3 }, { x: -0.9, z: 0, w: 1.0, d: 1.8, color: 0xffe0b0, layer: 1, shape: "box", screws: 2 }, { x: 0.9, z: 0, w: 1.0, d: 1.8, color: 0xffe0b0, layer: 1, shape: "box", screws: 2 }, { x: 0, z: 0, w: 2.9, d: 2.1, color: 0xff8f8f, layer: 2, shape: "wedge", screws: 2 }, ], }, { id: "biplane", name: "Biplane", premium: false, plates: [ { x: 0, z: 0, w: 3.4, d: 1.0, color: 0x9fd8ef, layer: 0, shape: "box", screws: 4 }, { x: 0, z: -1.1, w: 2.2, d: 0.7, color: 0xffd36e, layer: 1, shape: "box", screws: 2 }, { x: 0, z: 1.1, w: 2.2, d: 0.7, color: 0xffd36e, layer: 1, shape: "box", screws: 2 }, { x: 0, z: 0, w: 2.6, d: 0.8, color: 0xff9ec7, layer: 2, shape: "box", screws: 4 }, ], }, { id: "ferris", name: "Ferris Wheel", premium: false, plates: [ { x: 0, z: 0, w: 2.8, d: 1.5, color: 0xcaa27a, layer: 0, shape: "box", screws: 3 }, { x: 0, z: 0, w: 1.5, d: 1.5, color: 0x8fd0ff, layer: 1, shape: "disc", screws: 3 }, { x: 0, z: 0, w: 2.7, d: 2.7, color: 0xff9ec7, layer: 2, shape: "disc", screws: 6 }, ], }, { id: "rocket", name: "Rocket", premium: false, plates: [ { x: 0, z: 0, w: 2.5, d: 2.5, color: 0xff8f8f, layer: 0, shape: "box", screws: 3 }, { x: 0, z: 0, w: 1.4, d: 1.4, color: 0xffd36e, layer: 1, shape: "box", screws: 3 }, { x: 0, z: 0, w: 1.15, d: 1.15, color: 0x8fd0ff, layer: 2, shape: "box", screws: 3 }, { x: 0, z: 0, w: 0.95, d: 0.95, color: 0xb197fc, layer: 3, shape: "wedge", screws: 3 }, ], }, { id: "castle", name: "Castle", premium: true, plates: [ { x: 0, z: 0, w: 3.4, d: 2.6, color: 0xcaa27a, layer: 0, shape: "box", screws: 3 }, { x: -1.1, z: 0, w: 0.95, d: 0.95, color: 0xffe0b0, layer: 1, shape: "box", screws: 3 }, { x: 1.1, z: 0, w: 0.95, d: 0.95, color: 0xffe0b0, layer: 1, shape: "box", screws: 3 }, { x: 0, z: 0, w: 2.6, d: 0.85, color: 0xff9ec7, layer: 2, shape: "box", screws: 3 }, { x: 0, z: 0, w: 0.75, d: 0.75, color: 0xff5d5d, layer: 3, shape: "box", screws: 3 }, ], }, { id: "windmill", name: "Windmill", premium: true, plates: [ { x: 0, z: 0, w: 3.0, d: 2.2, color: 0xcaa27a, layer: 0, shape: "box", screws: 3 }, { x: 0, z: 0, w: 1.3, d: 1.3, color: 0xffe0b0, layer: 1, shape: "box", screws: 3 }, { x: 0, z: 0, w: 1.5, d: 1.5, color: 0xff8f8f, layer: 2, shape: "wedge", screws: 3 }, { x: 0, z: 0, w: 2.9, d: 0.42, color: 0x8fd0ff, layer: 3, shape: "box", screws: 3 }, { x: 0, z: 0, w: 0.42, d: 2.9, color: 0x8fd0ff, layer: 3, shape: "box", screws: 3 }, ], }, ]; var FREE_THEMES = THEMES.filter(function (t) { return !t.premium; }); // =========================================================================== // RNG - tiny seeded generator so every level is stable + designed. // =========================================================================== function mkRng(seed: number) { var s = (seed >>> 0) || 1; return function () { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; }; } // screw offsets arranged on a tidy ring inside a plate footprint. function ringOffsets(w: number, d: number, count: number): Array<[number, number]> { var out: Array<[number, number]> = []; if (count <= 1) { out.push([0, 0]); return out; } var rx = Math.max(0.2, w * 0.3), rz = Math.max(0.2, d * 0.3); var start = -Math.PI / 2; for (var i = 0; i < count; i++) { var a = start + (i / count) * Math.PI * 2; out.push([Math.cos(a) * rx, Math.sin(a) * rz]); } return out; } // =========================================================================== // LEVEL STATE - the pure logical model (shared by the solver + the UI). // =========================================================================== interface LScrew { color: number; plate: number; covered: number; coveredBy: number[]; removed: boolean; wx: number; wz: number; layer: number; } interface LPlate { screwIds: number[]; remaining: number; removed: boolean; } interface LBox { color: number; screws: number[]; } interface LState { screws: LScrew[]; plates: LPlate[]; boxes: LBox[]; buffer: number[]; bufferCap: number; remaining: number; } function cloneState(g: LState): LState { return { screws: g.screws.map(function (s) { return { color: s.color, plate: s.plate, covered: s.covered, coveredBy: s.coveredBy.slice(), removed: s.removed, wx: s.wx, wz: s.wz, layer: s.layer }; }), plates: g.plates.map(function (p) { return { screwIds: p.screwIds.slice(), remaining: p.remaining, removed: p.removed }; }), boxes: g.boxes.map(function (b) { return { color: b.color, screws: b.screws.slice() }; }), buffer: g.buffer.slice(), bufferCap: g.bufferCap, remaining: g.remaining, }; } // where can a screw of a given color go right now? returns a descriptor or null. function placementFor(g: LState, color: number): { kind: string; slot: number } | null { for (var i = 0; i < g.boxes.length; i++) { if (g.boxes[i].color === color && g.boxes[i].screws.length < 3) return { kind: "box", slot: i }; } for (var j = 0; j < g.boxes.length; j++) { if (g.boxes[j].color < 0) return { kind: "newbox", slot: j }; } if (g.buffer.length < g.bufferCap) return { kind: "buffer", slot: -1 }; return null; } // events emitted so the UI can animate the same mutation the logic performs. interface Ev { t: string; screw?: number; slot?: number; plate?: number; screws?: number[]; } function mostBufferColor(g: LState): number { var counts: { [k: number]: number } = {}; var best = -1, bestN = 0; for (var i = 0; i < g.buffer.length; i++) { var col = g.screws[g.buffer[i]].color; counts[col] = (counts[col] || 0) + 1; if (counts[col] > bestN) { bestN = counts[col]; best = col; } } return best; } // resolve pops + buffer flow to a fixpoint, appending UI events. function cascade(g: LState, events: Ev[]) { var changed = true, guard = 0; while (changed && guard++ < 200) { changed = false; // pop any full box. for (var i = 0; i < g.boxes.length; i++) { var b = g.boxes[i]; if (b.color >= 0 && b.screws.length >= 3) { events.push({ t: "pop", slot: i, screws: b.screws.slice() }); b.color = -1; b.screws = []; changed = true; } } // fill partial boxes from matching buffered screws. for (var k = 0; k < g.boxes.length; k++) { var box = g.boxes[k]; if (box.color < 0 || box.screws.length >= 3) continue; for (var q = 0; q < g.buffer.length && box.screws.length < 3;) { var sid = g.buffer[q]; if (g.screws[sid].color === box.color) { g.buffer.splice(q, 1); box.screws.push(sid); events.push({ t: "flow", screw: sid, slot: k }); changed = true; } else { q++; } } } // open a fresh box for the most-buffered color if a slot is free. if (g.buffer.length > 0) { var empty = -1; for (var e = 0; e < g.boxes.length; e++) { if (g.boxes[e].color < 0) { empty = e; break; } } if (empty >= 0) { var col = mostBufferColor(g); for (var m = 0; m < g.buffer.length; m++) { if (g.screws[g.buffer[m]].color === col) { var s2 = g.buffer[m]; g.buffer.splice(m, 1); g.boxes[empty].color = col; g.boxes[empty].screws.push(s2); events.push({ t: "flow", screw: s2, slot: empty }); changed = true; break; } } } } } } // remove a screw (assumes it is exposed and placeable); mutate g + return events. function applyRemove(g: LState, screwIdx: number): Ev[] { var events: Ev[] = []; var s = g.screws[screwIdx]; s.removed = true; g.remaining--; var place = placementFor(g, s.color); if (!place) { s.removed = false; g.remaining++; return events; } // guarded by caller if (place.kind === "box" || place.kind === "newbox") { if (place.kind === "newbox") g.boxes[place.slot].color = s.color; g.boxes[place.slot].screws.push(screwIdx); events.push({ t: "place", screw: screwIdx, slot: place.slot }); } else { g.buffer.push(screwIdx); events.push({ t: "place", screw: screwIdx, slot: -1 }); } // detach plate when its last screw is out; uncover the screws beneath. var pl = g.plates[s.plate]; pl.remaining--; if (pl.remaining <= 0 && !pl.removed) { pl.removed = true; events.push({ t: "plate", plate: s.plate }); for (var i = 0; i < g.screws.length; i++) { if (g.screws[i].coveredBy.indexOf(s.plate) >= 0 && g.screws[i].covered > 0) g.screws[i].covered--; } } cascade(g, events); return events; } function exposedIdx(g: LState): number[] { var out: number[] = []; for (var i = 0; i < g.screws.length; i++) { if (!g.screws[i].removed && g.screws[i].covered === 0) out.push(i); } return out; } // greedy solvability check (mirrors the player's available moves). If greedy can // fully clear, the player can too. Used to accept a generated seed. function isSolvable(seedState: LState): boolean { var g = cloneState(seedState); var guard = 0; while (g.remaining > 0 || g.buffer.length > 0) { if (guard++ > 5000) return false; var exp = exposedIdx(g); if (exp.length === 0) { // nothing exposed but screws remain -> impossible geometry (should not happen) if (g.remaining > 0) return false; break; } // prefer a screw that completes a box, then one matching a partial box, then any placeable. var pick = -1, rank = 99; for (var i = 0; i < exp.length; i++) { var col = g.screws[exp[i]].color; var pl = placementFor(g, col); if (!pl) continue; var r = 3; if (pl.kind === "box") { r = (g.boxes[pl.slot].screws.length === 2) ? 0 : 1; } else if (pl.kind === "newbox") r = 2; else r = 3; if (r < rank) { rank = r; pick = exp[i]; if (r === 0) break; } } if (pick < 0) return false; // deadlock under greedy applyRemove(g, pick); } return g.remaining === 0 && g.buffer.length === 0; } // =========================================================================== // GEOMETRY HELPERS - plate + screw builders, and the world-space layout. // =========================================================================== var PLATE_H = 0.34; function layerY(l: number): number { return 0.55 + l * 0.66; } function plateTopY(l: number): number { return layerY(l) + PLATE_H / 2; } var SLOTS_BASE = 3; var BUFFER_CAP = 5; var TRAY_TOP_Y = 0.62; // tray + buffer world layout (depends on the number of open trays). function trayX(slot: number, slots: number): number { return (slot - (slots - 1) / 2) * 2.0; } function trayCenter(slot: number, slots: number): THREE.Vector3 { return new THREE.Vector3(trayX(slot, slots), 0.34, 4.2); } function boxPeg(slot: number, peg: number, slots: number): THREE.Vector3 { return new THREE.Vector3(trayX(slot, slots) + (peg - 1) * 0.36, TRAY_TOP_Y, 4.2); } function bufferPeg(i: number): THREE.Vector3 { return new THREE.Vector3((i - (BUFFER_CAP - 1) / 2) * 0.62, 0.5, 5.35); } function buildScrewMesh(color: number): { group: THREE.Group; headMat: THREE.MeshStandardMaterial | THREE.MeshLambertMaterial } { var g = new THREE.Group(); var metal = stdMat(0xbfc4cc, 0.5, 0.6); var shaft = new THREE.Mesh(new THREE.CylinderGeometry(0.07, 0.055, 0.24, 12), metal); shaft.position.y = 0.12; var headMat = stdMat(color, 0.42, 0.12) as any; var head = new THREE.Mesh(new THREE.CylinderGeometry(0.17, 0.16, 0.12, 16), headMat); head.position.y = 0.3; var collar = new THREE.Mesh(new THREE.CylinderGeometry(0.12, 0.12, 0.05, 14), metal); collar.position.y = 0.23; var slotMat = stdMat(0x3a2f28, 0.7, 0); var s1 = new THREE.Mesh(new THREE.BoxGeometry(0.24, 0.03, 0.05), slotMat); s1.position.y = 0.37; var s2 = new THREE.Mesh(new THREE.BoxGeometry(0.05, 0.03, 0.24), slotMat); s2.position.y = 0.37; g.add(shaft, collar, head, s1, s2); shadowOn(g, true, false); return { group: g, headMat: headMat }; } function buildPlateMesh(spec: PlateSpec): THREE.Group { var g = new THREE.Group(); var y = layerY(spec.layer); var body: THREE.Mesh; if (spec.shape === "disc") { body = new THREE.Mesh(new THREE.CylinderGeometry(Math.min(spec.w, spec.d) / 2, Math.min(spec.w, spec.d) / 2, PLATE_H, 28), stdMat(spec.color, 0.6, 0.06)); } else { body = new THREE.Mesh(new THREE.BoxGeometry(spec.w, PLATE_H, spec.d), stdMat(spec.color, 0.6, 0.06)); } body.position.y = y; g.add(body); if (spec.shape === "wedge") { var cap = new THREE.Mesh(new THREE.ConeGeometry(Math.min(spec.w, spec.d) * 0.62, 0.42, 4), stdMat(spec.color, 0.6, 0.06)); cap.position.y = y + PLATE_H / 2 + 0.2; cap.rotation.y = Math.PI / 4; shadowOn(cap, true, false); g.add(cap); } g.position.set(spec.x, 0, spec.z); shadowOn(g, true, true); return g; } // =========================================================================== // LOGIC BUILDER - build an LState (screws/plates/covers) from a theme + a color // bag. No meshes; used by both the solver trial and the live level. // =========================================================================== function buildLogicState(theme: Theme, bag: number[], slots: number): LState { var screws: LScrew[] = []; var plates: LPlate[] = []; var idx = 0; for (var pi = 0; pi < theme.plates.length; pi++) { var spec = theme.plates[pi]; var offs = ringOffsets(spec.w, spec.d, spec.screws); var ids: number[] = []; for (var s = 0; s < offs.length; s++) { var wx = spec.x + offs[s][0], wz = spec.z + offs[s][1]; var coveredBy: number[] = []; for (var pj = 0; pj < theme.plates.length; pj++) { if (pj === pi) continue; var P = theme.plates[pj]; if (P.layer <= spec.layer) continue; var hw = P.w / 2 - 0.05, hd = P.d / 2 - 0.05; if (Math.abs(wx - P.x) <= hw && Math.abs(wz - P.z) <= hd) coveredBy.push(pj); } screws.push({ color: bag[idx], plate: pi, covered: coveredBy.length, coveredBy: coveredBy, removed: false, wx: wx, wz: wz, layer: spec.layer }); ids.push(idx); idx++; } plates.push({ screwIds: ids, remaining: ids.length, removed: false }); } var boxes: LBox[] = []; for (var b = 0; b < slots; b++) boxes.push({ color: -1, screws: [] }); return { screws: screws, plates: plates, boxes: boxes, buffer: [], bufferCap: BUFFER_CAP, remaining: screws.length }; } function shuffle(arr: number[], rng: () => number) { for (var i = arr.length - 1; i > 0; i--) { var j = Math.floor(rng() * (i + 1)); var t = arr[i]; arr[i] = arr[j]; arr[j] = t; } } function totalScrews(theme: Theme): number { var t = 0; for (var i = 0; i < theme.plates.length; i++) t += theme.plates[i].screws; return t; } function assignColors(theme: Theme, colors: number, seed: number): number[] { var T = totalScrews(theme); var rng = mkRng(seed); var pal: number[] = []; for (var i = 0; i < PALETTE.length; i++) pal.push(i); shuffle(pal, rng); var chosen = pal.slice(0, colors); var counts: number[] = []; for (var c = 0; c < colors; c++) counts.push(3); var extra = (T - 3 * colors) / 3; for (var e = 0; e < extra; e++) counts[Math.floor(rng() * colors)] += 3; var bag: number[] = []; for (var k = 0; k < colors; k++) for (var q = 0; q < counts[k]; q++) bag.push(chosen[k]); shuffle(bag, rng); return bag; } // choose a color bag + slot count that the greedy solver can clear (guaranteed // to succeed once slots reaches the color count, since then every screw always fits). function generateLevel(theme: Theme, colors: number): { bag: number[]; slots: number } { for (var slots = SLOTS_BASE; slots <= colors; slots++) { for (var seed = 1; seed <= 40; seed++) { var bag = assignColors(theme, colors, seed + slots * 997); var trial = buildLogicState(theme, bag, slots); if (isSolvable(trial)) return { bag: bag, slots: slots }; } } // final safety net: slots == colors is always solvable. return { bag: assignColors(theme, colors, 1), slots: colors }; } // =========================================================================== // RUNTIME - the live level (logic state g + mesh bookkeeping). // =========================================================================== var g: LState = null as any; var levelIndex = 0; var curTheme: Theme = THEMES[0]; var curSlots = SLOTS_BASE; var screwMesh: THREE.Group[] = []; var screwHeadMat: any[] = []; var plateGroup: THREE.Group[] = []; var boxGroups: THREE.Group[] = []; var boxBinMat: (THREE.MeshStandardMaterial | THREE.MeshLambertMaterial)[] = []; var uiBox: number[][] = []; var uiBuffer: number[] = []; var contraption = new THREE.Group(); scene.add(contraption); var extraBoxUsed = false; var totalThisLevel = 0; var anims: Array<(dt: number) => boolean> = []; var busy = 0; // count of screws mid-flight (for gentle input gating) function clearBoard() { contraption.clear(); for (var i = 0; i < boxGroups.length; i++) scene.remove(boxGroups[i]); screwMesh = []; screwHeadMat = []; plateGroup = []; boxGroups = []; boxBinMat = []; uiBox = []; uiBuffer = []; anims = []; busy = 0; } function buildTrayMesh(slot: number, slots: number): THREE.Group { var grp = new THREE.Group(); var binMat = stdMat(0xb9b1a4, 0.85, 0.05) as any; var w = 1.5, d = 0.8, h = 0.34; var floor = new THREE.Mesh(new THREE.BoxGeometry(w, 0.08, d), binMat); floor.position.y = 0.16; var wallM = binMat; var back = new THREE.Mesh(new THREE.BoxGeometry(w, h, 0.08), wallM); back.position.set(0, 0.24, -d / 2 + 0.04); var frontW = new THREE.Mesh(new THREE.BoxGeometry(w, h * 0.6, 0.08), wallM); frontW.position.set(0, 0.18, d / 2 - 0.04); var left = new THREE.Mesh(new THREE.BoxGeometry(0.08, h, d), wallM); left.position.set(-w / 2 + 0.04, 0.24, 0); var right = new THREE.Mesh(new THREE.BoxGeometry(0.08, h, d), wallM); right.position.set(w / 2 - 0.04, 0.24, 0); grp.add(floor, back, frontW, left, right); shadowOn(grp, false, true); grp.position.copy(trayCenter(slot, slots)); boxBinMat[slot] = binMat; return grp; } function paintTray(slot: number, color: number) { var m: any = boxBinMat[slot]; if (!m) return; m.color.setHex(color >= 0 ? color : 0xb9b1a4); } // place a screw mesh onto a tray peg (UI bookkeeping) and return the target. function uiPlaceInBox(screwIdx: number, slot: number): THREE.Vector3 { if (!uiBox[slot]) uiBox[slot] = []; paintTray(slot, PALETTE[g.screws[screwIdx].color].hex); var peg = uiBox[slot].length; uiBox[slot].push(screwIdx); return boxPeg(slot, peg, curSlots); } function uiPlaceInBuffer(screwIdx: number): THREE.Vector3 { uiBuffer.push(screwIdx); return bufferPeg(uiBuffer.length - 1); } // =========================================================================== // ANIMATION HELPERS. // =========================================================================== function easeOut(t: number): number { return 1 - Math.pow(1 - t, 3); } function lerpV(a: THREE.Vector3, b: THREE.Vector3, t: number, out: THREE.Vector3) { out.set(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t, a.z + (b.z - a.z) * t); } // twist a screw out of the contraption, then fly it to its tray/buffer target. function animExtract(mesh: THREE.Group, target: THREE.Vector3, onDone: () => void) { busy++; var p0 = mesh.position.clone(); var p1 = p0.clone(); p1.y += 1.1; var t = 0; var spinDur = 0.42, flyDur = 0.5; var tmp = new THREE.Vector3(); anims.push(function (dt: number): boolean { t += dt; if (t < spinDur) { var k = t / spinDur; mesh.rotation.y += dt * 18; lerpV(p0, p1, easeOut(k), tmp); mesh.position.copy(tmp); return true; } var f = Math.min(1, (t - spinDur) / flyDur); lerpV(p1, target, easeOut(f), tmp); tmp.y += Math.sin(f * Math.PI) * 0.6; mesh.position.copy(tmp); mesh.rotation.y += dt * 6; var sc = 1 - 0.25 * f; mesh.scale.setScalar(sc); if (f >= 1) { mesh.position.copy(target); mesh.rotation.y = 0; mesh.scale.setScalar(0.75); busy--; onDone(); return false; } return true; }); } // short hop between two resting spots (buffer -> tray, or buffer re-pack). function animHop(mesh: THREE.Group, target: THREE.Vector3, delay: number, onDone?: () => void) { var t = -delay, dur = 0.34; var p0: THREE.Vector3 | null = null; var tmp = new THREE.Vector3(); anims.push(function (dt: number): boolean { t += dt; if (t < 0) return true; if (!p0) p0 = mesh.position.clone(); var f = Math.min(1, t / dur); lerpV(p0, target, easeOut(f), tmp); tmp.y += Math.sin(f * Math.PI) * 0.35; mesh.position.copy(tmp); if (f >= 1) { mesh.position.copy(target); if (onDone) onDone(); return false; } return true; }); } // a plate whose last screw is gone lifts off, tips, and fades away. function animPlateDetach(grp: THREE.Group, delay: number) { var t = -delay, dur = 0.7; var made = false; var mats: any[] = []; anims.push(function (dt: number): boolean { t += dt; if (t < 0) return true; if (!made) { made = true; grp.traverse(function (o: any) { if (o.isMesh && o.material) { o.material = o.material.clone(); o.material.transparent = true; mats.push(o.material); } }); } var f = Math.min(1, t / dur); grp.position.y = grp.position.y + dt * 2.6; grp.rotation.z += dt * 1.1; for (var i = 0; i < mats.length; i++) mats[i].opacity = 1 - f; if (f >= 1) { contraption.remove(grp); return false; } return true; }); } // ---- sparks / confetti ---- interface Spark { pts: THREE.Points; vel: Float32Array; life: number; max: number; } var sparks: Spark[] = []; function makeSpark(pos: THREE.Vector3, count: number, spread: number, up: number, colorA: number, colorB: number) { var geo = new THREE.BufferGeometry(); var p = new Float32Array(count * 3), vel = new Float32Array(count * 3), col = new Float32Array(count * 3); var cA = new THREE.Color(colorA), cB = new THREE.Color(colorB); for (var i = 0; i < count; i++) { p[i * 3] = pos.x; p[i * 3 + 1] = pos.y; p[i * 3 + 2] = pos.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(p, 3)); geo.setAttribute("color", new THREE.BufferAttribute(col, 3)); var pmat = new THREE.PointsMaterial({ size: 0.16, 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 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.6 * 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); } } } function confetti() { for (var i = 0; i < 5; i++) { setTimeout(function () { makeSpark(new THREE.Vector3((Math.random() - 0.5) * 4, 2.2, (Math.random() - 0.5) * 2), 60, 2.6, 3.4, 0xffd27a, 0xff92c2); }, i * 150); } } // =========================================================================== // EVENT PLAYBACK - turn the logic events from applyRemove into animations. // =========================================================================== function popTray(slot: number, screws: number[], delay: number) { var t = -delay; anims.push(function (dt: number): boolean { t += dt; if (t < 0) return true; var arr = uiBox[slot] || screws; for (var i = 0; i < arr.length; i++) { var mesh = screwMesh[arr[i]]; if (!mesh) continue; var c = boxPeg(slot, i, curSlots); makeSpark(new THREE.Vector3(c.x, c.y + 0.2, c.z), 16, 1.2, 2.4, PALETTE[g.screws[arr[i]].color].hex, 0xffffff); contraption.remove(mesh); scene.remove(mesh); } uiBox[slot] = []; paintTray(slot, -1); playSfx("pop"); return false; }); } function repackBuffer(delay: number) { for (var i = 0; i < uiBuffer.length; i++) { var mesh = screwMesh[uiBuffer[i]]; if (mesh) animHop(mesh, bufferPeg(i), delay); } } function playEvents(events: Ev[], tappedIdx: number) { var delay = 0.06; // event 0 is always the tapped screw being placed (box or buffer). var repack = false; for (var i = 0; i < events.length; i++) { var ev = events[i]; if (ev.t === "place") { var tgt = (ev.slot !== undefined && ev.slot >= 0) ? uiPlaceInBox(ev.screw as number, ev.slot) : uiPlaceInBuffer(ev.screw as number); var mesh0 = screwMesh[ev.screw as number]; if (mesh0) { (function (m, t2) { animExtract(m, t2, function () { playSfx("snap"); }); })(mesh0, tgt); } } else if (ev.t === "flow") { // the screw is currently in the buffer -> hop it to its new tray peg. var idxInBuf = uiBuffer.indexOf(ev.screw as number); if (idxInBuf >= 0) uiBuffer.splice(idxInBuf, 1); var tgt2 = uiPlaceInBox(ev.screw as number, ev.slot as number); var mesh1 = screwMesh[ev.screw as number]; if (mesh1) animHop(mesh1, tgt2, delay); delay += 0.1; repack = true; } else if (ev.t === "pop") { popTray(ev.slot as number, ev.screws as number[], delay); delay += 0.2; } else if (ev.t === "plate") { var pg = plateGroup[ev.plate as number]; if (pg) animPlateDetach(pg, delay * 0.4); } } if (repack) repackBuffer(delay + 0.05); refreshScrewLook(); updateHud(); // win check if (g.remaining === 0 && g.buffer.length === 0 && !won) { won = true; setTimeout(function () { finishLevel(); }, 700 + delay * 1000); } } // =========================================================================== // SCREW LOOK - accessible screws glow + bob; covered screws sit dim. // =========================================================================== function refreshScrewLook() { for (var i = 0; i < g.screws.length; i++) { var s = g.screws[i]; var mat = screwHeadMat[i]; if (!mat || !mat.emissive) continue; if (s.removed) continue; if (s.covered === 0) { mat.emissive.setHex(PALETTE[s.color].hex); mat.emissiveIntensity = 0.25; } else { mat.emissive.setHex(0x000000); mat.emissiveIntensity = 0; } } } // =========================================================================== // LEVEL BUILD. // =========================================================================== function levelColorCount(theme: Theme, n: number): number { var T = totalScrews(theme); var c = 3 + Math.floor(n / 3); return Math.max(3, Math.min(c, Math.floor(T / 3), PALETTE.length)); } function buildLevel(n: number) { clearBoard(); won = false; extraBoxUsed = false; var pool = hasPass() ? THEMES : FREE_THEMES; curTheme = pool[n % pool.length]; var colors = levelColorCount(curTheme, n); var gen = generateLevel(curTheme, colors); curSlots = gen.slots; g = buildLogicState(curTheme, gen.bag, curSlots); totalThisLevel = g.remaining; // plate meshes. for (var pi = 0; pi < curTheme.plates.length; pi++) { var pg = buildPlateMesh(curTheme.plates[pi]); plateGroup[pi] = pg; contraption.add(pg); } // screw meshes seated on their plates. for (var si = 0; si < g.screws.length; si++) { var s = g.screws[si]; var sm = buildScrewMesh(PALETTE[s.color].hex); sm.group.position.set(s.wx, plateTopY(s.layer), s.wz); screwMesh[si] = sm.group; screwHeadMat[si] = sm.headMat; contraption.add(sm.group); } // trays. for (var b = 0; b < curSlots; b++) { var tg = buildTrayMesh(b, curSlots); boxGroups[b] = tg; scene.add(tg); uiBox[b] = []; } goldTrim.visible = hasPass(); refreshScrewLook(); updateHud(); renderChips(); } // =========================================================================== // INPUT - tap a screw to twist it out (if exposed + there is room to sort it). // =========================================================================== var ray = new THREE.Raycaster(); var ndc = new THREE.Vector2(); 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 wiggle(mesh: THREE.Group) { var t = 0; var base = mesh.rotation.z; anims.push(function (dt: number): boolean { t += dt; mesh.rotation.z = base + Math.sin(t * 40) * 0.12 * Math.max(0, 1 - t / 0.35); if (t >= 0.35) { mesh.rotation.z = base; return false; } return true; }); } function pickScrew(): number { ray.setFromCamera(ndc, camera); var hits = ray.intersectObjects(screwMesh.filter(function (m) { return !!m; }), true); for (var i = 0; i < hits.length; i++) { var o: any = hits[i].object; while (o && o.parent && screwMesh.indexOf(o) < 0) o = o.parent; var idx = screwMesh.indexOf(o); if (idx >= 0 && g.screws[idx] && !g.screws[idx].removed) return idx; } return -1; } function onTap(clientX: number, clientY: number) { if (!W.__mcpityStarted || won) return; setNdc(clientX, clientY); var idx = pickScrew(); if (idx < 0) return; var s = g.screws[idx]; if (s.covered > 0) { wiggle(screwMesh[idx]); playSfx("soft"); toast("That screw is under a plate. Clear the plates above it first."); return; } var place = placementFor(g, s.color); if (!place) { wiggle(screwMesh[idx]); playSfx("soft"); toast("No room to sort that color. Fill a tray to clear one first."); return; } var events = applyRemove(g, idx); playEvents(events, idx); } canvas.addEventListener("pointerdown", function (e: PointerEvent) { e.preventDefault(); onTap(e.clientX, e.clientY); }); function playSfx(name: string) { try { var on = W.__mcpitySoundOn ? W.__mcpitySoundOn() : true; if (on && W.MCPityMusic && W.MCPityMusic.sfx) W.MCPityMusic.sfx(name); } catch (_e) {} } // =========================================================================== // HUD. // =========================================================================== var css = document.createElement("style"); css.textContent = "#ww-ui{position:absolute;inset:0;pointer-events:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#2c2016;user-select:none;-webkit-user-select:none}" + "#ww-panel{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:8px;pointer-events:auto;max-width:min(92vw,340px)}" + ".ww-card{background:rgba(255,255,255,.82);border:1px solid rgba(80,60,40,.14);border-radius:14px;padding:10px 12px;backdrop-filter:blur(4px);box-shadow:0 6px 18px rgba(60,40,20,.12)}" + ".ww-lab{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#a07a52;font-weight:800;margin-bottom:5px}" + ".ww-title{font-size:17px;font-weight:800;color:#3a2a1a}" + ".ww-sub{font-size:12px;color:#7a5c3c;margin-top:2px}" + "#ww-actions{display:flex;gap:6px;flex-wrap:wrap}" + ".ww-btn{border:1px solid rgba(80,60,40,.16);background:rgba(255,255,255,.9);color:#3a2a1a;border-radius:11px;padding:9px 13px;font-size:13px;font-weight:700;cursor:pointer}" + ".ww-btn.pri{background:#ff8a5c;border-color:#ff8a5c;color:#fff}" + ".ww-btn.pass{background:#ffe1c4;border-color:#ffcf9f;color:#8a4a1a}" + "#ww-prog{position:absolute;top:12px;left:50%;transform:translateX(-50%);pointer-events:none}" + "#ww-prog .chip{background:rgba(255,255,255,.86);border:1px solid rgba(80,60,40,.14);border-radius:11px;padding:8px 14px;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:#3a2a1a}" + "#ww-toast{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);background:rgba(44,32,22,.92);color:#fdf3e6;border-radius:11px;padding:9px 15px;font-size:14px;max-width:84%;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}" + "#ww-toast.show{opacity:1}" + "#ww-win{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:rgba(20,30,40,.55);pointer-events:auto;padding:24px;color:#fff}" + "#ww-win.on{display:flex}" + "#ww-win .big{font-size:32px;font-weight:800}" + "#ww-win .sub{font-size:15px;opacity:.9}"; document.head.appendChild(css); var ui = document.createElement("div"); ui.id = "ww-ui"; ui.innerHTML = "

" + "

Now taking apart

Cabin

Level 1

" + "

Trays open

3 trays, sort by color

" + "

" + "" + "" + "

" + "

0 / 0 screws

" + "

Toy taken apart!

"; root.appendChild(ui); function $(id: string): HTMLElement { return document.getElementById(id) as HTMLElement; } var elToast = $("ww-toast"); var toastTimer: any = null; function toast(t: string) { elToast.textContent = t; elToast.classList.add("show"); if (toastTimer) clearTimeout(toastTimer); toastTimer = setTimeout(function () { elToast.classList.remove("show"); }, 2600); } var won = false; function updateHud() { var placed = totalThisLevel - g.remaining; $("ww-progtxt").textContent = placed + " / " + totalThisLevel + " screws"; $("ww-theme").textContent = curTheme.name + (curTheme.premium ? " ★" : ""); $("ww-lvl").textContent = "Level " + (levelIndex + 1); $("ww-trays").textContent = curSlots + " trays open" + (curSlots < levelColorCount(curTheme, levelIndex) ? " (fewer than the colors, so choose your order)" : ""); } function renderChips() { /* no picture chips in this game; theme + trays shown in HUD */ } $("ww-reset").addEventListener("click", function () { playSfx("click"); buildLevel(levelIndex); }); $("ww-next").addEventListener("click", function () { $("ww-win").classList.remove("on"); levelIndex++; playSfx("click"); buildLevel(levelIndex); }); $("ww-extra").addEventListener("click", function () { if (!hasPass()) { toast("An extra tray is a Season Pass helper. Unlock it with the Season Pass."); return; } if (extraBoxUsed) { toast("You have already added an extra tray this toy."); return; } extraBoxUsed = true; var slot = curSlots; curSlots++; var tg = buildTrayMesh(slot, curSlots); boxGroups[slot] = tg; scene.add(tg); uiBox[slot] = []; g.boxes.push({ color: -1, screws: [] }); // re-place existing trays for the new count. for (var b = 0; b < curSlots; b++) { boxGroups[b].position.copy(trayCenter(b, curSlots)); } playSfx("pop"); toast("Extra tray added. A little more room to sort."); updateHud(); }); try { ENT.on("change", function () { goldTrim.visible = hasPass(); updateHud(); }); } catch (_e) {} function finishLevel() { var next = levelIndex + 1; var pool = hasPass() ? THEMES : FREE_THEMES; var nextName = pool[next % pool.length].name; $("ww-win-t").textContent = "Nice work on the " + curTheme.name + ". Up next: " + nextName + "."; $("ww-win").classList.add("on"); playSfx("win"); confetti(); } // =========================================================================== // LOOP. // =========================================================================== var last = 0; var idleT = 0; function frame(t: number) { requestAnimationFrame(frame); var dt = Math.min(0.05, (t - last) / 1000 || 0); last = t; idleT += dt; for (var i = anims.length - 1; i >= 0; i--) { if (!anims[i](dt)) anims.splice(i, 1); } updateSparks(dt); // gentle bob on accessible screws so the player sees what is tappable. if (g) { for (var s = 0; s < g.screws.length; s++) { var sc = g.screws[s]; if (sc.removed || sc.covered !== 0) continue; var m = screwMesh[s]; if (!m || busy > 0) continue; m.position.y = plateTopY(sc.layer) + Math.sin(idleT * 3 + s * 0.7) * 0.03; } } // drift clouds. for (var c = 0; c < clouds.length; c++) { clouds[c].position.x += dt * 0.25 * (1 + c * 0.15); if (clouds[c].position.x > 16) clouds[c].position.x = -16; } renderer.render(scene, camera); } // build the first toy behind the splash, then begin on Play. buildLevel(0); requestAnimationFrame(frame); if (W.MCPityShell && W.MCPityShell.onStart) { W.MCPityShell.onStart(function () { /* first toy already built */ }); } // 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) {}