Nick/on click on reset

src/modules/GameWithHooks/GameWithHooks.test.tsx

@@ -45,6 +45,8 @@ describe('GameWithHooks test cases', () => {
 
       expect(screen.getAllByRole('cell', { name: String(1) })).toHaveLength(1);
     });
+  });
+  describe('OnClick with OnChangeGameLevel and OnReset', () => {
     it('Check click to the cell when the level is changed', () => {
       render(<GameWithHooks />);
       expect(screen.getAllByRole('cell')).toHaveLength(81);
@@ -77,4 +79,35 @@ describe('GameWithHooks test cases', () => {
       expect(screen.getAllByRole('cell', { name: String(h) })).toHaveLength(81);
     });
   });
+  describe('Game over behavior', () => {
+    it('Player loose the game', () => {
+      render(<GameWithHooks />);
+
+      userEvent.click(screen.getByTestId('0,8'));
+      expect(screen.getAllByRole('cell', { name: String(1) })).toHaveLength(1);
+
+      userEvent.click(screen.getByTestId('0,0'));
+      expect(screen.getAllByRole('cell', { name: String(e) })).toHaveLength(18);
+
+      userEvent.click(screen.getByTestId('0,7'));
+
+      const gameLoosePopup = screen.getByText('🙁');
+
+      expect(gameLoosePopup).toBeInTheDocument();
+
+      expect(screen.queryAllByRole('cell', { name: String(h) })).toHaveLength(
+        0
+      );
+      expect(screen.getAllByRole('cell', { name: String(e) })).toHaveLength(27);
+      expect(screen.getAllByRole('cell', { name: String(1) })).toHaveLength(30);
+      expect(screen.getAllByRole('cell', { name: String(2) })).toHaveLength(12);
+      expect(screen.getAllByRole('cell', { name: String(3) })).toHaveLength(2);
+
+      userEvent.click(gameLoosePopup);
+
+      expect(screen.getAllByRole('cell', { name: String(h) })).toHaveLength(81);
+
+      expect(screen.queryByText('🙁')).not.toBeInTheDocument();
+    });
+  });
 });

src/modules/GameWithHooks/GameWithHooks.tsx

@@ -19,6 +19,9 @@ import { GameArea, Wrapper, GameOver } from '@/components/Game';
 export const GameWithHooks: FC = () => {
   const [level, setLevel] = useState<LevelNames>('beginner');
 
+  const [isGameOver, setIsGameOver] = useState(false);
+  const [isWin, setIsWin] = useState(false);
+
   const [size, bombs] = GameSettings[level];
 
   const [playerField, setPlayerField] = useState<Field>(
@@ -30,8 +33,13 @@ export const GameWithHooks: FC = () => {
   );
 
   const onClick = (coords: Coords) => {
-    const newPlayerField = openCell(coords, playerField, gameField);
-    setPlayerField([...newPlayerField]);
+    try {
+      const newPlayerField = openCell(coords, playerField, gameField);
+      setPlayerField([...newPlayerField]);
+    } catch (e) {
+      setPlayerField([...gameField]);
+      setIsGameOver(true);
+    }
   };
 
   const resetHandler = ([size, bombs]: [number, number]) => {
@@ -43,6 +51,8 @@ export const GameWithHooks: FC = () => {
 
     setGameField([...newGameField]);
     setPlayerField([...newPlayerField]);
+    setIsGameOver(false);
+    setIsWin(false);
   };
 
   const onChangeLevel = ({
@@ -63,13 +73,13 @@ export const GameWithHooks: FC = () => {
       <GameArea>
         <Scoreboard
           time="0"
-          bombs="10"
+          bombs={String(bombs)}
           levels={GameLevels as unknown as string[]}
           defaultLevel={level}
           onChangeLevel={onChangeLevel}
           onReset={onReset}
         />
-        <GameOver onClick={() => null} isWin={true} />
+        {isGameOver && <GameOver onClick={onReset} isWin={isWin} />}
         <Grid onClick={onClick} onContextMenu={() => null}>
           {playerField}
         </Grid>