Add new handler for use-game hook

src/helpers/set-flag.ts

@@ -0,0 +1,30 @@
+import { CellState, Coordinates, Field } from "@helpers/field";
+
+/**
+ * Set flag to the cell
+ * @param {Coordinates} coords
+ * @param {Field} playerField
+ * @param {Field} gameField
+ * @returns {[Field, FlagCounter]}
+ */
+
+export const setFlag = (coords: Coordinates, playerField: Field, gameField: Field): Field => {
+  const [y, x] = coords;
+  const cell = playerField[y][x];
+
+  const { mark, weakMark, hidden } = CellState;
+
+  switch (cell) {
+    case mark:
+      playerField[y][x] = weakMark;
+      break;
+    case weakMark:
+      playerField[y][x] = hidden;
+      break;
+    case hidden:
+      playerField[y][x] = mark;
+      break;
+  }
+
+  return playerField;
+};

src/modules/GameWithHooks/GameWithHooks.tsx

@@ -8,8 +8,17 @@ import { useGame } from "@modules/GameWithHooks/hooks/use-game";
 import React, { FunctionComponent } from "react";
 
 export const GameWithHooks: FunctionComponent = () => {
-  const { level, isWin, isGameOver, settings, playerField, onChangeLevelHandler, onClickHandler, onResetHandler } =
-    useGame();
+  const {
+    level,
+    isWin,
+    isGameOver,
+    settings,
+    playerField,
+    onContextMenuHandler,
+    onChangeLevelHandler,
+    onClickHandler,
+    onResetHandler,
+  } = useGame();
 
   const [, bombs] = settings;
 
@@ -30,7 +39,7 @@ export const GameWithHooks: FunctionComponent = () => {
           }
         />
         {isGameOver && <GameOver onClick={onResetHandler} isWin={isWin} />}
-        <GridComponent children={playerField} onClick={onClickHandler} onContextMenu={() => null} />
+        <GridComponent children={playerField} onClick={onClickHandler} onContextMenu={onContextMenuHandler} />
       </GameArea>
     </WrapperContainer>
   );

src/modules/GameWithHooks/hooks/use-game/index.tsx

@@ -1,5 +1,6 @@
 import { openCell } from "@helpers/cells/cells-manipulator";
 import { CellState, Coordinates, Field, fieldGenerator, generateFieldWithDefaultState } from "@helpers/field";
+import { setFlag } from "@helpers/set-flag";
 import { GameSettings, LevelNames } from "@modules/GameSettings";
 import React, { useState } from "react";
 
@@ -10,6 +11,7 @@ interface ReturnType {
   gameField: Field;
   settings: [number, number];
   playerField: Field;
+  onContextMenuHandler: (coords: Coordinates) => void;
   onClickHandler: (coords: Coordinates) => void;
   onChangeLevelHandler: (level: LevelNames) => void;
   onResetHandler: () => void;
@@ -52,6 +54,11 @@ export const useGame = (): ReturnType => {
     resetHandler(newSettings);
   };
 
+  const onContextMenuHandler = (coords: Coordinates) => {
+    const newPlayerField = setFlag(coords, playerField, gameField);
+    setPlayerField([...newPlayerField]);
+  };
+
   const onResetHandler = () => resetHandler([size, bombs]);
 
   return {
@@ -62,6 +69,7 @@ export const useGame = (): ReturnType => {
     settings: [size, bombs],
     playerField,
     onClickHandler,
+    onContextMenuHandler,
     onChangeLevelHandler,
     onResetHandler,
   };