From 6c6cf6b76d6191a4bd5c2abe79ab152a63513343 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sun, 30 Jun 2024 19:34:55 -0500 Subject: [PATCH] feat: more data --- .../tank-performance/components/TankRow.tsx | 57 +++++++ src/app/tools/tank-performance/page.tsx | 143 ++++++++---------- src/components/TankRowHeaderCell.tsx | 19 ++- 3 files changed, 130 insertions(+), 89 deletions(-) create mode 100644 src/app/tools/tank-performance/components/TankRow.tsx diff --git a/src/app/tools/tank-performance/components/TankRow.tsx b/src/app/tools/tank-performance/components/TankRow.tsx new file mode 100644 index 000000000..404930fe6 --- /dev/null +++ b/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( + ({ tank }) => { + const awaitedAverageDefinitions = use(averageDefinitions); + const averages = awaitedAverageDefinitions[tank.id]; + + return ( + + + + {Math.round(averages.mu.wins * 100)}% + + + {averages.samples.toLocaleString()} + + + {Math.round(averages.mu.damage_dealt).toLocaleString()} + + + {Math.round(averages.mu.survived_battles * 100)}% + + + {Math.round(averages.mu.xp).toLocaleString()} + + {averages.mu.frags.toFixed(2)} + {averages.mu.spotted.toFixed(2)} + + {Math.round((averages.mu.hits / averages.mu.shots) * 100)}% + + {averages.mu.shots.toFixed(1)} + {averages.mu.hits.toFixed(1)} + + {(averages.mu.damage_dealt / averages.mu.damage_received).toFixed(2)} + + + {Math.round(averages.mu.damage_received).toLocaleString()} + + + {averages.mu.capture_points.toFixed(2)} + + + {averages.mu.dropped_capture_points.toFixed(2)} + + + ); + }, + (prev, next) => prev.tank.id === next.tank.id, +); diff --git a/src/app/tools/tank-performance/page.tsx b/src/app/tools/tank-performance/page.tsx index 8acfacabe..9302aac52 100644 --- a/src/app/tools/tank-performance/page.tsx +++ b/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 ( - + @@ -27,91 +27,70 @@ export default function Page() { 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. + career battles and 1 battle in the past 120 days. Stats displayed as + an average per battle. Updated daily. - - - - Tank - - Winrate - - - Damage - - - Survival - - - XP - - - Kills - - - Spots - - - Accuracy - - - Shots - - - Hits - - - Capture points - - - + + + + + Tank + + Winrate + + + Players + + + Damage + + + Survival + + + XP + + + Kills + + + Spots + + + Accuracy + + + Shots + + + Hits + + + Damage ratio + + + Damage received + + + Capture points + + + Dropped capture points + + + - - {tankAverages.map((averages) => { - const tank = awaitedTankDefinitions[averages.id]; - - return ( - - - - {Math.round(averages.mu.wins * 100)}% - - - {Math.round(averages.mu.damage_dealt).toLocaleString()} - - - {Math.round(averages.mu.survived_battles * 100)}% - - - {Math.round(averages.mu.xp).toLocaleString()} - - - {averages.mu.frags.toFixed(2)} - - - {averages.mu.spotted.toFixed(2)} - - - {Math.round((averages.mu.hits / averages.mu.shots) * 100)}% - - - {averages.mu.shots.toFixed(1)} - - - {averages.mu.hits.toFixed(1)} - - - {averages.mu.capture_points.toFixed(1)} - - - ); - })} - - + + {tankAverages.map((averages) => { + const tank = awaitedTankDefinitions[averages.id]; + return ; + })} + + + ); } diff --git a/src/components/TankRowHeaderCell.tsx b/src/components/TankRowHeaderCell.tsx index 7e85f367a..e5a706a27 100644 --- a/src/components/TankRowHeaderCell.tsx +++ b/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', }} > - - {tank.testing && ( - - )} - {tank.name} - + {tank.testing && ( + + )} + {tank.name} );