Merge pull request #257 from Arquisoft/fix/webapp/game-refresh-page

fix: re-refreshing not handling correctly page updates
Arquisoft · Apr 21, 2024 · e611792 · e611792
2 parents aa257f3 + 84f989a
commit e611792
Showing 1 changed file with 34 additions and 24 deletions.
diff --git 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,32 +69,33 @@ 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) => {
+        if (hasAnswered || startsGame) {
+            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)
+                    }
                 }
             }
         }
-    }, [setTimeStartRound, setRoundDuration, setRoundNumber,
+    }, [setTimeStartRound, setRoundDuration, setRoundNumber, hasAnswered,
         assignQuestion, setLoading, navigate, correctAnswers, roundNumber])
 
     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);
@@ -113,6 +115,7 @@ export default function Game() {
             }
             setNextDisabled(true);
             setSelectedOption(null);
+            setLoading(true)
             await nextRound();
 
         } catch (error) {
@@ -131,11 +134,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 +156,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)
@@ -160,15 +167,18 @@ export default function Game() {
     useEffect(() => {
         let timeout;
         if (timeElapsed >= roundDuration && timeStartRound !== -1) {
-            timeout = setTimeout(() => nextRound(), 1000);
+            timeout = setTimeout(() => {
+                setHasAnswered(true);
+                nextRound();
+            }, 1000);
 
         } else {
             timeout = setTimeout(() => {
                 setTimeElapsed((prevTime) => prevTime + 1);
             }, 1000); 
         }
         return () => clearTimeout(timeout);
-    }, [timeElapsed, timeStartRound, roundDuration, nextRound]);
+    }, [timeElapsed, timeStartRound, roundDuration, nextRound, setHasAnswered]);
 
 
     return (
@@ -185,7 +195,7 @@ export default function Game() {
             </CircularProgress>
             {
                 (!loading && hasImage) && <Flex maxH={"40vh"} 
-                                            maxW={"40vh"} justify={"center"}>
+                                            maxW={"40vw"} justify={"center"}>
                 <Image src={question.image} alt={t("game.image")}></Image>
                 </Flex>
             }