`, puis `BottomNav`. - **State management** : - `src/state/AuthContext.js` encapsule GenMB Auth : session, login, inscription, magic link, logout, erreurs. - `src/state/MathoriaContext.js` centralise profil, statistiques, réponses, badges, progression, persistance et reset. - `src/state/ThemeContext.js` persiste `light/dark` dans `localStorage` key `mathoria-theme`. - `src/state/ToastContext.js` gère les notifications temporaires. - **Persistance** : - GenMB KV via `window.genmb.kv`. - L’app doit rester utilisable si `window.genmb` ou `window.genmb.kv` est absent. - Clés connues : - état Mathoria : géré par `src/state/MathoriaContext.js`, vraisemblablement `mathoria:state`. - `mathoria:coach:last-question` - `mathoria:coach:last-exchange` - **API IA texte** : - `src/pages/CoursesPage.js` appelle : ```js POST /api/ai/completion { prompt, appId: window.GENMB_APP_ID, maxTokens: 650 } ``` - Réponse attendue : `json.data.text`. - En cas de `429`, afficher exactement : `Limite IA atteinte : 100 requêtes par heure. Réessaie un peu plus tard.` - **Auth GenMB** : - SDK injecté dans `index.html` sous `window.genmb.auth`. - API utilisée/attendue : `ready`, `getUser`, `signIn`, `sendMagicLink`, `signUp`, `verifySignUp`, `signInWithPassword`, `signOut`, `onAuthStateChange`. - Objet user : `{ id, email, name, picture }`. - `Header.js` affiche l’utilisateur connecté et permet la déconnexion. ## File Structure ```txt index.html Entrée HTML, Tailwind CDN, CSS global, SDK GenMB Auth/KV/AI, root React. styles/main.css Tokens HSL, thème dark, shadows, safe areas mobile, focus-ring, base UI. CLAUDE.md Documentation projet existante pour agents IA. src/main.js Monte React dans #root avec Providers puis App. src/jsx.js Binding htm → React.createElement ; obligatoire pour tout rendu UI. src/mainProviders.js Ordre des providers globaux. src/App.js HashRouter, routes publiques et layout Header/main/BottomNav. src/components/Header.js Logo, lien parent, compte élève, état session, logout, toggle thème. src/components/BottomNav.js Navigation mobile/fixe principale vers Accueil/Élève/Défis/Cours/Classement. src/components/Button.js Bouton partagé avec variants primary/secondary/ghost/danger et état loading. src/components/StatCard.js Carte statistique réutilisée sur dashboard. src/data/questions.js Données statiques : questions, cours, leaderboard, badges, concours, rewards, signaux révision. src/pages/HomePage.js Hero, profil joueur éditable, dashboard de progression. src/pages/StudentPage.js Authentification/compte élève GenMB, probablement formulaires login/signup. src/pages/ParentPage.js Suivi parent de démonstration, recommandations et synthèse progression. src/pages/TrainingPage.js Défis mathématiques, choix de réponses, correction, points, badges. src/pages/CoursesPage.js Liste de cours et coach IA avec historique KV. src/pages/LeaderboardPage.js Classement démo + rang estimé selon score local. src/pages/NotFoundPage.js 404 thématique. src/state/AuthContext.js Wrapper GenMB Auth et état utilisateur. src/state/MathoriaContext.js Profil, stats, réponses, badges, persistence KV/local fallback. src/state/ThemeContext.js Thème clair/sombre avec localStorage. src/state/ToastContext.js Notifications applicatives. ``` ## Key Features - **Profil joueur** - Éditable depuis `src/pages/HomePage.js`. - Champs visibles : `firstName`, `grade`, `goal`. - Niveaux proposés : `CP`, `CE1`, `CE2`, `CM1`, `CM2`, `6e`, `5e`, `4e`, `3e`, `2nde`, `1ère`, `Terminale`. - Sauvegarde via `saveProfile` dans `MathoriaContext`. - **Entraînement Kangourou-like** - Questions statiques dans `src/data/questions.js`. - Modèle question : ```js { id, level, category, points, prompt, choices, answer, explanation } ``` - `TrainingPage.js` doit toujours afficher une correction pédagogique après réponse. - Les stats locales doivent suivre au minimum : réponses, bonnes réponses, points, séries/streaks, badges/progression. - **Cours** - Données dans `courses` de `src/data/questions.js`. - Modèle : ```js { id, title, level, duration, focus, mastery } ``` - Chaque module représente une compétence de concours/scolaire ; actuellement démo statique. - **Coach IA** - Implémenté dans `src/pages/CoursesPage.js`. - L’historique est limité aux 10 derniers messages avant génération. - Le prompt doit rester en français, pédagogique, adapté au `profile.grade` et au `profile.goal`. - Réponse attendue structurée en intuition, méthode étape par étape, mini-question. - Sauvegarde KV de la dernière conversation si disponible ; sinon notice explicite que l’aperçu ne persiste pas. - **Compte élève** - `StudentPage.js` s’appuie sur `useAuth()` de `src/state/AuthContext.js`. - Auth possible via Google, magic link et email/mot de passe selon SDK GenMB. - Ne pas contourner le contexte Auth en appelant directement le SDK depuis plusieurs pages sauf besoin précis. - **Espace parent** - `ParentPage.js` présente une vue de suivi familial/démo : progression, recommandations, signaux de révision. - Les signaux viennent de `revisionSignals` dans `src/data/questions.js`. - **Classement** - `LeaderboardPage.js` combine `leaderboard` statique et score local. - Rang local estimé : - `stats.points > 1500` → #3 - `stats.points > 900` → #7 - sinon #24 - **Badges et récompenses** - Badges dans `badges` : - `starter` : première réponse. - `logic` : 20 points. - `streak` : 3 bonnes réponses consécutives. - `daily` : 2 jours de suite. - Récompenses démo dans `gameRewards`. ## Design Guidelines - **Style visuel** : moderne, scolaire premium, gamifié mais sérieux. - **Couleurs** : - Toutes les couleurs passent par les variables HSL CSS de `styles/main.css` : `--primary`, `--secondary`, `--muted`, `--card`, `--border`, `--success`, `--warning`, `--destructive`, etc. - Ne pas hardcoder des hex dans les composants si une variable existe. - **Thème** : - Thème clair/sombre via classe `dark` sur ``. - Toggle dans `Header.js`. - **Typographie/layout** : - Tailwind utility classes directement dans les composants. - Cartes arrondies (`rounded-xl`, `rounded-lg`), bordures HSL, ombres `var(--shadow-*)`. - CTA de 48px min height (`min-h-12`) pour mobile. - **Responsive** - Mobile-first. - `BottomNav` est fixe en bas avec `safe-bottom-nav`; prévoir l’espace via `safe-page`. - `Header` est sticky avec `safe-top`. - Grilles passent de 1 colonne à `md:grid-cols-2` ou layout desktop via `lg:*`. - **Accessibilité** - Garder les labels de formulaires. - Utiliser `focus-ring`. - Boutons loading avec `aria-busy`. ## App Flow - **Premier usage** 1. L’utilisateur arrive sur `/`. 2. Il voit la promesse Mathoria, lance un défi ou explore les cours. 3. Il peut renseigner prénom, niveau et objectif. 4. `saveProfile()` persiste si KV disponible. - **Défi** 1. Aller sur `/entrainement`. 2. Choisir une réponse parmi `choices`. 3. Afficher résultat, explication, points gagnés. 4. Mettre à jour stats, streak, badges, puis sauvegarder. - **Coach IA** 1. Aller sur `/cours`. 2. La page tente de charger `mathoria:coach:last-exchange`. 3. L’élève pose une question. 4. Réponse IA ou erreur toast. 5. Sauvegarde KV si possible. - **Connexion élève** 1. Aller sur `/eleve` ou cliquer “Compte Élève”. 2. `AuthContext` attend `window.genmb.auth.ready()`. 3. Afficher état connecté/déconnecté. 4. Après connexion, `Header.js` affiche nom/email et bouton logout. - **Parent** 1. Lien `/parent` toujours visible dans le header. 2. Afficher synthèse démo basée sur stats/profil/signaux de révision. - **Edge cases** - KV absent : ne jamais bloquer l’UI ; afficher notice/toast si pertinent. - IA 429 : message français exact défini plus haut. - Réponse IA vide : erreur claire. - Profil incomplet : utiliser fallbacks (`Mathoria`, `collège`, objectif générique). - Session Auth en chargement : `Header.js` affiche “Session...”. ## Conventions - **Syntaxe UI** - Toujours importer : ```js import React from 'https://esm.sh/react@19.2.0'; import { html } from '../jsx.js'; ``` ou `./jsx.js` selon le chemin. - Utiliser htm pour les composants et fragments ; pas de JSX. - **Composants** - Exports nommés : `export function HomePage()`, `export function Button()`. - Props simples, pas de sur-abstraction. - Utiliser `Button.js` pour actions principales avec loading. - **Styling** - Tailwind inline + tokens CSS. - Réutiliser `focus-ring`, `safe-page`, `safe-top`, `safe-bottom-nav`. - **State** - Toute donnée de progression passe par `useMathoria()`. - Toute auth passe par `useAuth()`. - Toute notification passe par `useToast()`. - Ne pas introduire Redux/Zustand. - **Ajouter une page** 1. Créer `src/pages/NewPage.js`. 2. Utiliser `html` depuis `../jsx.js`. 3. Importer dans `src/App.js`. 4. Ajouter une ``} />`. 5. Ajouter un lien dans `Header.js` ou `BottomNav.js` seulement si navigation principale. - **Ajouter une question** - Modifier uniquement `questions` dans `src/data/questions.js`. - `id` stable et unique. - `choices` doit contenir exactement `answer`. - `explanation` doit être assez claire pour un élève. - **Ajouter une donnée persistée** - Centraliser dans `src/state/MathoriaContext.js`. - Garder compatibilité avec anciens états KV : prévoir valeurs par défaut. - Ne jamais supposer que `window.genmb.kv` existe. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.