// Monster catalog — 5 stages each. Stage 0=egg, 1=baby, 2=teen, 3=adult, 4=mega.
// Each subject has 1..N monsters tied to word-pools / skill-groups.
// Mastery = unique words / skills at engine "secure" stage (spelling: stage >= 4).
// 10 mastered = catch. Every +10 = level. 50 = evolve to teen. 80 = evolve to adult. 100 = mega.
// Drawn inline as hand-crafted SVGs — monoline + flat fill, no gradients-to-nowhere.
// Each stage gets more detail, richer body, new features.
const MONSTER_STAGES = [
{ id: 0, label: 'Egg', threshold: 0, needed: 10 },
{ id: 1, label: 'Baby', threshold: 10, needed: 50 }, // Level 1-4
{ id: 2, label: 'Teen', threshold: 50, needed: 80 }, // Level 5-7
{ id: 3, label: 'Adult', threshold: 80, needed: 100 }, // Level 8-9
{ id: 4, label: 'Mega', threshold: 100, needed: 100 }, // max
];
// Stage from mastered count
function stageFor(mastered) {
if (mastered >= 100) return 4;
if (mastered >= 80) return 3;
if (mastered >= 50) return 2;
if (mastered >= 10) return 1;
return 0;
}
// Level 0-10 inside the journey (cosmetic)
function levelFor(mastered) {
return Math.min(10, Math.floor(mastered / 10));
}
// ----- Monster art -----
// Each monster has 5 stages of inline SVG. Hand-made, not generated.
// ====== SPELLING · INKLET (Y3-4) — quill/bookworm theme, deep ink blue ======
const INKLET = {
id: 'inklet',
name: 'Inklet',
nameByStage: ['Inklet Egg', 'Inklet', 'Scribbla', 'Quillorn', 'Mega Quillorn'],
subjectId: 'spelling',
pool: 'y3-4',
subtitle: 'Year 3–4 word list',
primary: '#3E6FA8',
secondary: '#9FC1E8',
pale: '#E8F0FA',
// SVG art — each returns JSX
art: {
0: (size) => (
// Egg — inky blue with quill-feather pattern
),
1: (size) => (
// Baby — small round blob with quill-tail and one big eye
),
2: (size) => (
// Teen — stands upright, quill tufts, holding a tiny scroll
),
3: (size) => (
// Adult — taller, robed, full crown of quills, glowing ink spot
),
4: (size) => (
// Mega — wings of quills, glowing aura, regal robe
),
},
};
// ====== SPELLING · GLIMMERBUG (Y5-6) — firefly/lantern theme, magenta-rose ======
const GLIMMERBUG = {
id: 'glimmerbug',
name: 'Glimmerbug',
nameByStage: ['Glimmer Egg', 'Glimmerbug', 'Lumisprite', 'Lanternwing', 'Mega Lanternwing'],
subjectId: 'spelling',
pool: 'y5-6',
subtitle: 'Year 5–6 word list',
primary: '#B53F87',
secondary: '#EAB3D7',
pale: '#F8E7F1',
art: {
0: (size) => (
),
1: (size) => (
// Baby — round bug with little wings and glowing tail
),
2: (size) => (
// Teen — more insectile, bigger wings, holding lantern
),
3: (size) => (
// Adult — graceful, large wings, glowing aura
),
4: (size) => (
// Mega — huge wings, radiant aura, crown-of-light
),
},
};
// ----- Registry -----
const MONSTERS = {
inklet: INKLET,
glimmerbug: GLIMMERBUG,
};
// Monsters listed per subject (in order). Stubs for non-spelling — coming soon.
const MONSTERS_BY_SUBJECT = {
spelling: ['inklet', 'glimmerbug'],
arithmetic: [],
reasoning: [],
grammar: [],
punctuation: [],
reading: [],
};
// ----- Small art helper: draws a monster at a given stage -----
// Prefers PNG images at assets/monsters/{monsterId}-{stage}.png when present;
// falls back to the hand-made SVG art. Silhouette mode for "not yet caught".
function MonsterArt({ monster, stage, size = 120, silhouette = false }) {
// Cache-bust tag bumped when art assets are refreshed
const imgSrc = `assets/monsters/${monster.id}-${stage}.png?v=2`;
const [imgOk, setImgOk] = React.useState(true);
const content = imgOk ? (
setImgOk(false)}
style={{
width: size, height: size, display: 'block',
objectFit: 'contain', userSelect: 'none',
}}
/>
) : (
monster.art[stage] ? monster.art[stage](size) : monster.art[0](size)
);
if (!silhouette) return content;
return (
{content}
);
}
Object.assign(window, {
MONSTERS, MONSTERS_BY_SUBJECT, MONSTER_STAGES,
stageFor, levelFor, MonsterArt,
});