mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 02:37:05 +02:00
feat: more data
This commit is contained in:
TrèsAbhi committed
1 parent
c6c78f2661
commit
6c6cf6b76d
3 files changed
+130
-89
No files matched your search
@@ -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,
|
||||
);
|
||||
@@ -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.
|
||||
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.
|
||||
</Callout.Text>
|
||||
</Callout.Root>
|
||||
</Flex>
|
||||
|
||||
<Table.Root variant="surface" style={{ textWrap: 'nowrap' }}>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
|
||||
<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>
|
||||
<Flex justify="center">
|
||||
<Table.Root variant="surface" style={{ maxWidth: '100%' }}>
|
||||
<Table.Header>
|
||||
<Table.Row align="end">
|
||||
<Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
|
||||
<Table.ColumnHeaderCell width="0" justify="center">
|
||||
Winrate
|
||||
</Table.ColumnHeaderCell>
|
||||
<Table.ColumnHeaderCell width="0" justify="center">
|
||||
Players
|
||||
</Table.ColumnHeaderCell>
|
||||
<Table.ColumnHeaderCell width="0" justify="center">
|
||||
Damage
|
||||
</Table.ColumnHeaderCell>
|
||||
<Table.ColumnHeaderCell width="0" justify="center">
|
||||
Survival
|
||||
</Table.ColumnHeaderCell>
|
||||
<Table.ColumnHeaderCell width="0" justify="center">
|
||||
XP
|
||||
</Table.ColumnHeaderCell>
|
||||
<Table.ColumnHeaderCell width="0" justify="center">
|
||||
Kills
|
||||
</Table.ColumnHeaderCell>
|
||||
<Table.ColumnHeaderCell width="0" justify="center">
|
||||
Spots
|
||||
</Table.ColumnHeaderCell>
|
||||
<Table.ColumnHeaderCell width="0" justify="center">
|
||||
Accuracy
|
||||
</Table.ColumnHeaderCell>
|
||||
<Table.ColumnHeaderCell width="0" justify="center">
|
||||
Shots
|
||||
</Table.ColumnHeaderCell>
|
||||
<Table.ColumnHeaderCell width="0" justify="center">
|
||||
Hits
|
||||
</Table.ColumnHeaderCell>
|
||||
<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 (
|
||||
<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>
|
||||
<Table.Body>
|
||||
{tankAverages.map((averages) => {
|
||||
const tank = awaitedTankDefinitions[averages.id];
|
||||
return <TankRow tank={tank} key={tank.id} />;
|
||||
})}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Flex>
|
||||
</PageWrapper>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
{tank.testing && (
|
||||
<ExperimentIcon style={{ width: '1em', height: '1em' }} />
|
||||
)}
|
||||
{tank.name}
|
||||
</Link>
|
||||
</Table.RowHeaderCell>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user