mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 03:29:51 +02:00
feat: total bar
This commit is contained in:
1 parent
b556f5f7e8
commit
a7f68364f3
6 files changed
+109
-14
No files matched your search
@@ -4,15 +4,12 @@ import { InfoCircledIcon } from '@radix-ui/react-icons';
|
||||
import { Callout, Flex } from '@radix-ui/themes';
|
||||
import { use } from 'react';
|
||||
import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
|
||||
import { discoveredIdsDefinitions } from '../../../../core/blitzkit/discoveredIdDefinitions';
|
||||
import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
|
||||
|
||||
export function Info() {
|
||||
const awaitedAverageDefinitions = use(averageDefinitions);
|
||||
const awaitedDiscoveredIdsDefinitions = use(discoveredIdsDefinitions);
|
||||
const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
|
||||
const ratio =
|
||||
awaitedDiscoveredIdsDefinitions.count /
|
||||
awaitedAverageDefinitions.scanned_players;
|
||||
const ratio = useAveragesExclusionRatio();
|
||||
const samples = ratio * awaitedAverageDefinitions.sampled_players;
|
||||
|
||||
return (
|
||||
|
||||
@@ -2,8 +2,8 @@ import { Table } from '@radix-ui/themes';
|
||||
import { memo, use } from 'react';
|
||||
import { TankRowHeaderCell } from '../../../../components/TankRowHeaderCell';
|
||||
import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
|
||||
import { discoveredIdsDefinitions } from '../../../../core/blitzkit/discoveredIdDefinitions';
|
||||
import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
|
||||
import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
|
||||
|
||||
interface TankRowProps {
|
||||
tank: TankDefinition;
|
||||
@@ -11,13 +11,10 @@ interface TankRowProps {
|
||||
|
||||
export const TankRow = memo<TankRowProps>(
|
||||
({ tank }) => {
|
||||
const awaitedDiscoveredIdsDefinitions = use(discoveredIdsDefinitions);
|
||||
const awaitedAverageDefinitions = use(averageDefinitions);
|
||||
const averages = awaitedAverageDefinitions.averages[tank.id];
|
||||
const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
|
||||
const ratio =
|
||||
awaitedDiscoveredIdsDefinitions.count /
|
||||
awaitedAverageDefinitions.scanned_players;
|
||||
const ratio = useAveragesExclusionRatio();
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
|
||||
@@ -10,6 +10,7 @@ import { useTankFilters } from '../../../../stores/tankFilters';
|
||||
import { useTankPerformanceSort } from '../../../../stores/tankPerformanceSort';
|
||||
import { RowLoader } from './RowLoader';
|
||||
import { TankRow } from './TankRow';
|
||||
import { Total } from './Total';
|
||||
|
||||
const PREVIEW_COUNT = 10;
|
||||
const DEFAULT_LOADED_ROWS = 25;
|
||||
@@ -121,6 +122,8 @@ export function Tanks() {
|
||||
|
||||
return (
|
||||
<Table.Body>
|
||||
<Total tanks={tanks} />
|
||||
|
||||
{tanks.slice(0, loadedRows).map((averages) => {
|
||||
const tank = awaitedTankDefinitions[averages.id];
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import { Table } from '@radix-ui/themes';
|
||||
import { memo, use, useCallback } from 'react';
|
||||
import {
|
||||
averageDefinitions,
|
||||
AverageDefinitionsAllStats,
|
||||
AverageDefinitionsEntryWithId,
|
||||
} from '../../../../core/blitzkit/averageDefinitions';
|
||||
import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
|
||||
|
||||
interface TotalProps {
|
||||
tanks: AverageDefinitionsEntryWithId[];
|
||||
}
|
||||
|
||||
export const Total = memo<TotalProps>(
|
||||
({ tanks }) => {
|
||||
const awaitedAverageDefinitions = use(averageDefinitions);
|
||||
const ratio = useAveragesExclusionRatio();
|
||||
const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
|
||||
const sum = useCallback(
|
||||
(slice: (tank: AverageDefinitionsAllStats) => number) => {
|
||||
return tanks.reduce(
|
||||
(acc, tank) => acc + tank.samples * slice(tank.mu),
|
||||
0,
|
||||
);
|
||||
},
|
||||
[tanks],
|
||||
);
|
||||
|
||||
const players = sum(() => 1);
|
||||
const battles = sum(({ battles }) => battles);
|
||||
const winrate = sum(({ wins }) => wins) / battles;
|
||||
const damage = sum(({ damage_dealt }) => damage_dealt) / battles;
|
||||
const survival = sum(({ survived_battles }) => survived_battles) / battles;
|
||||
const xp = sum(({ xp }) => xp) / battles;
|
||||
const kills = sum(({ frags }) => frags) / battles;
|
||||
const spots = sum(({ spotted }) => spotted) / battles;
|
||||
const hits = sum(({ hits }) => hits) / battles;
|
||||
const shots = sum(({ shots }) => shots) / battles;
|
||||
const accuracy = hits / shots;
|
||||
const damageReceived =
|
||||
sum(({ damage_received }) => damage_received) / battles;
|
||||
const damageRatio = damage / damageReceived;
|
||||
const capturePoints = sum(({ capture_points }) => capture_points) / battles;
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.RowHeaderCell>Total</Table.RowHeaderCell>
|
||||
<Table.Cell align="center">{(winrate * 100).toFixed(1)}%</Table.Cell>
|
||||
<Table.Cell align="center">
|
||||
{numberFormat.format(ratio * players)}
|
||||
</Table.Cell>
|
||||
<Table.Cell align="center">
|
||||
{numberFormat.format(ratio * battles)}
|
||||
</Table.Cell>
|
||||
<Table.Cell align="center">
|
||||
{Math.round(damage).toLocaleString()}
|
||||
</Table.Cell>
|
||||
<Table.Cell align="center">
|
||||
{Math.round(survival * 100).toFixed(1)}%
|
||||
</Table.Cell>
|
||||
<Table.Cell align="center">
|
||||
{Math.round(xp).toLocaleString()}
|
||||
</Table.Cell>
|
||||
<Table.Cell align="center">{kills.toFixed(2)}</Table.Cell>
|
||||
<Table.Cell align="center">{spots.toFixed(2)}</Table.Cell>
|
||||
<Table.Cell align="center">{(accuracy * 100).toFixed(0)}%</Table.Cell>
|
||||
<Table.Cell align="center">{shots.toFixed(1)}</Table.Cell>
|
||||
<Table.Cell align="center">{hits.toFixed(1)}</Table.Cell>
|
||||
<Table.Cell align="center">{damageRatio.toFixed(2)}</Table.Cell>
|
||||
<Table.Cell align="center">
|
||||
{Math.round(damageReceived).toLocaleString()}
|
||||
</Table.Cell>
|
||||
<Table.Cell align="center">{capturePoints.toFixed(2)}</Table.Cell>
|
||||
</Table.Row>
|
||||
);
|
||||
},
|
||||
(prev, next) => prev.tanks === next.tanks,
|
||||
);
|
||||
Reference in new issue
Block a user