Small UI tweaks on the units page (#600)

* Small ui tweaks * De-duplicate abilities
cohstats · Oct 1, 2024 · b203777 · b203777
1 parent f361c75
commit b203777
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 19 deletions.
diff --git a/components/unit-cards/unit-description-card.tsx b/components/unit-cards/unit-description-card.tsx
@@ -32,20 +32,26 @@ export type UnitDescription = {
 export const UnitDescriptionCard = ({
   desc,
   faction,
+  list,
 }: {
   desc: UnitDescription;
   faction: raceType;
+  list?: boolean; // Specifies if the description card is used in the list of all units or in unit details
 }) => {
   const factionBackgroundSrc = BattlegroupBackgrounds[faction];
 
   const spaceRegex = /\\r?\\n|\\r|\\n/g;
   const specialRegex = /\*/g;
+  const regexDot = /•/g;
 
-  const briefText = desc.brief_text?.replace(spaceRegex, "\n")?.replace(specialRegex, "");
+  const briefText = desc.brief_text
+    ?.replace(spaceRegex, "\n")
+    ?.replace(specialRegex, "")
+    .replace(regexDot, "• ");
 
   return (
     <>
-      <Flex direction="row" align="center" gap={16}>
+      <Flex direction="row" align={list ? "center" : "start"} gap={"md"}>
         <BackgroundImage w={96} h={96} src={getIconsPathOnCDN(factionBackgroundSrc)} radius="md">
           <ImageWithFallback
             width={96}
@@ -74,8 +80,8 @@ export const UnitDescriptionCard = ({
 
           {/* Symbol horizontal aligned with brief text. */}
           <Flex direction="row" align="center" gap={4}>
-            <Tooltip.Floating label={briefText} multiline>
-              <Text fz="sm" lineClamp={4} style={{ whiteSpace: "pre-line" }}>
+            <Tooltip.Floating label={briefText} multiline w={500}>
+              <Text fz="sm" lineClamp={list ? 2 : 10} style={{ whiteSpace: "pre-line" }}>
                 {briefText}
               </Text>
             </Tooltip.Floating>

diff --git a/pages/explorer/races/[raceId]/units/[unitId].tsx b/pages/explorer/races/[raceId]/units/[unitId].tsx
@@ -159,18 +159,17 @@ const UnitDetail: NextPage<UnitDetailProps> = ({ calculatedData }) => {
         />
       </Head>
       <Container fluid p={0}>
-        <Space h={32} />
         <Flex direction="row" align="center" gap="md">
           <FactionIcon name={raceId} width={96}></FactionIcon>
           <Stack gap="xs">
             <Title order={3}>{localizedRace}</Title>
             <Text size="md">{descriptionRace}</Text>
           </Stack>
         </Flex>
-        <Space h={32} />
+        <Space h={"xl"} />
         <Grid columns={3} grow>
           <Grid.Col span={3}>
-            <Card p="lg" radius="md" withBorder>
+            <Card p="md" radius="md" withBorder>
               <UnitDescriptionCard
                 faction={raceId}
                 desc={{
@@ -186,7 +185,7 @@ const UnitDetail: NextPage<UnitDetailProps> = ({ calculatedData }) => {
           <Grid.Col span={{ md: 2, xs: 3 }} order={1}>
             <Stack>
               <Title order={4}>Stats</Title>
-              <Card p="lg" radius="md" withBorder>
+              <Card p="md" radius="md" withBorder>
                 {UnitSquadCard({
                   id: resolvedSquad.id,
                   type: resolvedSquad.unitType,
@@ -210,7 +209,7 @@ const UnitDetail: NextPage<UnitDetailProps> = ({ calculatedData }) => {
           <Grid.Col span={{ md: 1, xs: 3 }} order={2}>
             <Stack>
               <Title order={4}>Stats</Title>
-              <Card p="lg" radius="md" withBorder>
+              <Card p="md" radius="md" withBorder>
                 {UnitCostCard(totalCost)}
                 {defaultSquadMember.unitType !== "vehicles" &&
                 defaultSquadMember.unitType !== "emplacements" ? (
@@ -219,18 +218,18 @@ const UnitDetail: NextPage<UnitDetailProps> = ({ calculatedData }) => {
                   <></>
                 )}
               </Card>
-              <Card p="lg" radius="md" withBorder>
+              <Card p="md" radius="md" withBorder>
                 {HitpointCard({ squad: resolvedSquad, entities: resolvedEntities })}
               </Card>
-              <Card p="lg" radius="md" withBorder>
+              <Card p="md" radius="md" withBorder>
                 {UnitCostCard(totalUpkeepCost, "Upkeep per minute")}
               </Card>
-              <Card p="lg" radius="md" withBorder>
+              <Card p="md" radius="md" withBorder>
                 <VeterancyCard
                   one={resolvedSquad.veterancyInfo.one}
                   two={resolvedSquad.veterancyInfo.two}
                   three={resolvedSquad.veterancyInfo.three}
-                ></VeterancyCard>
+                />
               </Card>
             </Stack>
           </Grid.Col>
@@ -286,7 +285,7 @@ const UnitBuildingSection = (buildings: EbpsType[]) => {
           // 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>
+              <Card key={id} p="md" radius="md" withBorder>
                 {ConstructableCard({
                   id,
                   desc: {
@@ -314,6 +313,7 @@ const UnitBuildingSection = (buildings: EbpsType[]) => {
 const UnitAbilitySection = (abilities: AbilitiesType[]) => {
   // Resolve unit abilities.
   if (!abilities || !abilities.length) return <></>;
+
   return (
     <Stack>
       <Title order={4}>Abilities</Title>
@@ -322,7 +322,7 @@ const UnitAbilitySection = (abilities: AbilitiesType[]) => {
           // 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>
+              <Card key={id} p="md" radius="md" withBorder>
                 {UnitUpgradeCard({
                   id,
                   desc: {
@@ -408,12 +408,12 @@ const createdCalculateValuesForUnits = (
 
   const upgrades = Object.values(getResolvedUpgrades(resolvedSquad.upgrades, upgradesData));
 
-  const abilities = Object.values(getResolvedAbilities(resolvedSquad.abilities, abilitiesData));
+  const rawAbilities = Object.values(
+    getResolvedAbilities(resolvedSquad.abilities, abilitiesData),
+  );
 
   const buildables = Object.values(getResolvedConstruction(resolvedSquad.construction, ebpsData));
 
-  // console.log('Calculated abilities', resolvedSquad);
-
   const resolvedEntities: EbpsType[] = [];
 
   for (const loadout of resolvedSquad.loadout || []) {
@@ -424,6 +424,19 @@ const createdCalculateValuesForUnits = (
     }
   }
 
+  // Some abilities are duplicated, they have different IDs but the name and description is the same.
+  // IF the UI is completely the same, we can remove the duplicates.
+  // This might lead to some bugs in case other parts would be different.
+  const abilities: AbilitiesType[] = [];
+  for (const ability of rawAbilities) {
+    // If we are missing the name of the ability --> it's most likely broken // remove it here so we save the data
+    if (ability.ui.screenName) {
+      if (!abilities.find((x) => JSON.stringify(x.ui) === JSON.stringify(ability.ui))) {
+        abilities.push(ability);
+      }
+    }
+  }
+
   return {
     resolvedSquad,
     totalCost,

diff --git a/pages/explorer/races/[raceId]/units/index.tsx b/pages/explorer/races/[raceId]/units/index.tsx
@@ -77,7 +77,7 @@ const ExplorerUnits: NextPage<UnitDetailProps> = ({ units, raceToFetch }) => {
                       component={LinkWithOutPrefetch}
                       href={getExplorerUnitRoute(raceToFetch, id)}
                     >
-                      <Card p="md" radius="md" withBorder>
+                      <Card p={{ base: "xs", sm: "md" }} radius="md" withBorder>
                         <UnitDescriptionCard
                           faction={raceToFetch}
                           desc={{
@@ -87,6 +87,7 @@ const ExplorerUnits: NextPage<UnitDetailProps> = ({ units, raceToFetch }) => {
                             symbol_icon_name: ui.symbolIconName,
                             icon_name: ui.iconName,
                           }}
+                          list
                         />
                       </Card>
                     </Anchor>