From e587af0524505070489ab82babdccb3a659d7164 Mon Sep 17 00:00:00 2001
From: Muhammad Zourdy <zhafarmuhammad12@gmail.com>
Date: Mon, 8 Aug 2022 11:37:33 +0200
Subject: [PATCH] Add open cell behaviour `game-with-hooks` game module

---
 src/modules/GameWithHooks/GameWithHooks.tsx | 26 +++++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/modules/GameWithHooks/GameWithHooks.tsx b/src/modules/GameWithHooks/GameWithHooks.tsx
index 24a27f86..e83294b4 100644
--- a/src/modules/GameWithHooks/GameWithHooks.tsx
+++ b/src/modules/GameWithHooks/GameWithHooks.tsx
@@ -3,16 +3,32 @@ import { GameOver } from "@components/game-area/game-over";
 import { GridComponent } from "@components/grid";
 import { ScoreBoard } from "@components/scoreboard";
 import { Top } from "@components/top-section";
-import { CellState, generateFieldWithDefaultState } from "@helpers/field";
+import { openCell } from "@helpers/cells/cells-manipulator";
+import { CellState, Coordinates, Field, fieldGenerator, generateFieldWithDefaultState } from "@helpers/field";
 import { GameLevels, GameSettings, LevelNames } from "@modules/GameSettings";
 import React, { FunctionComponent, useState } from "react";
 
 export const GameWithHooks: FunctionComponent = () => {
   const [level, setLevel] = useState<LevelNames>("beginner");
-
   const [size, bombs] = GameSettings[level];
 
-  const playerField = generateFieldWithDefaultState(size, CellState.hidden);
+  const [playerField, setPlayerField] = useState<Field>(generateFieldWithDefaultState(size, CellState.hidden));
+
+  const gameField = fieldGenerator(size, bombs / (size * size));
+
+  const onClickHandler = (coords: Coordinates) => {
+    const newPlayerField = openCell(coords, playerField, gameField);
+
+    setPlayerField([...newPlayerField]);
+  };
+
+  const onChangeLevelHandler = ({ target: { value: level } }: React.ChangeEvent<HTMLSelectElement>) => {
+    setLevel(level as LevelNames);
+    const [newSize] = GameSettings[level as LevelNames];
+
+    const resetNewPlayerField = generateFieldWithDefaultState(newSize, CellState.hidden);
+    setPlayerField([...resetNewPlayerField]);
+  };
 
   return (
     <WrapperContainer>
@@ -25,10 +41,10 @@ export const GameWithHooks: FunctionComponent = () => {
           mines="000"
           levels={GameLevels as unknown as string[]}
           onReset={() => null}
-          onChangeLevel={({ target: { value } }) => setLevel(value as LevelNames)}
+          onChangeLevel={onChangeLevelHandler}
         />
         <GameOver onClick={() => null} isWin={true} />
-        <GridComponent children={playerField} onClick={() => null} onContextMenu={() => null} />
+        <GridComponent children={playerField} onClick={onClickHandler} onContextMenu={() => null} />
       </GameArea>
     </WrapperContainer>
   );