From 773decba93c16141b73e34cb51e3c3226d51f92b Mon Sep 17 00:00:00 2001 From: jjgancfer Date: Sat, 20 Apr 2024 12:05:14 +0200 Subject: [PATCH 1/4] fix: re-refreshing not handling correctly page updates --- webapp/src/pages/Game.jsx | 55 ++++++++++++++++++++++++--------------- 1 file changed, 34 insertions(+), 21 deletions(-) diff --git a/webapp/src/pages/Game.jsx b/webapp/src/pages/Game.jsx index f437db8f..65399722 100644 --- a/webapp/src/pages/Game.jsx +++ b/webapp/src/pages/Game.jsx @@ -25,6 +25,7 @@ export default function Game() { const [roundDuration, setRoundDuration] = useState(0); const [maxRoundNumber, setMaxRoundNumber] = useState(9); const [hasImage, setHasImage] = useState(false); + const [hasAnswered, setHasAnswered] = useState(false); const { t, i18n } = useTranslation(); const [isMenuOpen, setIsMenuOpen] = useState(false); @@ -68,26 +69,29 @@ export default function Game() { setNextDisabled(!anyOptionSelected); }; - const startNewRound = useCallback(async (gameId) => { - try{ - const result = await startRound(gameId); - setTimeStartRound(new Date(result.data.round_start_time).getTime()); - setRoundNumber(result.data.actual_round ) - setRoundDuration(result.data.round_duration); - await assignQuestion(gameId); - setLoading(false); - } - catch(error){ - console.log(error) - if(error.response.status === 409){ - if(roundNumber >= 9){ - navigate("/dashboard/game/results", { state: { correctAnswers: correctAnswers } }); - } else { - await assignQuestion(gameId) + const startNewRound = useCallback(async (gameId, startsGame) => { + console.log(`pepe desde fuera ${startsGame} y ${hasAnswered}`) + if (hasAnswered || startsGame) { + try{ + console.log("pepe") + const result = await startRound(gameId); + setTimeStartRound(new Date(result.data.round_start_time).getTime()); + setRoundNumber(result.data.actual_round ) + setRoundDuration(result.data.round_duration); + await assignQuestion(gameId); + setLoading(false); + } catch(error){ + console.log(error) + if(error.response.status === 409){ + if(roundNumber >= 9){ + navigate("/dashboard/game/results", { state: { correctAnswers: correctAnswers } }); + } else { + await assignQuestion(gameId) + } } } } - }, [setTimeStartRound, setRoundDuration, setRoundNumber, + }, [setTimeStartRound, setRoundDuration, setRoundNumber, hasAnswered, assignQuestion, setLoading, navigate, correctAnswers, roundNumber]) const nextRound = useCallback(async () => { @@ -113,6 +117,7 @@ export default function Game() { } setNextDisabled(true); setSelectedOption(null); + setLoading(true) await nextRound(); } catch (error) { @@ -131,11 +136,15 @@ export default function Game() { setTimeStartRound(new Date(newGameResponse.round_start_time).getTime()); setRoundDuration(newGameResponse.round_duration) setMaxRoundNumber(newGameResponse.rounds); + setRoundNumber(newGameResponse.actual_round); + try{ await assignQuestion(newGameResponse.id); + setCorrectAnswers(newGameResponse.correctly_answered_questions); setLoading(false); + setTimeElapsed(Math.round((Date.now() - new Date(newGameResponse.round_start_time).getTime()) / 1000)); }catch(error){ - startNewRound(newGameResponse.id); + startNewRound(newGameResponse.id, true); } } else { navigate("/dashboard"); @@ -149,7 +158,7 @@ export default function Game() { initializeGame(); } }, [setGameId, gameId, setTimeStartRound, setRoundDuration, setMaxRoundNumber, - setQuestion, setLoading, startNewRound, navigate, assignQuestion]); + setQuestion, setLoading, startNewRound, navigate, assignQuestion, timeStartRound]); useEffect(() => { let timeout; if (showConfetti) @@ -159,8 +168,12 @@ export default function Game() { useEffect(() => { let timeout; + console.log(timeElapsed >= roundDuration && timeStartRound !== -1); if (timeElapsed >= roundDuration && timeStartRound !== -1) { - timeout = setTimeout(() => nextRound(), 1000); + timeout = setTimeout(() => { + setHasAnswered(true); + nextRound(); + }, 1000); } else { timeout = setTimeout(() => { @@ -168,7 +181,7 @@ export default function Game() { }, 1000); } return () => clearTimeout(timeout); - }, [timeElapsed, timeStartRound, roundDuration, nextRound]); + }, [timeElapsed, timeStartRound, roundDuration, nextRound, setHasAnswered]); return ( From b4f026c82af0ce879d038467e7a5633565deeb6a Mon Sep 17 00:00:00 2001 From: jjgancfer Date: Sun, 21 Apr 2024 10:53:00 +0200 Subject: [PATCH 2/4] fix: correctly answered questions not being passed correctly --- webapp/src/pages/Game.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webapp/src/pages/Game.jsx b/webapp/src/pages/Game.jsx index 65399722..3ce4f315 100644 --- a/webapp/src/pages/Game.jsx +++ b/webapp/src/pages/Game.jsx @@ -96,8 +96,8 @@ export default function Game() { const nextRound = useCallback(async () => { if (roundNumber + 1 > maxRoundNumber) { - await getGameDetails(gameId); - navigate("/dashboard/game/results", { state: { correctAnswers: correctAnswers } }); + let gameDetails = (await getGameDetails(gameId)).data; + navigate("/dashboard/game/results", { state: { correctAnswers: gameDetails.correctly_answered_questions } }); } else { setAnswer({}); setHasImage(false); From 4425e2872820f5c1714855dfbe044801d7d23d48 Mon Sep 17 00:00:00 2001 From: jjgancfer Date: Sun, 21 Apr 2024 12:35:38 +0200 Subject: [PATCH 3/4] fix: replace vh for vw --- webapp/src/pages/Game.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/pages/Game.jsx b/webapp/src/pages/Game.jsx index 3ce4f315..ea35cab5 100644 --- a/webapp/src/pages/Game.jsx +++ b/webapp/src/pages/Game.jsx @@ -198,7 +198,7 @@ export default function Game() { { (!loading && hasImage) && + maxW={"40vw"} justify={"center"}> {t("game.image")} } From 84f989ac4048eeb000274f801c326c9b3d132a96 Mon Sep 17 00:00:00 2001 From: jjgancfer Date: Sun, 21 Apr 2024 12:42:13 +0200 Subject: [PATCH 4/4] chore: remove console.log --- webapp/src/pages/Game.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/webapp/src/pages/Game.jsx b/webapp/src/pages/Game.jsx index ea35cab5..63d941f8 100644 --- a/webapp/src/pages/Game.jsx +++ b/webapp/src/pages/Game.jsx @@ -70,10 +70,8 @@ export default function Game() { }; const startNewRound = useCallback(async (gameId, startsGame) => { - console.log(`pepe desde fuera ${startsGame} y ${hasAnswered}`) if (hasAnswered || startsGame) { try{ - console.log("pepe") const result = await startRound(gameId); setTimeStartRound(new Date(result.data.round_start_time).getTime()); setRoundNumber(result.data.actual_round ) @@ -168,7 +166,6 @@ export default function Game() { useEffect(() => { let timeout; - console.log(timeElapsed >= roundDuration && timeStartRound !== -1); if (timeElapsed >= roundDuration && timeStartRound !== -1) { timeout = setTimeout(() => { setHasAnswered(true);