Counter only runs when the player must guess

simonlc · Dec 8, 2023 · 747140e · 747140e
1 parent 949c72c
commit 747140e
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -103,7 +103,7 @@ export default function App() {
         </div>
         <div>
           <h1>Country Guesser</h1>
-          <Timer gameRunning={showGameOver === false} />
+          <Timer gameRunning={showAnswer === null && showGameOver === false} />
         </div>
         <div>
           <div>Streak: {streak}</div>

diff --git a/src/Timer.tsx b/src/Timer.tsx
@@ -5,17 +5,16 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 export function Timer({ gameRunning }) {
   const modal = useModal(IntroModal);
   const [isRunning, setIsRunning] = useState(false);
+  const startTime = useRef(Date.now());
 
   const timerRef = useRef<HTMLParagraphElement>(null);
 
   useEffect(() => {
     let intervalId: number;
-    let startTime = Date.now();
-    let time = Date.now();
     if (isRunning) {
       // setting time from 0 to 1 every 10 milisecond using javascript setInterval method
       intervalId = setInterval(() => {
-        time = Date.now() - startTime;
+        const time = Date.now() - startTime.current;
         const hours = Math.floor(time / 3600000);
         const minutes = Math.floor((time % 3600000) / 60000);
         const seconds = Math.floor((time % 60000) / 1000);