Create component preview for game-section-area

src/components/game-area/game-layout.tsx

@@ -13,11 +13,11 @@ export interface Props {
   children: React.ReactNode;
 }
 
-const WrapperContainer: FunctionComponent<PropsWithChildren> = ({ children }) => (
+export const WrapperContainer: FunctionComponent<PropsWithChildren> = ({ children }) => (
   <div className={styles.wrapperContainer}>{children}</div>
 );
 
-const GameArea: FunctionComponent<PropsWithChildren> = ({ children }) => (
+export const GameArea: FunctionComponent<PropsWithChildren> = ({ children }) => (
   <div className={styles.gameArea}>{children}</div>
 );
 

src/components/game-area/game-over.tsx

@@ -0,0 +1,12 @@
+import React, { FunctionComponent, PropsWithChildren } from "react";
+
+import styles from "./game-section.module.scss";
+
+interface GameOverProps {
+  isWin: boolean;
+  onClick: () => void;
+}
+
+export const GameOver: FunctionComponent<GameOverProps> = ({ onClick, isWin }) => {
+  return <div className={styles.gameOverComponent}>{isWin ? "😎" : "🙁"}</div>;
+};

src/components/game-area/game-section-example.tsx

@@ -0,0 +1,28 @@
+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 { Field, fieldGenerator } from "@helpers/field";
+import React, { FunctionComponent } from "react";
+
+export const GameSectionExample: FunctionComponent = () => {
+  return (
+    <WrapperContainer>
+      <Top feature="Flag" firstAction="right click">
+        Minesweeper
+      </Top>
+      <GameArea>
+        <ScoreBoard
+          time="000"
+          mines="000"
+          levels={["beginner", "intermediate", "expert"]}
+          onReset={() => null}
+          onChange={() => null}
+        />
+        <GameOver onClick={() => null} isWin={true} />
+        <GridComponent children={fieldGenerator(10, 0.5) as Field} onClick={() => null} onContextMenu={() => null} />
+      </GameArea>
+    </WrapperContainer>
+  );
+};

src/components/game-area/game-section.module.scss

@@ -14,3 +14,22 @@
   border: 6px solid #e3e3e3;
   background-color: #e3e3e3;
 }
+
+.gameOverComponent {
+  top: 60%;
+  left: 50%;
+  z-index: 11;
+  width: 8vw;
+  height: 8vw;
+  font-size: 4vw;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
+  line-height: 8vw;
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: auto;
+  background-color: #d1d1d1;
+  transform: translate(-50%, -50%);
+  border: 1px solid rgba(51, 51, 51, 0.25);
+}

src/components/game-area/game-section.module.scss.d.ts

@@ -0,0 +1,16 @@
+// autogenerated by typings-for-css-modules-loader.
+// Please do not change this file!
+declare namespace GameSectionModuleScssNamespace {
+  export interface IGameSectionModuleScss {
+    gameArea: string;
+    gameOverComponent: string;
+    wrapperContainer: string;
+  }
+}
+
+declare const GameSectionModuleScssModule: GameSectionModuleScssNamespace.IGameSectionModuleScss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: GameSectionModuleScssNamespace.IGameSectionModuleScss;
+};
+
+export = GameSectionModuleScssModule;

src/components/game-area/index.ts

@@ -0,0 +1,3 @@
+export { WrapperContainer, GameArea, GameLayout } from "./game-layout";
+export { GameOver } from "./game-over";
+export { GameSectionExample } from "./game-section-example";

src/index.tsx

@@ -1,8 +1,9 @@
 import "@styles/styles.scss";
 import "normalize.css/normalize.css";
 
-import { GridComponent } from "@components/grid";
-import { MockFieldData } from "@helpers/mockData";
+import { GameSectionExample } from "@components/game-area";
+// import { GridComponent } from "@components/grid";
+// import { MockFieldData } from "@helpers/mockData";
 import React from "react";
 import { createRoot } from "react-dom/client";
 
@@ -15,13 +16,7 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     {/*<Segment writeKey={process.env.SEGMENT_WRITE_KEY as string}>*/}
-    <>
-      {/*<Top feature="Flag" firstAction="ctrl" secondAction="click">*/}
-      {/*  Minesweeper*/}
-      {/*</Top>*/}
-      {/*<ScoreBoard time="000" onReset={() => null} levels={["beginner", "intermediate", "expert"]} mines="010" />*/}
-      <GridComponent children={MockFieldData} onContextMenu={() => null} onClick={() => null} />
-    </>
+    <GameSectionExample />
     {/*</Segment>*/}
   </React.StrictMode>
 );