From 5e3df07f86ec20f5e998a0d4650c93675bbb5338 Mon Sep 17 00:00:00 2001
From: Muhammad Zourdy <zhafarmuhammad12@gmail.com>
Date: Tue, 9 Aug 2022 11:57:22 +0200
Subject: [PATCH] Add game-over logic situation

---
 src/components/game-area/game-over.tsx      |  8 ++++++--
 src/modules/GameWithHooks/GameWithHooks.tsx | 19 ++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/game-area/game-over.tsx b/src/components/game-area/game-over.tsx
index c5f4ad57..8a41ec9a 100644
--- a/src/components/game-area/game-over.tsx
+++ b/src/components/game-area/game-over.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, PropsWithChildren } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./game-section.module.scss";
 
@@ -8,5 +8,9 @@ interface GameOverProps {
 }
 
 export const GameOver: FunctionComponent<GameOverProps> = ({ onClick, isWin }) => {
-  return <div className={styles.gameOverComponent}>{isWin ? "😎" : "🙁"}</div>;
+  return (
+    <div onClick={onClick} className={styles.gameOverComponent}>
+      {isWin ? "😎" : "🙁"}
+    </div>
+  );
 };
diff --git a/src/modules/GameWithHooks/GameWithHooks.tsx b/src/modules/GameWithHooks/GameWithHooks.tsx
index 42ae900c..ca921a1a 100644
--- a/src/modules/GameWithHooks/GameWithHooks.tsx
+++ b/src/modules/GameWithHooks/GameWithHooks.tsx
@@ -12,14 +12,21 @@ export const GameWithHooks: FunctionComponent = () => {
   const [level, setLevel] = useState<LevelNames>("beginner");
   const [size, bombs] = GameSettings[level];
 
+  const [isGameOver, setIsGameOver] = useState(false);
+  const [isWin, setIsWin] = useState(false);
+
   const [playerField, setPlayerField] = useState<Field>(generateFieldWithDefaultState(size, CellState.hidden));
 
   const [gameField, setGameField] = useState<Field>(fieldGenerator(size, bombs / (size * size)));
 
   const onClickHandler = (coords: Coordinates) => {
-    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]) => {
@@ -28,6 +35,8 @@ export const GameWithHooks: FunctionComponent = () => {
 
     setGameField([...newGameField]);
     setPlayerField([...newPlayerField]);
+    setIsGameOver(false);
+    setIsWin(false);
   };
 
   const onChangeLevelHandler = ({ target: { value: level } }: React.ChangeEvent<HTMLSelectElement>) => {
@@ -46,12 +55,12 @@ export const GameWithHooks: FunctionComponent = () => {
       <GameArea>
         <ScoreBoard
           time="000"
-          mines="000"
+          mines={String(bombs)}
           levels={GameLevels as unknown as string[]}
           onReset={onResetHandler}
           onChangeLevel={onChangeLevelHandler}
         />
-        <GameOver onClick={() => null} isWin={true} />
+        {isGameOver && <GameOver onClick={onResetHandler} isWin={isWin} />}
         <GridComponent children={playerField} onClick={onClickHandler} onContextMenu={() => null} />
       </GameArea>
     </WrapperContainer>