Add game-with-hooks game module

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} />

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}>

src/components/scoreboard/scoreboard.test.tsx

@@ -8,15 +8,15 @@ 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();
   });
   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");
 

src/components/scoreboard/scoreboard.tsx

@@ -16,22 +16,33 @@ export interface ScoreboardProps {
    * Action handler when the GameReset button is clicked
    */
   onReset: () => void;
+  /**
+   * Default selected level
+   */
+  defaultLevel?: string;
   /**
    * Bombs in the field
    */
   mines: string;
   /**
    * 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} />

src/index.tsx

@@ -1,22 +1,19 @@
 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);
 
 root.render(
   <React.StrictMode>
     {/*<Segment writeKey={process.env.SEGMENT_WRITE_KEY as string}>*/}
-    <GameSectionExample />
+    <GameWithHooks />
     {/*</Segment>*/}
   </React.StrictMode>
 );

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

src/modules/GameWithHooks/index.ts

@@ -0,0 +1 @@
+export * from "./GameWithHooks";