// Reusable UI primitives & the mascot "Pixel"
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ------- Mascot --------
// A friendly geometric character built from circles & rounded rects.
// Props: mood: 'happy' | 'cheer' | 'think' | 'sleep' | 'wave', size, color
function Mascot({ mood = 'happy', size = 90, color = '#FFD166', accent = '#EF476F' }) {
// Eye shape depends on mood
let leftEye = ;
let rightEye = ;
let mouth = ;
if (mood === 'cheer') {
leftEye = ;
rightEye = ;
mouth = ;
} else if (mood === 'think') {
leftEye = ;
rightEye = ;
mouth = ;
} else if (mood === 'sleep') {
leftEye = ;
rightEye = ;
mouth = ;
} else if (mood === 'wave') {
mouth = ;
}
return (
);
}
// ------- Star (filled / outlined) -------
function Star({ filled = true, size = 16, color = '#FFD166' }) {
const fill = filled ? color : 'none';
const stroke = filled ? 'none' : '#bdb088';
return (
);
}
function Stars({ count = 0, total = 3, size = 16 }) {
return (
{Array.from({ length: total }).map((_, i) => (
))}
);
}
// ------- Icons (inline, simple) ----------
const Icons = {
Book: (p) => ,
Target: (p) => ,
Bolt: (p) => ,
Map: (p) => ,
Chart: (p) => ,
Trophy: (p) => ,
Edit: (p) => ,
Puzzle: (p) => ,
Back: (p) => ,
Flame: (p) => ,
Check: (p) => ,
};
// ------- Confetti burst ----------
function Confetti({ trigger, count = 30, speed = 1.8 }) {
const [bursts, setBursts] = useState([]);
useEffect(() => {
if (!trigger) return;
const colors = ['#5BA3D0', '#FFD166', '#EF476F', '#06D6A0', '#2A9D8F', '#F4A261', '#7B5DD1', '#FF6B9D'];
const id = trigger;
const pieces = Array.from({ length: count }).map((_, i) => ({
id: `${id}-${i}`,
left: Math.random() * 100,
color: colors[i % colors.length],
delay: Math.random() * 0.2,
rot: Math.random() * 360,
duration: speed + Math.random() * .6,
}));
setBursts(pieces);
const t = setTimeout(() => setBursts([]), (speed + 1) * 1000);
return () => clearTimeout(t);
}, [trigger, count, speed]);
if (!bursts.length) return null;
return (
{bursts.map(p => (
))}
);
}
// ------- Topbar ----------
function Topbar({ profile, streak, onProfileClick }) {
const initials = profile?.name ? profile.name.trim().charAt(0).toUpperCase() : '?';
const color = profile?.color || '#5BA3D0';
return (
{streak > 0 && (
{streak}
)}
);
}
// ------- Bottom nav ----------
function BottomNav({ route, onNav }) {
return (
);
}
// ------- Color helpers ----------
const TABLE_COLORS = {
2: '#5BA3D0',
3: '#2A9D8F',
4: '#F4A261',
5: '#EF476F',
6: '#06D6A0',
7: '#9C89B8',
8: '#FFD166',
9: '#E76F51',
10: '#264653',
};
function colorForTable(t) { return TABLE_COLORS[t] || '#5BA3D0'; }
// ------- Speech bubble component ----------
function SpeechBubble({ children, color = '#fff' }) {
return (
{children}
);
}
// ------- Vercel Analytics ----------
function Analytics() {
useEffect(() => {
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
if (!document.querySelector('script[src="/_vercel/insights/script.js"]')) {
const s = document.createElement('script');
s.defer = true;
s.src = '/_vercel/insights/script.js';
document.head.appendChild(s);
}
}, []);
return null;
}
Object.assign(window, {
Mascot, Star, Stars, Icons, Confetti, Topbar, BottomNav, colorForTable, SpeechBubble, Analytics,
});