From 4bc0a9597373127c50d40ae196cccbb5dc399715 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 29 Jun 2024 12:12:10 -0500
Subject: [PATCH] feat: tank class and icon

---
 .../[id]/components/Model/HeroSection.tsx     | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
index bf9f68b85..f2a1482d6 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
@@ -1,6 +1,7 @@
 import { ChevronLeftIcon, MixIcon } from '@radix-ui/react-icons';
 import { Button, Flex, Heading, Text } from '@radix-ui/themes';
 import Link from 'next/link';
+import { classIcons } from '../../../../../../components/ClassIcon';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useFullScreen } from '../../../../../../hooks/useFullScreen';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
@@ -11,14 +12,15 @@ import { TankSandbox } from './TankSandbox';
 import { Options } from './components/Options';
 
 export function HeroSection() {
-  const protagonistTank = useDuel((state) => state.protagonist!.tank);
-  const antagonistTank = useDuel((state) => state.antagonist!.tank);
+  const protagonist = useDuel((state) => state.protagonist!.tank);
+  const antagonist = useDuel((state) => state.antagonist!.tank);
   const wideFormat = useWideFormat(880);
   const compareTanks =
-    protagonistTank.id === antagonistTank.id
-      ? [protagonistTank.id]
-      : [protagonistTank.id, antagonistTank.id];
+    protagonist.id === antagonist.id
+      ? [protagonist.id]
+      : [protagonist.id, antagonist.id];
   const isFullScreen = useFullScreen();
+  const Icon = classIcons[protagonist.class];
 
   return (
     <Flex
@@ -58,18 +60,26 @@ export function HeroSection() {
             <Heading
               size={wideFormat ? '9' : '8'}
               align={wideFormat ? undefined : 'center'}
+              color={
+                protagonist.treeType === 'collector'
+                  ? 'blue'
+                  : protagonist.treeType === 'premium'
+                    ? 'amber'
+                    : undefined
+              }
             >
-              {protagonistTank.nameFull ?? protagonistTank.name}
+              <Icon style={{ width: '0.75em', height: '0.75em' }} />{' '}
+              {protagonist.nameFull ?? protagonist.name}
             </Heading>
 
             <Text color="gray">
-              Tier {TIER_ROMAN_NUMERALS[protagonistTank.tier]}{' '}
+              Tier {TIER_ROMAN_NUMERALS[protagonist.tier]}{' '}
               {
                 (strings.common.nations_adjectives as Record<string, string>)[
-                  protagonistTank.nation
+                  protagonist.nation
                 ]
               }{' '}
-              {strings.common.tank_class_short[protagonistTank.class]}
+              {strings.common.tank_class_short[protagonist.class]}
             </Text>
 
             <Flex gap="4" mt="-1">