); } function WavePortal({ forwardNonce, onPhase, onExit }) { // phases: 'seq' (3 entry clips) → 'final' (skull-4 held + riddle) → 'explode' // → 'hall' (hall-1, hall-2) → 'hallEnd' (held; ▲ steps you in) // → 'orb' (wandering orb; tap to pop) → 'mirror' (webcam; tap to exit) const [phase, setPhase] = useState('seq'); const [step, setStep] = useState(0); const [shown, setShown] = useState(0); const [touched, setTouched] = useState({ chandelier: false, skull: false }); const [orbPopped, setOrbPopped] = useState(false); const SKULL4 = WAVE_PORTAL[WAVE_PORTAL.length - 1].src; const HALL2 = WAVE_HALL[WAVE_HALL.length - 1]; // report phase up so the Pad can re-enable ▲ at the hallway end useEffect(() => { onPhase && onPhase(phase); }, [phase]); // reveal the ancient line one letter every ~2s useEffect(() => { if (phase !== 'final' || shown >= PORTAL_LINE.length) return; const t = setTimeout(() => setShown(s => s + 1), shown === 0 ? 900 : 2000); return () => clearTimeout(t); }, [phase, shown]); // both hidden points touched → explode useEffect(() => { if (phase === 'final' && touched.chandelier && touched.skull) { const t = setTimeout(() => setPhase('explode'), 220); return () => clearTimeout(t); } }, [phase, touched]); // Pad's ▲ at the hallway end → step forward into the hallway (reveal the orb) const seenNonce = useRef(forwardNonce); useEffect(() => { if (forwardNonce === seenNonce.current) return; seenNonce.current = forwardNonce; setPhase(p => (p === 'hallEnd' ? 'orb' : p)); }, [forwardNonce]); const tp = (id) => () => setTouched(prev => ({ ...prev, [id]: true })); const popOrb = () => { if (orbPopped) return; setOrbPopped(true); setTimeout(() => setPhase('mirror'), 480); }; const revealed = PORTAL_LINE.slice(0, shown); const showSkull4 = (phase === 'seq' && step === 2) || phase === 'final' || phase === 'explode'; const showHall2 = (phase === 'hall' && step === WAVE_HALL.length - 1) || phase === 'hallEnd' || phase === 'orb' || phase === 'mirror'; const steppedIn = phase === 'orb' || phase === 'mirror'; // zoom the hallway in return ( {/* entry clips 0 (reverse-loop) and 1 (skull-3) */} {phase === 'seq' && step < 2 && ( setStep(step + 1)} onReverseDone={() => setStep(step + 1)}/> )} {/* skull-4 — plays through on step 2, then HOLDS for the riddle */} {showSkull4 && ( setPhase('final')}/> )} {/* riddle overlay: aether backdrop + ancient text + hidden touch points + burst */} {(phase === 'final' || phase === 'explode') && (

{phase === 'final' && }

{revealed.split('').map((ch, i) => ( {ch === ' ' ? '\u00a0' : ch} ))}

{phase === 'final' && (

)} {/* onward route — hall-1 then hall-2 */} {phase === 'hall' && step === 0 && ( setStep(1)}/> )} {showHall2 && ( setPhase('hallEnd')}/> )} {/* the orb / mirror live in the stepped-in hallway */} {(phase === 'orb' || phase === 'mirror') && (

{phase === 'orb' && } {phase === 'mirror' && }

)} ); } // ── HALL VIDEO STACK — all clips mounted so each keeps its own playhead. ── function HallVideoStack({ hall, setHall, setView }) { const s = parseStair(hall); // same play/land/rev grammar as the spiral return ( {HALL_SRCS.map((src, i) => { let mode = 'hold', visible = false; if (s && s.idx === i) { if (s.kind === 'play') { mode = 'play'; visible = true; } if (s.kind === 'land') { mode = 'hold'; visible = true; } if (s.kind === 'rev') { mode = 'reverse'; visible = true; } } return ( setHall(`land:${i}`)} onReverseDone={() => { if (i === 0) { setView('rightwall'); setHall(null); } else { setHall(`land:${i - 1}`); } }} /> ); })} ); } // ── LEFT WALL SCENE — the wall you face after turning left. A painting hangs // on a solid stone wall (no crack visible). Tapping the painting jiggles it, // then a seam of light "unzips" from the top down, widening and shifting // colour until it bursts — an explosion that clouds the whole screen and // hands off to the spiral video. After the video runs in reverse the wall // is left standing open (no crack), with embers + smoke still drifting. ── function LeftWallScene({ wall, jiggle, onPaintingTap }) { // Shared jagged midline (x%,y%) so both door clip-paths meet exactly. const seam = '54% 0%, 46% 12%, 53% 25%, 45% 38%, 52% 50%, 44% 62%, 51% 75%, 45% 88%, 53% 100%'; const leftClip = `polygon(0% 0%, ${seam}, 0% 100%)`; const rightClip = `polygon(100% 0%, ${seam}, 100% 100%)`; const open = wall === 'ready' || parseStair(wall) !== null; // doors stay parted while in the spiral const unzipping = wall === 'unzip'; const remnant = wall === 'remnant'; const embers = wall === 'unzip' || remnant; return (

{/* Same room cube as the front pad — identical dimensions, just turned */}

{/* Warm spill onto the floor once the wall stands open / smoulders */}

{/* The framed wall — "further away" */}

{/* Passage glimpsed behind the wall once it stands open */}

{/* Two stone wall panels (the "door") — solid until they part */}

{/* The unzipping crack of light — only while unzipping */} {unzipping && (

)} {/* Remnant scar — the molten crack still glowing after the blast */} {remnant &&

} {/* Painting hangs on the wall (stays put when the wall opens) */}

{ e.stopPropagation(); if (wall === 'closed') onPaintingTap(); }} >

{/* Embers + smoke — burst during the unzip, then linger (looping) in the remnant */}

{/* Full-screen colour explosion that clouds the screen as the crack bursts */} {unzipping &&

}

); } // ── YIN-YANG — parametric. `invert` swaps the two lobes (its colour-mirror). // invert=false → top lobe LIGHT (dark dot) · bottom lobe DARK (light dot) // invert=true → top lobe DARK (light dot) · bottom lobe LIGHT (dark dot) // A contrasting ring outlines the whole circle so the symbol reads even when // one lobe matches the door behind it. ── function YinYang({ light = '#f4efe6', dark = '#0b0a0c', ring = 'rgba(150,150,150,0.55)', invert = false }) { const base = invert ? dark : light; // background circle (the upper lobe) const comma = invert ? light : dark; // the S-comma (right + lower lobe) const dotTop = invert ? light : dark; // eye in the upper lobe const dotBot = invert ? dark : light; // eye in the lower lobe return ( ); } // ── DIMENSION ROOM — reached by going FORWARD (▲) from the final landing. Same // cube geometry & perspective as the front pad, but spacious and empty: the // back wall (where the fireplace used to be) holds three doors. Inert for now. // · Black door — yin-yang (white lobe / black dot) // · White door — its colour-mirror (black lobe / white dot) // · Gray door — both, stacked vertically, circles tangent so the // S-curves meet and flow continuously. ── function DimensionRoom({ onDoorTap }) { const doors = [ { id: 'black', face: '#0a0a0c', frame: '#241d12', ring: 'rgba(216,192,140,0.6)' }, { id: 'white', face: '#efe9dc', frame: '#b9ab8f', ring: 'rgba(36,32,28,0.5)' }, { id: 'gray', face: '#8d8a86', frame: '#48443d', ring: 'rgba(18,18,20,0.5)' }, ]; return (

{doors.map(d => ( ))}

); } // ── SIDE ROOM — placeholder for a landing's ▶ room (not yet furnished). Same // cube; backing out (▼) returns to the landing you entered from. ── function SideRoom() { return (

a room · not yet furnished

); } // ── HALL ROOM — a landing's ▶ right-turn room. Same fireplace-room cube // (left/right walls + floor), but the BACK (view) wall is a looping video. // Backing out (▼) returns to the landing you entered from. ── function HallRoom({ srcPath, step }) { const vRef = useRef(null); const [srcUrl, setSrcUrl] = useState(null); const [entered, setEntered] = useState(false); // false on mount → animates the approach to the threshold useEffect(() => { let url = null, alive = true; fetch(srcPath).then(r => r.blob()).then(b => { if (!alive) return; url = URL.createObjectURL(b); setSrcUrl(url); }).catch(() => {}); return () => { alive = false; if (url) URL.revokeObjectURL(url); }; }, [srcPath]); useEffect(() => { const v = vRef.current; if (!v || !srcUrl) return; v.loop = true; v.muted = true; v.play().catch(() => {}); }, [srcUrl]); useEffect(() => { const r = requestAnimationFrame(() => setEntered(true)); return () => cancelAnimationFrame(r); }, []); // hr-approach (far, just appeared) → hr-threshold (at the doorway) → hr-inside (stepped in via ▲) const worldClass = !entered ? 'hr-approach' : (step >= 1 ? 'hr-inside' : 'hr-threshold'); return (

{srcUrl &&

); } // ── HALLWAY — a corridor receding to a warm doorway (the kitchen beyond). // Drawn in perspective like the staircase, sits inside the arch. ── function Hallway() { const W = 1000, H = 900; const nearL = 40, nearR = 960, nearT = 10, nearB = H; const farL = 415, farR = 585, farT = 360, farB = 600; // far doorway rect return ( ); } // ── BRICK HALLWAY — a long brick corridor reached by going forward from the // spiral video. Recedes deep to a far point where a small light pulses, // cycling the seven chakra colours (CSS: .bh-light). ── function BrickHallway() { const W = 1000, H = 900; const nL = 0, nR = 1000, nT = -40, nB = H + 40; const fL = 452, fR = 548, fT = 352, fB = 470; // small far opening → long hall const lerp = (a, b, k) => a + (b - a) * k; return (

{/* the small pulsing chakra light at the end of the hall */}

▼ back

); } function RightWallScene() { return (

{/* Same room cube as the front pad */}

{/* warm spill from the hallway onto the floor */}

{/* Back-wall frame holding the arched hallway — "further away" */}

); } // ── KITCHEN SCENE — the room beyond the hallway, same cube perspective. // Interactive: opening fridge (food pickup), walk-in pantry, and a // sink with running water for rinsing crystals. ── function KitchenScene() { const KM = window.PadMemory; const [fridgeOpen, setFridgeOpen] = useState(false); const [pantryOpen, setPantryOpen] = useState(false); const [waterOn, setWaterOn] = useState(false); const [crystal, setCrystal] = useState(() => KM ? KM.get('kitchen.crystal', 'dusty') : 'dusty'); // dusty | clean | gone const [shake, setShake] = useState(false); const [foods, setFoods] = useState(() => ({ apple: true, cheese: true, milk: true, grapes: true, bread: true, fish: true, ...(KM ? KM.get('kitchen.foods', {}) : {}) })); const [pantryItems, setPantryItems] = useState(() => ({ flour: true, wine: true, onion: true, jam: true, pepper: true, loaf: true, ...(KM ? KM.get('kitchen.pantry', {}) : {}) })); // Persist kitchen consumables so taken items stay taken across visits/sessions. useEffect(() => { if (KM) { KM.state.kitchen.foods = foods; KM.save(); } }, [foods]); useEffect(() => { if (KM) { KM.state.kitchen.pantry = pantryItems; KM.save(); } }, [pantryItems]); useEffect(() => { if (KM) { KM.state.kitchen.crystal = crystal; KM.save(); } }, [crystal]); const pick = (id, name, icon, type) => window.dispatchEvent(new CustomEvent('pad:inv-add', { detail: { id, name, icon, type } })); const takeFood = (key, name, icon) => { if (!foods[key]) return; setFoods(f => ({ ...f, [key]: false })); pick('food-' + key, name, icon, 'food'); }; const takePantry = (key, name, icon) => { if (!pantryItems[key]) return; setPantryItems(p => ({ ...p, [key]: false })); pick('pantry-' + key, name, icon, 'food'); }; const tapCrystal = () => { if (crystal === 'gone') return; if (!waterOn) { setShake(true); setTimeout(() => setShake(false), 420); return; } if (crystal === 'dusty') { setCrystal('clean'); pick('crystal-clean', 'Cleansed Crystal', '◈', 'crystal'); setTimeout(() => setCrystal('gone'), 1100); } }; const Food = ({ k, name, icon }) => ; const PItem = ({ k, name, icon }) => ; const caption = crystal === 'clean' || crystal === 'gone' ? '— the crystal is cleansed —' : waterOn ? '— rinse the crystal under the water —' : '— the kitchen —'; return (

{/* Same room cube */}

{/* Back wall: hood + cooking niche */}

{/* Walk-in pantry door (left) */}

setPantryOpen(true)}>

walk-in pantry

{/* Refrigerator (right) */}

setFridgeOpen(o => !o)}>

{fridgeOpen ? 'take what you need' : 'refrigerator'}

e.stopPropagation()}>

{/* Counter with sink + crystal */}

setWaterOn(w => !w)}>

{/* Pendant lamp + warm pool */}

{caption}

{/* Walk-in pantry interior */} {pantryOpen && (

The Pantry

)}

); } // ── AMBIENT AUDIO — slow drone + soft melodic murmur ─────────────────── function useAmbientAudio(on) { const ctxRef = useRef(null); useEffect(() => { if (!on) { const ctx = ctxRef.current; if (ctx) { try { const g = ctx._master; g.gain.linearRampToValueAtTime(0.0001, ctx.currentTime + 1.8); } catch (e) {} setTimeout(() => { try { ctx.close(); } catch (e) {} }, 2200); ctxRef.current = null; } return; } if (ctxRef.current) return; try { const AC = window.AudioContext || window.webkitAudioContext; const ctx = new AC(); const master = ctx.createGain(); master.gain.value = 0; master.connect(ctx.destination); ctx._master = master; ctxRef.current = ctx; // Drone: 3 sine partials const freqs = [55, 82.5, 110]; const gains = [0.10, 0.06, 0.03]; freqs.forEach((f, i) => { const osc = ctx.createOscillator(); osc.type = 'sine'; osc.frequency.value = f; const g = ctx.createGain(); g.gain.value = gains[i]; const lfo = ctx.createOscillator(); lfo.frequency.value = 0.06 + i * 0.027; const lfoG = ctx.createGain(); lfoG.gain.value = gains[i] * 0.55; lfo.connect(lfoG); lfoG.connect(g.gain); osc.connect(g); g.connect(master); osc.start(); lfo.start(); }); // Soft guitar-like murmur — sparse plucks at long intervals const pluck = () => { if (!ctxRef.current) return; const c = ctxRef.current; const notes = [220, 246.94, 293.66, 329.63, 392, 440]; const n = notes[Math.floor(Math.random() * notes.length)]; const o = c.createOscillator(); o.type = 'triangle'; o.frequency.value = n; const g = c.createGain(); g.gain.value = 0; o.connect(g); g.connect(master); const t = c.currentTime; g.gain.linearRampToValueAtTime(0.045, t + 0.05); g.gain.exponentialRampToValueAtTime(0.0005, t + 2.4); o.start(t); o.stop(t + 2.6); setTimeout(pluck, 4000 + Math.random() * 6000); }; setTimeout(pluck, 4000); master.gain.linearRampToValueAtTime(0.34, ctx.currentTime + 3); } catch (e) { console.warn('Audio init failed', e); } }, [on]); } // ── MAIN APP ─────────────────────────────────────────────────────────── function Pad() { const useTweaksFn = window.useTweaks || ((d) => [d, () => {}]); const [tw, setTweak] = useTweaksFn(window.PAD_DEFAULTS); const GR = window.GameRoom || null; const [audioOn, setAudioOn] = useState(false); useAmbientAudio(audioOn && tw.audio); // ── Navigation / dungeon-entry state ─────────────────────────── const LANTERN_LINES = [ 'seeking light is fulfilling, come back for more enlightenment', 'keep seeking the light, reach where you have not tried and find yourself there', 'the desire is strong in this one, you may now turn to seek what you have not seen', ]; const [lanternTaps, setLanternTaps] = useState(() => window.PadMemory ? window.PadMemory.get('world.lanternTaps', 0) : 0); const lanternTapsRef = useRef(window.PadMemory ? window.PadMemory.get('world.lanternTaps', 0) : 0); const [bubble, setBubble] = useState(null); // current lantern line const [dpadOn, setDpadOn] = useState(() => window.PadMemory ? !!window.PadMemory.get('world.dpadRevealed', false) : false); // sticky once revealed const [view, setView] = useState('front');// 'front' | 'leftwall' | 'game' const [wall, setWall] = useState('closed');// 'closed' | 'cracking' | 'open' const [hall, setHall] = useState(null); // right-doorway hall chain: null | play:i | land:i | rev:i const [hallRoom, setHallRoom] = useState(null); // open hall-landing ▶ room: null | landing index const [roomStep, setRoomStep] = useState(0); // depth inside a hall room: 0 = threshold, 1 = stepped in const [portalPhase, setPortalPhase] = useState('seq'); // WavePortal's reported phase (so ▲ can re-enable at the hallway end) const [portalFwd, setPortalFwd] = useState(0); // nonce: ▲ pressed in the portal const [paintingJiggle, setPaintingJiggle] = useState(false); const bubbleTimer = useRef(null); // Broadcast the Pad's current view so the phone can step aside in the dungeon. useEffect(() => { window.dispatchEvent(new CustomEvent('pad:view', { detail: view })); }, [view]); // Persist lantern / d-pad progress to user memory. useEffect(() => { if (window.PadMemory) { window.PadMemory.state.world.lanternTaps = lanternTaps; window.PadMemory.state.world.dpadRevealed = dpadOn; window.PadMemory.save(); } }, [lanternTaps, dpadOn]); const handleLanternTap = () => { if (dpadOn) return; const n = Math.min(3, lanternTapsRef.current + 1); lanternTapsRef.current = n; setLanternTaps(n); setBubble(LANTERN_LINES[n - 1]); clearTimeout(bubbleTimer.current); bubbleTimer.current = setTimeout(() => setBubble(null), 5200); if (n >= 3) setTimeout(() => setDpadOn(true), 900); }; const handlePaintingTap = () => { if (wall !== 'closed') return; setPaintingJiggle(true); setTimeout(() => { setPaintingJiggle(false); setWall('unzip'); // crack unzips + explosion (~2.4s) setTimeout(() => setWall('ready'), 2400); // hand off to the (static) video }, 760); }; // ── Relative 4-wall rotation. The four walls form a ring and the // d-pad is ALWAYS relative to where you face: left/right turn to // the side walls, down turns around to the wall behind you, up // steps through the wall ahead when it has a passage. No 5th wall. // Ring (clockwise): main → hallway → kitchen (behind) → cracked wall. const RING = ['front', 'rightwall', 'kitchen', 'leftwall']; const i = RING.indexOf(view); const nav = i === -1 ? { up: null, down: null, left: null, right: null } : { left: RING[(i + 3) % 4], // turn left (anti-clockwise) right: RING[(i + 1) % 4], // turn right (clockwise) down: RING[(i + 2) % 4], // turn around (wall behind) // up = "step forward / back out". From the kitchen it returns to the // Front Pad. The left-wall's forward/back is driven by the crack // sequence below, so up is left null here for that wall. up: view === 'kitchen' ? 'front' : null, }; // The left wall hijacks the d-pad for the crack → video chain → rooms. let avail; if (view === 'game') { avail = { left: false, right: false, up: false, down: false }; // GR has its own controls } else if (view === 'hallway' || view === 'sideroom' || view === 'dimension') { avail = { left: false, right: false, up: false, down: true }; // ▼ back to the landing you entered from } else if (view === 'hallroom') { // ▲ steps deeper; in the WAVE room (landing 4) a further ▲ enters the portal. ▼ backs out. const wavePortalNext = hallRoom === 3 && roomStep >= 1; avail = { left: false, right: false, up: roomStep < 1 || wavePortalNext, down: true }; } else if (view === 'portal') { // one-way portal; the only control is ▲ to step into the hallway once hall-2 holds avail = { left: false, right: false, up: portalPhase === 'hallEnd', down: false }; } else if (view === 'stonehall') { // right-doorway hall chain — mirrors the spiral. At a landing: ▲ forward, // ▶ right room, ▼ back. In transit (play/rev) → no controls. const s = parseStair(hall); if (s && s.kind === 'land') { avail = { left: false, right: true, up: s.idx < HALL_COUNT - 1, down: true }; } else { avail = { left: false, right: false, up: false, down: false }; } } else if (view === 'rightwall') { avail = { left: !!nav.left, right: !!nav.right, down: !!nav.down, up: true }; // ▲ forward → into the stone hall } else if (view === 'leftwall') { const s = parseStair(wall); if (wall === 'closed' || wall === 'remnant') { // free to turn away; from the smouldering remnant, ▲ re-enters the spiral avail = { left: !!nav.left, right: !!nav.right, down: !!nav.down, up: wall === 'remnant' }; } else if (wall === 'ready') { avail = { left: false, right: false, down: false, up: true }; // ▲ enter / play } else if (s && s.kind === 'land') { avail = { left: false, right: true, down: true, up: true }; // ▲ forward · ▶ room · ▼ back } else { avail = { left: false, right: false, down: false, up: false }; // jiggle/unzip/playing/reversing } } else { avail = { left: !!nav.left, right: !!nav.right, up: !!nav.up, down: !!nav.down }; } const handleMove = (dir) => { if (view === 'game') return; // handled inside the game room // Every room reached from a landing backs out (▼) to that same landing — // `wall` is preserved across the view change, so we just return to leftwall. if (view === 'hallway' || view === 'sideroom' || view === 'dimension') { if (dir === 'down') setView('leftwall'); return; } // The wave portal — mostly self-driven. The only Pad control is ▲ to step // forward into the hallway once hall-2 is holding at its end. if (view === 'portal') { if (dir === 'up' && portalPhase === 'hallEnd') setPortalFwd(n => n + 1); return; } // A hall-landing ▶ room — ▲ takes an extra step deeper in; ▼ steps back out, // then (from the threshold) returns to the landing you entered from. if (view === 'hallroom') { if (dir === 'up') { if (roomStep < 1) { setRoomStep(roomStep + 1); return; } // threshold → stepped in if (hallRoom === 3) { setView('portal'); return; } // wave room → ▲ into the portal (one-way) return; } if (dir === 'down') { if (roomStep > 0) { setRoomStep(roomStep - 1); return; } setView('stonehall'); setHallRoom(null); setRoomStep(0); } return; } // Right-doorway hall chain — mirrors the spiral exactly. if (view === 'stonehall') { const s = parseStair(hall); if (s && s.kind === 'land') { const i = s.idx; if (dir === 'up' && i < HALL_COUNT - 1) { setHall(`play:${i + 1}`); return; } // forward → next clip if (dir === 'right') { setHallRoom(i); setRoomStep(0); setView('hallroom'); return; } // ▶ this landing's room (at the threshold) if (dir === 'down') { setHall(`rev:${i}`); return; } // back → reverse to prev landing } return; } // Right-wall doorway — a plain doorway that does nothing on its own; ▲ forward // walks into the hall chain. Other turns follow the room ring. if (view === 'rightwall') { if (dir === 'up') { setView('stonehall'); setHall('play:0'); return; } const dest = nav[dir]; if (dest) setView(dest); return; } if (view === 'leftwall') { const s = parseStair(wall); if (wall === 'ready' && dir === 'up') { setWall('play:0'); return; } // enter → play clip 0 if (wall === 'remnant' && dir === 'up') { setWall('play:0'); return; } // re-enter the spiral if (s && s.kind === 'land') { const i = s.idx; if (dir === 'up') { if (i < STAIR_COUNT - 1) setWall(`play:${i + 1}`); // forward → next clip → next landing else setView('dimension'); // final landing → the Dimension Room return; } if (dir === 'right') { // ▶ this landing's side room (different per landing) if (i === 0) setView('game'); // landing 1 → the dungeon else if (i === 1) setView('hallway'); // landing 2 → the chakra hall else setView('sideroom'); // landing 3 → placeholder room return; } if (dir === 'down') { setWall(`rev:${i}`); return; } // ▼ back → reverse this clip to the previous landing return; } if (wall === 'closed' || wall === 'remnant') { const dest = nav[dir]; if (dest) setView(dest); return; } return; // jiggle / unzip / playing / reversing — ignore turns } const dest = nav[dir]; if (dest) setView(dest); }; // Rotating floor caption const [captionIdx, setCaptionIdx] = useState(0); const [captionVisible, setCaptionVisible] = useState(true); useEffect(() => { const captions = window.ROOM_CAPTIONS || []; if (!captions.length) return; const cycle = () => { setCaptionVisible(false); setTimeout(() => { setCaptionIdx(i => (i + 1) % captions.length); setCaptionVisible(true); }, 1400); }; const interval = setInterval(cycle, 9000); return () => clearInterval(interval); }, []); // Articulate wave is more active when audio is on const waveActive = audioOn && tw.audio; // Back wall video phase — now driven by fireLevel from phone const [fireLevel, setFireLevel] = useState(1); const [lightLevel, setLightLevel] = useState(3); const [wallExpanded, setWallExpanded] = useState(false); const [pillarActive, setPillarActive] = useState(false); const [mantelPath, setMantelPath] = useState(window.__resources?.tempWall || 'Temp-wall.mp4'); const [wallPath, setWallPath] = useState(window.__resources?.tempWall || 'Temp-wall.mp4'); const [transmuteCount, setTransmuteCount] = useState(0); useEffect(() => { const onFire = (e) => { const lvl = e.detail.level; setFireLevel(lvl); if (lvl === 4) setWallExpanded(true); else setWallExpanded(false); }; const onLight = (e) => setLightLevel(e.detail.level); const onWallCollapse = () => setWallExpanded(false); const onPortalPreview = (e) => setMantelPath(e.detail.src); const onPortalTransmute = (e) => { const src = e.detail.src; setMantelPath(src); setWallPath(src); setWallExpanded(true); setTransmuteCount(c => c + 1); // always increments → always re-fires pillar }; window.addEventListener('pad:fire-level', onFire); window.addEventListener('pad:lights-level', onLight); window.addEventListener('pad:wall-collapse', onWallCollapse); window.addEventListener('pad:portal-preview', onPortalPreview); window.addEventListener('pad:portal-transmute',onPortalTransmute); return () => { window.removeEventListener('pad:fire-level', onFire); window.removeEventListener('pad:lights-level', onLight); window.removeEventListener('pad:wall-collapse', onWallCollapse); window.removeEventListener('pad:portal-preview', onPortalPreview); window.removeEventListener('pad:portal-transmute',onPortalTransmute); }; }, []); // 3-second pillar burst when wall expands OR on every transmute useEffect(() => { if (!wallExpanded) { setPillarActive(false); return; } setPillarActive(true); const t = setTimeout(() => setPillarActive(false), 3000); return () => clearTimeout(t); }, [wallExpanded]); // Re-fire pillar on every subsequent transmute (transmuteCount always increments) useEffect(() => { if (transmuteCount === 0) return; setPillarActive(true); const t = setTimeout(() => setPillarActive(false), 3000); return () => clearTimeout(t); }, [transmuteCount]); // Fire intensity by level: 1=ember, 2=gentle, 3=stoked, 4=roaring const fireLevelToIntensity = [0.32, 0.65, 1.15, pillarActive ? 2.6 : 1.2]; const fireIntensity = fireLevelToIntensity[fireLevel - 1] ?? 0.32; // Fireplace hides after wall fully expands (+1.6 s delay) const [wallActive, setWallActive] = useState(false); useEffect(() => { if (wallExpanded) { const t = setTimeout(() => setWallActive(true), 1600); return () => clearTimeout(t); } else { setWallActive(false); } }, [wallExpanded]); // Light overlay — 5 levels: 1=very dark → 3=ambient → 5=bright // Levels 1-2: dark overlay; level 3: nothing; levels 4-5: warm screen glow const darkOpacity = [0.88, 0.58, 0, 0, 0][lightLevel - 1] ?? 0; const brightOpacity = [0, 0, 0, 0.18, 0.36][lightLevel - 1] ?? 0; // ── Flashlight state (driven by phone) tracks .room class for sigil reveal const [flOn, setFlOn] = useState(false); const [keyCollected, setKeyCollected] = useState(() => window.PadMemory ? !!window.PadMemory.get('world.keyCollected', false) : false); useEffect(() => { const onFL = (e) => setFlOn(!!e.detail.active); window.addEventListener('pad:flashlight', onFL); return () => window.removeEventListener('pad:flashlight', onFL); }, []); const collectKey = () => { if (keyCollected) return; setKeyCollected(true); if (window.PadMemory) window.PadMemory.set('world.keyCollected', true); window.dispatchEvent(new CustomEvent('pad:inv-add', { detail: { id: 'key-01', name: 'A Key', icon: '\u29C9' } })); }; return (

{/* Topbar */}

The Lantern Road · A Pad

{/* Room surfaces — the cube */}

{/* Mantel screen + back-wall expansion — controlled by wallExpanded */} {/* Fireplace — fades back when wall video takes over at stage 4 */}

{/* Flame pillar — erupts at fire level 4 */}

{/* Faint hint that there is something to your left / right */} {dpadOn && view === 'front' &&

} {dpadOn && view === 'front' &&

} {/* TV — cattycorner in the LEFT corner */}

{/* Articulate waveform — between back wall and floor */}

{/* Desk — cattycorner in the RIGHT corner */}

{dpadOn ? 'the lantern' : 'touch the lantern'}

a key · take it

{/* Hidden sigils — only readable under the flashlight beam */}

hu · are · we

the door is inside

listen — the wave knows your name

turn around. you are already through.

❁

{/* Room dust */} {/* Lantern speech — rendered at room level (NOT inside the 3D-transformed desk) so it is always fully on-screen on every device/orientation. */} {/* ── LIGHT OVERLAYS — dark layer + warm bright layer ── */}

{/* Floor caption */}

— {(window.ROOM_CAPTIONS || ['the lantern road pad'])[captionIdx]} —

{/* Tweaks panel */} {window.PhoneOverlay && } {window.TweaksPanel && ( setTweak({ tvIntensity: v })}/> setTweak({ warmth: v })}/> setTweak({ particles: v })}/> setTweak({ monitorSpeed: v })}/> { setTweak({ audio: v }); if (!v) setAudioOn(false); }}/> setTweak({ showLabels: v })}/> { if (window.confirm('Reset all saved memory? This clears collected items, progress, and atmosphere (uploaded music is kept).')) { if (window.PadMemory) window.PadMemory.reset(); window.location.reload(); } }}/> )} {/* ── CHEVRON D-PAD — persistent in the Pad/wall; the game has its own pad ── */} {/* ── LEFT WALL — painting, unzipping crack, explosion ── */} {view === 'leftwall' && ( )} {/* ── LEFT-WALL STAIR-SPIRAL CHAIN — full-screen clips; static until ▲, each plays once ── */} {view === 'leftwall' && (wall === 'ready' || parseStair(wall) !== null) && ( )} {/* ── RIGHT WALL — arched hallway entrance to the kitchen; also the doorway into the stone hall (▲) ── */} {view === 'rightwall' && } {/* ── HALL CHAIN — ▲ forward through the right doorway walks the 4-clip hall; landings between clips, ▼ back reverse-plays to the previous landing ── */} {view === 'stonehall' && ( )} {/* ── HALL ROOM — a landing's ▶ right-turn room; video on the back wall. Enter at the threshold; ▲ steps deeper in, ▼ steps back / to the landing ── */} {view === 'hallroom' && hallRoom != null && ( )} {/* ── WAVE PORTAL — reverse-loop → skulls → riddle → explosion → hallway → orb → mirror ── */} {view === 'portal' && ( { // step through the mirror → back to the fireplace view of the pad setView('front'); setPortalPhase('seq'); setPortalFwd(0); setHall(null); setHallRoom(null); setRoomStep(0); }} /> )} {/* ── KITCHEN — the wall behind the fireplace view ── */} {view === 'kitchen' && } {/* ── BRICK HALLWAY — landing 2's ▶ room (the chakra hall) ── */} {view === 'hallway' && } {/* ── SIDE ROOM — landing 3's ▶ room (placeholder, not yet furnished) ── */} {view === 'sideroom' && } {/* ── DIMENSION ROOM — forward (▲) from the final landing; 3 yin-yang doors ── */} {view === 'dimension' && } {/* ── GAME ROOM — the full dungeon; "← surface" returns to the Pad ── */} {view === 'game' && GR && (

setView('leftwall')}/>

)}

); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();