From f82ec63eb9f4f82d3be81d604405d7f86e839fbc Mon Sep 17 00:00:00 2001
From: Muhammad Zourdy <zhafarmuhammad12@gmail.com>
Date: Sun, 7 Aug 2022 08:18:04 +0200
Subject: [PATCH] Add `game-with-hooks` game module

---
 .../game-area/game-section-example.tsx        |  2 +-
 .../scoreboard/components/level/level.tsx     |  5 +--
 src/components/scoreboard/scoreboard.test.tsx |  4 +--
 src/components/scoreboard/scoreboard.tsx      | 17 +++++++--
 src/index.tsx                                 |  7 ++--
 src/modules/GameWithHooks/GameWithHooks.tsx   | 35 +++++++++++++++++++
 src/modules/GameWithHooks/index.ts            |  1 +
 7 files changed, 58 insertions(+), 13 deletions(-)
 create mode 100644 src/modules/GameWithHooks/index.ts

diff --git a/src/components/game-area/game-section-example.tsx b/src/components/game-area/game-section-example.tsx
index dc99692b..f87484c2 100644
--- a/src/components/game-area/game-section-example.tsx
+++ b/src/components/game-area/game-section-example.tsx
@@ -18,7 +18,7 @@ export const GameSectionExample: FunctionComponent = () => {
           mines="000"
           levels={["beginner", "intermediate", "expert"]}
           onReset={() => null}
-          onChange={() => null}
+          onChangeLevel={() => null}
         />
         <GameOver onClick={() => null} isWin={true} />
         <GridComponent children={fieldGenerator(10, 0.5) as Field} onClick={() => null} onContextMenu={() => null} />
diff --git a/src/components/scoreboard/components/level/level.tsx b/src/components/scoreboard/components/level/level.tsx
index fd1f8427..828a621a 100644
--- a/src/components/scoreboard/components/level/level.tsx
+++ b/src/components/scoreboard/components/level/level.tsx
@@ -5,8 +5,9 @@ import styles from "./level.module.scss";
 export const Level: FunctionComponent<{
   levelData: string[];
   onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
-}> = ({ levelData, onChange }) => (
-  <select onChange={onChange} className={styles.selectLevel} role="select-component">
+  value?: string;
+}> = ({ levelData, onChange, value }) => (
+  <select value={value} onChange={onChange} className={styles.selectLevel} role="select-component">
     {levelData.map((item: string) => {
       return (
         <option className={styles.optionLevel} key={item}>
diff --git a/src/components/scoreboard/scoreboard.test.tsx b/src/components/scoreboard/scoreboard.test.tsx
index 926f4fb7..d8850860 100644
--- a/src/components/scoreboard/scoreboard.test.tsx
+++ b/src/components/scoreboard/scoreboard.test.tsx
@@ -8,7 +8,7 @@ describe("Scoreboard test cases", () => {
 
   it("Scoreboard renders correctly", () => {
     const { asFragment } = render(
-      <ScoreBoard time="000" levels={levels} onReset={() => null} mines="010" onChange={() => null} />
+      <ScoreBoard time="000" levels={levels} onReset={() => null} mines="010" onChangeLevel={() => null} />
     );
 
     expect(asFragment()).toMatchSnapshot();
@@ -16,7 +16,7 @@ describe("Scoreboard test cases", () => {
   it("Scoreboard select level handler check", async () => {
     const onChange = jest.fn();
 
-    render(<ScoreBoard time="000" levels={levels} onReset={() => null} mines="010" onChange={onChange} />);
+    render(<ScoreBoard time="000" levels={levels} onReset={() => null} mines="010" onChangeLevel={onChange} />);
 
     await userEvent.selectOptions(screen.getByRole("select-component"), "expert");
 
diff --git a/src/components/scoreboard/scoreboard.tsx b/src/components/scoreboard/scoreboard.tsx
index 24162c85..db8fbca1 100644
--- a/src/components/scoreboard/scoreboard.tsx
+++ b/src/components/scoreboard/scoreboard.tsx
@@ -16,6 +16,10 @@ export interface ScoreboardProps {
    * Action handler when the GameReset button is clicked
    */
   onReset: () => void;
+  /**
+   * Default selected level
+   */
+  defaultLevel?: string;
   /**
    * Bombs in the field
    */
@@ -23,15 +27,22 @@ export interface ScoreboardProps {
   /**
    * Action handler when select new lvl
    */
-  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+  onChangeLevel: (event: ChangeEvent<HTMLSelectElement>) => void;
 }
 
-export const ScoreBoard: FunctionComponent<ScoreboardProps> = ({ time, mines, onReset, levels, onChange }) => {
+export const ScoreBoard: FunctionComponent<ScoreboardProps> = ({
+  time,
+  mines,
+  onReset,
+  levels,
+  onChangeLevel,
+  defaultLevel,
+}) => {
   return (
     <div className={styles.wrapperScoreboard}>
       <Counter itemNumber={time} />
       <div>
-        <Level onChange={onChange} levelData={levels} />
+        <Level onChange={onChangeLevel} levelData={levels} value={defaultLevel} />
         <ResetButton onReset={onReset} />
       </div>
       <Counter itemNumber={mines} />
diff --git a/src/index.tsx b/src/index.tsx
index c431fbca..098bb2aa 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,14 +1,11 @@
 import "@styles/styles.scss";
 import "normalize.css/normalize.css";
 
-import { GameSectionExample } from "@components/game-area";
-// import { GridComponent } from "@components/grid";
-// import { MockFieldData } from "@helpers/mockData";
+import { GameWithHooks } from "@src/modules/GameWithHooks";
 import React from "react";
 import { createRoot } from "react-dom/client";
 
 // import { ScoreBoard } from "@components/scoreboard";
-// import { Top } from "@components/top-section";
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);
@@ -16,7 +13,7 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     {/*<Segment writeKey={process.env.SEGMENT_WRITE_KEY as string}>*/}
-    <GameSectionExample />
+    <GameWithHooks />
     {/*</Segment>*/}
   </React.StrictMode>
 );
diff --git a/src/modules/GameWithHooks/GameWithHooks.tsx b/src/modules/GameWithHooks/GameWithHooks.tsx
index e69de29b..f8826647 100644
--- a/src/modules/GameWithHooks/GameWithHooks.tsx
+++ b/src/modules/GameWithHooks/GameWithHooks.tsx
@@ -0,0 +1,35 @@
+import { GameArea, WrapperContainer } from "@components/game-area/game-layout";
+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 { GameLevels, GameSettings, LevelNames } from "@src/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);
+
+  return (
+    <WrapperContainer>
+      <Top feature="Flag" firstAction="right click">
+        Minesweeper
+      </Top>
+      <GameArea>
+        <ScoreBoard
+          time="000"
+          mines="000"
+          levels={GameLevels as unknown as string[]}
+          onReset={() => null}
+          onChangeLevel={({ target: { value } }) => setLevel(value as LevelNames)}
+        />
+        <GameOver onClick={() => null} isWin={true} />
+        <GridComponent children={playerField} onClick={() => null} onContextMenu={() => null} />
+      </GameArea>
+    </WrapperContainer>
+  );
+};
diff --git a/src/modules/GameWithHooks/index.ts b/src/modules/GameWithHooks/index.ts
new file mode 100644
index 00000000..0bb6077e
--- /dev/null
+++ b/src/modules/GameWithHooks/index.ts
@@ -0,0 +1 @@
+export * from "./GameWithHooks";