Fix timer does not stop if game has ended (closes #45)

SSoelvsten · Dec 2, 2022 · 9fb3fce · 9fb3fce
1 parent 2019b37
commit 9fb3fce
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/game/src/game-screen/game.tsx b/game/src/game-screen/game.tsx
@@ -273,6 +273,7 @@ const Game = ({ instance: { anagrams }, difficulty, language, accScore, round, o
     <>
         <div className="Game" tabIndex={0} onKeyDown={onKey} ref={divRef}>
             <ScoreBoard endTime={endTime}
+                        gameEnd={gameEnd}
                         language={language}
                         qualified={qualified}
                         score={accScore + currScore}

diff --git a/game/src/game-screen/scoreboard.tsx b/game/src/game-screen/scoreboard.tsx
@@ -7,14 +7,15 @@ import './scoreboard.scss';
 
 export interface ScoreBoardProps {
     endTime: number;
+    gameEnd: boolean;
     language: Language;
     qualified: boolean;
     score: number;
     round: number;
     onTimeout: () => void;
 };
 
-const ScoreBoard = ({ endTime, language, qualified, round, score, onTimeout }: ScoreBoardProps) => {
+const ScoreBoard = ({ endTime, gameEnd, language, qualified, round, score, onTimeout }: ScoreBoardProps) => {
     const isTimed: boolean = endTime !== Infinity && !isNaN(endTime);
 
     // ------------------------------------------------------------------------
@@ -41,21 +42,21 @@ const ScoreBoard = ({ endTime, language, qualified, round, score, onTimeout }: S
 
     // TODO: stop timer update when 'won'.
     useEffect(() => {
-        if (!isTimed) return;
+        if (!isTimed || gameEnd) return;
 
         const timerId = setInterval(() => {
             const tick = new Date().getTime();
             setCurrTime(tick);
         }, 50);
         return () => clearInterval(timerId);
-    }, [isTimed]);
+    }, [isTimed, gameEnd]);
 
     useEffect(() => {
-        if (!isTimed) return;
+        if (!isTimed || gameEnd) return;
 
         const timeLeft = endTime - currTime;
         if (timeLeft < 0) onTimeout();
-    }, [isTimed, currTime, endTime, onTimeout]);
+    }, [isTimed, gameEnd, currTime, endTime, onTimeout]);
 
     const timeLeft = endTime - currTime;
     const timeAlarm: boolean = 0 < timeLeft && timeLeft < 10 * 1000;