// olivia-illustrations.jsx
// Flat illustration set for Olivia — child avatars per age + plant streak + decorative shapes.
// Duolingo-ish: geometric, friendly, flat colors, minimal shading.
// Palette used inside illustrations (matches app palette)
const OLIVIA_ILLO = {
cream: '#F5EFE6',
paper: '#FFFCF7',
terra: '#D97757',
terraDark: '#B85A3D',
terraLight: '#F2C4A8',
sage: '#7A8B6F',
sageDark: '#4E6147',
butter: '#F4D58D',
sky: '#A8C6D6',
rose: '#E89B8C',
ink: '#3A2E26',
inkSoft: '#7A6E66',
skin1: '#F2D2B6',
skin2: '#E0B292',
skin3: '#C68B6F',
hair1: '#3A2E26', // dark brown
hair2: '#8C5E3B', // chestnut
hair3: '#D9A86C', // blond
hair4: '#1F1612', // black
};
// ─── Child avatars (one per age 3 → 8) ─────────────────────────
// Each draws inside a 120×140 box, transparent background.
// Use
function ChildAvatar({ age = 4, size = 120, style }) {
const Map = {
3: AgeThree, 4: AgeFour, 5: AgeFive,
6: AgeSix, 7: AgeSeven, 8: AgeEight,
};
const C = Map[age] || AgeFour;
return (
);
}
// Age 3 — toddler: round head, tuft of hair, sitting pose, holding a stuffie
function AgeThree() {
return (
{/* Shadow */}
{/* Body — onesie */}
{/* Onesie pattern */}
{/* Arms */}
{/* Hands */}
{/* Head */}
{/* Tuft */}
{/* Cheeks */}
{/* Eyes — closed/happy */}
{/* Mouth — small smile */}
);
}
// Age 4 — bowl-cut, overall straps, big smile
function AgeFour() {
return (
{/* Body — overalls */}
{/* Straps */}
{/* Buttons */}
{/* Shirt under */}
{/* Arms */}
{/* Head */}
{/* Bowl cut */}
{/* Cheeks */}
{/* Eyes */}
{/* Smile */}
);
}
// Age 5 — pigtails, sweater, neutral pose
function AgeFive() {
return (
{/* Body — sweater */}
{/* Sweater stripe */}
{/* Arms */}
{/* Head */}
{/* Hair base */}
{/* Pigtails */}
{/* Bows */}
{/* Bangs */}
{/* Cheeks */}
{/* Eyes */}
{/* Mouth — gentle smile */}
);
}
// Age 6 — curls, t-shirt, hand raised waving
function AgeSix() {
return (
{/* Body — striped tee */}
{/* Right arm waving up */}
{/* Left arm down */}
{/* Head */}
{/* Curls */}
{/* Face oval over curls */}
{/* Cheeks */}
{/* Eyes */}
{/* Smile — open */}
);
}
// Age 7 — book reader, side ponytail
function AgeSeven() {
return (
{/* Body — cardigan over shirt */}
{/* Open cardigan strip */}
{/* Arms — folded holding book */}
{/* Book between hands */}
{/* Head */}
{/* Hair — full coverage with side pony */}
{/* Hair tie */}
{/* Bangs */}
{/* Cheeks */}
{/* Eyes — focused, looking down at book */}
{/* Smile — small content */}
);
}
// Age 8 — taller, slight hand-on-hip, confident
function AgeEight() {
return (
{/* Body — hoodie */}
{/* Hoodie pocket */}
{/* Hoodie strings */}
{/* Arms */}
{/* Head */}
{/* Hair — short, parted */}
{/* Cheeks */}
{/* Eyes */}
{/* Mouth — confident closed smile */}
);
}
// ─── The growing plant — streak metaphor ──────────────────────
// stage 0..n: more days = taller, more leaves, eventually a flower.
// Renders into a fixed viewBox; pass `stage` from 0 → ~30.
function StreakPlant({ stage = 12, size = 200, style }) {
const s = Math.max(0, stage);
// Stem height grows
const stemTop = Math.max(120, 160 - s * 3.5);
const leafCount = Math.min(8, Math.floor(s / 2));
const showBud = s >= 6;
const showFlower = s >= 14;
const showSecondFlower = s >= 21;
const leaves = [];
for (let i = 0; i < leafCount; i++) {
const t = i / Math.max(1, leafCount - 1);
const y = 155 - i * 7 - s * 0.6;
const left = i % 2 === 0;
leaves.push(
);
}
return (
);
}
function Leaf({ x, y, left, size = 10 }) {
const dir = left ? -1 : 1;
return (
);
}
// ─── Decorative shapes ─────────────────────────────────────────
function Sparkle({ size = 16, color = OLIVIA_ILLO.butter, style }) {
return (
);
}
function Sun({ size = 80, color = OLIVIA_ILLO.butter, style }) {
return (
);
}
function Wave({ width = 320, height = 30, color = OLIVIA_ILLO.terraLight, style }) {
return (
);
}
// Tiny logo mark — a sprouting seedling inside a soft round
function OliviaMark({ size = 32, style }) {
return (
);
}
Object.assign(window, {
ChildAvatar, StreakPlant, Sparkle, Sun, Wave, OliviaMark,
OLIVIA_ILLO,
});