feat: more data

src/app/tools/tank-performance/components/TankRow.tsx

@@ -0,0 +1,57 @@
+import { Table } from '@radix-ui/themes';
+import { memo, use } from 'react';
+import { TankRowHeaderCell } from '../../../../components/TankRowHeaderCell';
+import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
+import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
+
+interface TankRowProps {
+  tank: TankDefinition;
+}
+
+export const TankRow = memo<TankRowProps>(
+  ({ tank }) => {
+    const awaitedAverageDefinitions = use(averageDefinitions);
+    const averages = awaitedAverageDefinitions[tank.id];
+
+    return (
+      <Table.Row>
+        <TankRowHeaderCell tank={tank} />
+        <Table.Cell align="center">
+          {Math.round(averages.mu.wins * 100)}%
+        </Table.Cell>
+        <Table.Cell align="center">
+          {averages.samples.toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(averages.mu.damage_dealt).toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(averages.mu.survived_battles * 100)}%
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(averages.mu.xp).toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">{averages.mu.frags.toFixed(2)}</Table.Cell>
+        <Table.Cell align="center">{averages.mu.spotted.toFixed(2)}</Table.Cell>
+        <Table.Cell align="center">
+          {Math.round((averages.mu.hits / averages.mu.shots) * 100)}%
+        </Table.Cell>
+        <Table.Cell align="center">{averages.mu.shots.toFixed(1)}</Table.Cell>
+        <Table.Cell align="center">{averages.mu.hits.toFixed(1)}</Table.Cell>
+        <Table.Cell align="center">
+          {(averages.mu.damage_dealt / averages.mu.damage_received).toFixed(2)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(averages.mu.damage_received).toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {averages.mu.capture_points.toFixed(2)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {averages.mu.dropped_capture_points.toFixed(2)}
+        </Table.Cell>
+      </Table.Row>
+    );
+  },
+  (prev, next) => prev.tank.id === next.tank.id,
+);

src/app/tools/tank-performance/page.tsx

@@ -2,9 +2,9 @@ import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { Callout, Flex, Table } from '@radix-ui/themes';
 import { use, useMemo } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
-import { TankRowHeaderCell } from '../../../components/TankRowHeaderCell';
 import { averageDefinitionsArray } from '../../../core/blitzkit/averageDefinitions';
 import { tankDefinitions } from '../../../core/blitzkit/tankDefinitions';
+import { TankRow } from './components/TankRow';
 
 export default function Page() {
   const awaitedTankDefinitions = use(tankDefinitions);
@@ -19,7 +19,7 @@ export default function Page() {
   );
 
   return (
-    <PageWrapper color="jade">
+    <PageWrapper color="jade" noMaxWidth>
       <Flex justify="center">
         <Callout.Root style={{ width: 'fit-content' }}>
           <Callout.Icon>
@@ -27,91 +27,70 @@ export default function Page() {
           </Callout.Icon>
           <Callout.Text>
             Based on {samples.toLocaleString()} players with at least 5,000
-            career battles and 1 battle in the past 120 days. Updated daily.
+            career battles and 1 battle in the past 120 days. Stats displayed as
-            Stats displayed as an average per battle.
+            an average per battle. Updated daily.
           </Callout.Text>
         </Callout.Root>
       </Flex>
 
-      <Table.Root variant="surface" style={{ textWrap: 'nowrap' }}>
+      <Flex justify="center">
+        <Table.Root variant="surface" style={{ maxWidth: '100%' }}>
           <Table.Header>
-          <Table.Row>
+            <Table.Row align="end">
               <Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
+              <Table.ColumnHeaderCell width="0" justify="center">
                 Winrate
               </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
+              <Table.ColumnHeaderCell width="0" justify="center">
+                Players
+              </Table.ColumnHeaderCell>
+              <Table.ColumnHeaderCell width="0" justify="center">
                 Damage
               </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
+              <Table.ColumnHeaderCell width="0" justify="center">
                 Survival
               </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
+              <Table.ColumnHeaderCell width="0" justify="center">
                 XP
               </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
+              <Table.ColumnHeaderCell width="0" justify="center">
                 Kills
               </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
+              <Table.ColumnHeaderCell width="0" justify="center">
                 Spots
               </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
+              <Table.ColumnHeaderCell width="0" justify="center">
                 Accuracy
               </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
+              <Table.ColumnHeaderCell width="0" justify="center">
                 Shots
               </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
+              <Table.ColumnHeaderCell width="0" justify="center">
                 Hits
               </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
+              <Table.ColumnHeaderCell width="0" justify="center">
+                Damage ratio
+              </Table.ColumnHeaderCell>
+              <Table.ColumnHeaderCell width="0" justify="center">
+                Damage received
+              </Table.ColumnHeaderCell>
+              <Table.ColumnHeaderCell width="0" justify="center">
                 Capture points
               </Table.ColumnHeaderCell>
+              <Table.ColumnHeaderCell width="0" justify="center">
+                Dropped capture points
+              </Table.ColumnHeaderCell>
             </Table.Row>
           </Table.Header>
 
           <Table.Body>
             {tankAverages.map((averages) => {
               const tank = awaitedTankDefinitions[averages.id];
-
+              return <TankRow tank={tank} key={tank.id} />;
-            return (
-              <Table.Row key={averages.id}>
-                <TankRowHeaderCell tank={tank} />
-                <Table.Cell align="right">
-                  {Math.round(averages.mu.wins * 100)}%
-                </Table.Cell>
-                <Table.Cell align="right">
-                  {Math.round(averages.mu.damage_dealt).toLocaleString()}
-                </Table.Cell>
-                <Table.Cell align="right">
-                  {Math.round(averages.mu.survived_battles * 100)}%
-                </Table.Cell>
-                <Table.Cell align="right">
-                  {Math.round(averages.mu.xp).toLocaleString()}
-                </Table.Cell>
-                <Table.Cell align="right">
-                  {averages.mu.frags.toFixed(2)}
-                </Table.Cell>
-                <Table.Cell align="right">
-                  {averages.mu.spotted.toFixed(2)}
-                </Table.Cell>
-                <Table.Cell align="right">
-                  {Math.round((averages.mu.hits / averages.mu.shots) * 100)}%
-                </Table.Cell>
-                <Table.Cell align="right">
-                  {averages.mu.shots.toFixed(1)}
-                </Table.Cell>
-                <Table.Cell align="right">
-                  {averages.mu.hits.toFixed(1)}
-                </Table.Cell>
-                <Table.Cell align="right">
-                  {averages.mu.capture_points.toFixed(1)}
-                </Table.Cell>
-              </Table.Row>
-            );
             })}
           </Table.Body>
         </Table.Root>
+      </Flex>
     </PageWrapper>
   );
 }

src/components/TankRowHeaderCell.tsx

@@ -1,4 +1,4 @@
-import { Flex, Table } from '@radix-ui/themes';
+import { Table } from '@radix-ui/themes';
 import { TankDefinition } from '../core/blitzkit/tankDefinitions';
 import { tankIcon } from '../core/blitzkit/tankIcon';
 import { ExperimentIcon } from './ExperimentIcon';
@@ -33,14 +33,19 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
         href={`/tools/tankopedia/${tank.id}`}
         style={{
           paddingLeft: 'var(--space-2)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-1)',
+          width: 128,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
         }}
       >
-        <Flex align="center" gap="1" position="relative" pl="2">
         {tank.testing && (
           <ExperimentIcon style={{ width: '1em', height: '1em' }} />
         )}
         {tank.name}
-        </Flex>
       </Link>
     </Table.RowHeaderCell>
   );