Here is my React component, just display it as-is without modifying anything import { useState, useEffect, useRef } from "react"; // ── Data generation ────────────────────────────────────────────── const POW4 = Array.from({ length: 100 }, (_, i) => ({ n: i + 1, v: (i + 1) ** 4 })); const SQRT_10K = Array.from({ length: 100 }, (_, i) => ({ n: (i+1)*(i+1), r: i+1 })); const SQRT_1M = Array.from({ length: 900 }, (_, i) => ({ n: (i+101)*(i+101), r: i+101 })); const SQRT_100M = Array.from({ length: 9000 }, (_, i) => ({ n: (i+1001)*(i+1001), r: i+1001 })); // ── Modes ──────────────────────────────────────────────────────── const MODES = [ { id: "sq_easy", label: "x²", sub: "1–99", color: "#00e5a0" }, { id: "sq_med", label: "x²", sub: "100–999", color: "#00e5a0" }, { id: "sq_hard", label: "x²", sub: "1k–9999", color: "#00e5a0" }, { id: "pow4", label: "x⁴", sub: "1–100", color: "#a78bfa" }, { id: "sqrt_10k", label: "√x", sub: "≤10 000", color: "#f59e0b" }, { id: "sqrt_1m", label: "√x", sub: "≤1 000 000", color: "#f59e0b" }, { id: "sqrt_100m", label: "√x", sub: "≤100 000 000", color: "#f59e0b" }, ]; function getQuestion(modeId) { if (modeId === "sq_easy") { const n = rand(1, 99); return { prompt: n, answer: n*n, label: "²" }; } if (modeId === "sq_med") { const n = rand(100,999); return { prompt: n, answer: n*n, label: "²" }; } if (modeId === "sq_hard") { const n = rand(1000,9999);return { prompt: n, answer: n*n, label: "²" }; } if (modeId === "pow4") { const e = pick(POW4); return { prompt: e.n, answer: e.v, label: "⁴" }; } if (modeId === "sqrt_10k") { const e = pick(SQRT_10K); return { prompt: e.n, answer: e.r, label: "√" }; } if (modeId === "sqrt_1m") { const e = pick(SQRT_1M); return { prompt: e.n, answer: e.r, label: "√" }; } if (modeId === "sqrt_100m") { const e = pick(SQRT_100M);return { prompt: e.n, answer: e.r, label: "√" }; } } function rand(a, b) { return Math.floor(Math.random() * (b - a + 1)) + a; } function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function fmt(ms) { if (!ms && ms !== 0) return "—"; return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(2)}s`; } function fmtNum(n) { return n?.toLocaleString("fr-FR") ?? "—"; } // ── Component ──────────────────────────────────────────────────── export default function App() { const [mode, setMode] = useState("sq_easy"); const [question, setQuestion] = useState(null); const [input, setInput] = useState(""); const [running, setRunning] = useState(false); const [elapsed, setElapsed] = useState(0); const [result, setResult] = useState(null); const [history, setHistory] = useState([]); const [stats, setStats] = useState({}); const [loaded, setLoaded] = useState(false); const [tab, setTab] = useState("game"); const intervalRef = useRef(null); const startRef = useRef(null); // Load useEffect(() => { (async () => { try { const h = await window.storage.get("sq_history"); if (h) setHistory(JSON.parse(h.value)); } catch {} try { const s = await window.storage.get("sq_stats"); if (s) setStats(JSON.parse(s.value)); } catch {} setLoaded(true); })(); }, []); const persist = async (h, s) => { try { await window.storage.set("sq_history", JSON.stringify(h)); } catch {} try { await window.storage.set("sq_stats", JSON.stringify(s)); } catch {} }; const startChallenge = () => { const q = getQuestion(mode); setQuestion(q); setInput(""); setResult(null); setElapsed(0); setRunning(true); startRef.current = Date.now(); intervalRef.current = setInterval(() => setElapsed(Date.now() - startRef.current), 50); }; const stopTimer = () => { clearInterval(intervalRef.current); setRunning(false); }; const pressDigit = (d) => { if (!running) return; setInput(p => p + d); }; const pressDelete = () => { if (!running) return; setInput(p => p.slice(0, -1)); }; const pressValidate = () => { if (!running || !input) return; const time = Date.now() - startRef.current; stopTimer(); const correct = parseInt(input) === question.answer; const entry = { mode, prompt: question.prompt, answer: question.answer, userAnswer: parseInt(input), correct, time, date: new Date().toLocaleDateString("fr-FR") }; setResult(entry); const newH = [entry, ...history].slice(0, 100); setHistory(newH); const newS = { ...stats }; if (!newS[mode]) newS[mode] = { total: 0, correct: 0, best: null }; newS[mode].total += 1; if (correct) { newS[mode].correct += 1; if (!newS[mode].best || time < newS[mode].best) newS[mode].best = time; } setStats(newS); persist(newH, newS); }; const clearAll = async () => { if (!confirm("Effacer tout l'historique ?")) return; setHistory([]); setStats({}); try { await window.storage.delete("sq_history"); } catch {} try { await window.storage.delete("sq_stats"); } catch {} }; useEffect(() => () => clearInterval(intervalRef.current), []); const modeObj = MODES.find(m => m.id === mode); const timerColor = elapsed > 20000 ? "#ff4444" : elapsed > 15000 ? "#ffaa00" : "#00e5a0"; const accentColor = modeObj?.color ?? "#00e5a0"; // ── Render helpers ─────────────────────────────────────────── const Btn = ({ label, onClick, style = {} }) => ( <button onPointerDown={e => { e.preventDefault(); onClick(); }} style={{ background: "#1a1a24", border: "1px solid #2a2a3a", borderRadius: "6px", color: "#e8e4d8", fontSize: "22px", fontFamily: "inherit", fontWeight: "600", cursor: "pointer", userSelect: "none", touchAction: "manipulation", display: "flex", alignItems: "center", justifyContent: "center", height: "60px", ...style, }}>{label}</button> ); const TabBtn = ({ id, label }) => ( <button onPointerDown={e => { e.preventDefault(); setTab(id); }} style={{ flex: 1, padding: "9px 4px", background: tab === id ? "#00e5a0" : "transparent", color: tab === id ? "#0a0a0f" : "#00e5a0", border: "1px solid #00e5a0", cursor: "pointer", fontSize: "10px", letterSpacing: "0.1em", fontFamily: "inherit", fontWeight: tab === id ? "700" : "400", touchAction: "manipulation", }}>{label}</button> ); if (!loaded) return ( <div style={{ minHeight: "100vh", background: "#0a0a0f", display: "flex", alignItems: "center", justifyContent: "center", color: "#00e5a0", fontFamily: "monospace", fontSize: "13px", letterSpacing: "0.2em" }}> CHARGEMENT... </div> ); // ── Prompt display ─────────────────────────────────────────── const renderPrompt = () => { if (!question) return null; const { prompt, label } = question; if (label === "√") return ( <div style={{ lineHeight: 1 }}> <span style={{ fontSize: "18px", color: accentColor }}>√</span> <span style={{ fontSize: "56px", fontWeight: "700", letterSpacing: "-0.03em" }}>{fmtNum(prompt)}</span> <span style={{ fontSize: "14px", color: "#444", marginLeft: "4px" }}> = ?</span> </div> ); return ( <div style={{ lineHeight: 1 }}> <span style={{ fontSize: "56px", fontWeight: "700", letterSpacing: "-0.03em" }}>{fmtNum(prompt)}</span> <span style={{ fontSize: "28px", color: accentColor }}>{label}</span> <span style={{ fontSize: "14px", color: "#444", marginLeft: "4px" }}> = ?</span> </div> ); }; return ( <div style={{ minHeight: "100vh", background: "#0a0a0f", color: "#e8e4d8", fontFamily: "'Courier New', monospace", display: "flex", flexDirection: "column", alignItems: "center", padding: "20px 14px" }}> <div style={{ position: "fixed", inset: 0, zIndex: 0, backgroundImage: "linear-gradient(rgba(0,229,160,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,160,0.025) 1px, transparent 1px)", backgroundSize: "40px 40px" }} /> <div style={{ position: "relative", zIndex: 1, width: "100%", maxWidth: "420px" }}> {/* Header */} <div style={{ textAlign: "center", marginBottom: "18px" }}> <div style={{ fontSize: "9px", letterSpacing: "0.3em", color: "#00e5a0", marginBottom: "4px" }}>MENTAL MATH TRAINER</div> <h1 style={{ fontSize: "22px", fontWeight: "700", margin: 0 }}>x² · x⁴ · √x</h1> </div> {/* Tabs */} <div style={{ display: "flex", marginBottom: "14px" }}> <TabBtn id="game" label="JEU" /> <TabBtn id="history" label={`HISTORIQUE (${history.length})`} /> <TabBtn id="stats" label="STATS" /> </div> {/* ── GAME TAB ── */} {tab === "game" && ( <> {/* Mode selector */} <div style={{ marginBottom: "14px" }}> <div style={{ fontSize: "9px", color: "#444", letterSpacing: "0.2em", marginBottom: "8px" }}>MODE</div> <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "6px" }}> {MODES.map(m => ( <button key={m.id} onPointerDown={e => { e.preventDefault(); setMode(m.id); setResult(null); setQuestion(null); stopTimer(); }} style={{ padding: "8px 4px", background: mode === m.id ? m.color : "#12121a", color: mode === m.id ? "#0a0a0f" : m.color, border: `1px solid ${m.color}44`, borderRadius: "4px", cursor: "pointer", fontSize: "10px", fontFamily: "inherit", fontWeight: mode === m.id ? "700" : "400", touchAction: "manipulation", lineHeight: 1.3, }} > <div style={{ fontSize: "14px", fontWeight: "700" }}>{m.label}</div> <div style={{ fontSize: "8px", opacity: 0.8, marginTop: "2px" }}>{m.sub}</div> </button> ))} </div> </div> {/* Main card */} <div style={{ background: "#12121a", border: "1px solid #1e1e2e", borderRadius: "4px", padding: "20px", marginBottom: "12px", minHeight: "150px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}> {!question && !result && ( <div style={{ textAlign: "center" }}> <div style={{ fontSize: "12px", color: "#555", marginBottom: "20px", lineHeight: "1.7" }}> Mode : <span style={{ color: accentColor }}>{modeObj.label} {modeObj.sub}</span><br /> Tape ta réponse avec le pavé ci-dessous. </div> <button onPointerDown={e => { e.preventDefault(); startChallenge(); }} style={{ padding: "12px 36px", background: accentColor, color: "#0a0a0f", border: "none", borderRadius: "2px", cursor: "pointer", fontSize: "13px", fontWeight: "700", fontFamily: "inherit", letterSpacing: "0.1em", touchAction: "manipulation", }}>COMMENCER</button> </div> )} {question && !result && ( <div style={{ textAlign: "center", width: "100%" }}> {renderPrompt()} <div style={{ marginTop: "14px", background: "#0a0a0f", border: "1px solid #2a2a3a", borderRadius: "4px", padding: "10px", fontSize: "26px", fontWeight: "700", minHeight: "52px", color: input ? "#e8e4d8" : "#333", fontVariantNumeric: "tabular-nums", }}> {input ? fmtNum(parseInt(input)) : "—"} </div> </div> )} {result && ( <div style={{ textAlign: "center", width: "100%" }}> <div style={{ fontSize: "32px", marginBottom: "6px" }}>{result.correct ? "✓" : "✗"}</div> <div style={{ fontSize: "11px", color: result.correct ? accentColor : "#ff4444", letterSpacing: "0.2em", marginBottom: "10px" }}> {result.correct ? "CORRECT" : "INCORRECT"} </div> <div style={{ fontSize: "13px", color: "#888", marginBottom: "2px" }}> Réponse : <span style={{ color: "#e8e4d8", fontWeight: "700" }}>{fmtNum(result.answer)}</span> </div> {!result.correct && <div style={{ fontSize: "12px", color: "#ff4444", marginBottom: "4px" }}>Ta réponse : {fmtNum(result.userAnswer)}</div>} <div style={{ fontSize: "26px", fontWeight: "700", color: result.correct ? accentColor : "#888", margin: "10px 0", fontVariantNumeric: "tabular-nums" }}> {fmt(result.time)} </div> {result.correct && stats[mode]?.best === result.time && ( <div style={{ fontSize: "10px", color: accentColor, letterSpacing: "0.2em" }}>★ NOUVEAU RECORD</div> )} </div> )} </div> {/* Numpad */} {(running || result) && ( <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "8px", marginBottom: "12px" }}> {result ? ( <Btn label="SUIVANT →" onClick={startChallenge} style={{ gridColumn: "1 / -1", background: accentColor, color: "#0a0a0f", fontSize: "13px", fontWeight: "700", letterSpacing: "0.1em" }} /> ) : ( <> {[1,2,3,4,5,6,7,8,9].map(d => ( <Btn key={d} label={String(d)} onClick={() => pressDigit(String(d))} /> ))} <Btn label="⌫" onClick={pressDelete} style={{ background: "#16161e", color: "#888" }} /> <Btn label="0" onClick={() => pressDigit("0")} /> <Btn label="✓" onClick={pressValidate} style={{ background: accentColor, color: "#0a0a0f", fontWeight: "700" }} /> </> )} </div> )} {/* Quick stats */} {stats[mode] && ( <div style={{ background: "#12121a", border: "1px solid #1e1e2e", borderRadius: "4px", padding: "12px", display: "flex", justifyContent: "space-around" }}> {[["TOTAL", stats[mode].total], ["TAUX", `${Math.round((stats[mode].correct / stats[mode].total) * 100)}%`], ["RECORD", fmt(stats[mode].best)]].map(([l, v]) => ( <div key={l} style={{ textAlign: "center" }}> <div style={{ fontSize: "8px", color: "#444", letterSpacing: "0.2em", marginBottom: "3px" }}>{l}</div> <div style={{ fontSize: "15px", fontWeight: "700", color: accentColor, fontVariantNumeric: "tabular-nums" }}>{v}</div> </div> ))} </div> )} </> )} {/* ── HISTORY TAB ── */} {tab === "history" && ( <div style={{ background: "#12121a", border: "1px solid #1e1e2e", borderRadius: "4px", padding: "18px" }}> {history.length === 0 ? ( <div style={{ textAlign: "center", color: "#444", fontSize: "13px", padding: "40px 0" }}>Aucun historique encore.</div> ) : ( <> <div style={{ marginBottom: "14px", display: "flex", justifyContent: "space-between", alignItems: "center" }}> <span style={{ fontSize: "9px", color: "#444", letterSpacing: "0.2em" }}>{history.length} ENTRÉES</span> <button onPointerDown={e => { e.preventDefault(); clearAll(); }} style={{ padding: "4px 10px", background: "transparent", color: "#ff4444", border: "1px solid #ff444466", borderRadius: "2px", cursor: "pointer", fontSize: "10px", fontFamily: "inherit", touchAction: "manipulation", }}>EFFACER</button> </div> {history.map((h, i) => { const m = MODES.find(x => x.id === h.mode) ?? MODES[0]; const promptLabel = m.label === "√" ? `√${fmtNum(h.prompt)}` : `${fmtNum(h.prompt)}${m.label}`; return ( <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "7px 0", borderBottom: i < history.length - 1 ? "1px solid #1a1a2a" : "none" }}> <div> <span style={{ fontSize: "14px", fontWeight: "700" }}>{promptLabel}</span> <span style={{ fontSize: "9px", color: "#444", marginLeft: "6px" }}>{m.sub}</span> </div> <div style={{ textAlign: "right" }}> <div style={{ fontSize: "12px", color: h.correct ? m.color : "#ff4444", fontVariantNumeric: "tabular-nums" }}> {h.correct ? fmt(h.time) : `✗ (${fmtNum(h.answer)})`} </div> <div style={{ fontSize: "9px", color: "#333" }}>{h.date}</div> </div> </div> ); })} </> )} </div> )} {/* ── STATS TAB ── */} {tab === "stats" && ( <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}> {MODES.map(m => { const s = stats[m.id]; const correctEntries = history.filter(h => h.mode === m.id && h.correct); const avg = correctEntries.length > 0 ? fmt(Math.round(correctEntries.reduce((a, h) => a + h.time, 0) / correctEntries.length)) : "—"; return ( <div key={m.id} style={{ background: "#12121a", border: `1px solid ${m.color}22`, borderRadius: "4px", padding: "16px" }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "12px" }}> <span style={{ fontSize: "12px", color: m.color, letterSpacing: "0.15em" }}>{m.label} <span style={{ fontSize: "10px", opacity: 0.7 }}>{m.sub}</span></span> </div> {!s ? ( <div style={{ fontSize: "11px", color: "#333" }}>Pas encore joué.</div> ) : ( <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "10px" }}> {[["PARTIES", s.total], ["RÉUSSIS", s.correct], ["TAUX", `${Math.round((s.correct / s.total) * 100)}%`], ["RECORD", fmt(s.best)], ["MOYENNE", avg], ["ÉCHECS", s.total - s.correct]].map(([l, v]) => ( <div key={l} style={{ textAlign: "center" }}> <div style={{ fontSize: "8px", color: "#333", letterSpacing: "0.15em", marginBottom: "3px" }}>{l}</div> <div style={{ fontSize: "14px", fontWeight: "700", color: "#e8e4d8", fontVariantNumeric: "tabular-nums" }}>{v}</div> </div> ))} </div> )} </div> ); })} </div> )} </div> </div> ); }