se han creado refencias a las funciones que utilizas en el evento sta…

…rtgame para no agregarle depencencias al useffect y hacer que la app no funcione
Arquisoft · Apr 9, 2024 · 5ba49a2 · 5ba49a2
1 parent e4e21e6
commit 5ba49a2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 23 deletions.
diff --git a/webapp/src/components/game/timers/Timer.jsx b/webapp/src/components/game/timers/Timer.jsx
@@ -7,6 +7,22 @@ export const Timer = React.memo(({ onTimeout, timeout = 30000, resetTimer, darkM
     const [progress, setProgress] = useState(100); // Inicia el progreso en 100%
     const intervalRef = useRef(null);
 
+    const resetTimerFunction = () => {
+        clearInterval(intervalRef.current);
+        setProgress(100);
+        const startTime = Date.now();
+        intervalRef.current = setInterval(() => {
+            const elapsedTime = Date.now() - startTime;
+            const remainingTime = timeout - elapsedTime;
+            const remainingProgress = (remainingTime / timeout) * 100;
+            setProgress(remainingProgress > 0 ? remainingProgress : 0);
+            if (remainingProgress <= 0) {
+                clearInterval(intervalRef.current);
+                onTimeout();
+            }
+        }, 1000); // Actualiza el progreso cada segundo
+    };
+
     useEffect(() => {
         resetTimer.current = resetTimerFunction;
     }, [resetTimer]);
@@ -32,21 +48,7 @@ export const Timer = React.memo(({ onTimeout, timeout = 30000, resetTimer, darkM
         return () => clearInterval(intervalRef.current);
     }, [timeout, onTimeout, gameFinish]);
 
-    const resetTimerFunction = () => {
-        clearInterval(intervalRef.current);
-        setProgress(100);
-        const startTime = Date.now();
-        intervalRef.current = setInterval(() => {
-            const elapsedTime = Date.now() - startTime;
-            const remainingTime = timeout - elapsedTime;
-            const remainingProgress = (remainingTime / timeout) * 100;
-            setProgress(remainingProgress > 0 ? remainingProgress : 0);
-            if (remainingProgress <= 0) {
-                clearInterval(intervalRef.current);
-                onTimeout();
-            }
-        }, 1000); // Actualiza el progreso cada segundo
-    };
+
 
     const color = useColorModeValue(
         progress > 66.6 ? "green.400" : progress > 33.3 ? "orange.400" : "red.400",

diff --git a/webapp/src/components/rooms/Room.js b/webapp/src/components/rooms/Room.js
@@ -1,4 +1,4 @@
-import React, { useState,useEffect } from 'react';
+import React, { useState,useEffect,useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useLocation } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
@@ -26,6 +26,16 @@ function Room({ darkMode }) {
   //para el mensaje del ganador 
   const [setIsOpen] = useState(false);
 
+  const endGameRef = useRef(endGame);
+  const navigateRef = useRef(navigate);
+  const winnerRef = useRef(winner);
+  //para evitar error despligue 
+    useEffect(() => {
+      endGameRef.current = endGame;
+      navigateRef.current = navigate;
+      winnerRef.current = winner;
+  }, [endGame, navigate, winner]);
+
   useEffect(() => {
 
     socket.on('currentUsers', (users) => {
@@ -39,15 +49,15 @@ function Room({ darkMode }) {
 
     socket.on('gameStarted', (questionsServer) => {
       console.log('Juego iniciado, preguntas recibidas : ', questionsServer);
-
+      
       let room={
-        getQuestions:questionsServer,
-        winner:function (){
-          return winner;
-        },
-        endGame:endGame,
+          getQuestions:questionsServer,
+          winner:function (){
+              return winnerRef.current;
+          },
+          endGame:endGameRef.current,
       }
-      setRoomGame(new RoomGame(room, navigate));
+      setRoomGame(new RoomGame(room, navigateRef.current));
 
       setGameStarted(true);
     });