// Home screen — learning path (Duolingo-style skill tree) + top status bar // Parcours construit dynamiquement à partir de window.LESSON_INDEX. const UNIT_COLORS = ['#E07A3E', '#4A7A8C', '#5A8A3A', '#8C6B4A', '#6B3A7A', '#B8854A']; // Construit la liste des unités pour un track donné. function buildUnitsFromIndex(lang, progress, trackId) { if (!window.LESSON_INDEX) return []; const track = (trackId ? window.LESSON_INDEX.tracks.find((t) => t.id === trackId) : window.LESSON_INDEX.tracks[0]) || window.LESSON_INDEX.tracks[0]; if (!track) return []; // La 1re unité du track hérite de la couleur du track ; les suivantes tournent dans la palette. const trackColor = track.color || UNIT_COLORS[0]; return track.units.map((u, uIdx) => { const color = uIdx === 0 ? trackColor : UNIT_COLORS[uIdx % UNIT_COLORS.length]; const doneCount = progress[u.id] || 0; const lessons = u.lessons.map((lessonId, i) => { const lesson = window.getLesson(lessonId); const isDone = i < doneCount; const isActive = i === doneCount; // Dernière leçon = "boss" (défi), avant-dernière = "practice", reste = "lesson" const type = i === u.lessons.length - 1 ? 'boss' : i === u.lessons.length - 2 ? 'practice' : 'lesson'; return { id: lessonId, lessonId, type, title: lesson ? window.loc(lesson.title, lang) : lessonId, done: isDone, active: isActive, crowns: isDone ? Math.max(1, 4 - i) : undefined, }; }); return { id: u.id, order: u.order, title: window.loc(u.title, lang), subtitle: lessons[Math.max(0, doneCount)]?.title || lessons[0]?.title || '', color, lessons, }; }); } function HomeScreen({ theme, lang, onLessonClick, onTabClick, progress, goal, activeTrackId, setActiveTrackId, streak = 7, hearts = 4, gems = 1250, xp = 840 }) { // Progression reçue en prop (source : app.jsx) — fallback pour démo isolée. const resolvedProgress = progress || { u1: 4, u2: 0, u3: 0, u4: 0, u5: 0, f1: 0 }; const tracks = (window.LESSON_INDEX && window.LESSON_INDEX.tracks) || []; const resolvedTrackId = activeTrackId || tracks[0]?.id; const units = buildUnitsFromIndex(lang, resolvedProgress, resolvedTrackId); const [scrolled, setScrolled] = React.useState(false); const goalLabels = { fr: { student: 'Étudiant·e · révisions', pro: 'Montée en compétence', entrepreneur: 'Freelance / TPE', curious: 'Par curiosité' }, en: { student: 'Student · exam prep', pro: 'Level up skills', entrepreneur: 'Freelance / SME', curious: 'Just curious' }, }; const goalLabel = goal ? goalLabels[lang][goal] : null; return (
{/* top status bar */}
{/* goal banner (set by onboarding) */} {goalLabel && (
🎯 {goalLabel}
)} {/* track switcher — visible dès qu'il y a plus d'un parcours */} {tracks.length > 1 && (
{tracks.map((t) => { const active = t.id === resolvedTrackId; const tcolor = t.color || theme.primary; return ( ); })}
)} {/* scrollable path */}
setScrolled(e.target.scrollTop > 10)} style={{ flex: 1, overflow: 'auto', paddingBottom: 110 }} > {units.map((unit, uIdx) => (
{/* unit banner */}
{lang==='fr'?'Unit\u00e9':'Unit'} {unit.order}
{unit.title.split('—')[1]?.trim() || unit.subtitle}
{/* skill nodes zig-zag */}
{unit.lessons.map((l, i) => { const offset = Math.sin(i * 0.8) * 60; return (
onLessonClick(l)}/>
); })}
))} {/* end of path */}
{lang==='fr'?'Plus de contenu arrive bient\u00f4t \u2728':'More content coming soon \u2728'}
{/* floating Milo companion */} {/* bottom tab bar */}
); } function SkillNode({ lesson, theme, unitColor, onClick }) { const done = lesson.done; const active = lesson.active; const locked = !done && !active; const bg = done ? unitColor : active ? '#fff' : theme.muted; const border = done ? shadeColor(unitColor, -20) : active ? unitColor : theme.border; const iconColor = done ? '#fff' : active ? unitColor : '#B0A79A'; let icon; if (lesson.type === 'boss') { icon = ; } else if (lesson.type === 'practice') { icon = ; } else { icon = ; } return (
{active && (
START
)}
); } function StatPill({ icon, value, color, theme }) { const iconEl = { flame: , heart: , gem: , flag:
, }[icon]; return (
{iconEl} {value !== undefined && {value}}
); } function BottomTabs({ theme, active, onTabClick }) { const tabs = [ { k: 'home', label: 'Leçon', icon: (c) => }, { k: 'tracks', label: 'Parcours', icon: (c) => }, { k: 'catalog', label: 'Cours', icon: (c) => }, { k: 'league', label: 'Ligue', icon: (c) => }, { k: 'profile', label: 'Profil', icon: (c) => }, ]; return (
{tabs.map(t => { const act = active === t.k; return ( ); })}
); } function FloatingMilo({ theme, lang }) { const [open, setOpen] = React.useState(false); const tip = lang==='fr' ? 'Psst ! Plus que 2 le\u00e7ons pour terminer l\u2019Unit\u00e9 1 \ud83d\udd25' : 'Psst! Only 2 lessons to finish Unit 1 \ud83d\udd25'; return (
{open && (
{tip}
)}
); } function shadeColor(hex, percent) { const f = parseInt(hex.slice(1), 16); const t = percent < 0 ? 0 : 255; const p = Math.abs(percent) / 100; const R = f >> 16, G = (f >> 8) & 0x00FF, B = f & 0x0000FF; return '#' + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1); } Object.assign(window, { HomeScreen, SkillNode, StatPill, BottomTabs, FloatingMilo, shadeColor });