feat: row icons

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>

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>

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>
   );

src/stores/tankPerformanceSort.ts

@@ -30,7 +30,7 @@ export interface TankPerformanceSort {
 }
 
 export const useTankPerformanceSort = create<TankPerformanceSort>()(() => ({
-  type: 'battles',
+  type: 'winrate',
   direction: -1,
 }));