mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-24 20:19:49 +02:00
fix: remove player stats
This commit is contained in:
TrèsAbhi committed
1 parent
59324f7438
commit
631dc547fa
3 files changed
-448
No files matched your search
@@ -1,16 +0,0 @@
|
|||||||
import { Tabs, Text } from '@radix-ui/themes';
|
|
||||||
import { TriggerProps } from '@radix-ui/themes/dist/cjs/components/tabs';
|
|
||||||
|
|
||||||
export function FlippedTrigger({ children, ...props }: TriggerProps) {
|
|
||||||
return (
|
|
||||||
<Tabs.Trigger {...props}>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
transform: 'scaleY(-1)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Text>
|
|
||||||
</Tabs.Trigger>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,322 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { TimerIcon } from '@radix-ui/react-icons';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Flex,
|
|
||||||
Heading,
|
|
||||||
Link,
|
|
||||||
Popover,
|
|
||||||
SegmentedControl,
|
|
||||||
Text,
|
|
||||||
Theme,
|
|
||||||
} from '@radix-ui/themes';
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { DatePicker } from '../../../../components/DatePicker';
|
|
||||||
import { Speedometer } from '../../../../components/Speedometer';
|
|
||||||
import { getAccountInfo } from '../../../../core/blitz/getAccountInfo';
|
|
||||||
import { getClanAccountInfo } from '../../../../core/blitz/getClanAccountInfo';
|
|
||||||
import { idToRegion } from '../../../../core/blitz/idToRegion';
|
|
||||||
import { parseBkni } from '../../../../core/blitzkit/parseBkni';
|
|
||||||
import { PeriodType } from '../../../../core/discord/addPeriodSubCommands';
|
|
||||||
import {
|
|
||||||
BKNI_COLORS,
|
|
||||||
BKNI_PERCENTILES,
|
|
||||||
} from '../../../../core/statistics/getBkniPercentile';
|
|
||||||
import { useAwait } from '../../../../hooks/useAwait';
|
|
||||||
import strings from '../../../../lang/en-US.json';
|
|
||||||
|
|
||||||
export default function Page({ params }: { params: { id: string } }) {
|
|
||||||
const id = parseInt(params.id);
|
|
||||||
const region = idToRegion(id);
|
|
||||||
const accountInfo = useAwait(getAccountInfo(region, id));
|
|
||||||
const clanAccountInfo = useAwait(getClanAccountInfo(region, id, ['clan']));
|
|
||||||
// const bkni = ((Math.round(Date.now() / 1000 / 60) / 100) % 2) - 1;
|
|
||||||
const bkni = 0.81;
|
|
||||||
const winrate = 0.6;
|
|
||||||
const [period, setPeriod] = useState<PeriodType>('30');
|
|
||||||
const { bkniColor, bkniMetric, bkniFraction, bkniPercentile } =
|
|
||||||
parseBkni(bkni);
|
|
||||||
const [customFrom, setCustomFrom] = useState<Date>(
|
|
||||||
new Date(Date.now() - 29 * 24 * 60 * 60 * 1000),
|
|
||||||
);
|
|
||||||
const stats = [
|
|
||||||
['Damage', '3,203'],
|
|
||||||
['Tier', '9.83'],
|
|
||||||
['Survival', '70%'],
|
|
||||||
['Kills', '1.54'],
|
|
||||||
['Damage ratio', '2.45'],
|
|
||||||
['Accuracy', '91%'],
|
|
||||||
];
|
|
||||||
const [customTo, setCustomTo] = useState<Date>(new Date());
|
|
||||||
const [fromSelectorOpen, setFromSelectorOpen] = useState(false);
|
|
||||||
const [toSelectorOpen, setToSelectorOpen] = useState(false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Theme accentColor={bkniColor}>
|
|
||||||
<Flex
|
|
||||||
direction="column"
|
|
||||||
align="center"
|
|
||||||
justify="center"
|
|
||||||
py="8"
|
|
||||||
gap="6"
|
|
||||||
style={{
|
|
||||||
background: `linear-gradient(var(--${bkniColor}-a3), var(--${bkniColor}-a1))`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex direction="column" align="center">
|
|
||||||
<Heading
|
|
||||||
size={{
|
|
||||||
initial: '8',
|
|
||||||
sm: '9',
|
|
||||||
}}
|
|
||||||
align="center"
|
|
||||||
>
|
|
||||||
{accountInfo.nickname}
|
|
||||||
</Heading>
|
|
||||||
<Text color="gray" align="center">
|
|
||||||
{clanAccountInfo?.clan && `[${clanAccountInfo.clan.tag}] • `}
|
|
||||||
{
|
|
||||||
(clanAccountInfo?.clan
|
|
||||||
? strings.common.regions.short
|
|
||||||
: strings.common.regions.normal)[region]
|
|
||||||
}
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex direction="column" align="center" gap="3">
|
|
||||||
<SegmentedControl.Root
|
|
||||||
value={period}
|
|
||||||
onValueChange={(value) => setPeriod(value as PeriodType)}
|
|
||||||
>
|
|
||||||
<SegmentedControl.Item value={'today' satisfies PeriodType}>
|
|
||||||
Today
|
|
||||||
</SegmentedControl.Item>
|
|
||||||
<SegmentedControl.Item value={'30' satisfies PeriodType}>
|
|
||||||
30 days
|
|
||||||
</SegmentedControl.Item>
|
|
||||||
<SegmentedControl.Item value={'career' satisfies PeriodType}>
|
|
||||||
Career
|
|
||||||
</SegmentedControl.Item>
|
|
||||||
<SegmentedControl.Item value={'custom' satisfies PeriodType}>
|
|
||||||
Custom
|
|
||||||
</SegmentedControl.Item>
|
|
||||||
</SegmentedControl.Root>
|
|
||||||
|
|
||||||
{period === 'custom' && (
|
|
||||||
<Text>
|
|
||||||
From{' '}
|
|
||||||
<Popover.Root
|
|
||||||
open={fromSelectorOpen}
|
|
||||||
onOpenChange={setFromSelectorOpen}
|
|
||||||
>
|
|
||||||
<Popover.Trigger>
|
|
||||||
<Link underline="always" href="#">
|
|
||||||
{customFrom.toLocaleString(undefined, {
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric',
|
|
||||||
})}
|
|
||||||
</Link>
|
|
||||||
</Popover.Trigger>
|
|
||||||
|
|
||||||
<Popover.Content>
|
|
||||||
<DatePicker
|
|
||||||
defaultDate={customFrom}
|
|
||||||
onDateChange={(date) => {
|
|
||||||
setCustomFrom(date);
|
|
||||||
setFromSelectorOpen(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Popover.Content>
|
|
||||||
</Popover.Root>{' '}
|
|
||||||
to{' '}
|
|
||||||
<Popover.Root
|
|
||||||
open={toSelectorOpen}
|
|
||||||
onOpenChange={setToSelectorOpen}
|
|
||||||
>
|
|
||||||
<Popover.Trigger>
|
|
||||||
<Link underline="always" href="#">
|
|
||||||
{customTo.toLocaleString(undefined, {
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric',
|
|
||||||
})}
|
|
||||||
</Link>
|
|
||||||
</Popover.Trigger>
|
|
||||||
|
|
||||||
<Popover.Content>
|
|
||||||
<DatePicker
|
|
||||||
defaultDate={customTo}
|
|
||||||
onDateChange={(date) => {
|
|
||||||
setCustomTo(date);
|
|
||||||
setToSelectorOpen(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Popover.Content>
|
|
||||||
</Popover.Root>
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex justify="center" py="8" gap="6">
|
|
||||||
<Speedometer
|
|
||||||
value={`${bkniMetric}`}
|
|
||||||
color={bkniColor}
|
|
||||||
fill={bkniFraction}
|
|
||||||
label={
|
|
||||||
<Popover.Root>
|
|
||||||
<Popover.Trigger>
|
|
||||||
<Button
|
|
||||||
style={{ position: 'relative' }}
|
|
||||||
color="gray"
|
|
||||||
size="2"
|
|
||||||
variant="ghost"
|
|
||||||
>
|
|
||||||
<TimerIcon />
|
|
||||||
{strings.common.bkni_percentile[bkniPercentile]}
|
|
||||||
</Button>
|
|
||||||
</Popover.Trigger>
|
|
||||||
|
|
||||||
<Popover.Content align="center">
|
|
||||||
<Flex
|
|
||||||
direction="column"
|
|
||||||
style={{
|
|
||||||
width: 'fit-content',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex direction="column" mb="3" align="center">
|
|
||||||
<Heading weight="bold" size="5">
|
|
||||||
BkNI
|
|
||||||
</Heading>
|
|
||||||
<Text size="2" color="gray" wrap="wrap">
|
|
||||||
A next generation performance metric
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
{BKNI_PERCENTILES.map(({ percentile, min }, index) => (
|
|
||||||
<Button
|
|
||||||
radius="none"
|
|
||||||
color={BKNI_COLORS[percentile]}
|
|
||||||
key={percentile}
|
|
||||||
>
|
|
||||||
<Flex
|
|
||||||
align="center"
|
|
||||||
justify="between"
|
|
||||||
width="100%"
|
|
||||||
gap="2"
|
|
||||||
>
|
|
||||||
<Text>
|
|
||||||
{strings.common.bkni_percentile[percentile]}
|
|
||||||
</Text>
|
|
||||||
<Text size="1">
|
|
||||||
{min}% - {BKNI_PERCENTILES[index + 1]?.min ?? 100}%
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
</Popover.Content>
|
|
||||||
</Popover.Root>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Speedometer
|
|
||||||
value={
|
|
||||||
<Flex align="center" gap="1">
|
|
||||||
{(winrate * 100).toFixed(0)}
|
|
||||||
<Text size="3" color="gray">
|
|
||||||
%
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
}
|
|
||||||
color="green"
|
|
||||||
fill={0.5 * (Math.cbrt(2 * winrate - 1) + 1)}
|
|
||||||
label={<Text color="gray">Winrate</Text>}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex style={{ flex: 1 }} wrap="wrap" gap="2" justify="center">
|
|
||||||
{stats.map((stat) => (
|
|
||||||
<Flex minWidth="96px" direction="column" align="center">
|
|
||||||
<Text size="6">{stat[1]}</Text>
|
|
||||||
<Text color="gray" size="2">
|
|
||||||
{stat[0]}
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
</Theme>
|
|
||||||
|
|
||||||
<Box flexGrow="1" />
|
|
||||||
|
|
||||||
{/* <Flex gap="4">
|
|
||||||
<Link href="/tools/tankopedia">
|
|
||||||
<Button variant="ghost" size="1" ml="-1">
|
|
||||||
<ChevronLeftIcon />
|
|
||||||
Back
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</Flex> */}
|
|
||||||
{/* <Flex style={{ flex: 1 }} justify="center">
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
*/}
|
|
||||||
|
|
||||||
{/* <PageWrapper
|
|
||||||
p="6"
|
|
||||||
pt="9"
|
|
||||||
size={1600}
|
|
||||||
noFlex1
|
|
||||||
position="relative"
|
|
||||||
color={bkniColor}
|
|
||||||
containerProps={{
|
|
||||||
style: {
|
|
||||||
background: `linear-gradient(var(--${bkniColor}-a2), var(--${bkniColor}-a1))`,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Tabs.Root
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: '50%',
|
|
||||||
transform: 'scaleY(-1) translateX(-50%)',
|
|
||||||
}}
|
|
||||||
value={`${period}`}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
setPeriod(value === 'custom' ? 'custom' : Number(value));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Tabs.List justify="center">
|
|
||||||
<FlippedTrigger value="1">Today</FlippedTrigger>
|
|
||||||
<FlippedTrigger value="30">30 days</FlippedTrigger>
|
|
||||||
<FlippedTrigger value="Infinity">Career</FlippedTrigger>
|
|
||||||
<FlippedTrigger value="custom">Custom</FlippedTrigger>
|
|
||||||
</Tabs.List>
|
|
||||||
</Tabs.Root>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</PageWrapper>
|
|
||||||
|
|
||||||
<Flex flexGrow="1" justify="center" align="center" p="4">
|
|
||||||
<Callout.Root color="red" mt="4">
|
|
||||||
<Callout.Icon>
|
|
||||||
<ExclamationTriangleIcon />
|
|
||||||
</Callout.Icon>
|
|
||||||
<Callout.Text>
|
|
||||||
We haven't tracked long enough to provide statistics. Please check
|
|
||||||
back after a few days.
|
|
||||||
</Callout.Text>
|
|
||||||
</Callout.Root>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
{isTracking && <Box flexGrow="1" />} */}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { ArrowDownIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
|
|
||||||
import { Button, Card, Flex, Text, TextField } from '@radix-ui/themes';
|
|
||||||
import { useRef, useState } from 'react';
|
|
||||||
import { Link } from '../../../components/Link';
|
|
||||||
import PageWrapper from '../../../components/PageWrapper';
|
|
||||||
import { UNLOCALIZED_REGION_NAMES_SHORT } from '../../../constants/regions';
|
|
||||||
import searchPlayersAcrossRegions, {
|
|
||||||
AccountListWithServer,
|
|
||||||
} from '../../../core/blitz/searchPlayersAcrossRegions';
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
const input = useRef<HTMLInputElement>(null);
|
|
||||||
const [showSearch, setShowSearch] = useState(false);
|
|
||||||
const [searching, setSearching] = useState(false);
|
|
||||||
const [searchResults, setSearchResults] = useState<AccountListWithServer>([]);
|
|
||||||
|
|
||||||
async function search() {
|
|
||||||
if (!input.current) return;
|
|
||||||
|
|
||||||
setSearchResults(await searchPlayersAcrossRegions(input.current.value, 9));
|
|
||||||
setSearching(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PageWrapper>
|
|
||||||
<Flex
|
|
||||||
style={{ flex: 1 }}
|
|
||||||
align="center"
|
|
||||||
justify="center"
|
|
||||||
direction="column"
|
|
||||||
gap="3"
|
|
||||||
>
|
|
||||||
<Flex gap="2" align="center">
|
|
||||||
<Text color="gray">Look up a player to get started</Text>
|
|
||||||
<ArrowDownIcon />
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<TextField.Root
|
|
||||||
size="3"
|
|
||||||
style={{
|
|
||||||
position: 'relative',
|
|
||||||
width: '75vw',
|
|
||||||
maxWidth: 480,
|
|
||||||
}}
|
|
||||||
ref={input}
|
|
||||||
placeholder="Search players..."
|
|
||||||
onChange={() => {
|
|
||||||
if (!input.current) return;
|
|
||||||
|
|
||||||
const sanitized = input.current.value.trim();
|
|
||||||
|
|
||||||
if (sanitized.length > 0) {
|
|
||||||
setShowSearch(true);
|
|
||||||
setSearching(true);
|
|
||||||
search();
|
|
||||||
} else {
|
|
||||||
setShowSearch(false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<TextField.Slot>
|
|
||||||
<MagnifyingGlassIcon />
|
|
||||||
</TextField.Slot>
|
|
||||||
|
|
||||||
{showSearch && (
|
|
||||||
<Card
|
|
||||||
mt="2"
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '100%',
|
|
||||||
left: 0,
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{searching && (
|
|
||||||
<Flex justify="center">
|
|
||||||
<Text color="gray">Searching...</Text>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!searching && searchResults.length === 0 && (
|
|
||||||
<Flex justify="center">
|
|
||||||
<Text color="gray">No players found</Text>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!searching && searchResults.length > 0 && (
|
|
||||||
<Flex direction="column" gap="2">
|
|
||||||
{searchResults.map((player) => (
|
|
||||||
<Link
|
|
||||||
key={player.account_id}
|
|
||||||
href={`/tools/player-stats/${player.account_id}`}
|
|
||||||
>
|
|
||||||
<Button key={player.account_id} variant="ghost">
|
|
||||||
{player.nickname} (
|
|
||||||
{UNLOCALIZED_REGION_NAMES_SHORT[player.region]})
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</TextField.Root>
|
|
||||||
</Flex>
|
|
||||||
</PageWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in new issue
Block a user