Minor Improvements to Cards - Brief Texts (#531)

* minor improvements to BG card to display extra text * Improvements to building and requirement cards
cohstats · Aug 16, 2024 · 7afcfda · 7afcfda
1 parent 64749a9
commit 7afcfda
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 35 deletions.
diff --git a/components/unit-cards/battlegroup-card.tsx b/components/unit-cards/battlegroup-card.tsx
@@ -192,6 +192,9 @@ const BattlegroupBranchMapping = (
       upg.ui.briefText?.replace(spaceRegex, "\n")?.replace(specialRegex, "") ||
       briefTextFormatter?.replace(spaceRegex, "\n")?.replace(specialRegex, "");
 
+    const extraTextFormatter = ability.ui.extraTextFormatter || upg.ui.extraTextFormatter;
+    const extraText = extraTextFormatter.replace(spaceRegex, "\n")?.replace(specialRegex, "");
+
     return (
       <Box
         p="sm"
@@ -227,9 +230,20 @@ const BattlegroupBranchMapping = (
           </Flex>
 
           <Tooltip.Floating multiline style={{ whiteSpace: "pre-line" }} label={briefText}>
-            <Text fz="sm" lineClamp={7} style={{ whiteSpace: "pre-line" }}>
-              {briefText}
-            </Text>
+            <Stack spacing={8} justify="flex-start" style={{ flexGrow: 1 }}>
+              <Text fz="sm" lineClamp={7} align="justify" style={{ whiteSpace: "pre-line" }}>
+                {briefText}
+              </Text>
+              <Text
+                fz="sm"
+                lineClamp={7}
+                align="justify"
+                style={{ whiteSpace: "pre-line" }}
+                italic
+              >
+                {extraText}
+              </Text>
+            </Stack>
           </Tooltip.Floating>
           <Flex>{hasCost(costs) ? UnitCostCard(costs) : <></>}</Flex>
         </Flex>

diff --git a/components/unit-cards/building-description-card.tsx b/components/unit-cards/building-description-card.tsx
@@ -78,12 +78,12 @@ const BuildingCardHeader = (
           withPlaceholder
         />
         <Flex direction="column" gap={4}>
-          <Title order={4} transform="capitalize" lineClamp={1}>
+          <Title order={3} transform="capitalize" lineClamp={1}>
             {desc.screen_name}
           </Title>
-          <Text fz="md" lineClamp={2} color="yellow.5">
+          <Title order={5} lineClamp={2} color="yellow.5">
             {desc.extra_text}
-          </Text>
+          </Title>
           <Text fz="sm" lineClamp={2}>
             {desc.brief_text}
           </Text>
@@ -99,13 +99,6 @@ const BuildingCardHeader = (
         <Divider display={{ base: "block", sm: "none" }} />
         <Flex direction="row" justify="space-between">
           <Flex direction="row" gap={4}>
-            {/* <Image
-            height={24}
-            width={24}
-            fit="contain"
-            src="/icons/common/orders/reinforce.png"
-            alt="Health"
-          /> */}
             <Text weight="bold">Hitpoints</Text>
           </Flex>
           <Text ml={24}>{health.hitpoints}</Text>
@@ -182,22 +175,28 @@ const BuildingUnitMapper = (units: BuildingSchema["units"], faction: raceType) =
                 })}
               >
                 <Grid columns={5} align="center">
-                  <Grid.Col span={4}>
-                    <UnitDescriptionCard
-                      faction={faction}
-                      desc={{
-                        screen_name: ui.screenName,
-                        help_text: ui.helpText,
-                        brief_text: ui.briefText,
-                        symbol_icon_name: ui.symbolIconName,
-                        icon_name: ui.iconName,
-                      }}
-                    />
-                    {UnitCostCard(time_cost)}
-                  </Grid.Col>
-                  <Grid.Col span={1}>
-                    <Flex justify="center">{reqCards}</Flex>
+                  <Grid.Col span={playerReq.length ? 4 : 5}>
+                    <Stack spacing={16}>
+                      <UnitDescriptionCard
+                        faction={faction}
+                        desc={{
+                          screen_name: ui.screenName,
+                          help_text: ui.helpText,
+                          brief_text: ui.briefText,
+                          symbol_icon_name: ui.symbolIconName,
+                          icon_name: ui.iconName,
+                        }}
+                      />
+                      <Flex>{hasCost(time_cost) ? UnitCostCard(time_cost) : <></>}</Flex>
+                    </Stack>
                   </Grid.Col>
+                  {playerReq.length ? (
+                    <Grid.Col span={1}>
+                      <Flex justify="center">{reqCards}</Flex>
+                    </Grid.Col>
+                  ) : (
+                    <></>
+                  )}
                 </Grid>
               </Box>
             </Anchor>

diff --git a/components/unit-cards/requirement-card.tsx b/components/unit-cards/requirement-card.tsx
@@ -3,6 +3,11 @@ import ImageWithFallback, { iconPlaceholder } from "../placeholders";
 import { UpgradesType } from "../../src/unitStats";
 
 export const RequirementCard = ({ ui }: UpgradesType) => {
+  const spaceRegex = /\\r?\\n|\\r|\\n/g;
+  const specialRegex = /\*/g;
+
+  const briefText = ui.briefText?.replace(spaceRegex, "\n")?.replace(specialRegex, "");
+
   return (
     <HoverCard position="top" width={280} shadow="md" withArrow>
       <HoverCard.Target>
@@ -17,15 +22,17 @@ export const RequirementCard = ({ ui }: UpgradesType) => {
         </Flex>
       </HoverCard.Target>
       <HoverCard.Dropdown>
-        <Flex direction="column">
+        <Flex direction="column" gap={4}>
           <Title order={4} transform="capitalize">
             {ui.screenName}
           </Title>
-          <Text fz="md" color="yellow.5">
+          <Title order={6} color="yellow.5">
             {ui.extraText}
+          </Title>
+          <Text fz="sm" style={{ whiteSpace: "pre-line" }} italic>
+            {briefText}
           </Text>
-          <Text fz="sm">{ui.briefText}</Text>
-          <Text fz="sm">{ui.helpText}</Text>
+          {/* <Text fz="sm">{ui.helpText}</Text> */}
         </Flex>
       </HoverCard.Dropdown>
     </HoverCard>

diff --git a/components/unit-cards/unit-description-card.tsx b/components/unit-cards/unit-description-card.tsx
@@ -38,6 +38,11 @@ export const UnitDescriptionCard = ({
 }) => {
   const factionBackgroundSrc = BattlegroupBackgrounds[faction];
 
+  const spaceRegex = /\\r?\\n|\\r|\\n/g;
+  const specialRegex = /\*/g;
+
+  const briefText = desc.brief_text?.replace(spaceRegex, "\n")?.replace(specialRegex, "");
+
   return (
     <>
       <Flex direction="row" align="center" gap={16}>
@@ -67,9 +72,9 @@ export const UnitDescriptionCard = ({
               fallbackSrc={symbolPlaceholder}
             />
 
-            <Tooltip.Floating label={desc.brief_text} multiline>
-              <Text fz="sm" lineClamp={2}>
-                {desc.brief_text}
+            <Tooltip.Floating label={briefText} multiline>
+              <Text fz="sm" lineClamp={4} style={{ whiteSpace: "pre-line" }}>
+                {briefText}
               </Text>
             </Tooltip.Floating>
           </Flex>