Create flag component

zourdyzou · Jul 29, 2022 · 3b540b9 · 3b540b9
1 parent bce613b
commit 3b540b9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git 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
@@ -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
@@ -19,21 +19,36 @@ 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:
       return <ClosedFrame mouseDown={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)} />;
+};