Ruleta actvidad completa en React

2026-07-25 01:35:36 -06:00
commit 3ce44d7aac
49 changed files with 4449 additions and 0 deletions
@@ -0,0 +1,72 @@
+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>
+  )
+}