diff --git a/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx b/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx index 6436fab6d..24b9f194d 100644 --- a/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx +++ b/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" /> diff --git a/src/app/tools/tankopedia/[id]/components/Configure.tsx b/src/app/tools/tankopedia/[id]/components/Configure.tsx index 5b77ae2b4..1ae2712bb 100644 --- a/src/app/tools/tankopedia/[id]/components/Configure.tsx +++ b/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} diff --git a/src/components/ModuleButton.tsx b/src/components/ModuleButton.tsx index 48a6325ac..024289bd2 100644 --- a/src/components/ModuleButton.tsx +++ b/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, '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 && ( - {TIER_ROMAN_NUMERALS[props.tier]} + {discriminator} )}