/* ============================================================
BrainTrail ยท Shared components
============================================================ */
const { useState, useEffect, useRef, useMemo } = React;
/* ---------- Topographic contour background ---------- */
function TopoBG({ tint = '#0f8f7e', dense = false }) {
// Generate concentric organic ovals โ looks like trail contour lines.
const lines = [];
const cx = 230, cy = 440;
const count = dense ? 9 : 7;
for (let i = 0; i < count; i++) {
const r = 80 + i * 70;
lines.push(
);
}
return (
);
}
/* ---------- Tablet frame ---------- */
function StatusBar({ time = '9:41', light = false }) {
const color = light ? '#fff' : 'var(--ink)';
return (
);
}
function TabletFrame({ children, topo = true, topoTint, statusLight, bg, label }) {
return (
{topo && }
{children}
);
}
/* ---------- Icon set (hand-drawn-ish, single source of truth) ---------- */
const Icon = {
Home: (p) => ,
Map: (p) => ,
Star: (p) => ,
Trophy: (p) => ,
Person: (p) => ,
Flame: (p) => ,
Lightbulb: (p) => ,
Lock: (p) => ,
Check: (p) => ,
Mountain:(p)=> ,
Arrow: (p) => ,
Back: (p) => ,
Clock: (p) => ,
Plus: (p) => ,
Sparkle:(p) => ,
Clipboard:(p)=> ,
Trash: (p) => ,
Camera: (p) => ,
};
/* ---------- Trailblazer avatars (illustrated faces) ---------- */
const AVATARS = [
{ id: 'fox', name: 'Fox', bg: '#f08a4b', fg: '#fff', emoji: '๐ฆ' },
{ id: 'owl', name: 'Owl', bg: '#7c5cd3', fg: '#fff', emoji: '๐ฆ' },
{ id: 'bear', name: 'Bear', bg: '#a06a36', fg: '#fff', emoji: '๐ป' },
{ id: 'rabbit', name: 'Rabbit', bg: '#e9b8c8', fg: '#fff', emoji: '๐ฐ' },
{ id: 'frog', name: 'Frog', bg: '#5aaa6a', fg: '#fff', emoji: '๐ธ' },
{ id: 'panda', name: 'Panda', bg: '#3d5b54', fg: '#fff', emoji: '๐ผ' },
];
/* ---------- Drawn-feeling Avatar circle (text monogram inside) ---------- */
function Avatar({ id = 'fox', size = 44, ring = false }) {
const a = AVATARS.find(x => x.id === id) || AVATARS[0];
return (
{a.emoji}
);
}
/* ---------- Badge medallion ---------- */
function Badge({ name, kind = 'earned', emoji = 'โญ', tint = 'teal' }) {
const tints = {
teal: { bg: 'var(--teal-100)', stroke: 'var(--teal-700)' },
orange: { bg: 'var(--orange-100)', stroke: 'var(--orange-700)' },
plum: { bg: 'var(--plum-100)', stroke: 'var(--plum-700)' },
gold: { bg: '#fde0a4', stroke: '#8a5a10' },
};
const t = tints[tint] || tints.teal;
const locked = kind === 'locked';
return (
{locked ? '๐' : emoji}
{name}
);
}
/* ---------- Difficulty chip ---------- */
function DifficultyChip({ level }) {
const dots = { easy: 1, medium: 2, hard: 3, challenge: 4 }[level] || 1;
const labels = { easy: 'Easy', medium: 'Medium', hard: 'Hard', challenge: 'Challenge' };
return (
{[1,2,3,4].map(i => (
))}
{labels[level]}
);
}
/* ---------- Decorative mountain silhouette ---------- */
function MountainArt({ width = 460, height = 220, palette = 'sunrise' }) {
const palettes = {
sunrise: { sky: ['#fcd9a1', '#f7ba78'], far: '#7c5cd3', mid: '#1eb29c', near: '#0f8f7e', sun: '#fff2c9' },
forest: { sky: ['#cbe9e0', '#a4d9c9'], far: '#5d40b8', mid: '#0f8f7e', near: '#0a4a42', sun: '#fff7d6' },
};
const p = palettes[palette];
return (
);
}
/* ---------- Trail climb progress (animated) ----------
Replaces flat progress dots with a winding mountain trail.
The avatar walks the path; finished markers get checks; the
summit holds a waving flag and twinkling sparkles.
---------------------------------------------------------------- */
function TrailClimb({ current = 3, total = 10, avatarId = 'fox' }) {
// Hand-tuned marker positions along a winding ascent (viewBox 460ร200).
// Trail starts at lower-left, switches back twice, summits upper-right.
const allPts = [
[28, 178], [70, 168], [108, 174], [148, 158],
[186, 146], [222, 152], [258, 134], [292, 116],
[328, 96], [358, 76],
];
// If total != 10, sample evenly from the 10 baked points
const points = total === 10
? allPts
: Array.from({ length: total }, (_, i) =>
allPts[Math.round((i / (total - 1)) * (allPts.length - 1))]);
const summit = [410, 44];
const avatar = AVATARS.find(a => a.id === avatarId) || AVATARS[0];
const idx = Math.max(0, Math.min(current - 1, points.length - 1));
const here = points[idx];
// Build a smooth path through the markers (quadratic between each pair),
// ending at the summit so the line literally climbs the mountain.
const all = [...points, summit];
let trailPath = `M ${all[0][0]} ${all[0][1]}`;
for (let i = 1; i < all.length; i++) {
const prev = all[i - 1];
const cur = all[i];
const cx = (prev[0] + cur[0]) / 2;
const cy = Math.min(prev[1], cur[1]) - 6;
trailPath += ` Q ${cx} ${cy}, ${cur[0]} ${cur[1]}`;
}
// Split path into walked vs remaining (visual fill of progress).
let walkedPath = `M ${all[0][0]} ${all[0][1]}`;
for (let i = 1; i <= idx; i++) {
const prev = all[i - 1];
const cur = all[i];
const cx = (prev[0] + cur[0]) / 2;
const cy = Math.min(prev[1], cur[1]) - 6;
walkedPath += ` Q ${cx} ${cy}, ${cur[0]} ${cur[1]}`;
}
// Decorative pine positions (independent of trail)
const pines = [
[45, 188, 8], [88, 184, 7], [132, 188, 6], [175, 174, 7],
[205, 168, 5], [248, 165, 6], [280, 152, 5], [340, 122, 5],
];
return (
{/* Hiker avatar โ DOM overlay so we can use the colored emoji avatar */}
{avatar.emoji}
{/* tiny hiking stick */}
{/* "You are here" pill */}
{current} / {total}
);
}
/* ---------- Confetti burst ---------- */
function Confetti({ count = 24, active = true }) {
if (!active) return null;
const colors = ['#f08a4b', '#1eb29c', '#7c5cd3', '#f4c25b', '#e9748b'];
return (
{Array.from({ length: count }).map((_, i) => {
const left = Math.random() * 100;
const delay = Math.random() * 0.8;
const size = 6 + Math.random() * 8;
const color = colors[i % colors.length];
const round = Math.random() > 0.5;
return (
);
})}
);
}
/* ---------- XP bar ---------- */
function XPBar({ current, max, label = 'XP' }) {
const pct = Math.max(0, Math.min(100, (current / max) * 100));
return (
{label}
{current} / {max}
);
}
/* ---------- Bottom nav ---------- */
function BottomNav({ active = 'home', onNav }) {
const items = [
{ id: 'home', label: 'Home', Ico: Icon.Home },
{ id: 'map', label: 'Trails',Ico: Icon.Map },
{ id: 'badge', label: 'Badges',Ico: Icon.Trophy},
{ id: 'me', label: 'Me', Ico: Icon.Person },
];
return (
{items.map(it => (
onNav && onNav(it.id)}>
{it.label}
))}
{onBack && (
)}
{title}
{right}
);
}
/* ---------- Export to window so other scripts see them ---------- */
Object.assign(window, {
Icon, Avatar, AVATARS, Badge, DifficultyChip, MountainArt,
Confetti, XPBar, BottomNav, AppBar, TabletFrame, TopoBG, StatusBar,
TrailClimb,
});