// Speed mode — "FastFingers" style for accounting // 3 screens: intro, run, results // Micro-exos answered in 1 tap. Combo multiplier. Countdown timer. Haptic feedback. // ─── Data pool ───────────────────────────────────────────── const SPEED_MODES = { debitCredit: { k: 'debitCredit', title_fr: 'Débit ou Crédit ?', title_en: 'Debit or Credit?', subtitle_fr: 'Dans quelle colonne ?', subtitle_en: 'Which side?', duration: 60, icon: '⚡', color: '#E07A3E', choices_fr: ['Débit', 'Crédit'], choices_en: ['Debit', 'Credit'], }, actifPassif: { k: 'actifPassif', title_fr: 'Actif ou Passif ?', title_en: 'Asset or Liability?', subtitle_fr: 'Classe chaque compte', subtitle_en: 'Classify each account', duration: 30, icon: '⚖️', color: '#4A7A8C', choices_fr: ['Actif', 'Passif'], choices_en: ['Asset', 'Liability'], }, classePCG: { k: 'classePCG', title_fr: 'Quelle classe PCG ?', title_en: 'Which PCG class?', subtitle_fr: 'Les 7 classes du plan comptable', subtitle_en: 'The 7 accounting classes', duration: 45, icon: '🔢', color: '#6B3A7A', choices_fr: ['1', '2', '3', '4', '5', '6', '7'], choices_en: ['1', '2', '3', '4', '5', '6', '7'], }, blitz: { k: 'blitz', title_fr: 'Blitz éclair', title_en: 'Lightning blitz', subtitle_fr: 'Tout, mélangé, 90 s', subtitle_en: 'Everything, mixed, 90 s', duration: 90, icon: '🔥', color: '#C94A3F', }, }; // Pool of micro-questions for debitCredit const POOL_DEBIT_CREDIT_FR = [ { q: 'Achat de fournitures 500 € (payé banque)', a: 'Débit', hint: 'Classe 6 au débit' }, { q: 'Vente marchandises 1 200 € encaissée', a: 'Crédit', hint: 'Produit → crédit du 707' }, { q: 'Salaires versés 3 500 €', a: 'Débit', hint: 'Charge de personnel au débit' }, { q: 'Encaissement d\u2019un client 2 000 €', a: 'Débit', hint: 'Banque augmente → débit' }, { q: 'Paiement loyer 800 €', a: 'Débit', hint: 'Charge externe au débit' }, { q: 'Emprunt reçu 50 000 €', a: 'Crédit', hint: 'Dette financière → crédit' }, { q: 'Remboursement emprunt 1 000 €', a: 'Débit', hint: 'On diminue la dette' }, { q: 'Facture client émise 4 000 €', a: 'Débit', hint: '411 Clients au débit' }, { q: 'TVA collectée sur vente', a: 'Crédit', hint: 'Dette envers l\u2019État' }, { q: 'Achat immobilisation 8 000 €', a: 'Débit', hint: 'Classe 2 au débit' }, { q: 'Apport en capital 20 000 €', a: 'Crédit', hint: 'Capitaux propres → crédit' }, { q: 'Dépense carburant 80 €', a: 'Débit', hint: 'Charge externe' }, { q: 'Intérêts bancaires perçus 50 €', a: 'Crédit', hint: 'Produit financier' }, { q: 'Dotation aux amortissements', a: 'Débit', hint: 'Charge calculée' }, { q: 'Facture fournisseur reçue', a: 'Crédit', hint: '401 Fournisseurs au crédit' }, ]; const POOL_ACTIF_PASSIF_FR = [ { q: 'Créances clients', a: 'Actif' }, { q: 'Emprunt bancaire', a: 'Passif' }, { q: 'Stock de marchandises', a: 'Actif' }, { q: 'Capital social', a: 'Passif' }, { q: 'Matériel de bureau', a: 'Actif' }, { q: 'Dettes fournisseurs', a: 'Passif' }, { q: 'Trésorerie en banque', a: 'Actif' }, { q: 'Résultat de l\u2019exercice (bénéfice)', a: 'Passif' }, { q: 'Immobilisations corporelles', a: 'Actif' }, { q: 'Provisions pour risques', a: 'Passif' }, { q: 'Brevets & licences', a: 'Actif' }, { q: 'TVA à décaisser', a: 'Passif' }, { q: 'Disponibilités', a: 'Actif' }, { q: 'Réserves', a: 'Passif' }, { q: 'Titres de participation', a: 'Actif' }, ]; const POOL_CLASSE_FR = [ { q: 'Capital social', a: '1' }, { q: 'Matériel industriel', a: '2' }, { q: 'Stock de produits finis', a: '3' }, { q: 'Fournisseurs', a: '4' }, { q: 'Clients', a: '4' }, { q: 'Banque', a: '5' }, { q: 'Achats de marchandises', a: '6' }, { q: 'Ventes de marchandises', a: '7' }, { q: 'Emprunts auprès des banques', a: '1' }, { q: 'Amortissements du matériel', a: '2' }, { q: 'Salaires bruts', a: '6' }, { q: 'Production vendue', a: '7' }, { q: 'TVA déductible', a: '4' }, { q: 'Caisse', a: '5' }, { q: 'Charges financières', a: '6' }, { q: 'Impôt sur les bénéfices', a: '6' }, { q: 'Réserve légale', a: '1' }, { q: 'Brevet acheté 5 000 €', a: '2' }, ]; // English variants (abbreviated — same logic) const POOL_DEBIT_CREDIT_EN = [ { q: 'Office supplies bought €500 (bank)', a: 'Debit' }, { q: 'Goods sold €1 200, cashed in', a: 'Credit' }, { q: 'Salaries paid €3 500', a: 'Debit' }, { q: 'Customer payment received €2 000', a: 'Debit' }, { q: 'Rent paid €800', a: 'Debit' }, { q: 'Loan received €50 000', a: 'Credit' }, { q: 'Loan repayment €1 000', a: 'Debit' }, { q: 'Customer invoice issued €4 000', a: 'Debit' }, { q: 'VAT collected on sale', a: 'Credit' }, { q: 'Equipment purchase €8 000', a: 'Debit' }, { q: 'Capital contribution €20 000', a: 'Credit' }, { q: 'Supplier invoice received', a: 'Credit' }, ]; const POOL_ACTIF_PASSIF_EN = [ { q: 'Accounts receivable', a: 'Asset' }, { q: 'Bank loan', a: 'Liability' }, { q: 'Inventory', a: 'Asset' }, { q: 'Share capital', a: 'Liability' }, { q: 'Office equipment', a: 'Asset' }, { q: 'Accounts payable', a: 'Liability' }, { q: 'Cash at bank', a: 'Asset' }, { q: 'Net income (profit)', a: 'Liability' }, { q: 'Property, plant & eq.', a: 'Asset' }, { q: 'Provisions', a: 'Liability' }, ]; const POOL_CLASSE_EN = [ { q: 'Share capital', a: '1' }, { q: 'Industrial equipment', a: '2' }, { q: 'Finished goods inventory', a: '3' }, { q: 'Suppliers', a: '4' }, { q: 'Customers', a: '4' }, { q: 'Bank', a: '5' }, { q: 'Purchases', a: '6' }, { q: 'Sales', a: '7' }, { q: 'Deductible VAT', a: '4' }, { q: 'Cash', a: '5' }, ]; function buildRun(modeKey, lang) { const mode = SPEED_MODES[modeKey]; // Préférence : données extraites automatiquement depuis les leçons (window.SPEED_POOL). // Fallback : pools hardcodés plus haut (pour robustesse en dev / si contenu vide). function pickPool(mk, fallbackFr, fallbackEn) { const auto = window.SPEED_POOL && window.SPEED_POOL[mk]; if (auto && auto[lang] && auto[lang].length >= 6) return auto[lang]; return lang === 'fr' ? fallbackFr : fallbackEn; } const pools = { debitCredit: { items: pickPool('debitCredit', POOL_DEBIT_CREDIT_FR, POOL_DEBIT_CREDIT_EN), choices: mode[`choices_${lang}`] }, actifPassif: { items: pickPool('actifPassif', POOL_ACTIF_PASSIF_FR, POOL_ACTIF_PASSIF_EN), choices: mode[`choices_${lang}`] }, classePCG: { items: pickPool('classePCG', POOL_CLASSE_FR, POOL_CLASSE_EN), choices: mode[`choices_${lang}`] }, }; if (modeKey === 'blitz') { const mix = []; ['debitCredit', 'actifPassif', 'classePCG'].forEach(function (mk) { pools[mk].items.forEach(function (item) { mix.push(Object.assign({}, item, { subMode: mk, choices: pools[mk].choices })); }); }); return shuffle(mix); } return shuffle(pools[modeKey].items.map(function (item) { return Object.assign({}, item, { subMode: modeKey, choices: pools[modeKey].choices }); })); } function shuffle(arr) { const a = [...arr]; for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } // ─── Intro screen ────────────────────────────────────────── function SpeedIntroScreen({ theme, lang, onStart, onClose, bestScores = {} }) { const modes = ['debitCredit', 'actifPassif', 'classePCG', 'blitz']; return (
{/* ambient bolts */} {/* close */}
{lang==='fr'?'MODE SPEED':'SPEED MODE'}
{/* hero */}
⚡

{lang==='fr'?'Speed':'Speed'}
{lang==='fr'?'drill':'drill'}

{lang==='fr' ? 'Un réflexe par seconde. Enchaîne, combo, record.' : 'One reflex per second. Chain, combo, record.'}
{/* stats */}
{/* mode list */}
{lang==='fr'?'Choisis ton mode':'Pick a mode'}
{modes.map(mk => onStart(mk)} best={bestScores[mk]}/>)}
); } function SpeedBacksplash() { return (
{/* diagonal streaks */}
); } function SpeedStat({ label, value }) { return (
{label}
{value}
); } function SpeedModeCard({ modeKey, theme, lang, onClick, best }) { const m = SPEED_MODES[modeKey]; const title = m[`title_${lang}`]; const subtitle = m[`subtitle_${lang}`] || ''; return ( ); } // ─── Run screen ──────────────────────────────────────────── function SpeedRunScreen({ theme, lang, modeKey, onEnd, onClose }) { const mode = SPEED_MODES[modeKey]; const [queue, setQueue] = React.useState(() => buildRun(modeKey, lang)); const [idx, setIdx] = React.useState(0); const [timeLeft, setTimeLeft] = React.useState(mode.duration); const [score, setScore] = React.useState(0); const [combo, setCombo] = React.useState(0); const [bestCombo, setBestCombo] = React.useState(0); const [correct, setCorrect] = React.useState(0); const [wrong, setWrong] = React.useState(0); const [feedback, setFeedback] = React.useState(null); // 'correct' | 'wrong' const [shake, setShake] = React.useState(false); const [popup, setPopup] = React.useState(null); // {text, color} const [countdown, setCountdown] = React.useState(3); // 3-2-1-GO const running = countdown === 0 && timeLeft > 0; const answeredRef = React.useRef(0); // Countdown start React.useEffect(() => { if (countdown > 0) { const t = setTimeout(() => setCountdown(c => c - 1), 700); return () => clearTimeout(t); } }, [countdown]); // Timer React.useEffect(() => { if (!running) return; const t = setInterval(() => { setTimeLeft(s => { if (s <= 0.1) { clearInterval(t); return 0; } return +(s - 0.1).toFixed(1); }); }, 100); return () => clearInterval(t); }, [running]); React.useEffect(() => { if (timeLeft <= 0 && countdown === 0) { setTimeout(() => onEnd({ score, correct, wrong, bestCombo, mode: modeKey }), 400); } }, [timeLeft, countdown]); const current = queue[idx % queue.length]; const answer = (choice) => { if (!running || feedback) return; const isRight = choice === current.a; answeredRef.current++; if (isRight) { const multi = 1 + Math.floor(combo / 3); const base = 10 + Math.floor(combo / 2); const delta = base * multi; setScore(s => s + delta); setCombo(c => { const nc = c + 1; setBestCombo(bc => Math.max(bc, nc)); return nc; }); setCorrect(c => c + 1); setFeedback('correct'); // bonus time for streaks if ((combo + 1) % 5 === 0) { setTimeLeft(t => Math.min(t + 2, mode.duration + 5)); setPopup({ text: lang==='fr'?'+2 sec':'+2 sec', color: '#4ADE80' }); } else if (combo + 1 >= 3) { setPopup({ text: `×${multi} ${lang==='fr'?'COMBO':'COMBO'}`, color: '#FFC93A' }); } else { setPopup({ text: `+${delta}`, color: '#4ADE80' }); } } else { setCombo(0); setWrong(w => w + 1); setFeedback('wrong'); setShake(true); setTimeLeft(t => Math.max(0, t - 2)); setPopup({ text: lang==='fr'?'−2 sec':'−2 sec', color: '#F87171' }); setTimeout(() => setShake(false), 400); } setTimeout(() => { setFeedback(null); setPopup(null); setIdx(i => i + 1); }, 380); }; const pct = (timeLeft / mode.duration) * 100; const timerColor = pct > 40 ? '#FFC93A' : pct > 20 ? '#F59E0B' : '#F87171'; return (
{/* gradient pulse on correct/wrong */} {feedback && (
)} {/* top — HUD */}
{/* timer bar */}
{timeLeft.toFixed(1)}s
{/* score + combo */}
Score
{score.toString().padStart(4, '0')}
= 3 ? 'linear-gradient(135deg, #FFC93A, #F59E0B)' : 'rgba(255,255,255,0.05)', borderRadius: 12, padding: '8px 12px', border: combo >= 3 ? '1px solid #FFC93A' : '1px solid rgba(255,255,255,0.1)', color: combo >= 3 ? '#0F1411' : '#fff', transition: 'all 0.2s', }}>
Combo
×{combo}{combo >= 5 && ' 🔥'}
{/* Question area */}
{countdown > 0 ? (
{countdown}
{lang==='fr'?'Prêt·e ?':'Ready?'}
) : ( <> {/* sub-mode hint for blitz */} {modeKey === 'blitz' && current?.subMode && (
{SPEED_MODES[current.subMode][`title_${lang}`]}
)} {/* question card */}
Question {answeredRef.current + 1}
{current?.q}
{/* popup (combo / +pts) */} {popup && (
{popup.text}
)} {/* choices */}
2 ? 'repeat(4, 1fr)' : '1fr 1fr', gap: current?.choices?.length > 2 ? 8 : 12, }}> {current?.choices?.map((c, i) => { const isRight = feedback && c === current.a; const isPickedWrong = feedback === 'wrong' && c !== current.a; // we don't track which was picked here → keep neutral let bg = i % 2 === 0 ? '#2A6F4E' : '#B35A3C'; if (current?.choices?.length > 2) bg = ['#2A6F4E','#4A7A8C','#B35A3C','#6B3A7A','#C9A14A','#E07A3E','#1B3A5C'][i % 7]; if (feedback === 'correct' && isRight) bg = '#22C55E'; if (feedback === 'wrong' && isRight) bg = '#22C55E'; return ( ); })}
)}
); } // ─── Results screen ──────────────────────────────────────── function SpeedResultsScreen({ theme, lang, result, onReplay, onClose }) { const { score, correct, wrong, bestCombo, mode } = result; const total = correct + wrong; const acc = total ? Math.round((correct / total) * 100) : 0; const modeName = SPEED_MODES[mode]?.[`title_${lang}`] || ''; const isRecord = score > 780; // demo // Grade let grade = { t: 'C', color: '#F59E0B', label: lang==='fr'?'Pas mal':'Not bad' }; if (acc >= 90 && bestCombo >= 8) grade = { t: 'S', color: '#FFC93A', label: lang==='fr'?'Maître du débit':'Debit master' }; else if (acc >= 80) grade = { t: 'A', color: '#4ADE80', label: lang==='fr'?'Excellent':'Excellent' }; else if (acc >= 70) grade = { t: 'B', color: '#60A5FA', label: lang==='fr'?'Solide':'Solid' }; return (
{/* confetti streaks for high scores */} {acc >= 70 && (
{[...Array(18)].map((_, i) => (
))}
)}
{modeName}
{/* big grade */}
{isRecord && (
🏆 {lang==='fr'?'NOUVEAU RECORD':'NEW RECORD'}
)}
{grade.t}
{grade.label}
{/* big score */}
{lang==='fr'?'Score final':'Final score'}
{score.toString().padStart(4, '0')}
{/* stats grid */}
{/* Milo commentary */}
= 80 ? 'excited' : acc >= 60 ? 'happy' : 'focused'}/>
{acc >= 80 ? (lang==='fr'?'Réflexes de comptable ninja. Ta main sait avant ta tête.':'Ninja-level reflexes. Your hand knows before your brain does.') : acc >= 60 ? (lang==='fr'?'Bon rythme ! Vise 3 combos de suite la prochaine fois.':'Good pace! Try chaining 3 combos next time.') : (lang==='fr'?'Ralentis, respire, relis. La vitesse viendra.':'Slow down, breathe, re-read. Speed will come.')}
{/* actions */}
); } function ResultStat({ icon, label, value, color }) { return (
{icon}
{label}
{value}
); } Object.assign(window, { SpeedIntroScreen, SpeedRunScreen, SpeedResultsScreen, SPEED_MODES });