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 (
+
+
+
+
+
+
+ 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()}
+
+
+
+ {tank.xp && (
+
+ {tank.xp.toLocaleString()}
+
+
+ )}
+
+
+ {salePrice.toLocaleString()}
+
+
+
+
+
+ {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 && }