// companions.jsx — flat-vector food mascots. Varied expressions + slight head
// tilt per character for liveliness. Exposes window.Companion + window.COMPANIONS.
(function () {
// ── face system ──────────────────────────────────────────────────
// mode: 'open' (bright round eyes), 'happy' (smiling closed arcs),
// 'sleepy' (calm lowered lids), 'wink' (one open, one closed)
function Face({ cx = 50, cy = 72, s = 1, ink = '#2b2a28', cheek = '#ff8fa3', mode = 'open', mouth = 'smile' }) {
const ex = 7.6 * s, ey = cy;
const eye = (x, kind) => {
if (kind === 'open') return (
);
if (kind === 'sleepy') return (
);
// happy / closed — upward smiling arc
return (
);
};
const L = mode === 'wink' ? 'open' : mode;
const R = mode === 'wink' ? 'happy' : mode;
return (
{eye(cx - ex, L)}
{eye(cx + ex, R)}
{mouth === 'small'
?
: }
);
}
const Brock = () => (
);
const Avo = () => (
);
const Nana = () => (
);
const Cara = () => (
);
const Toma = () => (
);
// Lemon — TALL oval, pointed nubs top & bottom, bright yellow
const Lemon = () => (
);
// Lime — ROUND, smaller, deeper green, glossy highlight + leaf
const Lime = () => (
);
const Chilli = () => (
);
// Cheese — wedge with darker rind band + holes (reads as cheese, not pizza)
const Cheese = () => (
);
const Cupcake = () => (
);
const MAP = { brock: Brock, avo: Avo, nana: Nana, cara: Cara, toma: Toma, lemon: Lemon, lime: Lime, chilli: Chilli, cheese: Cheese, cupcake: Cupcake };
const TILT = { brock: -4, avo: 4, nana: -5, cara: 4, toma: -2, lemon: 3, lime: -4, chilli: 5, cheese: -3, cupcake: 2 };
window.COMPANIONS = [
{ id: 'brock', name: 'Brock' },
{ id: 'avo', name: 'Avo' },
{ id: 'cara', name: 'Cara' },
{ id: 'toma', name: 'Toma' },
{ id: 'lemon', name: 'Zest' },
{ id: 'lime', name: 'Limo' },
{ id: 'cupcake', name: 'Muffin' },
];
window.Companion = function ({ id = 'brock', size = 120, style }) {
const C = MAP[id] || Brock;
const tilt = TILT[id] || 0;
return (
);
};
})();
// companions build 5