import React, { useState, useRef, useEffect } from "react"; import { Flame, RefreshCw, ChevronRight, Loader2 } from "lucide-react"; const DIFFICULTY = [ { label: "Easy", min: 1, max: 10 }, { label: "Medium", min: 10, max: 50 }, { label: "Hard", min: 50, max: 200 }, ]; const OPERATORS = [ { label: "+", fn: (a, b) => a + b }, { label: "-", fn: (a, b) => a - b }, { label: "×", fn: (a, b) => a * b }, { label: "÷", fn: (a, b) => Math.floor(a / b) }, // only integer division for practice ]; function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function generateProblem(levelIdx) { const opIdx = getRandomInt(0, 3); let a, b, result; const diff = DIFFICULTY[levelIdx]; if (opIdx === 3) { // Division // Ensure clean division b = getRandomInt(diff.min, diff.max); result = getRandomInt(diff.min, diff.max); a = b * result; } else if (opIdx === 1) { // Subtraction a = getRandomInt(diff.min, diff.max); b = getRandomInt(diff.min, a); // ensure non-negative } else { a = getRandomInt(diff.min, diff.max); b = getRandomInt(diff.min, diff.max); } return { a, b, operator: OPERATORS[opIdx].label, answer: OPERATORS[opIdx].fn(a, b), opIdx, }; } export default function App() { const [levelIdx, setLevelIdx] = useState(0); const [problem, setProblem] = useState(() => generateProblem(0)); const [userAnswer, setUserAnswer] = useState(""); const [feedback, setFeedback] = useState(null); // 'correct'|'wrong'|null const [showSolution, setShowSolution] = useState(false); const [total, setTotal] = useSharedStorage("math_total", 0); const [correct, setCorrect] = useSharedStorage("math_correct", 0); const [streak, setStreak] = useSharedStorage("math_streak", 0); const [maxStreak, setMaxStreak] = useSharedStorage("math_maxStreak", 0); const inputRef = useRef(); // Used for confetti (optional fun feedback) useEffect(() => { if (feedback === "correct") { import("canvas-confetti").then(({ default: cf }) => cf({ particleCount: 60, spread: 80, origin:{x:0.5, y:0.7} })); } }, [feedback]); const nextProblem = () => { setProblem(generateProblem(levelIdx)); setUserAnswer(""); setFeedback(null); setShowSolution(false); setTimeout(() => inputRef.current?.focus(), 150); }; function handleCheck(e) { e.preventDefault(); if (userAnswer === "") return; setTotal(total + 1); const isCorrect = parseInt(userAnswer, 10) === problem.answer; if (isCorrect) { setFeedback("correct"); setCorrect(correct + 1); setStreak(streak + 1); setMaxStreak(Math.max(streak + 1, maxStreak)); } else { setFeedback("wrong"); setStreak(0); } setShowSolution(true); setTimeout(nextProblem, 1300); } const handleLevelChange = (i) => { setLevelIdx(i); setTimeout(() => { setProblem(generateProblem(i)); setUserAnswer(""); setFeedback(null); setShowSolution(false); setTimeout(() => inputRef.current?.focus(), 100); }, 120); }; const handleRestart = () => { setTotal(0); setCorrect(0); setStreak(0); setMaxStreak(0); setFeedback(null); nextProblem(); }; // Progress ring const progress = total ? correct / total : 0; const R = 34; const C = 2 * Math.PI * R; return (

{/* Difficulty selector */}

{DIFFICULTY.map((d, i) => ( ))}

{/* Streaks */}

{streak}

Streak

{maxStreak}

Max

{total}

Total

{/* Progress Visualization */}

{Math.round(progress*100)}% Correct

{/* Problem display */}

Solve:

{problem.a} {problem.operator} {problem.b} setUserAnswer(e.target.value.replace(/[^0-9\-]/g, ''))} className="w-16 pl-2 pr-1 py-1.5 rounded-lg border border-blue-400/30 text-xl text-gray-900 text-center focus:ring-2 ring-offset-2 ring-blue-300 transition-all bg-white shadow-sm" disabled={feedback!==null} placeholder="?" aria-label="Your answer" onKeyDown={e=>{ if(e.key==='Enter'){handleCheck(e);} }} />

{/* Show solution */} {showSolution && (

{feedback==="correct"?"Correct! 🎉":`Wrong! Solution: ${problem.a} ${problem.operator} ${problem.b} = ${problem.answer}`}

)}

{/* Button Bar */}

Last practice: {new Date().toLocaleTimeString()} · Data: Local

); }