feat: some data

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

@@ -1,5 +1,6 @@
-import { Table } from '@radix-ui/themes';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
-import { use } from 'react';
+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';
@@ -8,20 +9,108 @@ import { tankDefinitions } from '../../../core/blitzkit/tankDefinitions';
 export default function Page() {
   const awaitedTankDefinitions = use(tankDefinitions);
   const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
+  const tankAverages = useMemo(
+    () => awaitedAverageDefinitionsArray.sort((a, b) => b.mu.wins - a.mu.wins),
+    [],
+  );
+  const samples = useMemo(
+    () => awaitedAverageDefinitionsArray.reduce((a, b) => a + b.samples, 0),
+    [],
+  );
 
   return (
     <PageWrapper color="jade">
-      <Table.Root variant="surface">
+      <Flex justify="center">
-        {awaitedAverageDefinitionsArray.map((averages) => {
+        <Callout.Root style={{ width: 'fit-content' }}>
-          const tank = awaitedTankDefinitions[averages.id];
+          <Callout.Icon>
+            <InfoCircledIcon />
+          </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.
+            Stats displayed as an average per battle.
+          </Callout.Text>
+        </Callout.Root>
+      </Flex>
 
-          return (
+      <Table.Root variant="surface" style={{ textWrap: 'nowrap' }}>
-            <Table.Row key={averages.id}>
+        <Table.Header>
-              <TankRowHeaderCell tank={tank} />
+          <Table.Row>
-              <Table.Cell>{Math.round(averages.mu.wins * 100)}%</Table.Cell>
+            <Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
-            </Table.Row>
+            <Table.ColumnHeaderCell width="0" align="right">
-          );
+              Winrate
-        })}
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              Damage
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              Survival
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              XP
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              Kills
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              Spots
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              Accuracy
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              Shots
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              Hits
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              Capture points
+            </Table.ColumnHeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {tankAverages.map((averages) => {
+            const tank = awaitedTankDefinitions[averages.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>
     </PageWrapper>
   );

src/components/TankRowHeaderCell.tsx

@@ -1,7 +1,7 @@
-import { Table, Text } from '@radix-ui/themes';
+import { Flex, Table } from '@radix-ui/themes';
 import { TankDefinition } from '../core/blitzkit/tankDefinitions';
 import { tankIcon } from '../core/blitzkit/tankIcon';
-import { theme } from '../stitches.config';
+import { ExperimentIcon } from './ExperimentIcon';
 import { Link } from './Link';
 
 interface TankRowHeaderCellProps {
@@ -10,52 +10,37 @@ interface TankRowHeaderCellProps {
 
 export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
   return (
-    <Table.RowHeaderCell
+    <Table.RowHeaderCell style={{ display: 'flex' }}>
-      style={{
-        paddingLeft: 32,
-        position: 'relative',
-        overflowY: 'hidden',
-      }}
-    >
       <Link href={`/tools/tankopedia/${tank.id}`}>
         <img
           alt={tank.name}
           draggable={false}
           src={tankIcon(tank.id)}
           style={{
-            position: 'absolute',
+            margin: 'calc(-1 * var(--table-cell-padding)) 0',
-            width: 128 + 32,
+            height: 'calc(100% + 2 * var(--table-cell-padding))',
-            height: '200%',
+            aspectRatio: '16 / 9',
-            top: '-50%',
+            objectFit: 'cover',
-            left: 0,
-            objectFit: 'contain',
-            objectPosition: '50% 50%',
-            overflow: 'hidden',
           }}
         />
+      </Link>
 
-        <div
+      <Link
-          style={{
+        color="gray"
-            backgroundColor: 'red',
+        highContrast
-            position: 'absolute',
+        underline="hover"
-            top: 0,
+        wrap="nowrap"
-            left: 0,
+        href={`/tools/tankopedia/${tank.id}`}
-            height: '100%',
+        style={{
-            width: 128,
+          paddingLeft: 'var(--space-2)',
-            background: 'linear-gradient(90deg, #00000080, #00000000)',
+        }}
-          }}
+      >
-        />
+        <Flex align="center" gap="1" position="relative" pl="2">
-
+          {tank.testing && (
-        <Text
+            <ExperimentIcon style={{ width: '1em', height: '1em' }} />
-          style={{
+          )}
-            color: theme.colors.textHighContrast,
-            position: 'relative',
-            textWrap: 'nowrap',
-            textShadow: 'black 0 0 4px',
-          }}
-        >
           {tank.name}
-        </Text>
+        </Flex>
       </Link>
     </Table.RowHeaderCell>
   );