[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import MultiplicationGame from "@/components/multiplication-game" export default function Home() { return (

¡Aprende las Tablas de Multiplicación!

) } [V0_FILE]typescriptreact:file="components/confetti-explosion.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import type { JSX } from "react" export default function ConfettiExplosion() { const [particles, setParticles] = useState([]) useEffect(() => { const colors = ["#FFC700", "#FF0055", "#2BD1FC", "#F222FF", "#F96D00"] const newParticles: JSX.Element[] = [] for (let i = 0; i < 50; i++) { const left = Math.random() * 100 const top = Math.random() * 100 const size = Math.random() * 8 + 4 const color = colors[Math.floor(Math.random() * colors.length)] const animDuration = Math.random() * 2 + 1 const animDelay = Math.random() * 0.5 newParticles.push(

, ) } setParticles(newParticles) return () => { setParticles([]) } }, []) return (

{particles}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#4F46E5", foreground: "#FFFFFF", }, secondary: { DEFAULT: "#F59E0B", foreground: "#FFFFFF", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; } * { @apply border-border; } body { @apply bg-background text-foreground; } /* Remove number input arrows */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } [V0_FILE]typescriptreact:file="components/correct-answer-overlay.tsx" isMerged="true" import { Button } from "@/components/ui/button" interface CorrectAnswerOverlayProps { firstNumber: number secondNumber: number onContinue: () => void } export function CorrectAnswerOverlay({ firstNumber, secondNumber, onContinue }: CorrectAnswerOverlayProps) { const correctAnswer = firstNumber * secondNumber return (

La respuesta correcta es:

{firstNumber} × {secondNumber} = {correctAnswer}

) } [V0_FILE]typescriptreact:file="components/multiplication-game.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef, useCallback } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Check, X } from "lucide-react" import ConfettiExplosion from "@/components/confetti-explosion" import { CorrectAnswerOverlay } from "@/components/correct-answer-overlay" import { GameSummary } from "@/components/game-summary" const TOTAL_QUESTIONS = 50 const TIME_PER_QUESTION = 20 export default function MultiplicationGame() { const [firstNumber, setFirstNumber] = useState(0) const [secondNumber, setSecondNumber] = useState(0) const [userAnswer, setUserAnswer] = useState("") const [timeLeft, setTimeLeft] = useState(TIME_PER_QUESTION) const [isActive, setIsActive] = useState(false) const [score, setScore] = useState(0) const [questionCount, setQuestionCount] = useState(0) const [feedback, setFeedback] = useState<"correct" | "incorrect" | null>(null) const [showConfetti, setShowConfetti] = useState(false) const [showCorrectAnswer, setShowCorrectAnswer] = useState(false) const [gameOver, setGameOver] = useState(false) const [errors, setErrors] = useState>({}) const [responseTimes, setResponseTimes] = useState([]) const [currentQuestionStartTime, setCurrentQuestionStartTime] = useState(0) const inputRef = useRef(null) const generateProblem = useCallback(() => { if (questionCount >= TOTAL_QUESTIONS) { setGameOver(true) return } const newFirst = Math.floor(Math.random() * 10) + 1 const newSecond = Math.floor(Math.random() * 10) + 1 setFirstNumber(newFirst) setSecondNumber(newSecond) setUserAnswer("") setTimeLeft(TIME_PER_QUESTION) setFeedback(null) setIsActive(true) setShowCorrectAnswer(false) setQuestionCount((prev) => prev + 1) setCurrentQuestionStartTime(Date.now()) if (inputRef.current) { inputRef.current.focus() } }, [questionCount]) const startGame = () => { setScore(0) setQuestionCount(0) setErrors({}) setResponseTimes([]) setGameOver(false) generateProblem() } const checkAnswer = useCallback(() => { const correctAnswer = firstNumber * secondNumber const isCorrect = Number.parseInt(userAnswer) === correctAnswer const responseTime = (Date.now() - currentQuestionStartTime) / 1000 setResponseTimes((prev) => [...prev, responseTime]) setFeedback(isCorrect ? "correct" : "incorrect") setIsActive(false) if (isCorrect) { setScore((prev) => prev + 1) setShowConfetti(true) setTimeout(() => setShowConfetti(false), 2000) setTimeout(() => { generateProblem() }, 1500) } else { setErrors((prev) => ({ ...prev, [firstNumber]: (prev[firstNumber] || 0) + 1, [secondNumber]: (prev[secondNumber] || 0) + 1, })) setShowCorrectAnswer(true) } }, [firstNumber, secondNumber, userAnswer, generateProblem, currentQuestionStartTime]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (isActive && userAnswer) { checkAnswer() } } useEffect(() => { let interval: NodeJS.Timeout | null = null if (isActive && timeLeft > 0) { interval = setInterval(() => { setTimeLeft((prevTime) => prevTime - 1) }, 1000) } else if (timeLeft === 0 && isActive) { setIsActive(false) setFeedback("incorrect") setErrors((prev) => ({ ...prev, [firstNumber]: (prev[firstNumber] || 0) + 1, [secondNumber]: (prev[secondNumber] || 0) + 1, })) setResponseTimes((prev) => [...prev, TIME_PER_QUESTION]) setShowCorrectAnswer(true) } return () => { if (interval) clearInterval(interval) } }, [isActive, timeLeft, firstNumber, secondNumber]) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (!isActive) return if (/^\d$/.test(e.key)) { setUserAnswer((prev) => prev + e.key) } else if (e.key === "Backspace") { setUserAnswer((prev) => prev.slice(0, -1)) } else if (e.key === "Enter" && userAnswer) { checkAnswer() } } window.addEventListener("keydown", handleKeyDown) return () => { window.removeEventListener("keydown", handleKeyDown) } }, [isActive, userAnswer, checkAnswer]) const percentageCorrect = ((score / questionCount) * 100).toFixed(1) const averageResponseTime = responseTimes.length > 0 ? (responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length).toFixed(2) : "0.00" if (gameOver) { return ( ) } return ( <> {!isActive && questionCount === 0 ? (

¡Practica las tablas de multiplicación!

Tienes 20 segundos para responder cada pregunta. Total: 50 preguntas.

) : ( <>

Tiempo restante: {timeLeft}s Pregunta: {questionCount}/{TOTAL_QUESTIONS}

{firstNumber} × {secondNumber} = {feedback && (

{feedback === "correct" ? : }

)}

Aciertos: {score}/{questionCount}

Porcentaje de acierto: {percentageCorrect}%

Tiempo promedio de respuesta: {averageResponseTime}s

)} {showConfetti && } {showCorrectAnswer && ( )} ) } [V0_FILE]typescriptreact:file="components/game-summary.tsx" isEdit="true" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" interface GameSummaryProps { score: number totalQuestions: number errors: Record onRestart: () => void averageResponseTime: number responseTimes: number[] } export function GameSummary({ score, totalQuestions, errors, onRestart, averageResponseTime, responseTimes, }: GameSummaryProps) { const percentageCorrect = ((score / totalQuestions) * 100).toFixed(1) const getTableToReview = () => { const sortedErrors = Object.entries(errors).sort((a, b) => b[1] - a[1]) return sortedErrors.length > 0 ? sortedErrors[0][0] : null } const tableToReview = getTableToReview() const fastestResponseTime = Math.min(...responseTimes).toFixed(2) const slowestResponseTime = Math.max(...responseTimes).toFixed(2) return (

Resumen del Juego

Aciertos: {score} de {totalQuestions}

Porcentaje de acierto: {percentageCorrect}%

Tiempo promedio de respuesta: {averageResponseTime.toFixed(2)}s

Respuesta más rápida: {fastestResponseTime}s

Respuesta más lenta: {slowestResponseTime}s

{tableToReview && (

Sugerencia de repaso:

Tabla del {tableToReview}

)}

) }