73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
|
import { useEffect } from 'react'
|
||
|
|
import { useRuleta } from '../../hooks/useRuleta'
|
||
|
|
import { sounds } from '../../audio/AudioController'
|
||
|
|
import QuestionModal from '../game/QuestionModal'
|
||
|
|
import RuletaSVG from '../game/Ruleta/RuletaSVG'
|
||
|
|
|
||
|
|
interface GameProps {
|
||
|
|
onEnd: (aprobado: boolean) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Game({ onEnd }: GameProps) {
|
||
|
|
const { estado, categorias, girar, responder, cerrarFeedback, MAX_PREGUNTAS } = useRuleta()
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (estado.completado) onEnd(estado.aprobado)
|
||
|
|
}, [estado.completado])
|
||
|
|
|
||
|
|
function handleGirar() {
|
||
|
|
sounds.click?.play()
|
||
|
|
girar()
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col items-center gap-6 py-6 w-full">
|
||
|
|
|
||
|
|
{/* Instrucciones */}
|
||
|
|
<div className="bg-purple-50 border border-purple-200 rounded-xl px-6 py-4 max-w-lg text-center">
|
||
|
|
<p className="text-purple-700 font-semibold text-lg">¿Cómo jugar?</p>
|
||
|
|
<p className="text-gray-600 mt-1">
|
||
|
|
Haz clic en la <strong>ruleta</strong> para girarla y responde correctamente para ganar puntos.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col items-center gap-4 w-full">
|
||
|
|
|
||
|
|
{/* Progreso de preguntas */}
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{Array.from({ length: MAX_PREGUNTAS }).map((_, i) => (
|
||
|
|
<div
|
||
|
|
key={i}
|
||
|
|
className={`w-6 h-6 rounded-full border-2 border-purple-600 transition-all duration-500 ${
|
||
|
|
i < estado.preguntasRespondidas ? 'bg-purple-600' : 'bg-white'
|
||
|
|
}`}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Ruleta SVG */}
|
||
|
|
<RuletaSVG
|
||
|
|
categorias={categorias}
|
||
|
|
rotacion={estado.rotacion}
|
||
|
|
isSpinning={estado.isSpinning}
|
||
|
|
onClick={handleGirar}
|
||
|
|
/>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Modal pregunta */}
|
||
|
|
{estado.preguntaActual && !estado.completado && (
|
||
|
|
<QuestionModal
|
||
|
|
pregunta={estado.preguntaActual}
|
||
|
|
categoria={estado.categoriaActual!}
|
||
|
|
mostrarFeedback={estado.mostrarFeedback}
|
||
|
|
feedbackCorrecto={estado.feedbackCorrecto}
|
||
|
|
onResponder={responder}
|
||
|
|
onCerrar={cerrarFeedback}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|