fix: reparando SpaceComputer con un error de loop

Author: leodev182

src/App.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import { EventConfigProvider } from "./context/EventConfigContext";
 import { MainLayout } from "./components/Layout/MainLayout";
 import { IntroScreen } from "./components/Intro/IntroScreen";
 import { HypothesisScreen } from "./components/Hypothesis/HypothesisScreen";
@@ -18,14 +17,22 @@ import type { GamePhase, Hypothesis } from "./types";
 import { Phase1Collider } from "./components/Games/Phase1Collider/Phase1Collider";
 import { Phase2Equation } from "./components/Games/Phase2Equation/Phase2Equation";
 import { Phase3Synthesis } from "./components/Games/Phase3Synthesis/Phase3Synthesis";
-import { logger } from "./utils/logger";
+import { logger } from "@/utils/logger";
 
-function AppContent() {
+function App() {
   const [currentPhase, setCurrentPhase] = useState<GamePhase>("intro");
   const [isSaving, setIsSaving] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
 
-  // ✅ HOOKS SIEMPRE AL INICIO - Antes de cualquier return condicional
+  // Detectar si estamos en la ruta de admin
+  const isAdminRoute = window.location.pathname === "/admin-stats-2025";
+
+  // Si es ruta admin, mostrar AdminPanel directamente
+  if (isAdminRoute) {
+    return <AdminPanel />;
+  }
+
+  // Inicializar draft al montar el componente
   useEffect(() => {
     if (!hasDraft()) {
       initializeDraft();
@@ -36,41 +43,42 @@ function AppContent() {
     setIsInitialized(true);
   }, []);
 
-  // Detectar si estamos en la ruta de admin
-  const isAdminRoute = window.location.pathname === "/admin-stats-2025";
-
-  // Si es ruta admin, mostrar AdminPanel directamente
-  if (isAdminRoute) {
-    return <AdminPanel />;
-  }
-
   const handleStart = () => {
     setCurrentPhase("hypothesis");
   };
 
   const handleHypothesisSelect = (hypothesis: Hypothesis) => {
+    // Sobrescribir hipótesis en localStorage (permite cambiar de opinión)
     updateHypothesis(hypothesis);
     logger.log(`✅ Hipótesis ${hypothesis} guardada en draft`);
+
+    // Navegar a InputScreen
     setCurrentPhase("input");
   };
 
   const handleInputSubmit = async (data: InputData) => {
     logger.log("📝 Datos de input guardados en draft:", data);
 
+    // Verificar si el draft está listo para enviar
     const draft = getDraft();
 
     if (isDraftPartiallyComplete(draft)) {
+      // Si ya tiene todo lo necesario (hipótesis + datos personales)
+      // Ir a los juegos primero
       setCurrentPhase("collider");
+
       logger.log("🎮 Navegando a juegos. Draft completo:", draft);
     } else {
       alert("Faltan datos. Por favor completa el formulario.");
     }
   };
 
   const handleInputBack = () => {
+    // El draft se mantiene, solo volvemos a la fase anterior
     setCurrentPhase("hypothesis");
   };
 
+  // Función para enviar TODO a Firebase (llamar después de los 3 juegos)
   const handleFinalSubmit = async () => {
     setIsSaving(true);
 
@@ -80,10 +88,16 @@ function AppContent() {
       logger.log("🚀 Enviando predicción completa a Firebase...");
       logger.log("📦 Draft final:", draft);
 
+      // Enviar a Firebase
       await submitPrediction(draft);
 
       logger.log("✅ Predicción enviada exitosamente");
 
+      // IMPORTANTE: NO limpiar el draft todavía
+      // SuccessScreen lo necesita para mostrar los datos
+      // Se limpiará cuando el usuario cierre o recargue
+
+      // Navegar a pantalla de éxito
       setCurrentPhase("submitted");
     } catch (error) {
       logger.error("❌ Error al enviar predicción:", error);
@@ -93,18 +107,24 @@ function AppContent() {
     }
   };
 
+  // Handlers para los juegos
   const handleColliderComplete = (score: number) => {
     logger.log(`🎮 Collider completado: ${score} pts`);
+    // updateGameScore("collider", score) ya se llama dentro del juego
     setCurrentPhase("equation");
   };
 
   const handleEquationComplete = (score: number) => {
     logger.log(`🎮 Equation completado: ${score} pts`);
+    // updateGameScore("equation", score) ya se llama dentro del juego
     setCurrentPhase("synthesis");
   };
 
   const handleSynthesisComplete = async (score: number) => {
     logger.log(`🎮 Synthesis completado: ${score} pts`);
+    // updateGameScore("synthesis", score) ya se llama dentro del juego
+
+    // Después del último juego, enviar TODO a Firebase
     await handleFinalSubmit();
   };
 
@@ -120,6 +140,7 @@ function AppContent() {
 
   return (
     <MainLayout currentPhase={currentPhase}>
+      {/* Loading overlay cuando se envía a Firebase */}
       {isSaving && (
         <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm">
           <div className="bg-gray-900 border-2 border-cyan-500 rounded-xl p-8 text-center">
@@ -134,33 +155,38 @@ function AppContent() {
         </div>
       )}
 
+      {/* Fase Intro */}
       {currentPhase === "intro" && <IntroScreen onStart={handleStart} />}
+
+      {/* Fase Hypothesis */}
       {currentPhase === "hypothesis" && (
         <HypothesisScreen onHypothesisSelect={handleHypothesisSelect} />
       )}
+
+      {/* Fase Input */}
       {currentPhase === "input" && (
         <InputScreen onSubmit={handleInputSubmit} onBack={handleInputBack} />
       )}
+
+      {/* Juego 1: Collider */}
       {currentPhase === "collider" && (
         <Phase1Collider onComplete={handleColliderComplete} />
       )}
+
+      {/* Juego 2: Equation */}
       {currentPhase === "equation" && (
         <Phase2Equation onComplete={handleEquationComplete} />
       )}
+
+      {/* Juego 3: Synthesis */}
       {currentPhase === "synthesis" && (
         <Phase3Synthesis onComplete={handleSynthesisComplete} />
       )}
+
+      {/* Pantalla de éxito - SuccessScreen */}
       {currentPhase === "submitted" && <SuccessScreen />}
     </MainLayout>
   );
 }
 
-function App() {
-  return (
-    <EventConfigProvider>
-      <AppContent />
-    </EventConfigProvider>
-  );
-}
-
 export default App;

src/components/Layout/SpaceComputer.tsx

@@ -1,16 +1,16 @@
 import { useMemo } from "react";
 import { useCountdown } from "../../hooks/useCountdown";
-import { useEventConfigContext } from "../../context/EventConfigContext";
+import { useEventConfig } from "../../hooks/useEventConfig";
 import type { GamePhase } from "../../types";
 
 interface SpaceComputerProps {
   currentPhase: GamePhase;
 }
 
 export function SpaceComputer({ currentPhase }: SpaceComputerProps) {
-  const { config } = useEventConfigContext();
+  const { config } = useEventConfig();
 
-  //  Memorizar la fecha target para evitar que cambie en cada render
+  // ✅ Memorizar la fecha target para evitar que cambie en cada render
   const targetDate = useMemo(() => {
     return (
       config?.revealDate || new Date("2025-10-26T19:00:00-03:00").getTime()

src/context/EventConfigContext.tsx

@@ -2,34 +2,22 @@ import { useState, useEffect } from "react";
 import { doc, getDoc } from "firebase/firestore";
 import { db } from "../lib/firebase";
 import type { EventConfig } from "../types";
-import { logger } from "../utils/logger";
-import { rateLimiter, RATE_LIMITS } from "../utils/rateLimiters";
+import { logger } from "@/utils/logger";
 
 export function useEventConfig() {
   const [config, setConfig] = useState<EventConfig | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    let isMounted = true;
-
     const fetchConfig = async () => {
-      // ✅ Verificar rate limit ANTES de hacer la petición
-      if (!rateLimiter.isAllowed("fetchConfig", RATE_LIMITS.CONFIG_FETCH)) {
-        logger.warn("⚠️ Rate limit: fetchConfig bloqueado temporalmente");
-        return;
-      }
-
       try {
         setLoading(true);
         setError(null);
 
         const docRef = doc(db, "config", "event");
         const docSnap = await getDoc(docRef);
 
-        // Solo actualizar si el componente sigue montado
-        if (!isMounted) return;
-
         if (docSnap.exists()) {
           setConfig(docSnap.data() as EventConfig);
           logger.log("✅ Configuración cargada desde Firestore");
@@ -38,25 +26,16 @@ export function useEventConfig() {
           logger.error("❌ Documento config/event no existe");
         }
       } catch (err) {
-        if (!isMounted) return;
-
         const errorMessage =
           err instanceof Error ? err.message : "Error desconocido";
         setError(`Error al cargar configuración: ${errorMessage}`);
         logger.error("❌ Error en useEventConfig:", err);
       } finally {
-        if (isMounted) {
-          setLoading(false);
-        }
+        setLoading(false);
       }
     };
 
     fetchConfig();
-
-    // Cleanup: marcar componente como desmontado
-    return () => {
-      isMounted = false;
-    };
   }, []);
 
   return { config, loading, error };

src/hooks/useEventConfig.ts

@@ -1,13 +1,8 @@
-import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 import { initSentry } from "./lib/sentry";
 
 initSentry();
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+createRoot(document.getElementById("root")!).render(<App />);