diff --git a/webapp/src/components/game/timers/Timer.jsx b/webapp/src/components/game/timers/Timer.jsx index fc69d4e3..93fb5f75 100644 --- 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 index c3b11de0..e18cb0fc 100644 --- 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); });