// components/jeux.jsx — Page des 20 mini-jeux LBN4E /* global React */ const GAMES_LIST = [ { id: "memoire", num: "01", cat: "Logique", title: "Mémoire flash", desc: "Reproduis la séquence de couleurs dans le bon ordre. 10 secondes par séquence.", levels: [ { lv: 1, label: "Enfant", hint: "4 couleurs · 10s/séquence", maxTime: 60, target: 4, total: 4 }, { lv: 2, label: "Adulte", hint: "6 couleurs · 10s/séquence", maxTime: 90, target: 6, total: 6 }, { lv: 3, label: "Maître", hint: "8 couleurs · 10s/séquence", maxTime: 120, target: 8, total: 8 } ] }, { id: "suite", num: "02", cat: "Logique", title: "Suite logique", desc: "Trouve le nombre qui complète la suite. 1 minute pour tout résoudre.", levels: [ { lv: 1, label: "Enfant", hint: "5 suites · 1:00", maxTime: 120, target: 3, total: 5 }, { lv: 2, label: "Adulte", hint: "5 suites · 1:00", maxTime: 120, target: 3, total: 5 }, { lv: 3, label: "Maître", hint: "5 suites · 1:00", maxTime: 120, target: 3, total: 5 } ] }, { id: "anagrammes", num: "03", cat: "Logique", title: "Anagrammes", desc: "Remets les lettres dans l'ordre pour former un mot. 1 minute pour tout résoudre.", levels: [ { lv: 1, label: "Enfant", hint: "5 mots · 1:00", maxTime: 120, target: 3, total: 5 }, { lv: 2, label: "Adulte", hint: "5 mots · 1:00", maxTime: 120, target: 3, total: 5 }, { lv: 3, label: "Maître", hint: "5 mots · 1:00", maxTime: 120, target: 3, total: 5 } ] }, { id: "reflexes", num: "04", cat: "Adresse", title: "Réflexes", desc: "Clique dès que la cible passe au vert. L'objectif est une moyenne de temps de réaction suffisamment basse.", levels: [ { lv: 1, label: "Enfant", hint: "Moy. < 500 ms", maxTime: 60, target: 5, total: 5 }, { lv: 2, label: "Adulte", hint: "Moy. < 400 ms · délai aléatoire", maxTime: 60, target: 5, total: 5 }, { lv: 3, label: "Maître", hint: "Moy. < 300 ms · feintes rouges", maxTime: 60, target: 5, total: 5 } ] }, { id: "cible", num: "05", cat: "Adresse", title: "Cible mobile", desc: "Touche un maximum de cibles en 30s. Au niveau 3, les cibles rouges font perdre un point.", levels: [ { lv: 1, label: "Enfant", hint: "≥ 15 cibles · 30s", maxTime: 35, target: 15, total: 50 }, { lv: 2, label: "Adulte", hint: "≥ 30 cibles · 30s", maxTime: 35, target: 30, total: 60 }, { lv: 3, label: "Maître", hint: "≥ 45 cibles · leurres rouges −1", maxTime: 35, target: 45, total: 70 } ] }, { id: "tempo", num: "06", cat: "Adresse", title: "Tap-tempo", desc: "Tape 10 fois en suivant le point clignotant au rythme imposé.", levels: [ { lv: 1, label: "Enfant", hint: "60 BPM · ±220 ms", maxTime: 60, target: 60, total: 100 }, { lv: 2, label: "Adulte", hint: "90 BPM · repère masqué après 5 taps", maxTime: 60, target: 70, total: 100 }, { lv: 3, label: "Maître", hint: "120 BPM · repère masqué après 2 taps", maxTime: 60, target: 80, total: 100 } ] }, { id: "drapeaux", num: "07", cat: "Culture", title: "Drapeaux", desc: "Identifie le pays correspondant au drapeau affiché. 5 secondes par question.", levels: [ { lv: 1, label: "Enfant", hint: "4 choix · 5s/question", maxTime: 60, target: 6, total: 8 }, { lv: 2, label: "Adulte", hint: "6 choix · 5s/question", maxTime: 60, target: 6, total: 8 }, { lv: 3, label: "Maître", hint: "6 choix · 5s/question", maxTime: 60, target: 6, total: 8 } ] }, { id: "capitales", num: "08", cat: "Culture", title: "Capitales", desc: "Quelle est la capitale de ce pays ? 5 secondes par question.", levels: [ { lv: 1, label: "Enfant", hint: "4 choix · 5s/question", maxTime: 60, target: 6, total: 8 }, { lv: 2, label: "Adulte", hint: "5 choix · 5s/question", maxTime: 60, target: 6, total: 8 }, { lv: 3, label: "Maître", hint: "6 choix · 5s/question", maxTime: 60, target: 6, total: 8 } ] }, { id: "annee", num: "09", cat: "Culture", title: "Devine l'année", desc: "Devine l'année d'un événement célèbre à quelques années près. 5 secondes par question.", levels: [ { lv: 1, label: "Enfant", hint: "2000–2025 · ±10 ans · 10s/q", maxTime: 90, target: 4, total: 6 }, { lv: 2, label: "Adulte", hint: "1880–2000 · ±5 ans · 10s/q", maxTime: 90, target: 4, total: 6 }, { lv: 3, label: "Maître", hint: "1300–1900 · ±2 ans · 10s/q", maxTime: 90, target: 4, total: 6 } ] }, { id: "mastermind", num: "10", cat: "Logique", title: "Code du Coffre", desc: "Déchiffre la combinaison secrète du coffre en plaçant des gemmes. Chaque essai révèle les bien placées et les mal placées.", levels: [ { lv: 1, label: "Enfant", hint: "3 positions · 4 couleurs · 10 essais", maxTime: 300, target: 1, total: 1 }, { lv: 2, label: "Adulte", hint: "4 positions · 5 couleurs · 9 essais", maxTime: 240, target: 1, total: 1 }, { lv: 3, label: "Maître", hint: "4 positions · 6 couleurs · 8 essais", maxTime: 240, target: 1, total: 1 } ] }, { id: "intrus", num: "11", cat: "Logique", title: "L'Imposteur", desc: "Cinq mots sont présentés : l'un n'appartient pas au groupe. Identifie le traître avant que le sablier ne se vide.", levels: [ { lv: 1, label: "Enfant", hint: "6 séries · catégories évidentes · 20s/q", maxTime: 120, target: 4, total: 6 }, { lv: 2, label: "Adulte", hint: "6 séries · catégories subtiles · 12s/q", maxTime: 90, target: 4, total: 6 }, { lv: 3, label: "Maître", hint: "6 séries · leurres orthographiques · 8s/q", maxTime: 60, target: 4, total: 6 } ] }, { id: "flamme", num: "12", cat: "Adresse", title: "La Flamme Vacillante", desc: "Maintiens ton curseur dans le cercle lumineux qui erre et rétrécit. Chaque seconde à l'intérieur compte.", levels: [ { lv: 1, label: "Enfant", hint: "≥ 22s dans le cercle · cercle lent", maxTime: 35, target: 22, total: 30 }, { lv: 2, label: "Adulte", hint: "≥ 22s · cercle rapide", maxTime: 35, target: 22, total: 30 }, { lv: 3, label: "Maître", hint: "≥ 22s · cercle erratique · rétrécissant", maxTime: 35, target: 22, total: 30 } ] }, { id: "chevauchee", num: "13", cat: "Adresse", title: "La Chevauchée", desc: "Fais sauter ton destrier par-dessus les herses du château. Espace ou clic pour sauter — double tap pour le saut prolongé.", levels: [ { lv: 1, label: "Enfant", hint: "Survive 25s · obstacles lents", maxTime: 30, target: 25, total: 30 }, { lv: 2, label: "Adulte", hint: "Survive 35s · vitesse croissante", maxTime: 40, target: 35, total: 40 }, { lv: 3, label: "Maître", hint: "Survive 45s · doubles herses", maxTime: 50, target: 45, total: 50 } ] }, { id: "differences", num: "14", cat: "Logique", title: "Les Intrus", desc: "Des objets anachroniques se cachent dans ces illustrations médiévales. Clique sur chaque intrus pour le démasquer avant la fin du temps !", levels: [ { lv: 1, label: "Enfant", hint: "7 intrus · 3:00 · chevalier", maxTime: 180, target: 7, total: 7 }, { lv: 2, label: "Adulte", hint: "14 intrus · 2:30 · tapisserie", maxTime: 150, target: 14, total: 14 }, { lv: 3, label: "Maître", hint: "21 intrus · 2:00 · village médiéval",maxTime: 120, target: 21, total: 21 } ] }, { id: "archives", num: "15", cat: "Logique", title: "Les Archives", desc: "Retourne les parchemins deux par deux pour trouver les armoiries identiques. Retrouve-les toutes dans le temps imparti.", levels: [ { lv: 1, label: "Enfant", hint: "8 paires · 2:00", maxTime: 120, target: 8, total: 8 }, { lv: 2, label: "Adulte", hint: "10 paires · 1:30", maxTime: 90, target: 10, total: 10 }, { lv: 3, label: "Maître", hint: "12 paires · 1:00", maxTime: 60, target: 12, total: 12 } ] }, { id: "copiste", num: "16", cat: "Adresse", title: "Le Copiste", desc: "Transcris le parchemin ancien avant que la bougie s'éteigne. Chaque faute de frappe ralentit la plume.", levels: [ { lv: 1, label: "Enfant", hint: "≥ 20/25 mots · 60s", maxTime: 60, target: 20, total: 25 }, { lv: 2, label: "Adulte", hint: "≥ 25/30 mots · 60s", maxTime: 60, target: 25, total: 30 }, { lv: 3, label: "Maître", hint: "≥ 32/40 mots · 60s", maxTime: 60, target: 32, total: 40 } ] }, { id: "blason", num: "17", cat: "Culture", title: "L'Héraldiste", desc: "Un blason est décrit en langage héraldique. Identifie-le parmi les propositions avant que le sablier se vide.", levels: [ { lv: 1, label: "Enfant", hint: "4 choix · blasons simples · 15s/q", maxTime: 90, target: 4, total: 6 }, { lv: 2, label: "Adulte", hint: "5 choix · terminologie précise · 10s/q", maxTime: 90, target: 4, total: 6 }, { lv: 3, label: "Maître", hint: "6 choix · blasonnement complet · 8s/q", maxTime: 90, target: 4, total: 6 } ] }, { id: "escrime", num: "18", cat: "Adresse", title: "L'Escrimeur", desc: "Des épées jaillissent des meurtrières — pare-les en cliquant au bon moment. Une fausse parade coûte un point.", levels: [ { lv: 1, label: "Enfant", hint: "≥ 12/15 · rythme lent", maxTime: 30, target: 12, total: 15 }, { lv: 2, label: "Adulte", hint: "≥ 14/18 · rythme soutenu", maxTime: 30, target: 14, total: 18 }, { lv: 3, label: "Maître", hint: "≥ 16/20 · rythme rapide · feintes", maxTime: 30, target: 16, total: 20 } ] }, { id: "cartographe", num: "19", cat: "Culture", title: "Le Cartographe", desc: "Une province est surlignée sur la carte ancienne — nomme-la avant que le sablier se vide.", levels: [ { lv: 1, label: "Enfant", hint: "Régions de France · 4 choix · 8s/q", maxTime: 90, target: 4, total: 6 }, { lv: 2, label: "Adulte", hint: "Provinces historiques · 5 choix · 6s/q", maxTime: 90, target: 4, total: 6 }, { lv: 3, label: "Maître", hint: "Europe du XVIIe · 6 choix · 5s/q", maxTime: 90, target: 4, total: 6 } ] }, { id: "oracle", num: "20", cat: "Culture", title: "L'Oracle", desc: "Des parchemins décrivent des événements historiques. Remets-les dans l'ordre chronologique exact.", levels: [ { lv: 1, label: "Enfant", hint: "4 événements · siècles distincts", maxTime: 60, target: 1, total: 1 }, { lv: 2, label: "Adulte", hint: "5 événements · même siècle", maxTime: 60, target: 1, total: 1 }, { lv: 3, label: "Maître", hint: "6 événements · même décennie", maxTime: 60, target: 1, total: 1 } ] }, ]; const JEUX_CATS = [ { id: "all", label: "Tous" }, { id: "Logique", label: "Logique" }, { id: "Adresse", label: "Adresse" }, { id: "Culture", label: "Culture G." }, ]; function indiceKey(gameId, lv) { return `${gameId}-${lv}`; } function formatJeuxTime(s) { if (s == null) return "—"; if (s < 60) return `${Math.round(s)}s`; const m = Math.floor(s / 60); const r = Math.floor(s % 60); return `${m}:${String(r).padStart(2, "0")}`; } // ── Baroque ornaments ───────────────────────────────────────────── function JeuxOrnament({ seed }) { const variants = [OrnA, OrnB, OrnC, OrnD]; return React.createElement(variants[(seed || 0) % 4]); } function OrnA() { return ( ); } function OrnB() { return ( ); } function OrnC() { const rays = []; for (let i = 0; i < 24; i++) { const a = (i / 24) * Math.PI * 2; const x1 = 120 + Math.cos(a) * 64, y1 = 100 + Math.sin(a) * 54; const x2 = 120 + Math.cos(a) * (i % 2 === 0 ? 88 : 78); const y2 = 100 + Math.sin(a) * (i % 2 === 0 ? 78 : 70); rays.push(); } return ( {rays} {[...Array(8)].map((_, i) => { const a = (i / 8) * Math.PI * 2 + Math.PI / 8; return ; })} ); } function OrnD() { return ( ); } function JeuxCorner() { return ( ); } // ── HUD ─────────────────────────────────────────────────────────── function PlayHud({ time, score, total }) { return (
{time != null && (
{formatJeuxTime(time)}
)} {score != null && (
{score}{total != null ? ` / ${total}` : ""}
)}
); } // ── Indice card ─────────────────────────────────────────────────── function JeuxIndiceCard({ game, level, justUnlocked, indiceText, compact }) { return (
{justUnlocked ? "★ Indice débloqué !" : "⚜ Indice débloqué"}
{game.num}·{level}
{indiceText ?
{indiceText}
:
Note ce code — il fera partie du puzzle final.
}
); } // ── Game card ───────────────────────────────────────────────────── function JeuxCard({ game, indices, onOpen }) { const unlocked = game.levels.map(lv => !!indices[indiceKey(game.id, lv.lv)]); return (
{unlocked.map((u, i) => ( ))}
{game.num}
{game.cat}

{game.title}

{game.desc}

); } // ── Play overlay ────────────────────────────────────────────────── function JeuxPlayView({ game, onClose, indices, unlockIndice, jeuxIndices, isAdmin, onUpdateData, data }) { const [level, setLevel] = React.useState(1); const [hud, setHud] = React.useState({ time: null, score: null, total: null }); const [runKey, setRunKey] = React.useState(0); const [runStart, setRunStart] = React.useState(() => performance.now()); const [finished, setFinished] = React.useState(null); // Babel standalone compiles scripts async — poll until the game registers const [Game, setGame] = React.useState(() => window.__GAMES__ && window.__GAMES__[game.id]); React.useEffect(() => { if (Game) return; const iv = setInterval(() => { const g = window.__GAMES__ && window.__GAMES__[game.id]; if (g) { setGame(() => g); clearInterval(iv); } }, 150); return () => clearInterval(iv); }, [game.id, Game]); const lvData = game.levels.find(l => l.lv === level); const restart = React.useCallback(() => { setRunKey(k => k + 1); setRunStart(performance.now()); setFinished(null); }, []); const finish = React.useCallback((finalScore) => { if (!lvData) return; const elapsed = (performance.now() - runStart) / 1000; const okScore = finalScore >= lvData.target; const okTime = elapsed <= lvData.maxTime; const earned = okScore && okTime; const key = indiceKey(game.id, level); const already = !!indices[key]; if (earned && !already) unlockIndice(key); setFinished({ score: finalScore, lv: level, earned, okScore, okTime, elapsed, alreadyHad: already }); }, [lvData, runStart, level, game.id, indices, unlockIndice]); React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]); const getIndiceText = (lv) => (jeuxIndices || {})[indiceKey(game.id, lv)] || ""; const alreadyUnlocked = !!indices[indiceKey(game.id, level)]; return (
{ if (e.target.classList.contains("play-overlay")) onClose(); }}>
{/* Top bar */}
{game.num}
{game.title}
{game.cat} · {lvData?.hint}
{/* Level selector */}
{game.levels.map((lv) => { const isUnlocked = !!indices[indiceKey(game.id, lv.lv)]; return ( ); })}
{/* Objectives */}
Objectif : {lvData.target}/{lvData.total} pts · Max : {formatJeuxTime(lvData.maxTime)} · Récompense : indice {game.num}·{level}
{/* Game body */}
{finished ? (
{finished.score}
Score · niveau {finished.lv}
{finished.earned && !finished.alreadyHad && ( <>
⚜ Indice débloqué !
)} {finished.earned && finished.alreadyHad && ( <>
Déjà validé ⚜
)} {!finished.earned && (
{!finished.okScore && `Score ${finished.score} < ${lvData.target}`} {!finished.okScore && !finished.okTime && " · "} {!finished.okTime && `Temps ${Math.round(finished.elapsed)}s > ${lvData.maxTime}s`}
Atteins l'objectif pour débloquer l'indice {game.num}·{finished.lv}.
)}
) : Game ? ( { await onUpdateData({ ...data, differencesConfig: cfg }); } : undefined} /> ) : (
Chargement…
)}
{/* Indice strip — always visible when level already unlocked and not in result screen */} {alreadyUnlocked && !finished && (
)} {/* Footer */}
Échap pour fermer
); } // ── Leaderboard ─────────────────────────────────────────────────── const MEDALS = ["⚜", "✦", "◆"]; function JeuxLeaderboard({ currentUserId, adminPseudos, isAdmin }) { const [board, setBoard] = React.useState([]); const [expanded, setExpanded] = React.useState(true); const loadBoard = React.useCallback(async () => { const sb = window.__supabase; if (!sb) return; const [{ data: allIdx }, { data: allUsers }] = await Promise.all([ sb.from("user_indices").select("user_id"), sb.from("users").select("id, pseudo"), ]); if (!allIdx || !allUsers) return; const counts = {}; allIdx.forEach(r => { counts[r.user_id] = (counts[r.user_id] || 0) + 1; }); const ranked = allUsers .filter(u => isAdmin || !(adminPseudos || []).map(p => p.toLowerCase()).includes(u.pseudo.toLowerCase())) .map(u => ({ id: u.id, pseudo: u.pseudo, count: counts[u.id] || 0 })) .sort((a, b) => b.count - a.count || a.pseudo.localeCompare(b.pseudo)); setBoard(ranked); }, []); // Chargement initial + subscription realtime React.useEffect(() => { const sb = window.__supabase; if (!sb) return; loadBoard(); const channel = sb.channel("leaderboard-watch") .on("postgres_changes", { event: "*", schema: "public", table: "user_indices" }, loadBoard) .on("postgres_changes", { event: "INSERT", schema: "public", table: "users" }, loadBoard) .subscribe(); return () => sb.removeChannel(channel); }, [loadBoard]); if (board.length === 0) return null; return (
{expanded && (
{board.map((row, i) => { const isMe = row.id === currentUserId; return (
{i < 3 ? MEDALS[i] : {i + 1}} {row.pseudo}{isMe && (toi)} {row.count}/60
); })}
)}
); } // ── Main page ───────────────────────────────────────────────────── function JeuxPage({ data, user, onLogout, isAdmin, onUpdateData }) { const [filter, setFilter] = React.useState("all"); const [openId, setOpenId] = React.useState(null); const [indices, setIndices] = React.useState({}); // Charger les indices de l'utilisateur depuis Supabase React.useEffect(() => { if (!user) return; const sb = window.__supabase; if (!sb) return; sb.from("user_indices").select("game_id, level, unlocked_at").eq("user_id", user.id) .then(({ data: rows }) => { if (!rows) return; const idx = {}; rows.forEach(r => { idx[`${r.game_id}-${r.level}`] = { at: r.unlocked_at }; }); setIndices(idx); }); }, [user]); const unlockIndice = async (key) => { // Mise à jour optimiste immédiate setIndices(prev => ({ ...prev, [key]: { at: Date.now() } })); if (!user) return; const sb = window.__supabase; if (!sb) return; // key = "gameId-level" (ex: "memoire-1", "anagrammes-3") const lastDash = key.lastIndexOf("-"); const gameId = key.slice(0, lastDash); const level = parseInt(key.slice(lastDash + 1), 10); await sb.from("user_indices").upsert({ user_id: user.id, game_id: gameId, level, unlocked_at: new Date().toISOString(), }).then(null, () => {}); }; const filtered = React.useMemo( () => filter === "all" ? GAMES_LIST : GAMES_LIST.filter(g => g.cat === filter), [filter] ); const counts = React.useMemo(() => { const c = { all: GAMES_LIST.length }; for (const g of GAMES_LIST) c[g.cat] = (c[g.cat] || 0) + 1; return c; }, []); const open = openId ? GAMES_LIST.find(g => g.id === openId) : null; const jeuxIndices = data.jeuxIndices || {}; const myCount = Object.keys(indices).length; return (
{/* Header */}
⚜ Tournoi · 20 épreuves

Les Jeux du Chasteau

Remporte chaque épreuve pour débloquer les indices qui éclairent les 20 codes du puzzle final. Trois niveaux par jeu — du plus clément au plus ardu.

⚠ Les indices sont des aides aux énigmes, pas des substituts — résoudre l'énigme reste indispensable. Joue au bon moment : le jeu n°1 donne des indices sur le code n°1, le jeu n°2 sur le code n°2, et ainsi de suite. Mieux vaut jouer face à l'énigme concernée.

{/* Leaderboard temps réel */} {/* Category filter */}
Catégorie {JEUX_CATS.map(cat => ( ))}
{/* Cards grid */}
{filtered.map(g => ( setOpenId(g.id)} /> ))}
{/* Play overlay */} {open && ( setOpenId(null)} indices={indices} unlockIndice={unlockIndice} jeuxIndices={jeuxIndices} isAdmin={isAdmin} onUpdateData={onUpdateData} data={data} /> )}
); } window.JeuxPage = JeuxPage;