Add weapons table with basic info (#572)

* Add weapons table with basic info * Add more weapon table columns * Correct size of unit squad card icons * Move scrollbar to the table only --------- Co-authored-by: Petr Vecera <[email protected]>
cohstats · Sep 23, 2024 · 4ce8cbe · 4ce8cbe
1 parent 99d2565
commit 4ce8cbe
Show file tree

Hide file tree

Showing 7 changed files with 1,011 additions and 20 deletions.
diff --git a/components/Header/components/ExplorerMenu.tsx b/components/Header/components/ExplorerMenu.tsx
@@ -20,6 +20,7 @@ import {
   getExplorerFactionRoute,
   getExplorerFactionUnitsRoute,
   getUnitBrowserRoute,
+  getWeaponsRoute,
 } from "../../../src/routes";
 import { localizedNames } from "../../../src/coh3/coh3-data";
 import { getIconsPathOnCDN, internalSlash } from "../../../src/utils";
@@ -154,6 +155,31 @@ const ChallengesLink = ({ close }: { close?: () => void }) => {
   );
 };
 
+const WeaponsLink = ({ close }: { close?: () => void }) => {
+  return (
+    <Group gap={4}>
+      <Image
+        width={20}
+        height={20}
+        fit="contain"
+        src={getIconsPathOnCDN("/icons/unit_status/bw2/generic_infantry_boost.png")}
+        alt=""
+        fallbackSrc={"https://placehold.co/20x20?text=X"}
+      />
+      <Text fw={500}>
+        <Anchor
+          c="orange"
+          component={LinkWithOutPrefetch}
+          href={getWeaponsRoute()}
+          onClick={close}
+        >
+          Weapons
+        </Anchor>
+      </Text>
+    </Group>
+  );
+};
+
 const ExplorerMenu = ({
   classes,
   close,
@@ -166,7 +192,7 @@ const ExplorerMenu = ({
       <Accordion chevronPosition="right">
         <Accordion.Item value="explorer_menu">
           <Accordion.Control className={classes.link}>
-            <Text inherit fw={700}>
+            <Text inherit fw="bold">
               Explorer
             </Text>
           </Accordion.Control>
@@ -183,6 +209,7 @@ const ExplorerMenu = ({
               <DPSLink close={close} />
               <UnitBrowserLink close={close} />
               <ChallengesLink close={close} />
+              <WeaponsLink close={close} />
             </Stack>
           </Accordion.Panel>
         </Accordion.Item>
@@ -196,7 +223,7 @@ const ExplorerMenu = ({
         <HoverCard.Target>
           <Anchor href={"/explorer"} component={LinkWithOutPrefetch} className={classes.link}>
             <Group gap={3}>
-              <Text>Explorer</Text>
+              Explorer
               <IconChevronDown className={classes.hiddenMobile} size={16} />
             </Group>
           </Anchor>
@@ -218,6 +245,7 @@ const ExplorerMenu = ({
                 <DPSLink close={() => null} />
                 <UnitBrowserLink close={() => null} />
                 <ChallengesLink close={() => null} />
+                <WeaponsLink close={() => null} />
               </Stack>
             </Grid.Col>
           </Grid>

diff --git a/components/unit-cards/unit-squad-card.tsx b/components/unit-cards/unit-squad-card.tsx
@@ -49,6 +49,7 @@ const UnitSquadIcons = {
   target_size: "/icons/unit_status/bw2/9_markedtarget.png",
   infantry_armor: "/icons/unit_status/bw2/3_defensivebonus.png",
   range_of_fire: "/icons/unit_status/bw2/artillery_radio_beacon.png",
+  sprint: "/icons/unit_status/bw2/sprint.png",
   acceleration: "/icons/unit_status/bw2/12_speedbonus.png",
   deceleration: "/icons/races/common/abilities/handbrake_on.png",
   cap_mult: "/icons/unit_status/bw2/11_capturebonus.png",
@@ -96,10 +97,10 @@ export const UnitSquadCard = ({
           <Flex gap={4} align="center" justify="space-between">
             <Group gap={4}>
               <ImageWithFallback
-                height={32}
-                width={32}
+                height={18}
+                width={18}
                 fallbackSrc={symbolPlaceholder}
-                src={UnitSquadIcons["max_speed"]}
+                src={type === "vehicles" ? UnitSquadIcons["max_speed"] : UnitSquadIcons["sprint"]}
                 alt="squad default speed"
               ></ImageWithFallback>
               <Text>Speed</Text>
@@ -152,8 +153,8 @@ export const UnitSquadCard = ({
           <Flex gap={4} align="center" justify="space-between">
             <Group gap={4}>
               <ImageWithFallback
-                height={32}
-                width={32}
+                height={18}
+                width={18}
                 fallbackSrc={symbolPlaceholder}
                 src={UnitSquadIcons["range_of_fire"]}
                 alt="squad max range of fire"
@@ -166,15 +167,15 @@ export const UnitSquadCard = ({
 
         <Grid.Col span={{ base: 6, md: 4 }}>
           <Flex gap={4} align="center" justify="space-between">
-            <Group gap={4}>
+            <Group gap={4} ml={4}>
               <ImageWithFallback
-                height={32}
-                width={32}
+                height={20}
+                width={20}
                 fallbackSrc={symbolPlaceholder}
                 src={UnitSquadIcons["target_size"]}
                 alt="squad target size"
               />
-              <Text>Target Size</Text>
+              <Text ml={8}>Target Size</Text>
             </Group>
             <Text style={{ textAlign: "end" }}>{health?.targetSize || 0}</Text>
           </Flex>
@@ -202,15 +203,15 @@ export const UnitSquadCard = ({
 
         <Grid.Col span={{ base: 6, md: 4 }}>
           <Flex gap={4} align="center" justify="space-between">
-            <Group gap={4}>
+            <Group gap={4} ml={4}>
               <ImageWithFallback
-                height={32}
-                width={32}
+                height={20}
+                width={20}
                 fallbackSrc={symbolPlaceholder}
                 src={UnitSquadIcons["cap_mult"]}
                 alt="squad capture rate multiplier"
               />
-              <Text>Capture Multiplier</Text>
+              <Text ml={8}>Capture Multiplier</Text>
             </Group>
             <Text style={{ textAlign: "end" }}>{capture?.cap || 0.0}</Text>
           </Flex>
@@ -220,8 +221,8 @@ export const UnitSquadCard = ({
           <Flex gap={4} align="center" justify="space-between">
             <Group gap={4}>
               <ImageWithFallback
-                height={32}
-                width={32}
+                height={20}
+                width={20}
                 fallbackSrc={symbolPlaceholder}
                 src={UnitSquadIcons["decap_mult"]}
                 alt="squad decapture rate multiplier"