feat: player count

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

@@ -44,9 +44,6 @@ export function Header() {
         <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>
   );

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

@@ -2,15 +2,11 @@
 
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { Callout, Flex } from '@radix-ui/themes';
-import { use, useMemo } from 'react';
-import { averageDefinitionsArray } from '../../../../core/blitzkit/averageDefinitions';
+import { use } from 'react';
+import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
 
 export function Info() {
-  const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
-  const samples = useMemo(
-    () => awaitedAverageDefinitionsArray.reduce((a, b) => a + b.samples, 0),
-    [],
-  );
+  const awaitedAverageDefinitions = use(averageDefinitions);
 
   return (
     <Flex justify="center">
@@ -19,9 +15,9 @@ export function Info() {
           <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. Stats displayed as an
-          average per battle. Updated daily.
+          Based on {awaitedAverageDefinitions.players.toLocaleString()} players
+          with at least 5,000 career battles and 1 battle in the past 120 days.
+          Player counts are less than real values. Updated daily.
         </Callout.Text>
       </Callout.Root>
     </Flex>

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

@@ -4,12 +4,12 @@ import { times } from 'lodash';
 export function RowLoader() {
   return (
     <Table.Row>
-      <Table.RowHeaderCell>
+      <Table.RowHeaderCell align="center">
         <Skeleton height="100%" width="128px" />
       </Table.RowHeaderCell>
 
-      {times(14, (index) => (
-        <Table.Cell key={index}>
+      {times(13, (index) => (
+        <Table.Cell key={index} align="center">
           <Skeleton height="1em" width="32px" />
         </Table.Cell>
       ))}

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

@@ -1,5 +1,5 @@
 import { Table } from '@radix-ui/themes';
-import { memo, use } from 'react';
+import { memo, use, useMemo } from 'react';
 import { TankRowHeaderCell } from '../../../../components/TankRowHeaderCell';
 import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
@@ -11,7 +11,11 @@ interface TankRowProps {
 export const TankRow = memo<TankRowProps>(
   ({ tank }) => {
     const awaitedAverageDefinitions = use(averageDefinitions);
-    const averages = awaitedAverageDefinitions[tank.id];
+    const averages = awaitedAverageDefinitions.averages[tank.id];
+    const numberFormat = useMemo(
+      () => Intl.NumberFormat(undefined, { notation: 'compact' }),
+      [],
+    );
 
     return (
       <Table.Row>
@@ -20,7 +24,7 @@ export const TankRow = memo<TankRowProps>(
           {Math.round(averages.mu.wins * 100)}%
         </Table.Cell>
         <Table.Cell align="center">
-          {averages.samples.toLocaleString()}
+          {numberFormat.format(Math.round(averages.samples))}
         </Table.Cell>
         <Table.Cell align="center">
           {Math.round(averages.mu.damage_dealt).toLocaleString()}
@@ -47,9 +51,6 @@ export const TankRow = memo<TankRowProps>(
         <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>
     );
   },