"use client"; import { useState, useEffect, useRef } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { RotateCcw, Play, Pause } from "lucide-react"; export default function RandomNumberRoulette() { const [maxNumber, setMaxNumber] = useState(90); const [currentNumber, setCurrentNumber] = useState(null); const [usedNumbers, setUsedNumbers] = useState>(new Set()); const [isGenerating, setIsGenerating] = useState(false); const [error, setError] = useState(null); const [history, setHistory] = useState([]); const [isAutoMode, setIsAutoMode] = useState(false); const intervalRef = useRef(null); // Reset when maxNumber changes useEffect(() => { setCurrentNumber(null); setUsedNumbers(new Set()); setHistory([]); setError(null); stopAutoMode(); }, [maxNumber]); // Handle auto mode useEffect(() => { if (isAutoMode) { intervalRef.current = setInterval(() => { if (!isGenerating && usedNumbers.size < maxNumber) { generateRandomNumber(); } else if (usedNumbers.size >= maxNumber) { stopAutoMode(); } }, 3000); } else if (intervalRef.current) { clearInterval(intervalRef.current); } return () => { if (intervalRef.current) { clearInterval(intervalRef.current); } }; }, [isAutoMode, isGenerating, usedNumbers.size, maxNumber]); const validateInput = (value: number): boolean => { if (value <= 0) { setError("El número debe ser mayor que cero"); return false; } if (value > 1000) { setError("El número no puede ser mayor a 1000"); return false; } setError(null); return true; }; const handleMaxNumberChange = (e: React.ChangeEvent) => { const value = parseInt(e.target.value) || 0; setMaxNumber(value); validateInput(value); }; const generateRandomNumber = () => { if (!validateInput(maxNumber)) return; // Check if all numbers have been used if (usedNumbers.size >= maxNumber) { setError("¡Todos los números han sido generados! Reinicia para comenzar de nuevo."); stopAutoMode(); return; } setIsGenerating(true); // Simulate spinning animation let counter = 0; const maxSpins = 15; const spinInterval = setInterval(() => { const tempNumber = Math.floor(Math.random() * maxNumber) + 1; setCurrentNumber(tempNumber); counter++; if (counter >= maxSpins) { clearInterval(spinInterval); // Generate final number let newNumber; do { newNumber = Math.floor(Math.random() * maxNumber) + 1; } while (usedNumbers.has(newNumber) && usedNumbers.size < maxNumber); setCurrentNumber(newNumber); setUsedNumbers(prev => new Set(prev).add(newNumber)); setHistory(prev => [...prev, newNumber]); setIsGenerating(false); } }, 100); }; const startAutoMode = () => { if (!validateInput(maxNumber)) return; if (usedNumbers.size >= maxNumber) { setError("¡Todos los números han sido generados! Reinicia para comenzar de nuevo."); return; } setIsAutoMode(true); }; const stopAutoMode = () => { setIsAutoMode(false); }; const resetRoulette = () => { setCurrentNumber(null); setUsedNumbers(new Set()); setHistory([]); setError(null); stopAutoMode(); }; const progress = maxNumber > 0 ? Math.round((usedNumbers.size / maxNumber) * 100) : 0; // Group history numbers into ranges const groupNumbersByRange = () => { const groups: { [key: string]: number[] } = { "1-10": [], "11-20": [], "21-30": [], "31-40": [], "41-50": [], "51-60": [], "61-70": [], "71-80": [], "81-90": [] }; history.forEach(num => { if (num >= 1 && num <= 10) groups["1-10"].push(num); else if (num >= 11 && num <= 20) groups["11-20"].push(num); else if (num >= 21 && num <= 30) groups["21-30"].push(num); else if (num >= 31 && num <= 40) groups["31-40"].push(num); else if (num >= 41 && num <= 50) groups["41-50"].push(num); else if (num >= 51 && num <= 60) groups["51-60"].push(num); else if (num >= 61 && num <= 70) groups["61-70"].push(num); else if (num >= 71 && num <= 80) groups["71-80"].push(num); else if (num >= 81 && num <= 90) groups["81-90"].push(num); }); return groups; }; const groupedNumbers = groupNumbersByRange(); const lastFiveNumbers = history.slice(-5); return (

Tango Amigo Melipilla Genera números aleatorios sin repetir

Cantidad de números (1-1000) {error &&

{error}

}

{currentNumber !== null ? currentNumber : "?"}

Números usados: {usedNumbers.size} Total: {maxNumber}

{/* Control Buttons */}

{/* Auto Mode Indicator */} {isAutoMode && (

Modo automático activo (3s)

)} {/* Last 5 Numbers */} {lastFiveNumbers.length > 0 && (

Últimos 5 Números

{lastFiveNumbers.map((num, index) => (

{num}

))}

)} {/* Grouped History Section */} {history.length > 0 && (

Números Generados por Rango

{Object.entries(groupedNumbers).map(([range, numbers]) => (

{range}

{numbers.map((num, index) => (

{num}

))}

)}

); }