Add timer logic

src/modules/GameWithHooks/GameWithHooks.tsx

@@ -12,6 +12,7 @@ import { useGame } from './useGame';
 export const GameWithHooks: FC = () => {
   const {
     level,
+    time,
     isGameOver,
     isWin,
     settings,
@@ -31,7 +32,7 @@ export const GameWithHooks: FC = () => {
       </Top>
       <GameArea>
         <Scoreboard
-          time="0"
+          time={String(time)}
           bombs={String(bombs)}
           levels={GameLevels as unknown as string[]}
           defaultLevel={level}

src/modules/GameWithHooks/__snapshots__/GameWithHooks.test.tsx.snap

@@ -217,7 +217,7 @@ exports[`GameWithHooks test cases Render game field by default 1`] = `
         <div
           class="emotion-8"
         >
-          0
+          undefined
         </div>
         <div>
           <select

src/modules/GameWithHooks/useGame.test.ts

@@ -206,4 +206,80 @@ describe('useGame test cases', () => {
       expect(isGameOver).toBe(true);
     });
   });
+  describe('Scoreboard behavior - timer and bomb counter', () => {
+    it('Timer should start by click to a cell', () => {
+      jest.useFakeTimers();
+
+      const { result } = renderHook(useGame);
+
+      const timeMustPass = 5;
+
+      for (let i = 0; i < timeMustPass; i++) {
+        act(() => {
+          jest.advanceTimersByTime(1000);
+        });
+      }
+
+      // Timer shouldn't works before game has started
+      expect(result.current.time).toBe(0);
+
+      act(() => result.current.onClick([0, 0]));
+
+      for (let i = 0; i < timeMustPass; i++) {
+        act(() => {
+          jest.advanceTimersByTime(1000);
+        });
+      }
+
+      expect(result.current.time).toBe(5);
+    });
+    it('Timer should start by mark a cell by a flag', () => {
+      jest.useFakeTimers();
+
+      const { result } = renderHook(useGame);
+
+      const timeMustPass = 5;
+
+      for (let i = 0; i < timeMustPass; i++) {
+        act(() => {
+          jest.advanceTimersByTime(1000);
+        });
+      }
+
+      // Timer shouldn't works before game has started
+      expect(result.current.time).toBe(0);
+
+      act(() => result.current.onContextMenu([0, 0]));
+
+      for (let i = 0; i < timeMustPass; i++) {
+        act(() => {
+          jest.advanceTimersByTime(1000);
+        });
+      }
+
+      expect(result.current.time).toBe(timeMustPass);
+    });
+    it('Time should reset value when onReset have been called', () => {
+      jest.useFakeTimers();
+
+      const { result } = renderHook(useGame);
+
+      expect(result.current.time).toBe(0);
+
+      act(() => result.current.onContextMenu([0, 0]));
+
+      const timeMustPass = 5;
+      for (let i = 0; i < timeMustPass; i++) {
+        act(() => {
+          jest.advanceTimersByTime(1000);
+        });
+      }
+
+      expect(result.current.time).toBe(timeMustPass);
+
+      act(result.current.onReset);
+
+      expect(result.current.time).toBe(0);
+    });
+  });
 });

src/modules/GameWithHooks/useGame.ts

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 
 import {
   Field,
@@ -14,6 +14,7 @@ import { LevelNames, GameSettings } from '@/modules/GameSettings';
 
 interface ReturnType {
   level: LevelNames;
+  time: number;
   isGameOver: boolean;
   isWin: boolean;
   settings: [number, number];
@@ -30,6 +31,9 @@ export const useGame = (): ReturnType => {
 
   const [isGameOver, setIsGameOver] = useState(false);
   const [isWin, setIsWin] = useState(false);
+  const [isGameStarted, setIsGameStarted] = useState(false);
+
+  const [time, setTime] = useState(0);
 
   const setGameOver = (isSolved = false) => {
     setIsGameOver(true);
@@ -46,9 +50,28 @@ export const useGame = (): ReturnType => {
     fieldGenerator(size, bombs / (size * size))
   );
 
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+
+    if (isGameStarted) {
+      interval = setInterval(() => {
+        setTime(time + 1);
+      }, 1000);
+
+      if (isGameOver) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isGameOver, isGameStarted, time]);
+
   useMemo(() => console.log(gameField), []);
 
   const onClick = (coords: Coords) => {
+    !isGameStarted && setIsGameStarted(true);
     try {
       const [newPlayerField, isSolved, flagCounter] = openCell(
         coords,
@@ -66,6 +89,7 @@ export const useGame = (): ReturnType => {
   };
 
   const onContextMenu = (coords: Coords) => {
+    !isGameStarted && setIsGameStarted(true);
     const [newPlayerField, isSolved, flagCounter] = setFlag(
       coords,
       playerField,
@@ -88,6 +112,8 @@ export const useGame = (): ReturnType => {
     setPlayerField([...newPlayerField]);
     setIsGameOver(false);
     setIsWin(false);
+    setIsGameStarted(false);
+    setTime(0);
   };
 
   const onChangeLevel = (level: LevelNames) => {
@@ -100,6 +126,7 @@ export const useGame = (): ReturnType => {
 
   return {
     level,
+    time,
     isGameOver,
     isWin,
     settings: [size, bombs],