// ============================================================
// Andre — game mascot
// Friendly beanie kid. Same component API as the prior blob
// (Andre, AndreChatter, mood prop, size prop) so the rest of
// the app needs no changes beyond the import name.
//
// Mood: 'idle' | 'wink' | 'cheer' | 'oof' | 'think' | 'sleep'
//
// Design notes:
// - Round face, peach skin, thick ink outline
// - Olive beanie with brim + brown hair peeks
// - Pink blush circles
// - Navy sweater collar
// - Mood variations swap brows / eyes / mouth only — head shape
// stays consistent so the character reads as the same person
// across states.
// ============================================================
const Andre = ({ mood = 'idle', size = 80, style = {} }) => {
// Per design direction: no winks/blinks anywhere. Anything that would
// have winked just reads as happy instead. Single-source alias here so
// every call site (mid-game callouts, modals, splash) is covered without
// touching them individually.
if (mood === 'wink') mood = 'cheer';
const animClass =
mood === 'cheer' ? 'andre-bounce' :
mood === 'oof' ? 'andre-squish' :
'andre-idle';
// Head wobbles a hair on cheer / oof — keeps the squishy feel from
// the old blob mascot without changing the silhouette.
const headScale =
mood === 'oof' ? 'scale(1.04, 0.96)' :
mood === 'cheer' ? 'scale(0.98, 1.02)' :
'scale(1, 1)';
return (
);
};
// ============================================================
// Beanie — olive knit cap. Subtle highlight ribbon on the dome,
// flat brim across the forehead. Tilts slightly for cheer.
// ============================================================
const AndreBeanie = ({ mood }) => {
const tilt =
mood === 'cheer' ? 'rotate(-4deg)' :
mood === 'wink' ? 'rotate(-2deg)' :
'rotate(0deg)';
return (
{/* Dome */}
{/* Highlight on the dome */}
{/* Brim — flat band across the forehead */}
);
};
// ============================================================
// Brows — thick brown brushstrokes. Mood swaps the curve.
// ============================================================
const AndreBrows = ({ mood }) => {
const stroke = '#3E2818';
const w = 3.2;
if (mood === 'oof') {
// Worried — angled inward
return (
);
}
if (mood === 'think') {
// One raised
return (
);
}
if (mood === 'cheer') {
// Both raised + arched
return (
);
}
if (mood === 'sleep') {
// Relaxed, lower
return (
);
}
// idle / wink — neutral, gently arched
return (
);
};
// ============================================================
// Eyes — round brown pupils with white highlights.
// ============================================================
const AndreEyes = ({ mood }) => {
const ink = '#2A2438';
const irisColor = '#5A3825';
if (mood === 'idle' || mood === 'think') {
return (
<>
{/* whites */}
{/* irises */}
{/* highlights */}
);
}
if (mood === 'wink') {
// Left open, right closed (curved arc, lashes hint)
return (
<>
);
}
if (mood === 'cheer') {
// Both closed in happy upward arcs ^^
return (
);
}
if (mood === 'oof') {
// X eyes
return (
);
}
if (mood === 'sleep') {
// Closed eyes, gentle downward curves with lash hint
return (
);
}
return null;
};
// ============================================================
// Mouth — small expressive line.
// ============================================================
const AndreMouth = ({ mood }) => {
const ink = '#2A2438';
if (mood === 'idle') {
// Gentle smile
return (
);
}
if (mood === 'wink') {
// Bigger smile
return (
);
}
if (mood === 'cheer') {
// Open smile with tongue blush
return (
);
}
if (mood === 'oof') {
// Wide O
return (
);
}
if (mood === 'think') {
// Pursed — tiny line off-center
return (
);
}
if (mood === 'sleep') {
// Tiny open mouth (sleeping)
return (
);
}
return null;
};
// ============================================================
// Speech-bubble wrapper — used throughout the app.
// ============================================================
const AndreChatter = ({ mood = 'idle', size = 72, message, side = 'right', style = {} }) => {
const flip = side === 'left';
return (