TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 02:37:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: some data

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-06-30 18:26:05 -05:00
1 parent dd9b3ce869
commit c6c78f2661
2 files changed
+124 -50
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tank-performance/page.tsx
+101 -12
View File
@@ -1,5 +1,6 @@
import { Table } from '@radix-ui/themes';
import { use } from 'react';
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';
@@ -8,20 +9,108 @@ import { tankDefinitions } from '../../../core/blitzkit/tankDefinitions';
export default function Page() {
const awaitedTankDefinitions = use(tankDefinitions);
const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
const tankAverages = useMemo(
() => awaitedAverageDefinitionsArray.sort((a, b) => b.mu.wins - a.mu.wins),
[],
);
const samples = useMemo(
() => awaitedAverageDefinitionsArray.reduce((a, b) => a + b.samples, 0),
[],
);
return (
<PageWrapper color="jade">
<Table.Root variant="surface">
{awaitedAverageDefinitionsArray.map((averages) => {
const tank = awaitedTankDefinitions[averages.id];
<Flex justify="center">
<Callout.Root style={{ width: 'fit-content' }}>
<Callout.Icon>
<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. Updated daily.
Stats displayed as an average per battle.
</Callout.Text>
</Callout.Root>
</Flex>
return (
<Table.Row key={averages.id}>
<TankRowHeaderCell tank={tank} />
<Table.Cell>{Math.round(averages.mu.wins * 100)}%</Table.Cell>
</Table.Row>
);
})}
<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>
<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>
</PageWrapper>
);
src/components/TankRowHeaderCell.tsx
+23 -38
View File
@@ -1,7 +1,7 @@
import { Table, Text } from '@radix-ui/themes';
import { Flex, Table } from '@radix-ui/themes';
import { TankDefinition } from '../core/blitzkit/tankDefinitions';
import { tankIcon } from '../core/blitzkit/tankIcon';
import { theme } from '../stitches.config';
import { ExperimentIcon } from './ExperimentIcon';
import { Link } from './Link';
interface TankRowHeaderCellProps {
@@ -10,52 +10,37 @@ interface TankRowHeaderCellProps {
export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
return (
<Table.RowHeaderCell
style={{
paddingLeft: 32,
position: 'relative',
overflowY: 'hidden',
}}
>
<Table.RowHeaderCell style={{ display: 'flex' }}>
<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',
margin: 'calc(-1 * var(--table-cell-padding)) 0',
height: 'calc(100% + 2 * var(--table-cell-padding))',
aspectRatio: '16 / 9',
objectFit: 'cover',
}}
/>
</Link>
<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',
}}
>
<Link
color="gray"
highContrast
underline="hover"
wrap="nowrap"
href={`/tools/tankopedia/${tank.id}`}
style={{
paddingLeft: 'var(--space-2)',
}}
>
<Flex align="center" gap="1" position="relative" pl="2">
{tank.testing && (
<ExperimentIcon style={{ width: '1em', height: '1em' }} />
)}
{tank.name}
</Text>
</Flex>
</Link>
</Table.RowHeaderCell>
);