Rework a bit the buildable list to show free buildings

cohstats · Apr 27, 2024 · 0102ed0 · 0102ed0
1 parent d193a83
commit 0102ed0
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 4 deletions.
diff --git a/components/unit-cards/unit-upgrade-card.tsx b/components/unit-cards/unit-upgrade-card.tsx
@@ -1,4 +1,14 @@
-import { createStyles, Flex, Grid, Group, HoverCard, Text, Title, Tooltip } from "@mantine/core";
+import {
+  createStyles,
+  Flex,
+  Grid,
+  Group,
+  HoverCard,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from "@mantine/core";
 import { UnitCostCard } from "./unit-cost-card";
 import ImageWithFallback, { iconPlaceholder } from "../placeholders";
 import { hasCost, ResourceValues } from "../../src/unitStats";
@@ -192,3 +202,42 @@ export const UnitUpgradeCard = ({ desc, time_cost, cfg }: UnitUpgrade) => {
     </Flex>
   );
 };
+
+export const ConstructableCard = ({ desc, time_cost, cfg }: UnitUpgrade) => {
+  return (
+    <Stack h="100%" align="stretch" justify="space-between" spacing={16}>
+      <UnitUpgradeCardHeader
+        desc={{
+          screen_name: desc.screen_name,
+          help_text: desc.help_text,
+          brief_text: desc.brief_text,
+          extra_text: desc.extra_text,
+          extra_text_formatter: desc.extra_text_formatter,
+          brief_text_formatter: desc.brief_text_formatter,
+          icon_name: desc.icon_name,
+        }}
+        cfg={cfg}
+      ></UnitUpgradeCardHeader>
+      {hasBuildableCost(time_cost) ? (
+        UnitCostCard(time_cost)
+      ) : (
+        <Stack spacing={0}>
+          <Title order={6} transform="uppercase">
+            Costs
+          </Title>
+          <Flex key="stats_costs_list" align="center" gap={8} mt={4} wrap="wrap">
+            <Text>Free</Text>
+          </Flex>
+        </Stack>
+      )}
+    </Stack>
+  );
+};
+
+/** Only for the buildable list. */
+const hasBuildableCost = (time_cost: ResourceValues) => {
+  const hasMan = time_cost?.manpower && time_cost.manpower > 0;
+  const hasFuel = time_cost?.fuel && time_cost.fuel > 0;
+  const hasAmmo = time_cost?.munition && time_cost.munition > 0;
+  return hasMan || hasFuel || hasAmmo;
+};
diff --git a/pages/explorer/races/[raceId]/units/[unitId].tsx b/pages/explorer/races/[raceId]/units/[unitId].tsx
@@ -36,7 +36,10 @@ import {
   ReinforceCostCard,
   UnitCostCard,
 } from "../../../../../components/unit-cards/unit-cost-card";
-import { UnitUpgradeCard } from "../../../../../components/unit-cards/unit-upgrade-card";
+import {
+  ConstructableCard,
+  UnitUpgradeCard,
+} from "../../../../../components/unit-cards/unit-upgrade-card";
 import { VeterancyCard } from "../../../../../components/unit-cards/veterancy-card";
 import { WeaponLoadoutCard } from "../../../../../components/unit-cards/weapon-loadout-card";
 import { HitpointCard } from "../../../../../components/unit-cards/hitpoints-card";
@@ -275,13 +278,19 @@ const UnitBuildingSection = (buildings: EbpsType[]) => {
   return (
     <Stack>
       <Title order={4}>Can construct</Title>
-      <SimpleGrid cols={3}>
+      <SimpleGrid
+        breakpoints={[
+          { minWidth: "xs", cols: 1 },
+          { minWidth: "sm", cols: 2 },
+          { minWidth: "lg", cols: 3 },
+        ]}
+      >
         {Object.values(buildings).map(({ id, ui, cost }) => {
           // If we are missing the name of the ability --> it's most likely broken
           if (ui.screenName) {
             return (
               <Card key={id} p="lg" radius="md" withBorder>
-                {UnitUpgradeCard({
+                {ConstructableCard({
                   id,
                   desc: {
                     screen_name: ui.screenName,