feat: caliber discriminators for antagonist cannon selector

packages/scripts/package.json

@@ -17,14 +17,12 @@
     "@gltf-transform/functions": "^4.0.10",
     "csv-parse": "^5.5.6",
     "decompress": "^4.2.1",
-    "draco3dgltf": "^1.5.7",
     "fast-xml-parser": "^4.4.1",
     "googleapis": "^134.0.0",
     "progress": "^2.0.3"
   },
   "devDependencies": {
     "@types/decompress": "^4.2.7",
-    "@types/draco3dgltf": "^1.4.3",
     "@types/lodash": "^4.17.7",
     "@types/progress": "^2.0.7"
   }

packages/website/src/components/ModuleButtons/TankComponentButton.tsx

@@ -6,6 +6,7 @@ export interface TankComponentButtonProps
   selected?: boolean;
   children?: ReactNode;
   discriminator?: ReactNode;
+  secondaryDiscriminator?: ReactNode;
   disabled?: boolean;
   banner?: string;
   special?: boolean;
@@ -16,6 +17,7 @@ export function TankComponentButton({
   variant,
   selected,
   discriminator,
+  secondaryDiscriminator,
   special,
   children,
   banner,
@@ -73,6 +75,22 @@ export function TankComponentButton({
           {discriminator}
         </Text>
       )}
+
+      {secondaryDiscriminator !== undefined && (
+        <Text
+          size="1"
+          style={{
+            textShadow: '0 0 4px black',
+            position: 'absolute',
+            bottom: '50%',
+            right: 8,
+            textAlign: 'right',
+          }}
+          color={variant === 'ghost' ? 'gray' : undefined}
+        >
+          {secondaryDiscriminator}
+        </Text>
+      )}
     </Button>
   );
 

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -176,6 +176,11 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                         discriminator={
                           TIER_ROMAN_NUMERALS[gun.gun_type!.value.base.tier]
                         }
+                        secondaryDiscriminator={
+                          <Text style={{ fontSize: '0.75em' }}>
+                            {gun.gun_type!.value.base.shells[0].caliber}mm
+                          </Text>
+                        }
                       />
                     ))}
                 </Flex>