diff --git a/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx new file mode 100644 index 000000000..767e6f7b9 --- /dev/null +++ b/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx @@ -0,0 +1,138 @@ +import { CheckIcon, Cross1Icon } from '@radix-ui/react-icons'; +import { Code, Flex, Heading, Text } from '@radix-ui/themes'; +import { classIcons } from '../../../../../../components/ClassIcon'; +import { asset } from '../../../../../../core/blitzkit/asset'; +import { tankIcon } from '../../../../../../core/blitzkit/tankIcon'; +import strings from '../../../../../../lang/en-US.json'; +import * as App from '../../../../../../stores/app'; +import * as Duel from '../../../../../../stores/duel'; + +export function MetaSection() { + const developerMode = App.use((state) => state.developerMode); + const tank = Duel.use((state) => state.protagonist.tank); + const rawPrice = + typeof tank.price === 'number' ? tank.price : tank.price.value; + const priceType = + typeof tank.price === 'number' ? 'credits' : tank.price.type; + const salePrice = 0.5 * rawPrice; + const purchasePrice = rawPrice; + let worthSelling: boolean; + const ClassIcon = classIcons[tank.class]; + + if (priceType === 'gold') { + worthSelling = tank.tier <= 6 || purchasePrice - salePrice <= 500; + } else { + worthSelling = tank.tier <= 7; + } + + return ( + + + Economics + + + + Overview + + + + Name + {tank.nameFull && Full-name} + Tier + Class + Type + {developerMode && ( + + DEV: ID + + )} + + + + {tank.name} + {tank.nameFull && {tank.nameFull}} + {tank.tier} + + + + {strings.common.tank_class_short[tank.class]} + + + + {strings.common.tree_type[tank.treeType]} + + {developerMode && {tank.id}} + + + + + + Economics + + + + + {priceType === 'credits' ? 'Purchase' : 'Restoration'} price + + {tank.xp && Research XP} + Sale price + Worth selling + + + + + {purchasePrice.toLocaleString()} + {priceType} + + + {tank.xp && ( + + {tank.xp.toLocaleString()} + xp + + )} + + + {salePrice.toLocaleString()} + {priceType} + + + + + {worthSelling ? 'Yes' : 'No'} + {worthSelling && } + {!worthSelling && } + + + + + + + + + ); +} diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index f01680809..b221b086c 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/src/app/tools/tankopedia/[id]/page.tsx @@ -8,6 +8,7 @@ import * as Duel from '../../../../stores/duel'; import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral'; import { HistorySection } from './components/HistorySection'; import { CharacteristicsSection } from './components/Model/CharacteristicsSection'; +import { MetaSection } from './components/Model/MetaSection'; import { GameModeSection } from './components/Model/GameModeSection'; import { HeroSection } from './components/Model/HeroSection'; import { TechTreeSection } from './components/Model/TechTreeSection'; @@ -77,6 +78,7 @@ export default function Page({ params }: { params: { id: string } }) { return ( + {!exempt && }