Merge pull request #56 from Chessweeper/date-timer

Date timer

Author: mbrinkl

src/components/Timer.tsx

@@ -15,44 +15,44 @@ export interface TimerRefAttributes {
 
 export const Timer = forwardRef<TimerRefAttributes>((_, ref): JSX.Element => {
   const { ctx } = useBoardContext();
-  const [time, setTime] = useState(0);
+  const [start, setStart] = useState(0);
+  const [now, setNow] = useState(0);
   const intervalRef = useRef<NodeJS.Timer | null>(null);
 
   useImperativeHandle(
     ref,
     () => ({
       start: () => {
         if (!intervalRef.current) {
+          setStart(Date.now());
+          setNow(Date.now());
           const intervalID = setInterval(() => {
-            setTime((prev) => prev + 1);
-          }, 10);
+            setNow(Date.now());
+          }, 100);
           intervalRef.current = intervalID;
         }
       },
 
       isRunning: () => intervalRef.current !== null,
 
       getTime: () => {
-        return time;
+        return Math.floor((now - start) / 10);
       },
     }),
-    [time]
+    [now, start]
   );
 
   useEffect(() => {
     if (ctx.gameover && intervalRef.current) {
       clearInterval(intervalRef.current);
+      setNow(Date.now());
       intervalRef.current = null;
     }
   }, [ctx.gameover, intervalRef]);
 
-  return (
-    <h1 id="timer">
-      {Math.floor(time / 100)
-        .toString()
-        .padStart(3, "0")}
-    </h1>
-  );
+  const time = Math.floor((now - start) / 1000);
+
+  return <h1 id="timer">{time.toString().padStart(3, "0")}</h1>;
 });
 
 Timer.displayName = "Timer";

test/components/Timer.test.tsx

@@ -30,7 +30,9 @@ describe("Timer tests", () => {
       </BoardContext.Provider>
     );
 
-    timerRef.current.start();
+    act(() => {
+      timerRef.current.start();
+    });
 
     expect(timerRef.current.isRunning()).toBe(true);
   });
@@ -44,9 +46,11 @@ describe("Timer tests", () => {
       </BoardContext.Provider>
     );
 
-    timerRef.current.start();
-    boardContext.ctx.gameover = { isWin: true };
+    act(() => {
+      timerRef.current.start();
+    });
 
+    boardContext.ctx.gameover = { isWin: true };
     rerender(
       <BoardContext.Provider value={boardContext}>
         <Timer ref={timerRef} />
@@ -65,9 +69,8 @@ describe("Timer tests", () => {
       </BoardContext.Provider>
     );
 
-    timerRef.current.start();
-
     act(() => {
+      timerRef.current.start();
       vi.advanceTimersByTime(5000);
     });
 
@@ -85,9 +88,8 @@ describe("Timer tests", () => {
       </BoardContext.Provider>
     );
 
-    timerRef.current.start();
-
     act(() => {
+      timerRef.current.start();
       vi.advanceTimersByTime(5000);
     });