From 5bdb522d533e238f390622074fc1da393b852c31 Mon Sep 17 00:00:00 2001
From: "andres.sanjuan" <andres.sanjuan@espacio360.com.mx>
Date: Thu, 30 Jul 2026 14:38:25 -0600
Subject: [PATCH] feat: Ajustes tecnicos para ruleta y posicion de puntaje

---
 src/App.tsx                              |  5 ++++-
 src/components/game/Ruleta/RuletaSVG.tsx |  2 +-
 src/components/screens/Result.tsx        | 22 +++++++++++++++++++++-
 src/hooks/useRuleta.ts                   |  5 +++--
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1ae8fad..7b31d71 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ type Screen = 'intro' | 'cover' | 'game' | 'result'
 interface ResultState {
   aprobado: boolean
   sinIntentos: boolean
+  correctas: number
 }
 
 export default function App() {
@@ -23,6 +24,7 @@ export default function App() {
   const [resultState, setResultState] = useState<ResultState>({
     aprobado: false,
     sinIntentos: intentosAgotados(),
+    correctas: 0,
   })
 
   function handleIntroContinue() {
@@ -38,7 +40,7 @@ export default function App() {
     setScore(Math.round((correctas / 12) * 100), 100, 0)
     setLessonStatus(aprobado ? 'passed' : 'failed')
     finishSCORM()
-    setResultState({ aprobado, sinIntentos: intentosAgotados() })
+    setResultState({ aprobado, sinIntentos: intentosAgotados(), correctas })
     setScreen('result')
   }
 
@@ -108,6 +110,7 @@ export default function App() {
           <Result
             aprobado={resultState.aprobado}
             sinIntentos={resultState.sinIntentos}
+            correctas={resultState.correctas}
             onReintentar={handleReintentar}
           />
         </ScaleWrapper>
diff --git a/src/components/game/Ruleta/RuletaSVG.tsx b/src/components/game/Ruleta/RuletaSVG.tsx
index a7f596f..063d9c3 100644
--- a/src/components/game/Ruleta/RuletaSVG.tsx
+++ b/src/components/game/Ruleta/RuletaSVG.tsx
@@ -72,7 +72,7 @@ export default function RuletaSVG({ categorias, rotacion, isSpinning, onClick }:
     <div className="relative flex flex-col items-center justify-center w-full select-none">
 
       {/* ─── Puntero ─── */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 z-20" style={{ marginTop: '0px' }}>
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 z-20" style={{ marginTop: '20px' }}>
         <img
           src="./img/indicador.png"
           alt="Indicador"
diff --git a/src/components/screens/Result.tsx b/src/components/screens/Result.tsx
index 40fcbb9..f8d04a3 100644
--- a/src/components/screens/Result.tsx
+++ b/src/components/screens/Result.tsx
@@ -1,10 +1,11 @@
 interface ResultProps {
   aprobado: boolean
   sinIntentos: boolean
+  correctas: number
   onReintentar: () => void
 }
 
-export default function Result(_props: ResultProps) {
+export default function Result({ correctas }: ResultProps) {
   return (
     <div className="flex w-full h-full">
       {/* ─── Columna izquierda 50% ─── */}
@@ -57,6 +58,25 @@ export default function Result(_props: ResultProps) {
             </p>
           </div>
         </div>
+
+        {/* Calificación */}
+        <div
+          className="px-8 py-4 rounded-xl text-center mt-4"
+          style={{
+            backgroundColor: '#ed1f24',
+            width: '90%',
+            alignSelf: 'center',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+          }}
+        >
+          <p className="text-white font-bold" style={{ fontSize: '28px' }}>
+            Calificación: {Math.round((correctas / 12) * 100)}%
+          </p>
+          <p className="text-white mt-1" style={{ fontSize: '28px', opacity: 0.9 }}>
+            {correctas} de 12 aciertos
+          </p>
+        </div>
       </div>
 
       {/* ─── Columna derecha 50% ─── */}
diff --git a/src/hooks/useRuleta.ts b/src/hooks/useRuleta.ts
index 7f2c85b..1120176 100644
--- a/src/hooks/useRuleta.ts
+++ b/src/hooks/useRuleta.ts
@@ -49,10 +49,11 @@ function crearPool(): Record<number, Pregunta[]> {
 
 export function useRuleta() {
   const poolInicial = useMemo(() => crearPool(), [])
+  const rotacionInicial = useMemo(() => Math.random() * 360, [])
 
   const [estado, setEstado] = useState<EstadoJuego>({
     isSpinning: false,
-    rotacion: 0,
+    rotacion: rotacionInicial,
     preguntaActual: null,
     categoriaActual: null,
     mostrarFeedback: false,
@@ -66,7 +67,7 @@ export function useRuleta() {
     tiempoRestante: TIEMPO_LIMITE,
   })
 
-  const rotacionRef = useRef(0)
+  const rotacionRef = useRef(rotacionInicial)
   const isSpinningRef = useRef(false)
   const completadoRef = useRef(false)
   const usadasRef = useRef<Record<number, number>>({})