// Kid view — the hero of the product.
// Wired to real store: tap/drag a task tile → store.markAction; drag/drop into
// jars persists to the DB via store.adjustJar / transferJar; redeem fires
// store.redeemJar which spends the stars and logs a history row.
function KidView() {
const s = window.useStore();
const [kidId, setKidId] = React.useState(() => s.kids[0]?.id || null);
// Resync kidId when kids list changes (e.g. on first hydrate)
React.useEffect(() => {
if (!kidId && s.kids[0]) setKidId(s.kids[0].id);
}, [s.kids, kidId]);
// Preload the bundled mascot chirps once so the first reaction is instant.
// Stop any in-flight chirp on unmount or kid switch so it doesn't outlive
// the mascot animation.
React.useEffect(() => { window.preloadMascotSounds?.(); }, []);
React.useEffect(() => () => { window.stopMascotSound?.(); }, [kidId]);
const kid = s.kids.find(k => k.id === kidId) || s.kids[0];
if (!kid) return null;
const c = window.KID_COLORS_V3[kid.color] || window.KID_COLORS_V3.mango;
const points = Math.max(0, kid.points || 0);
// Real DB-backed jars for this kid, in display order.
const kidJars = React.useMemo(
() => s.jars.filter(j => j.kid_id === kid.id).slice().sort((a, b) => (a.sortOrder - b.sortOrder) || (a.createdAt || '').localeCompare(b.createdAt || '')),
[s.jars, kid.id]
);
// Pile = total points minus stars currently sitting inside jars. kid.points
// only drops when a jar is redeemed (handled by store.redeemJar).
const jarred = kidJars.reduce((a, j) => a + (j.current || 0), 0);
const pileCount = Math.max(0, points - jarred);
// We render at most this many stars in the pile; if there are more, we hint
// the kid to put some in a jar to make space.
const PILE_MAX_VISIBLE = 20;
// Stable star characters — each keeps its own pose, size, and animation
// timing so they all dance independently. We only add/remove from the end
// when pileCount changes, never re-shuffle existing stars.
const [pileItems, setPileItems] = React.useState([]);
const lastKidRef = React.useRef(kid.id);
React.useEffect(() => {
const kidChanged = lastKidRef.current !== kid.id;
lastKidRef.current = kid.id;
setPileItems(items => {
const base = kidChanged ? [] : items;
const target = Math.min(pileCount, PILE_MAX_VISIBLE);
if (base.length === target) return kidChanged ? base : items;
if (base.length > target) return base.slice(0, target);
const poses = window.STAR_POSES || ['happy'];
// Spread repeats apart: a pose can't appear within RECENT_MEMORY of itself.
// For 15 poses we remember the last ~7 so reuses are at least 8 stars away,
// making the pile feel diverse even at 20 stars.
const RECENT_MEMORY = Math.max(1, Math.min(7, poses.length - 1));
const styles = ['sway', 'pulse', 'wobble', 'spin'];
const next = base.slice();
for (let i = next.length; i < target; i++) {
const recentPoses = next.slice(-RECENT_MEMORY).map(s => s.pose);
const posePool = poses.filter(p => !recentPoses.includes(p));
const fromPoses = posePool.length > 0 ? posePool : poses;
const pose = fromPoses[Math.floor(Math.random() * fromPoses.length)];
// Also keep adjacent motion-styles different so it doesn't look synced.
const prevStyle = next[next.length - 1]?.style;
let style;
for (let t = 0; t < 6; t++) {
style = styles[Math.floor(Math.random() * styles.length)];
if (style !== prevStyle) break;
}
next.push({
id: Date.now() + i + Math.random(),
pose,
size: 70 + Math.round(Math.random() * 22), // 70–92 (fits 20 in pile)
dur: 1.0 + Math.random() * 1.0, // 1.0–2.0s
delay: Math.random() * 0.8, // 0–0.8s
tilt: Math.round(8 + Math.random() * 10), // 8°–18°
dir: Math.random() < 0.5 ? -1 : 1, // rotation direction
style,
});
}
return next;
});
}, [pileCount, kid.id]);
const [jarMoods, setJarMoods] = React.useState({});
const jarMoodTimer = React.useRef(null);
const burstJarMoods = React.useCallback((moods, duration = 1500) => {
setJarMoods(moods);
if (jarMoodTimer.current) clearTimeout(jarMoodTimer.current);
jarMoodTimer.current = setTimeout(() => setJarMoods({}), duration);
}, []);
const previewJarMoods = React.useCallback((targetJarId) => {
const moods = {};
kidJars.forEach(j => {
moods[j.id] = j.id === targetJarId ? 'excited' : 'envy';
});
setJarMoods(moods);
}, [kidJars]);
const triggerJarReceive = React.useCallback((targetJarId) => {
const moods = {};
kidJars.forEach(j => { moods[j.id] = j.id === targetJarId ? 'happy' : 'envy'; });
burstJarMoods(moods, 1600);
}, [kidJars, burstJarMoods]);
const triggerJarTransfer = React.useCallback((fromId, toId) => {
const moods = {};
kidJars.forEach(j => {
if (j.id === toId) moods[j.id] = 'happy';
else if (j.id === fromId) moods[j.id] = 'sad';
else moods[j.id] = 'envy';
});
burstJarMoods(moods, 1600);
}, [kidJars, burstJarMoods]);
const triggerAllJarsSad = React.useCallback(() => {
const moods = {};
kidJars.forEach(j => { moods[j.id] = 'sad'; });
burstJarMoods(moods, 1800);
}, [kidJars, burstJarMoods]);
const triggerJarLose = React.useCallback((jarId) => {
burstJarMoods({ [jarId]: 'sad' }, 1400);
}, [burstJarMoods]);
React.useEffect(() => () => {
if (jarMoodTimer.current) clearTimeout(jarMoodTimer.current);
}, []);
const pileFull = pileCount > PILE_MAX_VISIBLE;
const [dragKind, setDragKind] = React.useState(null);
const [overTarget, setOverTarget] = React.useState(null);
const [pulse, setPulse] = React.useState(null);
const [mood, setMood] = React.useState('happy');
const [bubble, setBubble] = React.useState("Look at all your stars!");
const [dancing, setDancing] = React.useState(false);
const [danceMove, setDanceMove] = React.useState('dance');
const [danceOffset, setDanceOffset] = React.useState({ x: -700, y: 320 });
// sadReaction: null | 'cry' | 'walk' | 'sit-back' — picked at random when
// something bad happens so kids see different little stories each time.
const [sadReaction, setSadReaction] = React.useState(null);
// happyReaction: null | 'dance' | 'run' | 'style' — picked at random when
// something good happens.
const [happyReaction, setHappyReaction] = React.useState(null);
// Stars currently animating out of the pile after a bad-task tap. Each
// entry is a fully-described, absolutely-positioned falling star which is
// garbage-collected from state once its animation ends.
const [fallingStars, setFallingStars] = React.useState([]);
const mascotWrapRef = React.useRef(null);
const pileRef = React.useRef(null);
const sayBriefly = (msg, m = 'cheer') => {
setMood(m);
setBubble(msg);
clearTimeout(window.__suriBubbleTo);
window.__suriBubbleTo = setTimeout(() => { setMood('happy'); setBubble("Look at all your stars!"); }, 2800);
};
const DANCE_MOVES = ['dance', 'kiss', 'flex', 'wink'];
// celebrate() still rains stars + flies the corner mascot toward the pile.
// The big overlay variants are an *additional* layer on top.
const celebrate = (n) => {
window.sprinkleStars({ count: 24 + n * 6 });
if (mascotWrapRef.current && pileRef.current) {
const m = mascotWrapRef.current.getBoundingClientRect();
const p = pileRef.current.getBoundingClientRect();
const dx = (p.left + p.width * 0.5) - (m.left + m.width / 2);
const dy = (p.top - 30) - (m.top + m.height / 2);
setDanceOffset({ x: dx, y: dy });
}
const pick = DANCE_MOVES[Math.floor(Math.random() * DANCE_MOVES.length)];
setDanceMove(pick);
setDancing(true);
clearTimeout(window.__suriDanceTo);
window.__suriDanceTo = setTimeout(() => setDancing(false), 7100);
};
// ── Star drop animation ──────────────────────────────────────────────
// When the kid taps a "bad" task that subtracts N points, we visually
// launch N stars out of the pile, falling off the bottom of the screen.
// Pure visuals — the actual point math happens in s.markAction.
const STAR_POSES = window.STAR_POSES || ['happy','wink','peace','flex','sleepy'];
const dropStarsFromPile = (count) => {
if (count <= 0 || !pileRef.current) return;
const r = pileRef.current.getBoundingClientRect();
const startX = r.left + r.width * 0.5;
const startY = r.top + r.height * 0.4;
const newStars = Array.from({ length: count }, (_, i) => ({
id: `drop-${Date.now()}-${i}-${Math.random().toString(36).slice(2,7)}`,
x: startX + (Math.random() - 0.5) * (r.width * 0.55),
y: startY,
drift: (Math.random() - 0.5) * 220,
spin: (Math.random() > 0.5 ? 1 : -1) * (200 + Math.random() * 540),
delay: i * 110 + Math.random() * 60,
size: 40 + Math.random() * 10,
pose: STAR_POSES[Math.floor(Math.random() * STAR_POSES.length)],
}));
setFallingStars(prev => [...prev, ...newStars]);
const maxMs = (newStars[newStars.length - 1]?.delay || 0) + 2400;
setTimeout(() => {
const ids = new Set(newStars.map(s => s.id));
setFallingStars(prev => prev.filter(s => !ids.has(s.id)));
}, maxMs);
};
const SAD_VARIANTS = ['cry', 'walk', 'sit-back'];
const SAD_DURATIONS = { cry: 4800, walk: 8100, 'sit-back': 5000 };
// Each sad variant gets a matching mascot chirp pool.
const SAD_SOUNDS = { cry: 'sniff', walk: 'aww', 'sit-back': 'ohno' };
const goSad = () => {
setDancing(false);
setHappyReaction(null);
const variant = SAD_VARIANTS[Math.floor(Math.random() * SAD_VARIANTS.length)];
setSadReaction(variant);
// Chirp loops for the whole reaction duration (minus a tiny tail).
window.playMascotSound?.(SAD_SOUNDS[variant], { duration: SAD_DURATIONS[variant] - 200 });
clearTimeout(window.__suriSadTo);
window.__suriSadTo = setTimeout(() => setSadReaction(null), SAD_DURATIONS[variant]);
};
// 'corner' = the original fly-to-pile corner dance (no overlay) — kept
// because it's adorable. Other three are the big screen-wide overlays.
// Each variant appears once and maps to a *different* chirp so kids actually
// hear the full happy chirp pool (cheer / oyii / oho) instead of cheer 60%
// of the time.
const HAPPY_VARIANTS = ['corner', 'dance', 'run', 'style'];
const HAPPY_DURATIONS = { corner: 7200, dance: 5200, run: 7700, style: 8200 };
const HAPPY_SOUNDS = { corner: 'cheer', dance: 'oho', run: 'oyii', style: 'cheer' };
const goHappy = () => {
setSadReaction(null);
const variant = HAPPY_VARIANTS[Math.floor(Math.random() * HAPPY_VARIANTS.length)];
setHappyReaction(variant);
// Chirp loops for the whole reaction duration (minus a tiny tail).
window.playMascotSound?.(HAPPY_SOUNDS[variant], { duration: HAPPY_DURATIONS[variant] - 200 });
clearTimeout(window.__suriHappyTo);
window.__suriHappyTo = setTimeout(() => setHappyReaction(null), HAPPY_DURATIONS[variant]);
};
// Speak using SpeechSynthesis (the simple, free path)
const speak = (text) => {
if (s.settings?.speech === false) return;
window.speak?.(text);
};
const handleTaskAction = async (task) => {
const n = task.points; // signed
try {
await s.markAction({
kidId: kid.id,
amount: n,
reason: task.label,
emoji: task.emoji,
kind: task.kind,
});
if (n > 0) {
sayBriefly(`Plus ${n} ${n === 1 ? 'star' : 'stars'}!`, 'cheer');
celebrate(n);
goHappy();
} else {
sayBriefly(`Aw — ${Math.abs(n)} ${Math.abs(n) === 1 ? 'star' : 'stars'} gone…`, 'sad');
dropStarsFromPile(Math.abs(n));
goSad();
triggerAllJarsSad();
}
} catch (e) {
console.error(e);
}
};
// Drag/drop:
// task tile → pile / jar : log the task; if good + jar target, also stash
// the freshly-earned stars in that jar.
// pile star → jar : adjustJar(jar, +1)
// jar star → other jar : transferJar(from, to, 1)
// jar star → pile : adjustJar(jar, -1)
const onTaskDragStart = (e, task) => {
setDragKind('task');
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text/plain', JSON.stringify({ k: 'task', id: task.id }));
};
// source is either 'pile' (from the star pile) or a jar id.
const onCoinDragStart = (e, source) => {
setDragKind('coin');
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', JSON.stringify({ k: 'coin', source }));
};
const onDragEnd = () => {
setDragKind(null);
setOverTarget(null);
setJarMoods({});
};
const onTargetOver = (e, target) => {
e.preventDefault();
setOverTarget(target);
if (target !== 'pile' && (dragKind === 'coin' || dragKind === 'task')) {
previewJarMoods(target);
}
};
const onTargetLeave = () => {
setOverTarget(null);
if (dragKind === 'coin' || dragKind === 'task') setJarMoods({});
};
const onTargetDrop = async (e, target) => {
e.preventDefault();
setOverTarget(null);
let data = {};
try { data = JSON.parse(e.dataTransfer.getData('text/plain')); } catch (_) { return; }
if (data.k === 'task') {
const task = s.tasks.find(t => t.id === data.id);
if (!task) return;
await handleTaskAction(task);
if (task.kind === 'good' && target !== 'pile') {
const jar = kidJars.find(j => j.id === target);
if (jar) {
await s.adjustJar(target, Math.abs(task.points));
sayBriefly('Saved straight into the jar!', 'proud');
triggerJarReceive(target);
}
}
setPulse(target);
setTimeout(() => setPulse(null), 600);
} else if (data.k === 'coin') {
const fromPile = !data.source || data.source === 'pile';
if (fromPile && target !== 'pile') {
if (pileCount <= 0) return;
await s.adjustJar(target, +1);
sayBriefly('Star jarred!', 'proud');
celebrate(1);
triggerJarReceive(target);
setPulse(target);
}
else if (!fromPile && target === 'pile') {
await s.adjustJar(data.source, -1);
sayBriefly('Back in the pile!', 'happy');
triggerJarLose(data.source);
setPulse('pile');
}
else if (!fromPile && target !== 'pile' && data.source !== target) {
await s.transferJar(data.source, target, 1);
sayBriefly('Moved!', 'proud');
triggerJarTransfer(data.source, target);
setPulse(target);
}
setTimeout(() => setPulse(null), 600);
}
};
const handleRedeem = async (jar) => {
if (jar.current <= 0) return;
if (!window.confirm(`Mark "${jar.label}" as used? ${jar.current} ${jar.current === 1 ? 'star' : 'stars'} will be spent.`)) return;
try {
await s.redeemJar(jar.id);
sayBriefly(`Enjoy your ${jar.label}!`, 'cheer');
celebrate(2);
} catch (e) {
console.error(e);
}
};
const kidTasks = s.tasks.filter(t => t.kid_id === kid.id);
// Show the whole list — kids may have lots of tasks now. The tab UI
// keeps it compact even when the lists are long.
const goodTasks = kidTasks.filter(t => t.kind === 'good');
const badTasks = kidTasks.filter(t => t.kind === 'bad' );
// 'good' | 'bad' — which list is currently visible
const [taskTab, setTaskTab] = React.useState('good');
const taskTints = [
{ bg: '#FFE3D3', stroke: '#FF6B2C', emoji: '#FF6B2C' },
{ bg: '#C2F0E3', stroke: '#00C896', emoji: '#00A176' },
{ bg: '#DAE0FE', stroke: '#6979F8', emoji: '#4E5DD8' },
{ bg: '#FFE0E8', stroke: '#FFB7C8', emoji: '#C73E8B' },
{ bg: '#FFF1B8', stroke: '#FFD23F', emoji: '#B98A00' },
{ bg: '#F8D2E7', stroke: '#C73E8B', emoji: '#C73E8B' },
];
return (
{/* Compact kid switcher — just avatars, no name */}
{s.kids.length > 1 && (
Who is it?
{s.kids.map(k => {
const kc = window.KID_COLORS_V3[k.color];
const on = k.id === kid.id;
return (
);
})}
)}
Hi {kid.name} 👋
You have {points} {points === 1 ? 'star' : 'stars'}
{kid.streak > 0 && (
🔥 {kid.streak} day streak
)}
{Math.max(0, (kid.goalAt || kid.goal || 50) - points)} to next reward
{/* Mascot — absolutely placed in the hero corner so it never wraps
and its legs poke out cleanly into the cream area below.
The base mascot fades only when a screen-wide overlay plays.
For 'corner' happy variant we keep the corner mascot visible so
the original fly-to-pile dance still gets its moment. */}
{!dancing && (
{bubble}
)}
{/* Falling stars — one per minus point, launched from the pile and
tumbling off the bottom of the screen. */}
{fallingStars.length > 0 && (
{fallingStars.map(s => (
))}
)}
{/* Sad-reaction overlays — only one at a time */}
{sadReaction === 'cry' && }
{sadReaction === 'walk' && }
{sadReaction === 'sit-back' && }
{/* Happy-reaction overlays — only one at a time */}
{happyReaction === 'dance' && }
{happyReaction === 'run' && }
{happyReaction === 'style' && }
✨ Wow, so many stars! Pop some into a jar below to make room for more.
)}
{dragKind === 'task' ? '✨ Drop here to earn' :
kidTasks.length === 0 ? 'Ask a grown-up to add tasks first.' :
pileCount > 0 ? 'Drag a star to a jar below ↓' : 'Do a task to earn stars ✨'}
What did you do?
Tap or drag
{/* Tab toggle — switches between long good / bad lists */}
);
}
function KidViewStyles() {
return ;
}
// ── Sad reactions ──────────────────────────────────────────────────────────
// Three little stories that happen at random when something bad is logged.
// None of them shrink the mascot.
function SadCry({ color }) {
return (