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,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
@@ -0,0 +1,51 @@
+import { useState } from 'react'
+import MainLayout from './layouts/MainLayout'
+import Cover from './components/screens/Cover'
+import Game from './components/screens/Game'
+import Result from './components/screens/Result'
+import { consumirIntento, intentosAgotados } from './hooks/useIntentos'
+
+type Screen = 'cover' | 'game' | 'result'
+
+interface ResultState {
+  aprobado: boolean
+  sinIntentos: boolean
+}
+
+export default function App() {
+  const [screen, setScreen] = useState<Screen>(() =>
+    intentosAgotados() ? 'result' : 'cover'
+  )
+  const [resultState, setResultState] = useState<ResultState>({
+    aprobado: false,
+    sinIntentos: intentosAgotados(),
+  })
+
+  function handleStart() {
+    consumirIntento()
+    setScreen('game')
+  }
+
+  function handleGameEnd(aprobado: boolean) {
+    setResultState({ aprobado, sinIntentos: intentosAgotados() })
+    setScreen('result')
+  }
+
+  function handleReintentar() {
+    setScreen('cover')
+  }
+
+  return (
+    <MainLayout>
+      {screen === 'cover' && <Cover onStart={handleStart} />}
+      {screen === 'game' && <Game onEnd={handleGameEnd} />}
+      {screen === 'result' && (
+        <Result
+          aprobado={resultState.aprobado}
+          sinIntentos={resultState.sinIntentos}
+          onReintentar={handleReintentar}
+        />
+      )}
+    </MainLayout>
+  )
+}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
@@ -0,0 +1,80 @@
+import { Howler } from 'howler'
+import { ExtendedHowl, createSound, stopAllSounds } from './ExtendedHowl'
+import { AUDIOS } from './audios'
+
+export class AudioController {
+  private audioElement: ExtendedHowl | null = null
+  private isMuted = false
+
+  load(url: string): void {
+    this.audioElement?.stop()
+    this.audioElement = createSound(url)
+  }
+
+  setHowl(howl: ExtendedHowl): void {
+    this.audioElement?.stop()
+    this.audioElement = howl
+  }
+
+  stopAllAndPlay(howl: ExtendedHowl): void {
+    stopAllSounds()
+    this.setHowl(howl)
+    this.play()
+  }
+
+  play(): void {
+    this.audioElement?.play()
+  }
+
+  pause(): void {
+    this.audioElement?.pause()
+  }
+
+  stop(): void {
+    this.audioElement?.stop()
+  }
+
+  toggle(): void {
+    if (!this.audioElement) return
+    this.audioElement.playing() ? this.pause() : this.play()
+  }
+
+  toggleMute(): void {
+    this.isMuted = !this.isMuted
+    Howler.mute(this.isMuted)
+  }
+
+  isPlaying(): boolean {
+    return this.audioElement?.playing() ?? false
+  }
+
+  getMuted(): boolean {
+    return this.isMuted
+  }
+
+  getDuration(): number {
+    return (this.audioElement?.duration() as number) ?? 0
+  }
+
+  onTimeUpdate(cb: (currentTime: number) => void): void {
+    this.audioElement?.onTimeUpdate(cb)
+  }
+
+  offTimeUpdate(cb: (currentTime: number) => void): void {
+    this.audioElement?.offTimeUpdate(cb)
+  }
+
+  on(event: string, cb: () => void): void {
+    this.audioElement?.on(event, cb)
+  }
+}
+
+export const audioController = new AudioController()
+
+// Sonidos precargados listos para usar
+export const sounds = {
+  click: createSound(AUDIOS.click),
+  wheelSpin: createSound(AUDIOS.wheelSpin),
+  correct: createSound(AUDIOS.correct),
+  incorrect: createSound(AUDIOS.incorrect),
+}
@@ -0,0 +1,69 @@
+import { Howl, Howler } from 'howler'
+
+type TimeUpdateCallback = (currentTime: number) => void
+
+declare module 'howler' {
+  interface HowlerGlobal {
+    _howls: Howl[]
+  }
+}
+
+export class ExtendedHowl extends Howl {
+  private _timeupdateListeners: TimeUpdateCallback[] = []
+  private _interval: ReturnType<typeof setInterval> | null = null
+
+  constructor(options: ConstructorParameters<typeof Howl>[0]) {
+    super(options)
+    this._startTimeUpdate()
+  }
+
+  private _startTimeUpdate(): void {
+    this._interval = setInterval(() => {
+      if (this.playing()) this._emitTimeUpdate(this.seek() as number)
+    }, 250)
+  }
+
+  private _emitTimeUpdate(currentTime: number): void {
+    this._timeupdateListeners.forEach((cb) => cb(currentTime))
+  }
+
+  onTimeUpdate(cb: TimeUpdateCallback): void {
+    this._timeupdateListeners.push(cb)
+  }
+
+  offTimeUpdate(cb: TimeUpdateCallback): void {
+    this._timeupdateListeners = this._timeupdateListeners.filter((l) => l !== cb)
+  }
+
+  play(id?: number): number {
+    const result = super.play(id as number)
+    if (!this._interval) this._startTimeUpdate()
+    return result
+  }
+
+  pause(id?: number): this {
+    super.pause(id)
+    if (this._interval) {
+      clearInterval(this._interval)
+      this._interval = null
+    }
+    return this
+  }
+
+  stop(id?: number): this {
+    super.stop(id)
+    if (this._interval) {
+      clearInterval(this._interval)
+      this._interval = null
+    }
+    return this
+  }
+}
+
+export function createSound(audioUrl?: string): ExtendedHowl | null {
+  return audioUrl ? new ExtendedHowl({ src: [audioUrl] }) : null
+}
+
+export function stopAllSounds(): void {
+  Howler._howls?.forEach((sound: Howl) => sound.stop())
+}
@@ -0,0 +1,6 @@
+export const AUDIOS = {
+  click: '/audios/click.mp3',
+  wheelSpin: '/audios/wheel-spin.mp3',
+  correct: '/audios/feedback-correct.mpeg',
+  incorrect: '/audios/feedback-incorrect.mpeg',
+} as const
@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from 'react'
+import type { Pregunta, Categoria } from '../../types'
+
+interface QuestionModalProps {
+  pregunta: Pregunta
+  categoria: Categoria
+  mostrarFeedback: boolean
+  feedbackCorrecto: boolean
+  onResponder: (indice: number | null) => void
+  onCerrar: () => void
+}
+
+const LETRAS = ['A', 'B', 'C', 'D']
+const TIEMPO_LIMITE = 30
+
+export default function QuestionModal({ pregunta, categoria, mostrarFeedback, feedbackCorrecto, onResponder, onCerrar }: QuestionModalProps) {
+  const [tiempo, setTiempo] = useState(TIEMPO_LIMITE)
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const tiempoAgotadoRef = useRef(false)
+
+  useEffect(() => {
+    if (mostrarFeedback) {
+      if (intervalRef.current) clearInterval(intervalRef.current)
+      return
+    }
+
+    setTiempo(TIEMPO_LIMITE)
+    tiempoAgotadoRef.current = false
+    intervalRef.current = setInterval(() => {
+      setTiempo((prev) => {
+        if (prev <= 1) {
+          clearInterval(intervalRef.current!)
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+
+    return () => { if (intervalRef.current) clearInterval(intervalRef.current) }
+  }, [pregunta.id, mostrarFeedback])
+
+  useEffect(() => {
+    if (tiempo === 0 && !mostrarFeedback && !tiempoAgotadoRef.current) {
+      tiempoAgotadoRef.current = true
+      onResponder(null)
+    }
+  }, [tiempo, mostrarFeedback])
+
+  const porcentaje = (tiempo / TIEMPO_LIMITE) * 100
+  const colorBarra = porcentaje > 50 ? '#22c55e' : porcentaje > 25 ? '#f97316' : '#ef4444'
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4">
+      <div className="bg-white rounded-2xl border-4 w-full max-w-xl shadow-2xl overflow-hidden" style={{ borderColor: categoria.color }}>
+
+        {!mostrarFeedback && (
+          <>
+            {/* Header con categoría */}
+            <div className="px-6 py-4 flex flex-col items-center gap-1" style={{ backgroundColor: categoria.color }}>
+              <span className="text-3xl">{categoria.emoji}</span>
+              <p className="text-white/80 text-sm font-medium">{categoria.nombre}</p>
+              <p className="text-white font-bold text-lg text-center">{pregunta.pregunta}</p>
+            </div>
+
+            {/* Temporizador */}
+            <div className="px-5 pt-4">
+              <div className="flex items-center justify-between mb-1">
+                <span className="text-sm font-medium text-gray-500">Tiempo restante</span>
+                <span className="text-sm font-bold" style={{ color: colorBarra }}>{tiempo}s</span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
+                <div
+                  className="h-3 rounded-full transition-all duration-1000"
+                  style={{ width: `${porcentaje}%`, backgroundColor: colorBarra }}
+                />
+              </div>
+            </div>
+
+            {/* Opciones */}
+            <div className="p-5 flex flex-col gap-3">
+              {pregunta.opciones.map((opcion, i) => (
+                <button
+                  key={i}
+                  onClick={() => onResponder(i)}
+                  className="flex items-stretch w-full rounded-lg border border-gray-200 bg-gray-50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 overflow-hidden text-left"
+                >
+                  <span
+                    className="text-white font-bold w-10 flex items-center justify-center shrink-0"
+                    style={{ backgroundColor: categoria.color }}
+                  >
+                    {LETRAS[i]}
+                  </span>
+                  <span className="px-4 py-3 text-gray-700 font-medium">{opcion}</span>
+                </button>
+              ))}
+            </div>
+          </>
+        )}
+
+        {/* Feedback */}
+        {mostrarFeedback && (
+          <div className="p-8 flex flex-col items-center gap-4 text-center">
+            <span className="text-5xl">{feedbackCorrecto ? '🎉' : '❌'}</span>
+            <h3 className={`text-2xl font-bold ${feedbackCorrecto ? 'text-green-600' : 'text-red-500'}`}>
+              {feedbackCorrecto ? '¡Correcto!' : '¡Incorrecto!'}
+            </h3>
+            {feedbackCorrecto
+              ? <p className="text-gray-600">{pregunta.retroalimentacion}</p>
+              : <p className="text-gray-600">{tiempo === 0 ? 'Se agotó el tiempo.' : 'Respuesta incorrecta.'}</p>
+            }
+            <button
+              onClick={onCerrar}
+              className="mt-2 text-white font-semibold px-8 py-2.5 rounded-xl transition-colors"
+              style={{ backgroundColor: categoria.color }}
+            >
+              Continuar
+            </button>
+          </div>
+        )}
+
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,23 @@
+interface ResultModalProps {
+  totalPuntos: number
+  onCerrar: () => void
+}
+
+export default function ResultModal({ totalPuntos, onCerrar }: ResultModalProps) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-4">
+      <div className="bg-white rounded-2xl border-4 border-purple-600 w-full max-w-sm shadow-2xl p-8 flex flex-col items-center gap-4 text-center">
+        <span className="text-6xl">🏆</span>
+        <h3 className="text-2xl font-bold text-purple-700">¡Bien hecho!</h3>
+        <p className="text-gray-600">Has concluido la actividad.</p>
+        <p className="text-4xl font-bold text-purple-600">{totalPuntos} pts</p>
+        <button
+          onClick={onCerrar}
+          className="mt-2 bg-purple-600 hover:bg-purple-700 text-white font-semibold px-8 py-2.5 rounded-xl transition-colors"
+        >
+          Cerrar
+        </button>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,99 @@
+import type { Categoria } from '../../../types'
+
+interface RuletaSVGProps {
+  categorias: Categoria[]
+  rotacion: number
+  isSpinning: boolean
+  onClick: () => void
+}
+
+export default function RuletaSVG({ categorias, rotacion, isSpinning, onClick }: RuletaSVGProps) {
+  const cx = 200
+  const cy = 200
+  const r = 180
+  const total = categorias.length
+  const angleStep = 360 / total
+
+  function polarToCartesian(angle: number, radius: number) {
+    const rad = (angle - 90) * (Math.PI / 180)
+    return {
+      x: cx + radius * Math.cos(rad),
+      y: cy + radius * Math.sin(rad),
+    }
+  }
+
+  function sectorPath(startAngle: number, endAngle: number) {
+    const start = polarToCartesian(startAngle, r)
+    const end = polarToCartesian(endAngle, r)
+    const largeArc = endAngle - startAngle > 180 ? 1 : 0
+    return `M ${cx} ${cy} L ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} 1 ${end.x} ${end.y} Z`
+  }
+
+  return (
+    <div className="relative flex items-center justify-center">
+
+      {/* Indicador */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-2 z-10">
+        <div className="w-0 h-0 border-l-[12px] border-r-[12px] border-t-[24px] border-l-transparent border-r-transparent border-t-gray-800 drop-shadow-md" />
+      </div>
+
+      {/* Ruleta SVG */}
+      <svg
+        width="400"
+        height="400"
+        viewBox="0 0 400 400"
+        onClick={!isSpinning ? onClick : undefined}
+        className={`select-none drop-shadow-xl ${!isSpinning ? 'cursor-pointer' : 'cursor-not-allowed'}`}
+        style={{
+          transition: 'transform 4s cubic-bezier(0.25, 0.1, 0.25, 1)',
+          transform: `rotate(${rotacion}deg)`,
+        }}
+      >
+        {categorias.map((cat, i) => {
+          const startAngle = i * angleStep
+          const endAngle = startAngle + angleStep
+          const midAngle = startAngle + angleStep / 2
+          const textPos = polarToCartesian(midAngle, r * 0.62)
+
+          return (
+            <g key={cat.id}>
+              {/* Sector */}
+              <path
+                d={sectorPath(startAngle, endAngle)}
+                fill={cat.color}
+                stroke="white"
+                strokeWidth="3"
+              />
+              {/* Emoji */}
+              <text
+                x={textPos.x}
+                y={textPos.y - 14}
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize="28"
+              >
+                {cat.emoji}
+              </text>
+              {/* Nombre */}
+              <text
+                x={textPos.x}
+                y={textPos.y + 16}
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize="13"
+                fontWeight="bold"
+                fill="white"
+              >
+                {cat.nombre}
+              </text>
+            </g>
+          )
+        })}
+
+        {/* Centro */}
+        <circle cx={cx} cy={cy} r={22} fill="white" stroke="#e5e7eb" strokeWidth="3" />
+        <circle cx={cx} cy={cy} r={10} fill="#7C3AED" />
+      </svg>
+    </div>
+  )
+}
@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+    <footer className="w-full bg-gray-800 text-gray-400 text-sm">
+      <div className="max-w-5xl mx-auto px-4 py-3 text-center">
+        © {new Date().getFullYear()} Actividad Interactiva — Todos los derechos reservados
+      </div>
+    </footer>
+  )
+}
@@ -0,0 +1,10 @@
+export default function Header() {
+  return (
+    <header className="w-full bg-purple-700 text-white shadow-md">
+      <div className="max-w-5xl mx-auto px-4 py-4 flex items-center justify-between">
+        <span className="text-2xl font-bold tracking-wide">🎡 Ruleta</span>
+        <span className="text-sm opacity-75">Actividad Interactiva</span>
+      </div>
+    </header>
+  )
+}
@@ -0,0 +1,46 @@
+import hero from '../../assets/hero.png'
+import Button from '../ui/Button'
+import { useAudio } from '../../hooks/useAudio'
+
+interface CoverProps {
+  onStart: () => void
+}
+
+export default function Cover({ onStart }: CoverProps) {
+  const { sounds } = useAudio()
+
+  function handleStart() {
+    sounds.click?.play()
+    onStart()
+  }
+  return (
+    <div className="flex flex-col-reverse md:flex-row items-center justify-center text-center gap-10 py-10">
+
+      {/* Texto izquierdo */}
+      <div className="flex-1 flex flex-col gap-5 text-center md:text-left">
+        <h1 className="text-4xl font-bold text-purple-700 leading-tight">
+          ¡Bienvenido a la Ruleta Interactiva!
+        </h1>
+        <p className="text-gray-600 text-lg">
+          Pon a prueba tus conocimientos girando la ruleta.
+          Responde cada pregunta correctamente y acumula el mayor puntaje posible.
+        </p>
+        <div>
+          <Button size="lg" onClick={handleStart}>
+            Comenzar ▶
+          </Button>
+        </div>
+      </div>
+
+      {/* Imagen derecha */}
+      <div className="flex-1 flex justify-center">
+        <img
+          src={hero}
+          alt="Ruleta Interactiva"
+          className="w-full max-w-sm object-contain drop-shadow-xl"
+        />
+      </div>
+
+    </div>
+  )
+}
@@ -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>
+  )
+}
@@ -0,0 +1,52 @@
+interface ResultProps {
+  aprobado: boolean
+  sinIntentos: boolean
+  onReintentar: () => void
+}
+
+export default function Result({ aprobado, sinIntentos, onReintentar }: ResultProps) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-8 py-10 w-full text-center">
+
+      {/* Aprobado */}
+      {aprobado && (
+        <>
+          <span className="text-8xl">🏆</span>
+          <h2 className="text-4xl font-bold text-purple-700">¡Felicidades!</h2>
+          <p className="text-gray-600 text-xl max-w-md">
+            Has completado la actividad exitosamente. ¡Excelente desempeño!
+          </p>
+        </>
+      )}
+
+      {/* Reprobado con intentos disponibles */}
+      {!aprobado && !sinIntentos && (
+        <>
+          <span className="text-8xl">💪</span>
+          <h2 className="text-4xl font-bold text-orange-500">¡Casi lo logras!</h2>
+          <p className="text-gray-600 text-xl max-w-md">
+            Aún te falta un poco. Vuelve a intentarlo, ¡tú puedes!
+          </p>
+          <button
+            onClick={onReintentar}
+            className="bg-purple-600 hover:bg-purple-700 text-white font-bold px-10 py-4 rounded-xl text-lg transition-colors"
+          >
+            Reintentar
+          </button>
+        </>
+      )}
+
+      {/* Sin intentos */}
+      {sinIntentos && (
+        <>
+          <span className="text-8xl">😔</span>
+          <h2 className="text-4xl font-bold text-red-600">Intentos agotados</h2>
+          <p className="text-gray-600 text-xl max-w-md">
+            Has utilizado todos tus intentos disponibles. Te recomendamos repasar el contenido del curso antes de volver a intentarlo.
+          </p>
+        </>
+      )}
+
+    </div>
+  )
+}
@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react'
+
+type Variant = 'primary' | 'secondary' | 'danger' | 'outline'
+type Size = 'sm' | 'md' | 'lg'
+
+interface ButtonProps {
+  children: ReactNode
+  variant?: Variant
+  size?: Size
+  disabled?: boolean
+  onClick?: () => void
+  type?: 'button' | 'submit' | 'reset'
+  className?: string
+}
+
+const variants: Record<Variant, string> = {
+  primary: 'bg-purple-600 text-white hover:bg-purple-700 active:bg-purple-800',
+  secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300 active:bg-gray-400',
+  danger: 'bg-red-500 text-white hover:bg-red-600 active:bg-red-700',
+  outline: 'border-2 border-purple-600 text-purple-600 hover:bg-purple-50 active:bg-purple-100',
+}
+
+const sizes: Record<Size, string> = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-5 py-2.5 text-base',
+  lg: 'px-7 py-3.5 text-lg',
+}
+
+export default function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  onClick,
+  type = 'button',
+  className = '',
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`
+        rounded-xl font-semibold transition-colors duration-200 cursor-pointer
+        disabled:opacity-50 disabled:cursor-not-allowed
+        ${variants[variant]} ${sizes[size]} ${className}
+      `}
+    >
+      {children}
+    </button>
+  )
+}
@@ -0,0 +1,297 @@
+{
+  "categorias": [
+    {
+      "id": 0,
+      "nombre": "Historia",
+      "color": "#7C3AED",
+      "emoji": "🏛️",
+      "preguntas": [
+        {
+          "id": 1,
+          "pregunta": "¿En qué año cayó el Muro de Berlín?",
+          "opciones": ["1987", "1989", "1991", "1993"],
+          "correcta": 1,
+          "retroalimentacion": "El Muro de Berlín cayó el 9 de noviembre de 1989, marcando el fin de la Guerra Fría."
+        },
+        {
+          "id": 2,
+          "pregunta": "¿Quién fue el primer presidente de los Estados Unidos?",
+          "opciones": ["Abraham Lincoln", "Thomas Jefferson", "George Washington", "Benjamin Franklin"],
+          "correcta": 2,
+          "retroalimentacion": "George Washington fue el primer presidente de EE.UU., gobernando de 1789 a 1797."
+        },
+        {
+          "id": 3,
+          "pregunta": "¿En qué año comenzó la Primera Guerra Mundial?",
+          "opciones": ["1912", "1914", "1916", "1918"],
+          "correcta": 1,
+          "retroalimentacion": "La Primera Guerra Mundial comenzó en 1914 tras el asesinato del archiduque Francisco Fernando."
+        },
+        {
+          "id": 4,
+          "pregunta": "¿Qué civilización construyó las pirámides de Giza?",
+          "opciones": ["Griega", "Romana", "Egipcia", "Mesopotámica"],
+          "correcta": 2,
+          "retroalimentacion": "Las pirámides de Giza fueron construidas por los antiguos egipcios hace más de 4,500 años."
+        },
+        {
+          "id": 5,
+          "pregunta": "¿En qué año llegó Cristóbal Colón a América?",
+          "opciones": ["1488", "1490", "1492", "1495"],
+          "correcta": 2,
+          "retroalimentacion": "Cristóbal Colón llegó a América el 12 de octubre de 1492."
+        },
+        {
+          "id": 6,
+          "pregunta": "¿Quién fue Napoleón Bonaparte?",
+          "opciones": ["Rey de España", "Emperador de Francia", "Presidente de Italia", "General inglés"],
+          "correcta": 1,
+          "retroalimentacion": "Napoleón Bonaparte fue Emperador de Francia entre 1804 y 1815."
+        },
+        {
+          "id": 7,
+          "pregunta": "¿En qué país se originó la Revolución Industrial?",
+          "opciones": ["Francia", "Alemania", "Estados Unidos", "Inglaterra"],
+          "correcta": 3,
+          "retroalimentacion": "La Revolución Industrial comenzó en Inglaterra a mediados del siglo XVIII."
+        },
+        {
+          "id": 8,
+          "pregunta": "¿Cuál fue el primer país en conceder el voto a la mujer?",
+          "opciones": ["Francia", "Nueva Zelanda", "Estados Unidos", "Suecia"],
+          "correcta": 1,
+          "retroalimentacion": "Nueva Zelanda fue el primer país en conceder el voto a la mujer en 1893."
+        }
+      ]
+    },
+    {
+      "id": 1,
+      "nombre": "Geografía",
+      "color": "#059669",
+      "emoji": "🌍",
+      "preguntas": [
+        {
+          "id": 9,
+          "pregunta": "¿Cuál es el río más largo del mundo?",
+          "opciones": ["Amazonas", "Nilo", "Yangtsé", "Misisipi"],
+          "correcta": 1,
+          "retroalimentacion": "El río Nilo, con aproximadamente 6,650 km, es considerado el río más largo del mundo."
+        },
+        {
+          "id": 10,
+          "pregunta": "¿Cuál es el país más grande del mundo por superficie?",
+          "opciones": ["China", "Canadá", "Estados Unidos", "Rusia"],
+          "correcta": 3,
+          "retroalimentacion": "Rusia es el país más grande del mundo con 17.1 millones de km²."
+        },
+        {
+          "id": 11,
+          "pregunta": "¿En qué continente se encuentra el desierto del Sahara?",
+          "opciones": ["Asia", "América", "África", "Australia"],
+          "correcta": 2,
+          "retroalimentacion": "El Sahara se encuentra en África y es el desierto cálido más grande del mundo."
+        },
+        {
+          "id": 12,
+          "pregunta": "¿Cuál es la capital de Australia?",
+          "opciones": ["Sídney", "Melbourne", "Canberra", "Brisbane"],
+          "correcta": 2,
+          "retroalimentacion": "Canberra es la capital de Australia, no Sídney como muchos creen."
+        },
+        {
+          "id": 13,
+          "pregunta": "¿Cuántos océanos hay en el planeta?",
+          "opciones": ["3", "4", "5", "6"],
+          "correcta": 2,
+          "retroalimentacion": "Hay 5 océanos: Pacífico, Atlántico, Índico, Ártico y Antártico."
+        },
+        {
+          "id": 14,
+          "pregunta": "¿Cuál es el volcán activo más alto del mundo?",
+          "opciones": ["Etna", "Kilimanjaro", "Ojos del Salado", "Cotopaxi"],
+          "correcta": 3,
+          "retroalimentacion": "El Cotopaxi en Ecuador es uno de los volcanes activos más altos del mundo con 5,897 metros."
+        },
+        {
+          "id": 15,
+          "pregunta": "¿En qué país se encuentra la Torre de Pisa?",
+          "opciones": ["España", "Francia", "Italia", "Portugal"],
+          "correcta": 2,
+          "retroalimentacion": "La Torre de Pisa se encuentra en la ciudad de Pisa, Italia."
+        },
+        {
+          "id": 16,
+          "pregunta": "¿Cuál es el país más pequeño del mundo?",
+          "opciones": ["Mónaco", "San Marino", "Liechtenstein", "Ciudad del Vaticano"],
+          "correcta": 3,
+          "retroalimentacion": "Ciudad del Vaticano es el país más pequeño del mundo con apenas 0.44 km²."
+        }
+      ]
+    },
+    {
+      "id": 2,
+      "nombre": "Ciencia",
+      "color": "#DC2626",
+      "emoji": "🔬",
+      "preguntas": [
+        {
+          "id": 17,
+          "pregunta": "¿Cuál es el elemento más abundante en el universo?",
+          "opciones": ["Oxígeno", "Carbono", "Hidrógeno", "Helio"],
+          "correcta": 2,
+          "retroalimentacion": "El hidrógeno es el elemento más abundante del universo, constituyendo el 75% de su masa."
+        },
+        {
+          "id": 18,
+          "pregunta": "¿A qué velocidad viaja la luz en el vacío?",
+          "opciones": ["200,000 km/s", "300,000 km/s", "400,000 km/s", "150,000 km/s"],
+          "correcta": 1,
+          "retroalimentacion": "La luz viaja a aproximadamente 299,792 km/s en el vacío."
+        },
+        {
+          "id": 19,
+          "pregunta": "¿Cuántos huesos tiene el cuerpo humano adulto?",
+          "opciones": ["196", "206", "216", "226"],
+          "correcta": 1,
+          "retroalimentacion": "El cuerpo humano adulto tiene 206 huesos."
+        },
+        {
+          "id": 20,
+          "pregunta": "¿Cuál es el planeta más grande del sistema solar?",
+          "opciones": ["Saturno", "Neptuno", "Júpiter", "Urano"],
+          "correcta": 2,
+          "retroalimentacion": "Júpiter es el planeta más grande del sistema solar."
+        },
+        {
+          "id": 21,
+          "pregunta": "¿Qué gas es el más abundante en la atmósfera terrestre?",
+          "opciones": ["Oxígeno", "Dióxido de carbono", "Nitrógeno", "Argón"],
+          "correcta": 2,
+          "retroalimentacion": "El nitrógeno constituye aproximadamente el 78% de la atmósfera terrestre."
+        },
+        {
+          "id": 22,
+          "pregunta": "¿Cuántos cromosomas tiene una célula humana normal?",
+          "opciones": ["23", "44", "46", "48"],
+          "correcta": 2,
+          "retroalimentacion": "Las células humanas normales tienen 46 cromosomas, organizados en 23 pares."
+        },
+        {
+          "id": 23,
+          "pregunta": "¿Quién formuló la teoría de la relatividad?",
+          "opciones": ["Isaac Newton", "Albert Einstein", "Nikola Tesla", "Stephen Hawking"],
+          "correcta": 1,
+          "retroalimentacion": "Albert Einstein formuló la teoría de la relatividad especial en 1905 y la general en 1915."
+        },
+        {
+          "id": 24,
+          "pregunta": "¿Cuál es el símbolo químico del oro?",
+          "opciones": ["Go", "Ag", "Au", "Or"],
+          "correcta": 2,
+          "retroalimentacion": "El símbolo químico del oro es Au, del latín Aurum."
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "nombre": "Arte y Literatura",
+      "color": "#D97706",
+      "emoji": "🎨",
+      "preguntas": [
+        {
+          "id": 25,
+          "pregunta": "¿Quién escribió 'Cien años de soledad'?",
+          "opciones": ["Mario Vargas Llosa", "Pablo Neruda", "Gabriel García Márquez", "Jorge Luis Borges"],
+          "correcta": 2,
+          "retroalimentacion": "Gabriel García Márquez escribió Cien años de soledad en 1967, obra cumbre del realismo mágico."
+        },
+        {
+          "id": 26,
+          "pregunta": "¿Quién pintó 'La noche estrellada'?",
+          "opciones": ["Pablo Picasso", "Claude Monet", "Salvador Dalí", "Vincent van Gogh"],
+          "correcta": 3,
+          "retroalimentacion": "La noche estrellada fue pintada por Vincent van Gogh en 1889."
+        },
+        {
+          "id": 27,
+          "pregunta": "¿En qué país nació Mozart?",
+          "opciones": ["Alemania", "Austria", "Italia", "Francia"],
+          "correcta": 1,
+          "retroalimentacion": "Wolfgang Amadeus Mozart nació en Salzburgo, Austria, en 1756."
+        },
+        {
+          "id": 28,
+          "pregunta": "¿Quién escribió 'Don Quijote de la Mancha'?",
+          "opciones": ["Lope de Vega", "Miguel de Cervantes", "Francisco de Quevedo", "Garcilaso de la Vega"],
+          "correcta": 1,
+          "retroalimentacion": "Don Quijote de la Mancha fue escrita por Miguel de Cervantes y publicada en 1605."
+        },
+        {
+          "id": 29,
+          "pregunta": "¿Quién compuso la Quinta Sinfonía?",
+          "opciones": ["Mozart", "Bach", "Beethoven", "Chopin"],
+          "correcta": 2,
+          "retroalimentacion": "La Quinta Sinfonía fue compuesta por Ludwig van Beethoven entre 1804 y 1808."
+        },
+        {
+          "id": 30,
+          "pregunta": "¿En qué museo se encuentra la Mona Lisa?",
+          "opciones": ["Museo del Prado", "Museo Británico", "Museo del Louvre", "Museo Uffizi"],
+          "correcta": 2,
+          "retroalimentacion": "La Mona Lisa se encuentra en el Museo del Louvre en París, Francia."
+        },
+        {
+          "id": 31,
+          "pregunta": "¿Quién escribió 'Romeo y Julieta'?",
+          "opciones": ["Charles Dickens", "William Shakespeare", "Jane Austen", "Victor Hugo"],
+          "correcta": 1,
+          "retroalimentacion": "Romeo y Julieta fue escrita por William Shakespeare alrededor de 1595."
+        },
+        {
+          "id": 32,
+          "pregunta": "¿Qué movimiento artístico lideró Salvador Dalí?",
+          "opciones": ["Cubismo", "Impresionismo", "Surrealismo", "Expresionismo"],
+          "correcta": 2,
+          "retroalimentacion": "Salvador Dalí fue uno de los principales representantes del Surrealismo."
+        }
+      ]
+    }
+  ],
+  "bancoGenerico": [
+    {
+      "id": 101,
+      "pregunta": "¿Cuál es el océano más grande del mundo?",
+      "opciones": ["Atlántico", "Índico", "Pacífico", "Ártico"],
+      "correcta": 2,
+      "retroalimentacion": "El océano Pacífico es el más grande, cubriendo más de 165 millones de km²."
+    },
+    {
+      "id": 102,
+      "pregunta": "¿Cuántos planetas tiene el sistema solar?",
+      "opciones": ["7", "8", "9", "10"],
+      "correcta": 1,
+      "retroalimentacion": "El sistema solar tiene 8 planetas desde que Plutón fue reclasificado en 2006."
+    },
+    {
+      "id": 103,
+      "pregunta": "¿Cuál es el animal terrestre más rápido?",
+      "opciones": ["León", "Guepardo", "Antílope", "Caballo"],
+      "correcta": 1,
+      "retroalimentacion": "El guepardo puede alcanzar velocidades de hasta 120 km/h, siendo el animal terrestre más rápido."
+    },
+    {
+      "id": 104,
+      "pregunta": "¿En qué año se fundó la ONU?",
+      "opciones": ["1943", "1945", "1947", "1950"],
+      "correcta": 1,
+      "retroalimentacion": "La ONU fue fundada el 24 de octubre de 1945 tras el fin de la Segunda Guerra Mundial."
+    },
+    {
+      "id": 105,
+      "pregunta": "¿Cuál es el idioma más hablado en el mundo?",
+      "opciones": ["Inglés", "Español", "Mandarín", "Hindi"],
+      "correcta": 2,
+      "retroalimentacion": "El mandarín es el idioma con más hablantes nativos, con más de 900 millones."
+    }
+  ]
+}
@@ -0,0 +1,23 @@
+import { useEffect, useCallback } from 'react'
+import { audioController, sounds } from '../audio/AudioController'
+import { createSound, stopAllSounds } from '../audio/ExtendedHowl'
+
+export function useAudio() {
+  useEffect(() => {
+    return () => audioController.stop()
+  }, [])
+
+  const load = useCallback((url: string) => audioController.load(url), [])
+  const play = useCallback(() => audioController.play(), [])
+  const pause = useCallback(() => audioController.pause(), [])
+  const stop = useCallback(() => audioController.stop(), [])
+  const toggle = useCallback(() => audioController.toggle(), [])
+  const toggleMute = useCallback(() => audioController.toggleMute(), [])
+  const stopAll = useCallback(() => stopAllSounds(), [])
+  const playNew = useCallback((url: string) => {
+    const howl = createSound(url)
+    if (howl) audioController.stopAllAndPlay(howl)
+  }, [])
+
+  return { load, play, pause, stop, toggle, toggleMute, stopAll, playNew, sounds, audioController }
+}
@@ -0,0 +1,31 @@
+const KEY_INTENTOS = 'ruleta_intentos_usados'
+const KEY_AGOTADOS = 'ruleta_intentos_agotados'
+const MAX_INTENTOS = 3
+
+function getIntentosUsados(): number {
+  return parseInt(sessionStorage.getItem(KEY_INTENTOS) ?? '0', 10)
+}
+
+function setIntentosUsados(n: number): void {
+  sessionStorage.setItem(KEY_INTENTOS, String(n))
+  if (n >= MAX_INTENTOS) {
+    sessionStorage.setItem(KEY_AGOTADOS, 'true')
+  }
+}
+
+export function intentosAgotados(): boolean {
+  return sessionStorage.getItem(KEY_AGOTADOS) === 'true'
+}
+
+export function intentosRestantes(): number {
+  return Math.max(0, MAX_INTENTOS - getIntentosUsados())
+}
+
+export function consumirIntento(): void {
+  setIntentosUsados(getIntentosUsados() + 1)
+}
+
+export function resetIntentos(): void {
+  sessionStorage.removeItem(KEY_INTENTOS)
+  sessionStorage.removeItem(KEY_AGOTADOS)
+}
@@ -0,0 +1,134 @@
+import { useState, useRef } from 'react'
+import type { Pregunta, Categoria, PreguntasData } from '../types'
+import data from '../data/preguntas.json'
+import { sounds } from '../audio/AudioController'
+
+const { categorias, bancoGenerico } = data as PreguntasData
+const MAX_PREGUNTAS = 10
+const MIN_CORRECTAS = 8
+const SECCIONES = categorias.length
+const ANGULO_SECCION = 360 / SECCIONES
+
+export interface EstadoJuego {
+  isSpinning: boolean
+  rotacion: number
+  preguntaActual: Pregunta | null
+  categoriaActual: Categoria | null
+  mostrarFeedback: boolean
+  feedbackCorrecto: boolean
+  preguntasRespondidas: number
+  correctas: number
+  completado: boolean
+  aprobado: boolean
+  preguntasUsadas: Record<number, number[]>
+  bancoPreguntasUsadas: number[]
+}
+
+export function useRuleta() {
+  const [estado, setEstado] = useState<EstadoJuego>({
+    isSpinning: false,
+    rotacion: 0,
+    preguntaActual: null,
+    categoriaActual: null,
+    mostrarFeedback: false,
+    feedbackCorrecto: false,
+    preguntasRespondidas: 0,
+    correctas: 0,
+    completado: false,
+    aprobado: false,
+    preguntasUsadas: {},
+    bancoPreguntasUsadas: [],
+  })
+
+  const rotacionRef = useRef(0)
+
+  function seleccionarPregunta(categoria: Categoria, preguntasUsadas: Record<number, number[]>, bancoPreguntasUsadas: number[]): { pregunta: Pregunta, esGenerica: boolean } {
+    const usadas = preguntasUsadas[categoria.id] ?? []
+    const disponibles = categoria.preguntas.filter((_, i) => !usadas.includes(i))
+
+    if (disponibles.length > 0) {
+      const idx = Math.floor(Math.random() * disponibles.length)
+      return { pregunta: disponibles[idx], esGenerica: false }
+    }
+
+    // Banco genérico
+    const disponiblesGenericas = bancoGenerico.filter((_, i) => !bancoPreguntasUsadas.includes(i))
+    const pool = disponiblesGenericas.length > 0 ? disponiblesGenericas : bancoGenerico
+    const idx = Math.floor(Math.random() * pool.length)
+    return { pregunta: pool[idx], esGenerica: true }
+  }
+
+  function girar() {
+    if (estado.isSpinning || estado.completado) return
+
+    sounds.wheelSpin?.play()
+
+    const vueltas = 3 + Math.random() * 2
+    const anguloFinal = Math.random() * 360
+    const rotacionTotal = rotacionRef.current + vueltas * 360 + anguloFinal
+    rotacionRef.current = rotacionTotal
+
+    setEstado((prev) => ({ ...prev, isSpinning: true, rotacion: rotacionTotal }))
+
+    setTimeout(() => {
+      const anguloNormalizado = ((360 - (rotacionRef.current % 360)) + 360) % 360
+      const indiceCategoria = Math.floor(anguloNormalizado / ANGULO_SECCION) % SECCIONES
+      const categoria = categorias[indiceCategoria]
+
+      setEstado((prev) => {
+        const { pregunta, esGenerica } = seleccionarPregunta(categoria, prev.preguntasUsadas, prev.bancoPreguntasUsadas)
+        const originalIdx = esGenerica
+          ? bancoGenerico.indexOf(pregunta)
+          : categoria.preguntas.indexOf(pregunta)
+
+        return {
+          ...prev,
+          preguntaActual: pregunta,
+          categoriaActual: categoria,
+          preguntasUsadas: esGenerica ? prev.preguntasUsadas : {
+            ...prev.preguntasUsadas,
+            [categoria.id]: [...(prev.preguntasUsadas[categoria.id] ?? []), originalIdx],
+          },
+          bancoPreguntasUsadas: esGenerica
+            ? [...prev.bancoPreguntasUsadas, originalIdx]
+            : prev.bancoPreguntasUsadas,
+        }
+      })
+    }, 4000)
+  }
+
+  function responder(indiceOpcion: number | null) {
+    if (!estado.preguntaActual) return
+    const esCorrecta = indiceOpcion !== null && indiceOpcion === estado.preguntaActual.correcta
+
+    if (esCorrecta) sounds.correct?.play()
+    else sounds.incorrect?.play()
+
+    const nuevasCorrectas = estado.correctas + (esCorrecta ? 1 : 0)
+    const nuevasRespondidas = estado.preguntasRespondidas + 1
+    const completado = nuevasRespondidas >= MAX_PREGUNTAS
+    const aprobado = completado && nuevasCorrectas >= MIN_CORRECTAS
+
+    setEstado((prev) => ({
+      ...prev,
+      correctas: nuevasCorrectas,
+      preguntasRespondidas: nuevasRespondidas,
+      mostrarFeedback: true,
+      feedbackCorrecto: esCorrecta,
+      completado,
+      aprobado,
+    }))
+  }
+
+  function cerrarFeedback() {
+    setEstado((prev) => ({
+      ...prev,
+      preguntaActual: null,
+      categoriaActual: null,
+      mostrarFeedback: false,
+      isSpinning: false,
+    }))
+  }
+
+  return { estado, categorias, girar, responder, cerrarFeedback, MAX_PREGUNTAS, MIN_CORRECTAS }
+}
@@ -0,0 +1,46 @@
+import { useEffect } from 'react'
+import {
+  initSCORM,
+  finishSCORM,
+  getScore,
+  setScore,
+  getLessonStatus,
+  setLessonStatus,
+  getLessonLocation,
+  setLessonLocation,
+  getSuspendData,
+  setSuspendData,
+  getStudentName,
+  getScormData,
+  setScormData,
+  completeLesson,
+  isConnected,
+} from '../scorm/scorm'
+
+export function useSCORM() {
+  useEffect(() => {
+    initSCORM()
+    window.addEventListener('beforeunload', finishSCORM)
+    return () => {
+      window.removeEventListener('beforeunload', finishSCORM)
+      finishSCORM()
+    }
+  }, [])
+
+  return {
+    isConnected,
+    getStudentName,
+    getScore,
+    setScore,
+    getLessonStatus,
+    setLessonStatus,
+    getLessonLocation,
+    setLessonLocation,
+    getSuspendData,
+    setSuspendData,
+    getScormData,
+    setScormData,
+    completeLesson,
+    finishSCORM,
+  }
+}
@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react'
+
+const BASE_WIDTH = 1920
+const BASE_HEIGHT = 1080
+
+export function useScale() {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function scale() {
+      const el = ref.current
+      if (!el) return
+
+      const scaleX = window.innerWidth / BASE_WIDTH
+      const scaleY = window.innerHeight / BASE_HEIGHT
+      const s = Math.min(scaleX, scaleY)
+
+      el.style.transform = `scale(${s})`
+      el.style.transformOrigin = 'top left'
+      el.style.width = `${BASE_WIDTH}px`
+      el.style.height = `${BASE_HEIGHT}px`
+      el.style.position = 'absolute'
+      el.style.left = `${(window.innerWidth - BASE_WIDTH * s) / 2}px`
+      el.style.top = `${(window.innerHeight - BASE_HEIGHT * s) / 2}px`
+      el.style.overflow = 'hidden'
+    }
+
+    scale()
+    window.addEventListener('resize', scale)
+    return () => window.removeEventListener('resize', scale)
+  }, [])
+
+  return ref
+}
@@ -0,0 +1 @@
+@import "tailwindcss";
@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+import { useScale } from '../hooks/useScale'
+import Header from '../components/layout/Header'
+import Footer from '../components/layout/Footer'
+
+interface MainLayoutProps {
+  children: ReactNode
+}
+
+export default function MainLayout({ children }: MainLayoutProps) {
+  const scaleRef = useScale()
+
+  return (
+    <div className="w-screen h-screen overflow-hidden bg-white relative">
+      <div ref={scaleRef} className="bg-gray-100 flex flex-col">
+        <Header />
+        <main className="flex-1 flex items-center justify-center px-4 py-8">
+          {children}
+        </main>
+        <Footer />
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,18 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+// Simulador SCORM solo en desarrollo
+if (import.meta.env.DEV) {
+  const { Scorm12API } = await import('scorm-again')
+  const api = new Scorm12API({})
+  window.API = api
+  api.lmsInitialize()
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
@@ -0,0 +1,145 @@
+interface SCORM12API {
+  LMSInitialize: (s: string) => string
+  LMSGetValue: (key: string) => string
+  LMSSetValue: (key: string, value: string) => string
+  LMSCommit: (s: string) => string
+  LMSFinish: (s: string) => string
+}
+
+declare global {
+  interface Window {
+    API?: SCORM12API
+  }
+}
+
+let sessionStartTime: number | null = null
+let scormFinished = false
+
+// ─── API ──────────────────────────────────────────────────────────────────────
+
+function getAPI(): SCORM12API | null {
+  if (window.API) return window.API
+  if (window.parent?.API) return window.parent.API
+  return null
+}
+
+function isConnected(): boolean {
+  return getAPI() !== null
+}
+
+// ─── Get / Set genérico con fallback a sessionStorage ────────────────────────
+
+export function getScormData(key: string): string {
+  const api = getAPI()
+  if (api) return api.LMSGetValue(key) ?? ''
+  return sessionStorage.getItem(key) ?? ''
+}
+
+export function setScormData(key: string, value: string): boolean {
+  const api = getAPI()
+  if (api) {
+    const ok = api.LMSSetValue(key, value)
+    api.LMSCommit('')
+    return ok === 'true'
+  }
+  sessionStorage.setItem(key, value)
+  return true
+}
+
+// ─── Inicialización ───────────────────────────────────────────────────────────
+
+export function initSCORM(): void {
+  const api = getAPI()
+  if (api) {
+    api.LMSInitialize('')
+    const status = api.LMSGetValue('cmi.core.lesson_status')
+    if (status === 'not attempted') {
+      api.LMSSetValue('cmi.core.lesson_status', 'incomplete')
+      api.LMSCommit('')
+    }
+  }
+  sessionStartTime = Date.now()
+}
+
+// ─── Lesson status ────────────────────────────────────────────────────────────
+
+export function getLessonStatus(): string {
+  return getScormData('cmi.core.lesson_status')
+}
+
+export function setLessonStatus(status: 'passed' | 'failed' | 'completed' | 'incomplete'): boolean {
+  return setScormData('cmi.core.lesson_status', status)
+}
+
+// ─── Lesson location ──────────────────────────────────────────────────────────
+
+export function getLessonLocation(): string {
+  return getScormData('cmi.core.lesson_location')
+}
+
+export function setLessonLocation(location: string): boolean {
+  return setScormData('cmi.core.lesson_location', location)
+}
+
+// ─── Score ────────────────────────────────────────────────────────────────────
+
+export function getScore(): number | null {
+  const val = getScormData('cmi.core.score.raw')
+  return val !== '' ? Number(val) : null
+}
+
+export function setScore(score: number, maxScore = 100, minScore = 0): void {
+  setScormData('cmi.core.score.raw', String(score))
+  setScormData('cmi.core.score.max', String(maxScore))
+  setScormData('cmi.core.score.min', String(minScore))
+}
+
+// ─── Suspend data ─────────────────────────────────────────────────────────────
+
+export function getSuspendData<T = unknown>(): T | null {
+  const val = getScormData('cmi.suspend_data')
+  if (!val) return null
+  try {
+    return JSON.parse(val) as T
+  } catch {
+    return null
+  }
+}
+
+export function setSuspendData(data: unknown): boolean {
+  return setScormData('cmi.suspend_data', JSON.stringify(data))
+}
+
+// ─── Student name ─────────────────────────────────────────────────────────────
+
+export function getStudentName(): string {
+  return getScormData('cmi.core.student_name')
+}
+
+// ─── Finish con session_time ──────────────────────────────────────────────────
+
+export function finishSCORM(): void {
+  if (scormFinished) return
+  const api = getAPI()
+  if (!api) return
+
+  if (sessionStartTime) {
+    const elapsed = Math.floor((Date.now() - sessionStartTime) / 1000)
+    const hh = String(Math.floor(elapsed / 3600)).padStart(2, '0')
+    const mm = String(Math.floor((elapsed % 3600) / 60)).padStart(2, '0')
+    const ss = String(elapsed % 60).padStart(2, '0')
+    api.LMSSetValue('cmi.core.session_time', `${hh}:${mm}:${ss}`)
+  }
+
+  api.LMSCommit('')
+  api.LMSFinish('')
+  scormFinished = true
+}
+
+// ─── Helper: completar lección ────────────────────────────────────────────────
+
+export function completeLesson(): void {
+  setLessonStatus('completed')
+}
+
+export { isConnected }
@@ -0,0 +1,20 @@
+export interface Pregunta {
+  id: number
+  pregunta: string
+  opciones: string[]
+  correcta: number
+  retroalimentacion: string
+}
+
+export interface Categoria {
+  id: number
+  nombre: string
+  color: string
+  emoji: string
+  preguntas: Pregunta[]
+}
+
+export interface PreguntasData {
+  categorias: Categoria[]
+  bancoGenerico: Pregunta[]
+}
@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+declare module '*.png' {
+  const src: string
+  export default src
+}
+
+declare module '*.svg' {
+  const src: string
+  export default src
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>