From 3b540b963a6e5aaa58f4cd457278b492474c7a79 Mon Sep 17 00:00:00 2001
From: Muhammad Zourdy <zhafarmuhammad12@gmail.com>
Date: Fri, 29 Jul 2022 02:54:55 +0200
Subject: [PATCH] Create flag component

---
 src/components/grid/cell/cell.module.scss     | 13 +++++++++
 .../grid/cell/cell.module.scss.d.ts           |  2 ++
 src/components/grid/cell/cell.tsx             | 27 +++++++++++++++++--
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/grid/cell/cell.module.scss b/src/components/grid/cell/cell.module.scss
index 5b785af0..45c88914 100644
--- a/src/components/grid/cell/cell.module.scss
+++ b/src/components/grid/cell/cell.module.scss
@@ -42,3 +42,16 @@
   height: 1vw;
   background-color: #333;
 }
+
+.flagComponent {
+  width: 0px;
+  height: 0px;
+
+  border-top: 0.5vw solid transparent;
+  border-bottom: 0.5vw solid transparent;
+  border-left: 0.5vw solid #ec433c;
+}
+
+.flagTransparent {
+  border-left: 0.5vw solid #f19996;
+}
diff --git a/src/components/grid/cell/cell.module.scss.d.ts b/src/components/grid/cell/cell.module.scss.d.ts
index 275d8aa8..4899c6b0 100644
--- a/src/components/grid/cell/cell.module.scss.d.ts
+++ b/src/components/grid/cell/cell.module.scss.d.ts
@@ -7,6 +7,8 @@ declare namespace CellModuleScssNamespace {
     changedBorderColor: string;
     closedFrame: string;
     emptyFrame: string;
+    flagComponent: string;
+    flagTransparent: string;
     transparentClosedFrame: string;
   }
 }
diff --git a/src/components/grid/cell/cell.tsx b/src/components/grid/cell/cell.tsx
index 4fbc8ec8..d056416e 100644
--- a/src/components/grid/cell/cell.tsx
+++ b/src/components/grid/cell/cell.tsx
@@ -19,6 +19,19 @@ export const CellComponent: FunctionComponent<CellComponentType> = ({ mouseDown,
           <span className={styles.bombEntity} />
         </BombFrame>
       );
+    case CellState.flag:
+      return (
+        <ClosedFrame mouseDown={mouseDown}>
+          <FlagComponent />
+        </ClosedFrame>
+      );
+
+    case CellState.weakFlag:
+      return (
+        <ClosedFrame mouseDown={mouseDown}>
+          <WeakFlagComponent />
+        </ClosedFrame>
+      );
     case CellState.hidden:
       return <ClosedFrame mouseDown={mouseDown} />;
     default:
@@ -26,14 +39,16 @@ export const CellComponent: FunctionComponent<CellComponentType> = ({ mouseDown,
   }
 };
 
-const ClosedFrame: FunctionComponent<{ mouseDown: boolean }> = ({ mouseDown }) => {
+const ClosedFrame: FunctionComponent<PropsWithChildren<{ mouseDown: boolean }>> = ({ mouseDown, children }) => {
   return (
     <div
       className={classNames(styles.closedFrame, {
         [styles.changedBorderColor]: !mouseDown,
         [styles.transparentClosedFrame]: mouseDown,
       })}
-    />
+    >
+      {children ?? null}
+    </div>
   );
 };
 
@@ -44,3 +59,11 @@ const EmptyFrame: FunctionComponent = () => {
 const BombFrame: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
   return <div className={classNames(styles.closedFrame, styles.emptyFrame, styles.bombFrame)}>{children}</div>;
 };
+
+const FlagComponent: FunctionComponent = () => {
+  return <div className={styles.flagComponent} />;
+};
+
+const WeakFlagComponent: FunctionComponent = () => {
+  return <div className={classNames(styles.flagComponent, styles.flagTransparent)} />;
+};