feat: start of tank averages

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex } from '@radix-ui/themes';
+import { Box, Flex } from '@radix-ui/themes';
 import { Ad, AdType } from '../components/Ad';
 import { AdMidSectionResponsive } from '../components/AdMidSectionResponsive';
 import {
@@ -11,6 +11,7 @@ import {
   ratingTool,
   sessionTool,
   tankopediaTool,
+  tankPerformanceTool,
 } from '../constants/tools';
 import { useAdExempt } from '../hooks/useAdExempt';
 import { Hero } from './components/Hero';
@@ -64,13 +65,13 @@ export default function Page() {
           )}
 
           <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-            <ToolCard tool={compareTool} />
             <ToolCard tool={playerStatsTool} />
+            <ToolCard tool={compareTool} />
           </Flex>
 
           <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+            <ToolCard tool={tankPerformanceTool} />
             <ToolCard tool={sessionTool} />
-            <ToolCard tool={ratingTool} />
           </Flex>
 
           {!exempt && (
@@ -86,8 +87,13 @@ export default function Page() {
           )}
 
           <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+            <ToolCard tool={ratingTool} />
             <ToolCard tool={discordTool} />
+          </Flex>
+
+          <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
             <ToolCard tool={moreTool} />
+            <Box flexGrow="1" />
           </Flex>
         </Flex>
 

src/app/tools/session/page.tsx

@@ -13,7 +13,6 @@ import {
   Flex,
   Heading,
   IconButton,
-  Link,
   Select,
   Spinner,
   Table,
@@ -23,6 +22,7 @@ import {
 import { debounce } from 'lodash';
 import { use, useEffect, useMemo, useRef, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
+import { TankRowHeaderCell } from '../../../components/TankRowHeaderCell';
 import { UNLOCALIZED_REGION_NAMES_SHORT } from '../../../constants/regions';
 import {
   STAT_KEYS,
@@ -42,11 +42,9 @@ import searchPlayersAcrossRegions, {
   AccountListWithServer,
 } from '../../../core/blitz/searchPlayersAcrossRegions';
 import { tankDefinitions } from '../../../core/blitzkit/tankDefinitions';
-import { tankIcon } from '../../../core/blitzkit/tankIcon';
 import { tankAverages } from '../../../core/blitzstars/tankAverages';
 import { deltaTankStats } from '../../../core/statistics/deltaTankStats';
 import { useWideFormat } from '../../../hooks/useWideFormat';
-import { theme } from '../../../stitches.config';
 import mutateSession, {
   SessionTracking,
   useSession,
@@ -483,55 +481,7 @@ export default function Page({
                     overflow: 'hidden',
                   }}
                 >
-                  <Table.RowHeaderCell
-                    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',
-                          width: 128 + 32,
-                          height: '200%',
-                          top: '-50%',
-                          left: 0,
-                          objectFit: 'contain',
-                          objectPosition: '50% 50%',
-                          overflow: 'hidden',
-                        }}
-                      />
-
-                      <div
-                        style={{
-                          backgroundColor: 'red',
-                          position: 'absolute',
-                          top: 0,
-                          left: 0,
-                          height: '100%',
-                          width: 128,
-                          background:
-                            'linear-gradient(90deg, #00000080, #00000000)',
-                        }}
-                      />
-
-                      <Text
-                        style={{
-                          color: theme.colors.textHighContrast,
-                          position: 'relative',
-                          textWrap: 'nowrap',
-                          textShadow: 'black 0 0 4px',
-                        }}
-                      >
-                        {tank.name}
-                      </Text>
-                    </Link>
-                  </Table.RowHeaderCell>
+                  <TankRowHeaderCell tank={tank} />
                   {session.columns.map((column) => (
                     <Table.Cell key={column}>{statsPretty[column]}</Table.Cell>
                   ))}

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

@@ -0,0 +1,28 @@
+import { Table } from '@radix-ui/themes';
+import { use } from 'react';
+import PageWrapper from '../../../components/PageWrapper';
+import { TankRowHeaderCell } from '../../../components/TankRowHeaderCell';
+import { averageDefinitionsArray } from '../../../core/blitzkit/averageDefinitions';
+import { tankDefinitions } from '../../../core/blitzkit/tankDefinitions';
+
+export default function Page() {
+  const awaitedTankDefinitions = use(tankDefinitions);
+  const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
+
+  return (
+    <PageWrapper color="jade">
+      <Table.Root variant="surface">
+        {awaitedAverageDefinitionsArray.map((averages) => {
+          const tank = awaitedTankDefinitions[averages.id];
+
+          return (
+            <Table.Row key={averages.id}>
+              <TankRowHeaderCell tank={tank} />
+              <Table.Cell>{Math.round(averages.mu.wins * 100)}%</Table.Cell>
+            </Table.Row>
+          );
+        })}
+      </Table.Root>
+    </PageWrapper>
+  );
+}

src/components/TankRowHeaderCell.tsx

@@ -0,0 +1,62 @@
+import { Table, Text } from '@radix-ui/themes';
+import { TankDefinition } from '../core/blitzkit/tankDefinitions';
+import { tankIcon } from '../core/blitzkit/tankIcon';
+import { theme } from '../stitches.config';
+import { Link } from './Link';
+
+interface TankRowHeaderCellProps {
+  tank: TankDefinition;
+}
+
+export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
+  return (
+    <Table.RowHeaderCell
+      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',
+            width: 128 + 32,
+            height: '200%',
+            top: '-50%',
+            left: 0,
+            objectFit: 'contain',
+            objectPosition: '50% 50%',
+            overflow: 'hidden',
+          }}
+        />
+
+        <div
+          style={{
+            backgroundColor: 'red',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            height: '100%',
+            width: 128,
+            background: 'linear-gradient(90deg, #00000080, #00000000)',
+          }}
+        />
+
+        <Text
+          style={{
+            color: theme.colors.textHighContrast,
+            position: 'relative',
+            textWrap: 'nowrap',
+            textShadow: 'black 0 0 4px',
+          }}
+        >
+          {tank.name}
+        </Text>
+      </Link>
+    </Table.RowHeaderCell>
+  );
+}

src/constants/tools.tsx

@@ -106,6 +106,18 @@ export const playerStatsTool: Tool = {
   image: 'YelSOfT',
 };
 
+export const tankPerformanceTool: Tool = {
+  id: 'tank-performance',
+  title: 'Tank performance',
+  description: 'Tank performance statistics',
+  pageDescription: 'Tank performance statistics in World of Tanks Blitz',
+  button: {
+    text: 'View tanks',
+    color: 'jade',
+  },
+  image: 'vOKFB03',
+};
+
 export const TOOLS: Tool[] = [
   tankopediaTool,
   ratingTool,
@@ -114,4 +126,5 @@ export const TOOLS: Tool[] = [
   sessionTool,
   discordTool,
   moreTool,
+  tankPerformanceTool,
 ];

src/core/blitzkit/averageDefinitions/index.ts

@@ -37,3 +37,10 @@ export const averageDefinitions = fetch(asset('definitions/averages.pb'))
     );
   })
   .then((data) => data.averages);
+
+export const averageDefinitionsArray = averageDefinitions.then((data) =>
+  Object.entries(data).map(([key, value]) => ({
+    id: Number(key),
+    ...(value as AverageDefinitionsEntry),
+  })),
+);