// characters.jsx — Aquatag plant characters as parametric SVGs
// Six characters, one per flag color. Colors are hardware-exact from the flag photo.
// Usage:
// Flag colors (paint-matched from photo):
// green #2db489 blue #1e6aa8 yellow #f0dc5a
// red #c8201e pink #e8388a white #f5f2ea
const CHARACTERS = {
// GREEN FLAG — Monty the Monstera
monty: {
label: 'Monty',
species: 'Monstera deliciosa',
flag: 'green',
bg: '#2db489', // exact flag green
accent: '#1a8466',
glow: '#6fd6b2',
text: '#f4fff9',
render: () => (
),
},
// BLUE FLAG — Fernie the Fern (retuned from teal to blue)
fernie: {
label: 'Fernie',
species: 'Boston fern',
flag: 'blue',
bg: '#1e6aa8', // exact flag blue
accent: '#0e4a7e',
glow: '#6aa8d6',
text: '#eaf4ff',
render: () => (
),
},
// YELLOW FLAG — Cleo the Flowering Cactus
cleo: {
label: 'Cleo',
species: 'Flowering cactus',
flag: 'yellow',
bg: '#f0dc5a', // exact flag yellow
accent: '#a88810',
glow: '#fff09a',
text: '#2a2208', // dark text (yellow needs dark text for readability)
render: () => (
),
},
// RED FLAG — Suzy the Dahlia (retuned from coral to true scarlet)
suzy: {
label: 'Suzy',
species: 'Dahlia blossom',
flag: 'red',
bg: '#c8201e', // exact flag red
accent: '#7e0e0c',
glow: '#f06a68',
text: '#fff0ee',
render: () => (
),
},
// PINK FLAG — Ollie the African Violet (retuned from violet to hot pink)
ollie: {
label: 'Ollie',
species: 'African violet',
flag: 'pink',
bg: '#e8388a', // exact flag pink
accent: '#9a1858',
glow: '#ff8ac2',
text: '#fff0f7',
render: () => (
),
},
// WHITE FLAG — Pip (high-contrast dark greens on white, inky outlines)
pip: {
label: 'Pip',
species: 'Pilea peperomioides',
flag: 'white',
bg: '#f5f2ea', // exact flag white (slightly off-white)
accent: '#6a7360', // ink-gray for the NFC dot
glow: '#c8cfbc',
text: '#1d2a1b', // dark text — white flag demands ink
render: () => (
{/* round coin leaves — darker greens so they pop on white */}
{/* stems to center */}
{/* center leaf face */}
),
},
};
// Flag hardware colors (paint-matched from photo)
const FLAG_COLORS = {
green: { stake: '#2db489', ink: '#1a8466', name: 'Forest green' },
blue: { stake: '#1e6aa8', ink: '#0e4a7e', name: 'Cobalt blue' },
yellow: { stake: '#f0dc5a', ink: '#a88810', name: 'Lemon yellow' },
red: { stake: '#c8201e', ink: '#7e0e0c', name: 'Scarlet red' },
pink: { stake: '#e8388a', ink: '#9a1858', name: 'Magenta pink' },
white: { stake: '#f5f2ea', ink: '#6a7360', name: 'Linen white' },
};
function Character({ name, size = 100, showName = false, showRing = true, ring, nameFont = 'Fraunces, Georgia, serif' }) {
const c = CHARACTERS[name];
if (!c) return null;
return (
);
}
function Sticker({ name, size = 160, ring }) {
return ;
}
window.CHARACTERS = CHARACTERS;
window.FLAG_COLORS = FLAG_COLORS;
window.Character = Character;
window.Sticker = Sticker;