Unify DwellerCard and TreeCard components

soldag · Apr 28, 2024 · 20fa42f · 20fa42f
1 parent b489228
commit 20fa42f
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 109 deletions.
diff --git a/src/components/common/DwellerCard.tsx b/src/components/common/DwellerCard.tsx
@@ -1,18 +1,13 @@
-import * as _ from "lodash-es";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { Card, CardContent, Stack, Typography } from "@mui/joy";
+import { Stack, Typography } from "@mui/joy";
 import { SxProps } from "@mui/joy/styles/types";
 
+import ForestCard, { AttachPosition } from "@/components/common/ForestCard";
 import TreeSymbol from "@/components/common/TreeSymbol";
 import { DwellerCard as DwellerCardType, DwellerPosition } from "@/game/types";
-import { getBackgroundForCardTypes } from "@/styles/colors";
-import { CARD_SIZES } from "@/styles/sizes";
 import { getLocalizedCardName } from "@/translations/messages/CardNames";
-import { mergeSx } from "@/utils/sx";
-
-type AttachPosition = "top" | "bottom" | "left" | "right";
 
 interface DwellerCardProps {
   card: DwellerCardType;
@@ -22,26 +17,6 @@ interface DwellerCardProps {
   onClick?: () => void;
 }
 
-const getAttachedStyles = (attached?: AttachPosition) => {
-  if (!attached) {
-    return {};
-  }
-
-  const cssAttached = _.upperFirst(attached);
-  return {
-    [`padding${cssAttached}`]: "calc(var(--Card-padding) + var(--Card-radius))",
-    [`margin${cssAttached}`]: "calc(-1 * var(--Card-radius))",
-    ...(["top", "bottom"].includes(attached) && {
-      [`border${cssAttached}LeftRadius`]: 0,
-      [`border${cssAttached}RightRadius`]: 0,
-    }),
-    ...(["left", "right"].includes(attached) && {
-      [`borderTop${cssAttached}Radius`]: 0,
-      [`borderBottom${cssAttached}Radius`]: 0,
-    }),
-  };
-};
-
 const DwellerCard: React.FC<DwellerCardProps> = ({
   card,
   attached,
@@ -60,60 +35,49 @@ const DwellerCard: React.FC<DwellerCardProps> = ({
   );
 
   return (
-    <Card
-      variant="plain"
+    <ForestCard
+      attached={attached}
+      card={card}
+      compact={compact}
       onClick={onClick}
-      sx={mergeSx(sx, {
-        ...getAttachedStyles(attached),
-        background: getBackgroundForCardTypes(
-          card.types,
-          hasHorizontalSplit ? "horizontal" : "vertical",
-        ),
-        width: hasHorizontalSplit || !compact ? CARD_SIZES.width : "auto",
-        height: !hasHorizontalSplit || !compact ? CARD_SIZES.height : "auto",
-        boxShadow: "card",
-      })}
+      sx={sx}
     >
-      <CardContent>
+      <Stack
+        direction={hasHorizontalSplit ? "column" : "row"}
+        justifyContent={isTopOrLeft ? "flex-start" : "flex-end"}
+        sx={{ height: "100%", width: "100%" }}
+      >
         <Stack
-          direction={hasHorizontalSplit ? "column" : "row"}
-          justifyContent={isTopOrLeft ? "flex-start" : "flex-end"}
-          sx={{ height: "100%", width: "100%" }}
+          direction={hasHorizontalSplit ? "row" : "column"}
+          alignItems={hasHorizontalSplit ? "start" : "end"}
+          justifyContent="space-between"
+          sx={{
+            height: hasHorizontalSplit ? "fit-content" : "100%",
+            width: hasHorizontalSplit ? "100%" : "fit-content",
+          }}
         >
-          <Stack
-            direction={hasHorizontalSplit ? "row" : "column"}
-            alignItems={hasHorizontalSplit ? "start" : "end"}
-            justifyContent="space-between"
+          <Typography
+            level="title-lg"
+            textColor="neutral.100"
             sx={{
-              height: hasHorizontalSplit ? "fit-content" : "100%",
-              width: hasHorizontalSplit ? "100%" : "fit-content",
+              writingMode: hasHorizontalSplit ? "horizontal-tb" : "vertical-lr",
             }}
           >
-            <Typography
-              level="title-lg"
-              textColor="neutral.100"
+            {getLocalizedCardName(intl, card.name)}
+          </Typography>
+          {card.treeSymbol && (
+            <TreeSymbol
+              attach={hasHorizontalSplit ? "top" : "right"}
+              value={card.treeSymbol}
               sx={{
-                writingMode: hasHorizontalSplit
-                  ? "horizontal-tb"
-                  : "vertical-lr",
+                [hasHorizontalSplit ? "mt" : "mr"]:
+                  "calc(-1 * var(--Card-padding))",
               }}
-            >
-              {getLocalizedCardName(intl, card.name)}
-            </Typography>
-            {card.treeSymbol && (
-              <TreeSymbol
-                attach={hasHorizontalSplit ? "top" : "right"}
-                value={card.treeSymbol}
-                sx={{
-                  [hasHorizontalSplit ? "mt" : "mr"]:
-                    "calc(-1 * var(--Card-padding))",
-                }}
-              />
-            )}
-          </Stack>
+            />
+          )}
         </Stack>
-      </CardContent>
-    </Card>
+      </Stack>
+    </ForestCard>
   );
 };
 

diff --git a/src/components/common/ForestCard.tsx b/src/components/common/ForestCard.tsx
@@ -0,0 +1,69 @@
+import * as _ from "lodash-es";
+import React, { ReactNode } from "react";
+
+import { Card, CardContent } from "@mui/joy";
+import { SxProps } from "@mui/joy/styles/types";
+
+import { DwellerCard, TreeCard } from "@/game/types";
+import { getBackgroundForCardTypes } from "@/styles/colors";
+import { CARD_SIZES } from "@/styles/sizes";
+import { hasHorizontalSplit, hasVerticalSplit } from "@/utils/cards";
+import { mergeSx } from "@/utils/sx";
+
+export type AttachPosition = "top" | "bottom" | "left" | "right";
+
+interface ForestCardProps {
+  attached?: AttachPosition;
+  card: TreeCard | DwellerCard;
+  children: ReactNode;
+  compact?: boolean;
+  onClick?: () => void;
+  sx?: SxProps;
+}
+
+const getAttachedStyles = (attached?: AttachPosition) => {
+  if (!attached) {
+    return {};
+  }
+
+  const cssAttached = _.upperFirst(attached);
+  return {
+    [`padding${cssAttached}`]: "calc(var(--Card-padding) + var(--Card-radius))",
+    [`margin${cssAttached}`]: "calc(-1 * var(--Card-radius))",
+    ...(["top", "bottom"].includes(attached) && {
+      [`border${cssAttached}LeftRadius`]: 0,
+      [`border${cssAttached}RightRadius`]: 0,
+    }),
+    ...(["left", "right"].includes(attached) && {
+      [`borderTop${cssAttached}Radius`]: 0,
+      [`borderBottom${cssAttached}Radius`]: 0,
+    }),
+  };
+};
+
+const ForestCard: React.FC<ForestCardProps> = ({
+  attached,
+  card,
+  children,
+  compact,
+  onClick,
+  sx,
+}) => (
+  <Card
+    variant="plain"
+    onClick={onClick}
+    sx={mergeSx(sx, getAttachedStyles(attached), {
+      boxShadow: "card",
+      background: getBackgroundForCardTypes(
+        card.types,
+        hasHorizontalSplit(card) ? "horizontal" : "vertical",
+      ),
+      width: !compact || hasHorizontalSplit(card) ? CARD_SIZES.width : "auto",
+      height: !compact || hasVerticalSplit(card) ? CARD_SIZES.height : "auto",
+    })}
+  >
+    <CardContent>{children}</CardContent>
+  </Card>
+);
+
+export default ForestCard;
diff --git a/src/components/common/TreeCard.tsx b/src/components/common/TreeCard.tsx
@@ -2,15 +2,13 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import ParkIcon from "@mui/icons-material/Park";
-import { Card, CardContent, Stack, Typography } from "@mui/joy";
+import { Stack, Typography } from "@mui/joy";
 import { SxProps } from "@mui/joy/styles/types";
 
+import ForestCard from "@/components/common/ForestCard";
 import TreeSymbol from "@/components/common/TreeSymbol";
 import { TreeCard as TreeCardType } from "@/game/types";
-import { getBackgroundForCardTypes } from "@/styles/colors";
-import { CARD_SIZES } from "@/styles/sizes";
 import { getLocalizedCardName } from "@/translations/messages/CardNames";
-import { mergeSx } from "@/utils/sx";
 
 interface ForestCardProps {
   card: TreeCardType;
@@ -22,42 +20,33 @@ const TreeCard: React.FC<ForestCardProps> = ({ card, sx, onClick }) => {
   const intl = useIntl();
 
   return (
-    <Card
-      variant="plain"
-      onClick={onClick}
-      sx={mergeSx(sx, CARD_SIZES, {
-        background: getBackgroundForCardTypes(card.types),
-        boxShadow: "card",
-      })}
-    >
-      <CardContent>
-        <Stack direction="column" alignItems="center" sx={{ height: "100%" }}>
-          {card.treeSymbol && (
-            <TreeSymbol
-              attach="top"
-              value={card.treeSymbol}
-              sx={{
-                alignSelf: "end",
-                mt: "calc(-1 * var(--Card-padding))",
-              }}
-            />
-          )}
-
-          <ParkIcon
+    <ForestCard card={card} onClick={onClick} sx={sx}>
+      <Stack direction="column" alignItems="center" sx={{ height: "100%" }}>
+        {card.treeSymbol && (
+          <TreeSymbol
+            attach="top"
+            value={card.treeSymbol}
             sx={{
-              color: "neutral.100",
-              width: "80%",
-              flexGrow: 1,
-              mt: card.treeSymbol ? 0 : "18px",
+              alignSelf: "end",
+              mt: "calc(-1 * var(--Card-padding))",
             }}
           />
-
-          <Typography level="title-lg" textColor="neutral.100">
-            {getLocalizedCardName(intl, card.name)}
-          </Typography>
-        </Stack>
-      </CardContent>
-    </Card>
+        )}
+
+        <ParkIcon
+          sx={{
+            color: "neutral.100",
+            width: "80%",
+            flexGrow: 1,
+            mt: card.treeSymbol ? 0 : "18px",
+          }}
+        />
+
+        <Typography level="title-lg" textColor="neutral.100">
+          {getLocalizedCardName(intl, card.name)}
+        </Typography>
+      </Stack>
+    </ForestCard>
   );
 };
 

diff --git a/src/utils/cards.ts b/src/utils/cards.ts
@@ -1,7 +1,13 @@
-import { DwellerPosition } from "@/game";
+import { DwellerCard, DwellerPosition, TreeCard } from "@/game";
 
 export const isPositionX = (position: DwellerPosition) =>
   [DwellerPosition.Left, DwellerPosition.Right].includes(position);
 
 export const isPositionY = (position: DwellerPosition) =>
   [DwellerPosition.Top, DwellerPosition.Bottom].includes(position);
+
+export const hasHorizontalSplit = (card: DwellerCard | TreeCard) =>
+  "position" in card && isPositionY(card.position);
+
+export const hasVerticalSplit = (card: DwellerCard | TreeCard) =>
+  "position" in card && isPositionX(card.position);