} grad="linear-gradient(145deg,#F8D089,#C89038)" onBack={onBack}/>
{/* Compact lantern tap */}
{history.length === 0 && (
touch the lantern
)}
{/* Past answers — scrollable list */}
{history.length > 0 && (
{history.map((h, i) => (
{h.time}
"{h.text}"
))}
)}
);
}
// ── PHONE OVERLAY ─────────────────────────────────────────────────────
function PhoneOverlay() {
const [raised, setRaised] = useState(false);
const PM = window.PadMemory;
const [padView, setPadView] = useState('front'); // mirrors the Pad's current view; hide the phone inside the dungeon
const [screen, setScreen] = useState(null); // navigation state
const [flashlight, setFL] = useState(false);
const [flMode, setFlMode] = useState('standard');
const [channel, setChannel] = useState(() => PM ? PM.get('world.channel', 0) : 0);
const [messages, setMsgs] = useState(INITIAL_MESSAGES);
const [inv, setInv] = useState(() => PM ? (PM.get('inventory', []) || []) : []);
const [unread, setUnread] = useState(1);
const [beam, setBeam] = useState({ x: -9999, y: -9999 });
const [fireLevel, setFireLvl] = useState(() => PM ? PM.get('world.fireLevel', 1) : 1);
const [lightLevel, setLightLvl] = useState(() => PM ? PM.get('world.lightLevel', 3) : 3);
// ── Persist durable state to user memory whenever it changes ──
useEffect(() => { if (PM) { PM.state.inventory = inv; PM.save(); } }, [inv]);
useEffect(() => { if (PM) { PM.state.world.channel = channel; PM.save(); } }, [channel]);
useEffect(() => { if (PM) { PM.state.world.fireLevel = fireLevel; PM.save(); } }, [fireLevel]);
useEffect(() => { if (PM) { PM.state.world.lightLevel = lightLevel; PM.save(); } }, [lightLevel]);
// ── On mount, replay restored atmosphere so the Pad matches saved memory ──
useEffect(() => {
window.dispatchEvent(new CustomEvent('pad:fire-level', { detail: { level: fireLevel } }));
window.dispatchEvent(new CustomEvent('pad:lights-level', { detail: { level: lightLevel } }));
}, []);
const setFireLevel = (lvl) => {
if (lvl === 4 && fireLevel === 4) {
// Toggle off — collapse wall, step down to level 3
setFireLvl(3);
window.dispatchEvent(new CustomEvent('pad:fire-level', { detail: { level: 3 } }));
} else {
setFireLvl(lvl);
window.dispatchEvent(new CustomEvent('pad:fire-level', { detail: { level: lvl } }));
}
};
const setLightLevel = (lvl) => {
setLightLvl(lvl);
window.dispatchEvent(new CustomEvent('pad:lights-level', { detail: { level: lvl } }));
};
const handleChannelChange = (i) => {
setChannel(i);
// Changing atmosphere collapses the wall video if it's expanded
window.dispatchEvent(new CustomEvent('pad:wall-collapse'));
};
// ── Drag/pinch refs ──
const phoneElRef = useRef(null);
const raisedRef = useRef(false);
const translateRef = useRef({ x: 0, y: 0 });
const scaleRef = useRef(null);
const dragRef_ = useRef(null);
const pinchRef_ = useRef(null);
// ── Maximize (double-tap top edge) ──
const [maximized, setMaximized] = useState(false);
const maximizedRef = useRef(false);
const maxTransformRef = useRef(null); // the computed near-fullscreen transform
const preMaxRef = useRef(null); // translate/scale to restore on un-maximize
const lastTapRef = useRef(0);
const lastTouchEndRef = useRef(0);
const getDefaultRot = () => window.innerWidth <= 720 ? 0 : 8;
// Base scale, then clamped so the whole phone fits the viewport height.
// On short (landscape) screens this is what keeps the top app icons on-screen.
const getDefaultScale = () => {
const el = phoneElRef.current;
const H = el ? el.offsetHeight : (window.innerWidth <= 720 ? 420 : 540);
const base = window.innerWidth <= 720 ? 0.70 : 0.72;
// 40px breathing room top+bottom; rotation adds a little bbox height too
const fit = (window.innerHeight - 40) / H;
return Math.max(0.32, Math.min(base, fit));
};
const applyTransform = () => {
const el = phoneElRef.current; if (!el) return;
if (maximizedRef.current && maxTransformRef.current) {
// Maximize keeps a centre pivot so its maths stay exact
el.style.transformOrigin = '50% 50%';
el.style.transform = maxTransformRef.current;
try { el.getAnimations().forEach(a => { if (a.startTime === null) a.cancel(); }); } catch(e) {}
return;
}
const t = translateRef.current;
const s = scaleRef.current || getDefaultScale();
const r = getDefaultRot();
// Anchor scaling to the BOTTOM centre so shrinking never pushes the
// top of the phone (and its first icon row) off-screen.
el.style.transformOrigin = '50% 100%';
el.style.transform = `translate(${t.x}px,${t.y}px) rotate(${r}deg) scale(${s})`;
// Force any stuck CSS transitions to commit immediately (iframe quirk: pending transitions can stall forever)
try { el.getAnimations().forEach(a => { if (a.startTime === null) a.cancel(); }); } catch(e) {}
};
// Double-tap / double-click the phone's TOP EDGE to swell it to nearly
// full-screen (relative to the phone's own width & height); double-tap
// again to drop it back to the previous size.
const toggleMaximize = () => {
const el = phoneElRef.current; if (!el || !raisedRef.current) return;
if (!maximizedRef.current) {
preMaxRef.current = { x: translateRef.current.x, y: translateRef.current.y, s: scaleRef.current };
// Use the element's untransformed layout geometry so this is independent
// of the current transform-origin (default view anchors at bottom centre).
const W = el.offsetWidth, H = el.offsetHeight;
const baseCx = el.offsetLeft + W / 2;
const baseCy = el.offsetTop + H / 2;
const vw = window.innerWidth, vh = window.innerHeight;
const S = Math.min((vh * 0.96) / H, (vw * 0.96) / W);
const dx = vw / 2 - baseCx, dy = vh / 2 - baseCy;
maxTransformRef.current = `translate(${dx}px,${dy}px) rotate(0deg) scale(${S})`;
maximizedRef.current = true;
setMaximized(true);
applyTransform();
} else {
maximizedRef.current = false;
maxTransformRef.current = null;
const p = preMaxRef.current || { x: 0, y: 0, s: null };
translateRef.current = { x: p.x, y: p.y };
scaleRef.current = p.s;
setMaximized(false);
applyTransform();
}
};
// Unified double-tap / double-click → maximize. Works for mouse (click) and
// touch (touchend). On touch we preventDefault to stop the browser's native
// double-tap-to-zoom from firing on the whole page.
const handleTopEdge = (e) => {
e.stopPropagation();
const now = Date.now();
if (now - lastTapRef.current < 360) {
lastTapRef.current = 0;
toggleMaximize();
} else {
lastTapRef.current = now;
}
};
const onTopEdgeClick = (e) => {
// Ignore the synthetic click that follows a handled touchend
if (Date.now() - lastTouchEndRef.current < 600) return;
handleTopEdge(e);
};
const onTopEdgeTouchEnd = (e) => {
e.preventDefault(); // kill native double-tap zoom on the page
lastTouchEndRef.current = Date.now();
handleTopEdge(e);
};
// Navigation helpers
const goBack = () => {
setScreen(prev => {
if (!prev) return null;
const i = prev.lastIndexOf(':');
return i >= 0 ? prev.slice(0, i) : null;
});
};
const raise = () => setRaised(true);
const lower = () => {
maximizedRef.current = false;
maxTransformRef.current = null;
setMaximized(false);
translateRef.current = { x: 0, y: 0 };
scaleRef.current = null;
const el = phoneElRef.current;
if (el) { el.style.transition = 'none'; el.style.transform = ''; el.style.transformOrigin = ''; el.getBoundingClientRect(); el.style.transition = ''; }
setRaised(false);
setScreen(null);
};
useEffect(() => { raisedRef.current = raised; }, [raised]);
// Re-fit on viewport resize / orientation change while raised, so the
// landscape (short height) layout always keeps every icon on-screen.
useEffect(() => {
const onResize = () => {
if (!raisedRef.current) return;
if (maximizedRef.current) {
// recompute the maximize target for the new viewport
const el = phoneElRef.current; if (!el) return;
const W = el.offsetWidth, H = el.offsetHeight;
const vw = window.innerWidth, vh = window.innerHeight;
const S = Math.min((vh * 0.96) / H, (vw * 0.96) / W);
const dx = vw / 2 - (el.offsetLeft + W / 2);
const dy = vh / 2 - (el.offsetTop + H / 2);
maxTransformRef.current = `translate(${dx}px,${dy}px) rotate(0deg) scale(${S})`;
} else {
// drop any pinch override so the fresh fit-scale applies
scaleRef.current = null;
}
applyTransform();
};
window.addEventListener('resize', onResize);
window.addEventListener('orientationchange', onResize);
return () => {
window.removeEventListener('resize', onResize);
window.removeEventListener('orientationchange', onResize);
};
}, []);
useEffect(() => {
const el = phoneElRef.current;
if (raised) {
applyTransform();
} else if (el) {
el.style.transform = '';
el.style.transformOrigin = '';
}
// After class swap, cancel any stuck pending transitions so the new state takes effect
if (el) {
// Wait one frame, then cancel anything still pending
requestAnimationFrame(() => {
try {
el.getAnimations().forEach(a => { if (a.startTime === null) a.cancel(); });
} catch(e) {}
});
}
}, [raised]);
// Touch events (pinch + drag)
useEffect(() => {
const el = phoneElRef.current; if (!el) return;
const onTS = (e) => {
if (!raisedRef.current) return;
if (e.touches.length === 2) {
dragRef_.current = null;
const d = Math.hypot(e.touches[0].clientX-e.touches[1].clientX, e.touches[0].clientY-e.touches[1].clientY);
pinchRef_.current = { d0: d, s0: scaleRef.current || getDefaultScale() };
e.preventDefault();
} else if (e.touches.length === 1) {
// Don't start a phone-drag when the finger lands inside the screen —
// let the inner content (nav lists, message lists, etc.) scroll natively.
// The phone can still be dragged by its bezel / frame.
if (e.target.closest('.ph-screen')) { dragRef_.current = null; return; }
const t = e.touches[0];
dragRef_.current = { cx0: t.clientX, cy0: t.clientY, tx0: translateRef.current.x, ty0: translateRef.current.y, moved: false };
}
};
const onTM = (e) => {
if (!raisedRef.current) return;
if (e.touches.length === 2 && pinchRef_.current) {
const d = Math.hypot(e.touches[0].clientX-e.touches[1].clientX, e.touches[0].clientY-e.touches[1].clientY);
scaleRef.current = Math.max(0.22, Math.min(1.15, pinchRef_.current.s0 * (d / pinchRef_.current.d0)));
applyTransform(); e.preventDefault();
} else if (e.touches.length === 1 && dragRef_.current) {
const t = e.touches[0];
const dx = t.clientX - dragRef_.current.cx0, dy = t.clientY - dragRef_.current.cy0;
if (!dragRef_.current.moved && Math.hypot(dx, dy) < 6) return;
dragRef_.current.moved = true;
translateRef.current = { x: dragRef_.current.tx0 + dx, y: dragRef_.current.ty0 + dy };
applyTransform(); e.preventDefault();
}
};
const onTE = () => { dragRef_.current = null; pinchRef_.current = null; };
el.addEventListener('touchstart', onTS, { passive: false });
el.addEventListener('touchmove', onTM, { passive: false });
el.addEventListener('touchend', onTE);
return () => { el.removeEventListener('touchstart', onTS); el.removeEventListener('touchmove', onTM); el.removeEventListener('touchend', onTE); };
}, []);
// Desktop pointer drag
const onPD = (e) => {
if (!raised || e.pointerType === 'touch') return;
if (e.target.closest('button') || e.target.closest('.ph-home') || e.target.closest('.ph-screen')) return;
dragRef_.current = { cx0: e.clientX, cy0: e.clientY, tx0: translateRef.current.x, ty0: translateRef.current.y, moved: false };
e.currentTarget.setPointerCapture(e.pointerId);
e.stopPropagation();
};
const onPM = (e) => {
if (!dragRef_.current || e.pointerType === 'touch') return;
const dx = e.clientX - dragRef_.current.cx0, dy = e.clientY - dragRef_.current.cy0;
if (!dragRef_.current.moved && Math.hypot(dx, dy) < 6) return;
dragRef_.current.moved = true;
translateRef.current = { x: dragRef_.current.tx0 + dx, y: dragRef_.current.ty0 + dy };
applyTransform(); e.stopPropagation();
};
const onPU = () => { dragRef_.current = null; };
// Flashlight pointer tracking
useEffect(() => {
if (!flashlight) return;
const onMove = (e) => {
const t = e.touches ? e.touches[0] : e;
setBeam({ x: t.clientX, y: t.clientY });
};
window.addEventListener('mousemove', onMove);
window.addEventListener('touchmove', onMove, { passive: true });
return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('touchmove', onMove); };
}, [flashlight]);
useEffect(() => {
window.dispatchEvent(new CustomEvent('pad:flashlight', { detail: { active: flashlight, x: beam.x, y: beam.y } }));
}, [flashlight, beam]);
useEffect(() => {
window.dispatchEvent(new CustomEvent('pad:channel', { detail: { id: CHANNELS[channel].id, index: channel } }));
}, [channel]);
// The Pad broadcasts its current view; the phone steps aside inside the game
// dungeon (which has its own full-screen UI) so it never blocks gameplay.
useEffect(() => {
const onView = (e) => setPadView(e.detail);
window.addEventListener('pad:view', onView);
return () => window.removeEventListener('pad:view', onView);
}, []);
useEffect(() => { if (padView === 'game') setRaised(false); }, [padView]);
useEffect(() => {
const onPickup = (e) => {
const item = e.detail;
setInv(prev => prev.some(p => p.id === item.id) ? prev : [...prev, item]);
setMsgs(prev => [{ from: 'System', time: 'now', type: 'note', body: `Picked up: ${item.name}` }, ...prev]);
if (screen !== 'messages' && !screen?.startsWith('messages:')) setUnread(u => u + 1);
};
// Replace an item in place (e.g. a crystal cleansed at the sink)
const onUpdate = (e) => {
const item = e.detail;
setInv(prev => prev.map(p => p.id === item.id ? { ...p, ...item } : p));
if (item.note) {
setMsgs(prev => [{ from: 'System', time: 'now', type: 'note', body: item.note }, ...prev]);
if (screen !== 'messages' && !screen?.startsWith('messages:')) setUnread(u => u + 1);
}
};
window.addEventListener('pad:inv-add', onPickup);
window.addEventListener('pad:inv-update', onUpdate);
return () => {
window.removeEventListener('pad:inv-add', onPickup);
window.removeEventListener('pad:inv-update', onUpdate);
};
}, [screen]);
useEffect(() => {
if (screen === 'messages' || screen?.startsWith('messages:')) setUnread(0);
}, [screen]);
const toggleFL = () => setFL(f => {
const next = !f;
if (next) setBeam({ x: window.innerWidth * 0.5, y: window.innerHeight * 0.46 });
return next;
});
const apps = [
{ id: 'flashlight', label: 'Flashlight', grad: 'linear-gradient(145deg, #FFE234 0%, #FFAA00 100%)', svg: , active: flashlight },
{ id: 'channels', label: 'Channels', grad: 'linear-gradient(145deg, #9B59F5 0%, #5E30D8 100%)', svg: },
{ id: 'messages', label: 'Messages', grad: 'linear-gradient(145deg, #34C759 0%, #1A8A36 100%)', svg: , badge: unread || null },
{ id: 'mymusic', label: 'My Music', grad: 'linear-gradient(145deg, #BF5FFF 0%, #7A20D0 100%)', svg: },
{ id: 'mypad', label: 'My Pad', grad: 'linear-gradient(145deg, #C8782A 0%, #7A4A14 100%)', svg: },
{ id: 'avelion', label: 'Avelion', grad: 'linear-gradient(145deg, #F8D089 0%, #C89038 100%)', svg: },
];
const stop = (e) => e.stopPropagation();
// Inside the dungeon the game owns the screen — hide the Pad phone entirely so
// it never overlaps the game's hotspots or d-pad. Inventory/messages still
// update in the background via the event listeners above.
if (padView === 'game') return null;
return (
<>
{flashlight && (
)}
{flashlight && }
{raised && (
)}
{!raised &&
Phone
}
{/* Top-edge double-tap / double-click target — swells the phone to
near full-screen and back. Sits below the mini-player (z200) and
the lower-X (z100) so those stay tappable; only covers the bezel
+ status strip, never the app header controls below it. */}
{raised && (
)}
{/* Mini player — always on bezel when tracks loaded, single-tap mute, double-tap mixer */}