e.stopPropagation()}>
{messages.map((m, i) => (
{m.text}
))}
{typing &&
}
{QUICK_REPLIES.map(q => (
))}
);
}
/* ── Mascot (main component) ── */
function getVisibleWidgets() {
return Array.from(document.querySelectorAll(WIDGET_SEL))
.map(el => ({ el, rect: el.getBoundingClientRect() }))
.filter(({ rect }) => rect.width > 80 && rect.height > 60 && rect.top > 60 && rect.top < window.innerHeight - 40);
}
const Mascot = ({ currentPage = 'home' }) => {
const [vis, setVis] = useState('idle');
const [dir, setDir] = useState(1);
const [chatOpen, setChatOpen] = useState(false);
const [foxVisible, setFoxVisible] = useState(() => {
try { return localStorage.getItem('swappy_visible') !== 'false'; } catch { return true; }
});
const [autoBubble, setAutoBubble] = useState(null);
const [bubbleFadeOut, setBubbleFadeOut] = useState(false);
const xRef = useRef(120);
const yRef = useRef(0);
const yTargetRef = useRef(0);
const speedRef = useRef(1.6);
const dirRef = useRef(1);
const moveTimerRef = useRef(null);
const jumpTimerRef = useRef(null);
const sleepTimerRef = useRef(null);
const scrollTimerRef = useRef(null);
const bubbleTimerRef = useRef(null);
const elRef = useRef(null);
const chatOpenRef = useRef(false);
const walkingToRef = useRef(false);
const onWidgetRef = useRef(false);
const currentWidgetRef = useRef(null);
const syncYIntervalRef = useRef(null);
const visRef = useRef('idle');
const tickRef = useRef(null);
const prevPageRef = useRef(null);
const scheduleDecisionRef = useRef(null);
useEffect(() => { chatOpenRef.current = chatOpen; }, [chatOpen]);
useEffect(() => { visRef.current = vis; }, [vis]);
useEffect(() => { dirRef.current = dir; }, [dir]);
const applyPos = useCallback(() => {
if (elRef.current) {
elRef.current.style.left = `${xRef.current}px`;
elRef.current.style.bottom = `${yRef.current}px`;
}
}, []);
const showBubble = useCallback((text, duration = 2500) => {
clearTimeout(bubbleTimerRef.current);
setBubbleFadeOut(false);
setAutoBubble(text);
bubbleTimerRef.current = setTimeout(() => {
setBubbleFadeOut(true);
setTimeout(() => setAutoBubble(null), 380);
}, duration);
}, []);
const dismissFox = (e) => {
e.stopPropagation();
setFoxVisible(false);
setChatOpen(false);
try { localStorage.setItem('swappy_visible', 'false'); } catch {}
};
const reviveFox = () => {
setFoxVisible(true);
try { localStorage.setItem('swappy_visible', 'true'); } catch {}
setTimeout(() => showBubble("I'm back! 🦊 Miss me?"), 400);
};
const walkToX = useCallback((tx) => {
if (!elRef.current) return;
const clamped = Math.max(MARGIN, Math.min(window.innerWidth - FOX_W - MARGIN, tx));
walkingToRef.current = true;
setDir(clamped > xRef.current ? 1 : -1);
setVis('walk');
elRef.current.style.transition = 'left 1.5s cubic-bezier(0.16,1,0.3,1)';
elRef.current.style.left = `${clamped}px`;
xRef.current = clamped;
setTimeout(() => { if (elRef.current) elRef.current.style.transition = ''; walkingToRef.current = false; }, 1600);
}, []);
const doJump = useCallback(() => {
if (chatOpenRef.current || walkingToRef.current) return;
setVis('jump');
clearTimeout(moveTimerRef.current);
moveTimerRef.current = setTimeout(() => { setVis('idle'); scheduleDecisionRef.current?.(); }, 950);
}, []);
const startWalking = useCallback(() => {
if (chatOpenRef.current || walkingToRef.current) return;
const newDir = Math.random() > 0.5 ? 1 : -1;
speedRef.current = SPEED_MIN + Math.random() * (SPEED_MAX - SPEED_MIN);
yTargetRef.current = 0;
setDir(newDir);
setVis('walk');
clearTimeout(moveTimerRef.current);
moveTimerRef.current = setTimeout(() => { setVis('idle'); scheduleDecisionRef.current?.(); },
WALK_MIN + Math.random() * (WALK_MAX - WALK_MIN));
}, []);
const jumpToWidget = useCallback(() => {
const candidates = getVisibleWidgets();
if (!candidates.length) { scheduleDecisionRef.current?.(); return; }
const chosen = pickRandom(candidates);
const el = chosen.el;
const getCardY = () => {
const r = el.getBoundingClientRect();
return Math.min(window.innerHeight * 0.55, window.innerHeight - r.top + 2);
};
const rect = chosen.rect;
const targetX = Math.max(MARGIN, Math.min(window.innerWidth - FOX_W - MARGIN, rect.left + rect.width / 2 - FOX_W / 2));
clearTimeout(moveTimerRef.current);
clearInterval(syncYIntervalRef.current);
yTargetRef.current = getCardY();
walkToX(targetX);
moveTimerRef.current = setTimeout(() => {
if (chatOpenRef.current) { scheduleDecisionRef.current?.(); return; }
onWidgetRef.current = true;
currentWidgetRef.current = el;
setVis('sit');
showBubble(pickRandom(SIT_MESSAGES), 3200);
syncYIntervalRef.current = setInterval(() => {
if (!onWidgetRef.current) { clearInterval(syncYIntervalRef.current); return; }
yTargetRef.current = getCardY();
}, 160);
const walkTimer = setTimeout(() => {
if (!onWidgetRef.current) return;
const freshRect = el.getBoundingClientRect();
const minX = freshRect.left + MARGIN;
const maxX = freshRect.right - FOX_W - MARGIN;
const walkDir = Math.random() > 0.5 ? 1 : -1;
const newX = Math.max(minX, Math.min(maxX, xRef.current + walkDir * (20 + Math.random() * 30)));
setVis('walk');
walkToX(newX);
setTimeout(() => { if (onWidgetRef.current) setVis('sit'); }, 1500);
}, 1200);
const sitDuration = 3000 + Math.random() * 2000;
moveTimerRef.current = setTimeout(() => {
clearInterval(syncYIntervalRef.current);
clearTimeout(walkTimer);
onWidgetRef.current = false;
currentWidgetRef.current = null;
yTargetRef.current = 0;
setVis('jump');
moveTimerRef.current = setTimeout(() => { setVis('idle'); scheduleDecisionRef.current?.(); }, 850);
}, sitDuration);
}, 1900);
}, [walkToX, showBubble]);
const scheduleDecision = useCallback(() => {
clearTimeout(moveTimerRef.current);
if (walkingToRef.current) return;
const delay = IDLE_MIN + Math.random() * (IDLE_MAX - IDLE_MIN);
moveTimerRef.current = setTimeout(() => {
if (chatOpenRef.current || walkingToRef.current) { scheduleDecision(); return; }
const roll = Math.random();
if (roll < 0.18) doJump();
else if (roll < 0.52) jumpToWidget();
else startWalking();
}, delay);
}, [doJump, jumpToWidget, startWalking]);
useEffect(() => { scheduleDecisionRef.current = scheduleDecision; }, [scheduleDecision]);
const resetSleep = useCallback(() => {
clearTimeout(sleepTimerRef.current);
sleepTimerRef.current = setTimeout(() => {
if (!chatOpenRef.current) { setVis('sleep'); yTargetRef.current = 0; }
}, SLEEP_AFTER);
}, []);
/* rAF loop */
useEffect(() => {
let rafId;
const step = () => { tickRef.current?.(); rafId = requestAnimationFrame(step); };
rafId = requestAnimationFrame(step);
return () => cancelAnimationFrame(rafId);
}, []);
tickRef.current = () => {
let changed = false;
if (visRef.current === 'walk' && !walkingToRef.current) {
const maxX = window.innerWidth - FOX_W - MARGIN;
let nx = xRef.current + dirRef.current * speedRef.current;
if (nx < MARGIN) { nx = MARGIN; dirRef.current = 1; }
if (nx > maxX) { nx = maxX; dirRef.current = -1; }
xRef.current = nx;
changed = true;
}
const dy = yTargetRef.current - yRef.current;
if (Math.abs(dy) > 0.3) { yRef.current += dy * Y_SPRING; changed = true; }
if (changed) applyPos();
};
/* Spontaneous jump timer */
useEffect(() => {
const schedule = () => {
jumpTimerRef.current = setTimeout(() => {
if (!chatOpenRef.current && !walkingToRef.current && visRef.current !== 'jump') doJump();
schedule();
}, JUMP_EVERY[0] + Math.random() * (JUMP_EVERY[1] - JUMP_EVERY[0]));
};
schedule();
return () => clearTimeout(jumpTimerRef.current);
}, [doJump]);
/* Scroll detection */
useEffect(() => {
let isScrolling = false;
const onScroll = () => {
if (chatOpenRef.current) return;
resetSleep();
if (!isScrolling) {
isScrolling = true;
if (onWidgetRef.current) { onWidgetRef.current = false; yTargetRef.current = 0; }
if (visRef.current !== 'walk' && visRef.current !== 'jump') {
yTargetRef.current = 0;
setVis('walk');
setDir(xRef.current < window.innerWidth / 2 ? 1 : -1);
}
}
clearTimeout(scrollTimerRef.current);
scrollTimerRef.current = setTimeout(() => {
isScrolling = false;
if (!chatOpenRef.current) {
setVis('idle');
if (Math.random() < 0.35) showBubble(pickRandom(SCROLL_HELP), 2500);
scheduleDecisionRef.current?.();
}
}, 4000);
};
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('touchmove', onScroll, { passive: true });
return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('touchmove', onScroll); clearTimeout(scrollTimerRef.current); };
}, [showBubble, resetSleep]);
/* Bootstrap */
useEffect(() => {
xRef.current = MARGIN + Math.random() * (window.innerWidth * 0.45);
yRef.current = 0;
applyPos();
scheduleDecisionRef.current?.();
resetSleep();
const wake = () => {
if (visRef.current === 'sleep') { setVis('idle'); scheduleDecisionRef.current?.(); }
resetSleep();
};
window.addEventListener('mousemove', wake, { passive: true });
window.addEventListener('touchstart', wake, { passive: true });
return () => {
clearTimeout(moveTimerRef.current);
clearTimeout(jumpTimerRef.current);
clearTimeout(sleepTimerRef.current);
clearTimeout(scrollTimerRef.current);
clearTimeout(bubbleTimerRef.current);
clearInterval(syncYIntervalRef.current);
window.removeEventListener('mousemove', wake);
window.removeEventListener('touchstart', wake);
};
}, []);
useEffect(() => {
const t = setTimeout(() => scheduleDecisionRef.current?.(), 800);
return () => clearTimeout(t);
}, []);
/* Page greeting */
useEffect(() => {
if (!foxVisible) return;
if (prevPageRef.current === currentPage) return;
prevPageRef.current = currentPage;
const msgs = PAGE_GREETINGS[currentPage];
if (!msgs) return;
const t = setTimeout(() => {
if (!chatOpenRef.current && Math.random() < 0.5) showBubble(pickRandom(msgs));
}, 3500);
return () => clearTimeout(t);
}, [currentPage, foxVisible, showBubble]);
/* Widget event listener */
useEffect(() => {
const handler = (e) => {
if (!foxVisible) return;
const { type, message, targetX } = e.detail || {};
const msgs = WIDGET_REACTIONS[type] || [];
const text = message || (msgs.length ? pickRandom(msgs) : null);
clearTimeout(moveTimerRef.current);
if (onWidgetRef.current) { onWidgetRef.current = false; yTargetRef.current = 0; }
if (targetX != null) walkToX(targetX - FOX_W / 2);
const doReact = () => {
setVis('excited');
if (text) showBubble(text, 4800);
setTimeout(() => { setVis('idle'); scheduleDecisionRef.current?.(); }, 1300);
};
setTimeout(doReact, targetX != null ? 1700 : 0);
};
window.addEventListener('swappy', handler);
return () => window.removeEventListener('swappy', handler);
}, [foxVisible, showBubble, walkToX]);
/* Click handler */
const handleClick = (e) => {
e.stopPropagation();
resetSleep();
if (onWidgetRef.current) { onWidgetRef.current = false; yTargetRef.current = 0; }
if (vis === 'sleep') { setVis('idle'); scheduleDecisionRef.current?.(); return; }
if (chatOpen) { setChatOpen(false); setVis('idle'); scheduleDecisionRef.current?.(); return; }
clearTimeout(moveTimerRef.current);
setVis('excited');
setChatOpen(true);
setAutoBubble(null);
setTimeout(() => setVis('chat'), 900);
};
const closeChat = () => { setChatOpen(false); setVis('idle'); scheduleDecisionRef.current?.(); resetSleep(); };
if (!foxVisible) {
return (
);
}
const foxIsHigh = yRef.current > window.innerHeight * 0.3;
return (
0 ? 'right' : 'left'}${foxIsHigh ? ' bubble-below' : ''}`}
style={{ left: `${xRef.current}px`, bottom: `${yRef.current}px` }}
>
{autoBubble && !chatOpen && (
{autoBubble}
)}
{chatOpen &&
}
{vis === 'sleep' && (
zzZ
)}
{vis === 'excited' && (
⭐
✨
🌟
)}
{vis === 'sit' && (
✦·✦
)}
);
};
window.Mascot = Mascot;