Add open cell behaviour game-with-hooks game module

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>
   );