Create bomb component

src/components/grid/cell/cell.module.scss

@@ -31,3 +31,14 @@
     filter: brightness(1);
   }
 }
+
+.bombFrame {
+  background-color: #ec433c;
+}
+
+.bombEntity {
+  border-radius: 50%;
+  width: 1vw;
+  height: 1vw;
+  background-color: #333;
+}

src/components/grid/cell/cell.module.scss.d.ts

@@ -2,6 +2,8 @@
 // Please do not change this file!
 declare namespace CellModuleScssNamespace {
   export interface ICellModuleScss {
+    bombEntity: string;
+    bombFrame: string;
     changedBorderColor: string;
     closedFrame: string;
     emptyFrame: string;

src/components/grid/cell/cell.tsx

@@ -1,6 +1,6 @@
 import { CellState, Cell as CellType } from "@helpers/field";
 import classNames from "classnames";
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, PropsWithChildren, ReactNode } from "react";
 
 import styles from "./cell.module.scss";
 
@@ -13,6 +13,12 @@ export const CellComponent: FunctionComponent<CellComponentType> = ({ mouseDown,
   switch (children) {
     case CellState.empty:
       return <EmptyFrame />;
+    case CellState.bomb:
+      return (
+        <BombFrame>
+          <span className={styles.bombEntity} />
+        </BombFrame>
+      );
     case CellState.hidden:
       return <ClosedFrame mouseDown={mouseDown} />;
     default:
@@ -34,3 +40,7 @@ const ClosedFrame: FunctionComponent<{ mouseDown: boolean }> = ({ mouseDown }) =
 const EmptyFrame: FunctionComponent = () => {
   return <div className={classNames(styles.closedFrame, styles.emptyFrame)} />;
 };
+
+const BombFrame: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
+  return <div className={classNames(styles.closedFrame, styles.emptyFrame, styles.bombFrame)}>{children}</div>;
+};

src/components/scoreboard/index.ts

@@ -1 +1 @@
-export { ScoreBoard, ScoreboardProps } from "./scoreboard";
+export * from "./scoreboard";

tsconfig.json

@@ -21,7 +21,8 @@
       "@styles/*": ["src/styles/*"],
       "@components/*": ["src/components/*"],
       "@assets/*": ["src/assets/*"],
-      "@helpers/*": ["src/helpers/*"]
+      "@helpers/*": ["src/helpers/*"],
+      "~types/*": ["src/@types/*"]
     },
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,

webpack/config/alias.js

@@ -12,4 +12,5 @@ export const aliasItems = {
   "@components": join(rootDir, "/src/components"),
   "@assets": join(rootDir, "/src/assets"),
   "@helpers": join(rootDir, "/src/helpers"),
+  "~types": join(rootDir, "/src/@types"),
 };