feat: shell numbers

src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx

@@ -13,7 +13,10 @@ import { useState } from 'react';
 import { ModuleButton } from '../../../../../../components/ModuleButton';
 import { SmallTankIcon } from '../../../../../../components/SmallTankIcon';
 import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration';
-import { SHELL_NAMES } from '../../../../../../core/blitzkrieg/tankDefinitions';
+import {
+  SHELL_NAMES,
+  TIER_ROMAN_NUMERALS,
+} from '../../../../../../core/blitzkrieg/tankDefinitions';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
 import { useTankopediaTemporary } from '../../../../../../stores/tankopedia';
 import { TankSearch } from '../../../components/TankSearch';
@@ -39,6 +42,7 @@ export function AntagonistBar() {
                 shell={shell.icon}
                 rowChild
                 first={index === 0}
+                discriminator={`${index + 1}`}
                 key={shell.id}
                 last={index === antagonist.gun.shells.length - 1}
                 onClick={() => {
@@ -141,7 +145,9 @@ export function AntagonistBar() {
                                     });
                                   }}
                                   selected={antagonist.turret.id === turret.id}
-                                  tier={turret.tier}
+                                  discriminator={
+                                    TIER_ROMAN_NUMERALS[turret.tier]
+                                  }
                                   type="module"
                                   module="turret"
                                 />
@@ -164,7 +170,7 @@ export function AntagonistBar() {
                                     });
                                   }}
                                   selected={antagonist.gun.id === gun.id}
-                                  tier={gun.tier}
+                                  discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
                                   type="module"
                                   module="gun"
                                 />

src/app/tools/tankopedia/[id]/components/Configure.tsx

@@ -2,6 +2,7 @@ import { Flex, Heading } from '@radix-ui/themes';
 import { use } from 'react';
 import { ModuleButton } from '../../../../../components/ModuleButton';
 import { equipmentDefinitions } from '../../../../../core/blitzkrieg/equipmentDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../../../../../core/blitzkrieg/tankDefinitions';
 import { mutateDuel, useDuel } from '../../../../../stores/duel';
 import {
   mutateTankopediaTemporary,
@@ -34,7 +35,7 @@ export function Configure() {
                     selected={protagonist.turret.id === thisTurret.id}
                     type="module"
                     module="turret"
-                    tier={thisTurret.tier}
+                    discriminator={TIER_ROMAN_NUMERALS[thisTurret.tier]}
                     first={index === 0}
                     last={index === protagonist.tank.turrets.length - 1}
                     rowChild
@@ -58,7 +59,7 @@ export function Configure() {
                     key={thisGun.id}
                     type="module"
                     module="gun"
-                    tier={thisGun.tier}
+                    discriminator={TIER_ROMAN_NUMERALS[thisGun.tier]}
                     selected={protagonist.gun.id === thisGun.id}
                     first={index === 0}
                     last={index === protagonist.turret.guns.length - 1}

src/components/ModuleButton.tsx

@@ -1,18 +1,17 @@
 import { Button, Text } from '@radix-ui/themes';
 import { ComponentProps } from 'react';
 import { asset } from '../core/blitzkrieg/asset';
-import { TIER_ROMAN_NUMERALS, Tier } from '../core/blitzkrieg/tankDefinitions';
 
 type ModuleButtonProps = Omit<ComponentProps<typeof Button>, 'type'> & {
   selected?: boolean;
   first?: boolean;
   last?: boolean;
   rowChild?: boolean;
+  discriminator?: string;
 } & (
     | {
         type: 'module';
         module: string;
-        tier: Tier;
       }
     | {
         type: 'shell';
@@ -30,6 +29,7 @@ export function ModuleButton({
   first = false,
   last = false,
   rowChild,
+  discriminator,
   ...props
 }: ModuleButtonProps) {
   return (
@@ -74,7 +74,7 @@ export function ModuleButton({
               }),
         }}
       />
-      {props.type === 'module' && (
+      {discriminator !== undefined && (
         <Text
           size="1"
           weight="bold"
@@ -86,7 +86,7 @@ export function ModuleButton({
             textAlign: 'right',
           }}
         >
-          {TIER_ROMAN_NUMERALS[props.tier]}
+          {discriminator}
         </Text>
       )}
     </Button>