// ============================================================ // REWARDS & IDENTITY // // "Characters" are simple, science-coded glyphs in colored // circles — the visual mark that follows the student around. // Frames sit around them on the leaderboard. // Titles + trophies finish the identity loop. // ============================================================ // ── Character glyph library ────────────────────────────────── // Each character has a base color, optional secondary, and a paint // function. They aim for "video-game icon with personality" — not // kawaii cute, not flat icon. Faces where they make sense, depth via // layered fills, signature motif per subject. const CHARS = { atom: { name: 'Atom', bg: ['#f4a094','#c4615a'], stroke: '#fff', tag: 'Physics' }, beaker: { name: 'Beaker', bg: ['#8ab896','#456e58'], stroke: '#fff', tag: 'Chemistry' }, helix: { name: 'Helix', bg: ['#9b7eb8','#5b4878'], stroke: '#fff', tag: 'Biology' }, pi: { name: 'Pi', bg: ['#7eb0d8','#3d6b94'], stroke: '#fff', tag: 'Maths' }, bolt: { name: 'Volt', bg: ['#f0c870','#a87f3f'], stroke: '#3d2700', tag: 'Physics' }, mole: { name: 'Mole', bg: ['#d49882','#9c5c4a'], stroke: '#fff', tag: 'Chemistry' }, cell: { name: 'Cell', bg: ['#a3c3e0','#5278a3'], stroke: '#fff', tag: 'Biology' }, wave: { name: 'Wave', bg: ['#d49db0','#9c5c6e'], stroke: '#fff', tag: 'Physics' }, ph: { name: 'pH', bg: ['#b89ddc','#6e4f96'], stroke: '#fff', tag: 'Chemistry' }, sigma: { name: 'Sigma', bg: ['#7593b8','#3d557c'], stroke: '#fff', tag: 'Maths' }, prism: { name: 'Prism', bg: ['#e8b078','#9c6c3a'], stroke: '#fff', tag: 'Physics' }, leaf: { name: 'Leaf', bg: ['#8fb878','#506e3a'], stroke: '#fff', tag: 'Biology' }, }; // Character SVG renderer // Each motif is drawn inside a 100x100 viewBox over a 2-stop radial bg // (lighter top-left, darker bottom-right) for soft depth. function CharGlyph({ kind, size = 56 }) { const c = CHARS[kind] || CHARS.atom; const [c1, c2] = c.bg; const gradId = `gx-${kind}`; const highId = `gh-${kind}`; const motif = { // ─── Atom: nucleus character with orbiting electrons ─── atom: ( {/* electrons */} {/* nucleus body */} {/* face */} {/* cheeks */} ), // ─── Beaker: glass body with face, frothy liquid inside ─── beaker: ( {/* table line */} {/* beaker body */} {/* rim */} {/* liquid */} {/* bubbles */} {/* face on glass */} ), // ─── Helix: DNA strands as a creature ─── helix: ( {/* strands */} {/* base pairs */} {/* face at top junction */} ), // ─── Pi: friendly π glyph with eyes on the bar ─── pi: ( {/* π */} {/* face on the bar */} {/* shine on bar */} ), // ─── Volt: lightning bolt creature with face ─── bolt: ( {/* shadow */} {/* bolt body */} {/* inner highlight */} {/* face on the wide part */} {/* sparks */} ), // ─── Mole: actual mole creature with the chemistry pun ─── mole: ( {/* body shadow */} {/* body */} {/* belly */} {/* head */} {/* paws (digging) */} {/* claws */} {/* eyes (closed, moles are blind) */} {/* nose */} {/* whiskers */} {/* tiny "mol" subscript */} mol ), // ─── Cell: blobby cell with nucleus eye + cilia ─── cell: ( {/* cilia (around edges) */} {/* membrane */} {/* organelles */} {/* nucleus (single big "eye") */} ), // ─── Wave: surfing sine wave ─── wave: ( {/* layered waves */} {/* face on the crest */} {/* foam dots */} ), // ─── pH: test-strip character, color-changing ─── ph: ( {/* strip body */} {/* pH label */} pH {/* face mid-strip */} ), // ─── Sigma: confident Σ with face ─── sigma: ( {/* Σ shape */} {/* face in the V */} {/* tally marks (counting) */} ), // ─── Prism: triangle refracting white light into a rainbow ─── prism: ( {/* incoming white ray */} {/* prism */} {/* refracted rays */} {/* face on prism */} ), // ─── Leaf: leaf character with veins ─── leaf: ( {/* stem */} {/* leaf body */} {/* veins */} {/* dewdrop highlight */} {/* face */} ), }; return ( {motif[kind] || motif.atom} {/* rim shadow */} ); } // Wrapped character with optional frame function Character({ kind, frame, size = 'md', initials: ini }) { const sizeCls = `size-${size}`; const frameCls = frame ? `framed frame-${frame}` : ''; return (
{kind ? : (
{ini || '?'}
)}
); } // Trophy chip (small inline badge) function Trophy({ icon = 'crown', tone = 'gold', size = 'sm' }) { return ; } // ── Identity-rich leaderboard row ───────────────────────────── function IdRow({ row }) { const rankCls = row.rank === 1 ? 'gold' : row.rank === 2 ? 'silver' : row.rank === 3 ? 'bronze' : ''; return (
{row.rank}
{row.name} {row.you && YOU} {row.teacher && TEACHER} {row.trophies && row.trophies.length > 0 && ( {row.trophies.map((t, i) => )} )}
{row.title && (
{row.title}
)}
{row.streak >= 5 && (
{row.streak}d
)}
{row.score.toLocaleString()} pts
); } // ── Identity-rich data (re-skinned school board) ────────────── const ID_SCHOOL_BOARD = [ { rank: 1, name: 'PhotonPhoenix', score: 4820, streak: 12, char: 'bolt', frame: 'champ', title: 'Apex Predator', titleTone: 'gold', nameStyle: 'gradient', trophies: [{icon:'crown',tone:'gold'},{icon:'flame',tone:'coral'},{icon:'target',tone:'green'}] }, { rank: 2, name: 'KineticKira', score: 4710, streak: 9, char: 'wave', frame: 'gold', title: 'Streak Smasher', titleTone: 'coral', trophies: [{icon:'flame',tone:'coral'},{icon:'sparkles',tone:'plum'}] }, { rank: 3, name: 'MitoMari', score: 4650, streak: 6, char: 'cell', frame: 'silver', title: 'Cell Splitter', titleTone: 'green', trophies: [{icon:'target',tone:'green'}] }, { rank: 4, name: 'QuantumQuokka', score: 4420, streak: 7, char: 'pi', frame: 'rose', title: 'Year 11 Phenom', titleTone: 'rose', you: true, trophies: [{icon:'flame',tone:'coral'},{icon:'medal',tone:'gold'}] }, { rank: 5, name: 'ProtonPete', score: 4380, streak: 4, char: 'atom', frame: 'bronze' }, { rank: 6, name: 'AldolAlex', score: 4210, streak: 3, char: 'beaker', frame: 'bronze' }, { rank: 7, name: 'QuasarQ', score: 4140, streak: 5, char: 'prism' }, { rank: 8, name: 'TitratorT', score: 4020, streak: 2, char: 'ph' }, ]; // teacher entry — with cosmic frame const TEACHER_ROW = { rank: 1, name: 'Dr Park', score: 5780, streak: 22, char: 'helix', frame: 'cosmic', teacher: true, title: 'Apex Educator', titleTone: 'cosmic', nameStyle: 'cosmic', trophies: [{icon:'crown',tone:'gold'},{icon:'trophy',tone:'gold'},{icon:'sparkles',tone:'plum'}] }; // ── Shop items ────────────────────────────────────────────── const SHOP_CHARS = [ { kind: 'atom', price: 250, rarity: 'common', status: null }, { kind: 'beaker', price: 250, rarity: 'common', status: 'owned' }, { kind: 'helix', price: 500, rarity: 'rare', status: 'owned' }, { kind: 'pi', price: 500, rarity: 'rare', status: 'equipped' }, { kind: 'bolt', price: 800, rarity: 'epic', status: null }, { kind: 'cell', price: 800, rarity: 'epic', status: null }, { kind: 'mole', price: 1200, rarity: 'legendary', status: 'locked', unlock: 'Lvl 12' }, { kind: 'wave', price: 1200, rarity: 'legendary', status: 'locked', unlock: 'Beat a teacher' }, ]; const SHOP_FRAMES = [ { id: 'bronze', name: 'Bronze ring', price: 150, rarity: 'common', status: 'owned' }, { id: 'silver', name: 'Silver ring', price: 400, rarity: 'rare', status: 'owned' }, { id: 'gold', name: 'Gold ring', price: 900, rarity: 'epic', status: null }, { id: 'rose', name: 'Rose laurel', price: 900, rarity: 'epic', status: 'equipped' }, { id: 'cosmic', name: 'Cosmic dust', price: 1800,rarity: 'legendary', status: 'locked', unlock: 'Top 10 NSW' }, { id: 'champ', name: 'Champion crown',price: 2500,rarity: 'legendary', status: 'locked', unlock: '#1 weekly' }, ]; const SHOP_TITLES = [ { id: 't1', text: 'Year 11 Phenom', tone: 'rose', price: 300, rarity: 'common', status: 'equipped' }, { id: 't2', text: 'Mole Master', tone: 'gold', price: 500, rarity: 'rare', status: null }, { id: 't3', text: 'Streak Smasher', tone: 'coral', price: 700, rarity: 'rare', status: null }, { id: 't4', text: 'Apex Predator', tone: 'gold', price: 1500, rarity: 'legendary', status: 'locked', unlock: '5× weekly #1' }, { id: 't5', text: 'Cell Splitter', tone: 'green', price: 500, rarity: 'rare', status: 'owned' }, { id: 't6', text: 'Northvale Royal', tone: 'plum', price: 1000, rarity: 'epic', status: 'locked', unlock: '#1 at your school' }, ]; // ── 1) Locker — your equipped setup + slots ────────────────── function RewardLocker() { return (
Identity 1,240 coins · earn via lessons + challenges

Your Locker

Mix and match a character, frame, title and a trophy to show off. Everything here travels with you onto every leaderboard.

Equipped
Pi · Champion crown
"Year 11 Phenom" · 2 trophies displayed
Your setup
How you appear
QuantumQuokka
Year 11 Phenom
Character
Pi · Rare
Change
Frame
Champion crown
Change
Title
Year 11 Phenom
Change
Trophy display (3)
Weekly #1 · 12d streak · Bio Champ
Pick
Tip: the Mole character unlocks at Lvl 12 — you're 3 levels away. Complete this week's challenge for an instant +250 XP.
Owned · 14 items
{['beaker','helix','pi','atom','cell','prism'].map((k, i) => (
{k === 'pi' &&
}
{CHARS[k].name}
{CHARS[k].tag}
{k === 'pi' ? 'Equipped' : 'Owned'}
))}
); } // ── 2) Shop — browse + buy ────────────────────────────────── function RewardShop() { return (
Shop · spend earned coins
{/* aside */} {/* main */}
{/* featured pack */}
Pack of the week · expires in 3d 14h

Champion Bundle

Cosmic dust frame + the "Apex Predator" title + one trophy display slot — 35% off until Monday.

Apex Predator
2,800
was 4,300

Characters

8 of 12 · sorted by price
{SHOP_CHARS.map(c => { const ch = CHARS[c.kind]; return (
{c.rarity} {(c.status === 'owned' || c.status === 'equipped') &&
}
{ch.name}
{ch.tag}
{c.status === 'equipped' && Equipped} {c.status === 'owned' && Owned} {c.status === 'locked' && {c.unlock}} {c.status === null && {c.price.toLocaleString()}}
); })}

Frames

Ring around your character
{SHOP_FRAMES.map(f => (
{f.rarity}
{f.name}
{f.status === 'equipped' && Equipped} {f.status === 'owned' && Owned} {f.status === 'locked' && {f.unlock}} {f.status === null && {f.price.toLocaleString()}}
))}

Titles

Two-word identity tag shown under your name
{SHOP_TITLES.map(t => (
{t.rarity}
{t.text}
{t.status === 'equipped' && Equipped} {t.status === 'owned' && Owned} {t.status === 'locked' && {t.unlock}} {t.status === null && {t.price.toLocaleString()}}
))}
); } // ── 3) Boards-with-identity ───────────────────────────────── function RewardBoards() { return (
What it actually looks like
Every row now carries the player's character, frame, title and earned trophies. Hover to inspect, click for their profile.
Northvale High
Week 28 · 124 students playing
Updated 4m ago
{ID_SCHOOL_BOARD.map(r => )}
Beat the Teacher · what the top of that board looks like
Beat the Teacher
All ages · all subjects · NSW-wide
Week 28
); } // ── 4) Achievements / Trophy wall ─────────────────────────── const ACHIEVEMENTS = [ { name: 'Weekly champion', tier: 'gold', icon: 'crown', prog: [3,5], got: false, unlock: '3/5' }, { name: 'Streak guardian', tier: 'rare', icon: 'flame', prog: [12,30],got: false, unlock: '12/30' }, { name: 'Perfect run', tier: 'epic', icon: 'target', prog: [1,1], got: true, unlock: 'Done' }, { name: 'Teacher slayer', tier: 'legendary',icon: 'swords', prog: [0,3], got: false, unlock: '0/3' }, { name: 'Bio specialist', tier: 'rare', icon: 'helix', prog: [40,50],got: false, unlock: '40/50' }, { name: 'Maths specialist', tier: 'rare', icon: 'sparkles', prog: [50,50],got: true, unlock: 'Done' }, { name: 'Speed demon', tier: 'epic', icon: 'bolt', prog: [1,1], got: true, unlock: 'Done' }, { name: 'Northvale #1', tier: 'epic', icon: 'school', prog: [0,1], got: false, unlock: 'Locked' }, { name: 'NSW top 50', tier: 'legendary',icon: 'star', prog: [0,1], got: false, unlock: 'Locked' }, { name: 'First challenge', tier: 'common', icon: 'play', prog: [1,1], got: true, unlock: 'Done' }, { name: 'Coin collector', tier: 'rare', icon: 'coin', prog: [1240,2500], got: false, unlock: '1.2k/2.5k' }, { name: 'Comeback kid', tier: 'epic', icon: 'arrowUp', prog: [0,1], got: false, unlock: 'Drop 5+, climb back' }, ]; function RewardAchievements() { return (
Earned, not bought 4 / 24 unlocked

Trophy Case

Pick any 3 to display next to your name on every leaderboard. Some are stackable — the Streak Guardian gets a fancier icon at 30 / 90 / 180 days.

Currently displayed
3 of 3 slots used
Hover any trophy on a board to see how it was earned
All achievements
{ACHIEVEMENTS.map((a, i) => (
{a.tier}
{a.name}
{a.tier}
{a.unlock}
))}
); } // ── 5) Gallery — all characters at scale so you can compare ───── function RewardGallery() { const all = Object.keys(CHARS); return (
12 characters · 6 frames More dropping monthly

Character Gallery

All characters at large size — this is the source of truth for the look. Picking one gives you instant identity on every board.

Featured
Volt · Champion crown
This week's most-bought
All 12 characters
{all.map(k => { const c = CHARS[k]; return (
{c.name}
{c.tag}
); })}
Frame treatments · same character, different rarity
{[ { f: null, label: 'No frame', sub: 'Default' }, { f: 'bronze', label: 'Bronze', sub: 'Common · 150c' }, { f: 'silver', label: 'Silver', sub: 'Rare · 400c' }, { f: 'gold', label: 'Gold', sub: 'Epic · 900c' }, { f: 'cosmic', label: 'Cosmic dust', sub: 'Legendary · earned' }, { f: 'champ', label: 'Champion crown', sub: 'Legendary · earned' }, ].map((row, i) => (
{row.label}
{row.sub}
))}
); } Object.assign(window, { CHARS, CharGlyph, Character, Trophy, IdRow, RewardLocker, RewardShop, RewardBoards, RewardAchievements, RewardGallery, ID_SCHOOL_BOARD, TEACHER_ROW, });