From 3deaa1e9bd5042141c554437ae656f50457e149d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 2 Jul 2024 18:42:23 -0500
Subject: [PATCH] feat: row icons

---
 .../tank-performance/components/Info.tsx      |  3 --
 .../tank-performance/components/TankRow.tsx   |  1 +
 src/components/TankRowHeaderCell.tsx          | 32 ++++++++++++-------
 src/stores/tankPerformanceSort.ts             |  2 +-
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/app/tools/tank-performance/components/Info.tsx b/src/app/tools/tank-performance/components/Info.tsx
index 6588dc43f..e856736fc 100644
--- a/src/app/tools/tank-performance/components/Info.tsx
+++ b/src/app/tools/tank-performance/components/Info.tsx
@@ -25,9 +25,6 @@ export function Info() {
           Career stats based on {numberFormat.format(Math.round(samples))}{' '}
           players with at least 5K career battles and 1 battle in the past 30
           days; updated daily.
-          <br />
-          May differ from BlitzStars because BlitzKit includes{' '}
-          {Math.round(samples / 1e4)}x more players.
         </Callout.Text>
       </Callout.Root>
     </Flex>
diff --git a/src/app/tools/tank-performance/components/TankRow.tsx b/src/app/tools/tank-performance/components/TankRow.tsx
index 9fe4e10cf..c749cb50e 100644
--- a/src/app/tools/tank-performance/components/TankRow.tsx
+++ b/src/app/tools/tank-performance/components/TankRow.tsx
@@ -22,6 +22,7 @@ export const TankRow = memo<TankRowProps>(
     return (
       <Table.Row>
         <TankRowHeaderCell tank={tank} />
+
         <Table.Cell align="center">
           {Math.round((averages.mu.wins / averages.mu.battles) * 100)}%
         </Table.Cell>
diff --git a/src/components/TankRowHeaderCell.tsx b/src/components/TankRowHeaderCell.tsx
index 7dcc1d4e7..7b8fbe7e5 100644
--- a/src/components/TankRowHeaderCell.tsx
+++ b/src/components/TankRowHeaderCell.tsx
@@ -1,14 +1,17 @@
-import { Table } from '@radix-ui/themes';
+import { IconButton, Table } from '@radix-ui/themes';
 import { TankDefinition } from '../core/blitzkit/tankDefinitions';
 import { tankIcon } from '../core/blitzkit/tankIcon';
-import { ExperimentIcon } from './ExperimentIcon';
+import { classIcons } from './ClassIcon';
 import { Link } from './Link';
+import { ScienceIcon } from './ScienceIcon';
 
 interface TankRowHeaderCellProps {
   tank: TankDefinition;
 }
 
 export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
+  const Icon = classIcons[tank.class];
+
   return (
     <Table.RowHeaderCell style={{ display: 'flex' }}>
       <Link href={`/tools/tankopedia/${tank.id}`} tabIndex={-1}>
@@ -26,8 +29,14 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
       </Link>
 
       <Link
-        color="gray"
-        highContrast
+        color={
+          tank.treeType === 'collector'
+            ? 'blue'
+            : tank.treeType === 'premium'
+              ? 'amber'
+              : 'gray'
+        }
+        highContrast={tank.treeType === 'researchable'}
         underline="hover"
         wrap="nowrap"
         href={`/tools/tankopedia/${tank.id}`}
@@ -36,16 +45,17 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
           display: 'flex',
           alignItems: 'center',
           gap: 'var(--space-1)',
-          width: 128,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
         }}
       >
-        {tank.testing && (
-          <ExperimentIcon style={{ width: '1em', height: '1em' }} />
-        )}
+        <Icon width="1em" height="1em" />
+
         {tank.name}
+
+        {tank.testing && (
+          <IconButton size="1" ml="1">
+            <ScienceIcon style={{ width: '1em', height: '1em' }} />
+          </IconButton>
+        )}
       </Link>
     </Table.RowHeaderCell>
   );
diff --git a/src/stores/tankPerformanceSort.ts b/src/stores/tankPerformanceSort.ts
index 2bd500a96..28b245245 100644
--- a/src/stores/tankPerformanceSort.ts
+++ b/src/stores/tankPerformanceSort.ts
@@ -30,7 +30,7 @@ export interface TankPerformanceSort {
 }
 
 export const useTankPerformanceSort = create<TankPerformanceSort>()(() => ({
-  type: 'battles',
+  type: 'winrate',
   direction: -1,
 }));