From 93c4d80dd06d4ad80fe3f526ebd5d0796c068e7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 9 Jun 2024 17:19:44 -0500
Subject: [PATCH] feat: flipped tabs
---
.../[id]/components/FlippedTrigger.tsx | 16 +++
src/app/tools/player-stats/[id]/page.tsx | 103 +++++++++++++++---
src/components/BkniIndicator.tsx | 44 ++++----
src/core/blitzkit/parseBkni.ts | 23 ++++
4 files changed, 148 insertions(+), 38 deletions(-)
create mode 100644 src/app/tools/player-stats/[id]/components/FlippedTrigger.tsx
create mode 100644 src/core/blitzkit/parseBkni.ts
diff --git a/src/app/tools/player-stats/[id]/components/FlippedTrigger.tsx b/src/app/tools/player-stats/[id]/components/FlippedTrigger.tsx
new file mode 100644
index 000000000..d6553c04b
--- /dev/null
+++ b/src/app/tools/player-stats/[id]/components/FlippedTrigger.tsx
@@ -0,0 +1,16 @@
+import { Tabs, Text } from '@radix-ui/themes';
+import { TriggerProps } from '@radix-ui/themes/dist/cjs/components/tabs';
+
+export function FlippedTrigger({ children, ...props }: TriggerProps) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/app/tools/player-stats/[id]/page.tsx b/src/app/tools/player-stats/[id]/page.tsx
index 75d838ebc..9e1109c27 100644
--- a/src/app/tools/player-stats/[id]/page.tsx
+++ b/src/app/tools/player-stats/[id]/page.tsx
@@ -1,36 +1,80 @@
-import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+'use client';
+
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { Box, Callout, Flex, Heading, Tabs, Text } from '@radix-ui/themes';
+import { use, useMemo, useState } from 'react';
import { BkniIndicator } from '../../../../components/BkniIndicator';
import PageWrapper from '../../../../components/PageWrapper';
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 strings from '../../../../lang/en-US.json';
+import { FlippedTrigger } from './components/FlippedTrigger';
-export default async function Page({ params }: { params: { id: string } }) {
+export default function Page({ params }: { params: { id: string } }) {
const id = parseInt(params.id);
const region = idToRegion(id);
- const accountInfo = await getAccountInfo(region, id);
- const clanAccountInfo = await getClanAccountInfo(region, id, ['clan']);
- const bkni = Math.random() * 2 - 1;
+ const accountInfoPromise = useMemo(() => getAccountInfo(region, id), [id]);
+ const accountInfo = use(accountInfoPromise);
+ const clanAccountInfoPromise = useMemo(
+ () => getClanAccountInfo(region, id, ['clan']),
+ [id],
+ );
+ const clanAccountInfo = use(clanAccountInfoPromise);
+ // const bkni = Math.random() * 2 - 1;
+ const bkni = 0.87;
+ const [period, setPeriod] = useState<'custom' | number>(30);
+ const { bkniColor } = parseBkni(bkni);
+ const isTracking = false;
return (
<>
-
-
- {accountInfo.nickname}
+
+
+
+ {accountInfo.nickname}
+
{clanAccountInfo?.clan && `[${clanAccountInfo.clan.tag}] • `}
- {strings.common.regions.normal[region]}
+ {strings.common.regions.short[region]}
@@ -38,7 +82,40 @@ export default async function Page({ params }: { params: { id: string } }) {
-
+
+ {
+ setPeriod(value === 'custom' ? 'custom' : Number(value));
+ }}
+ >
+
+ Today
+ 30 days
+ Career
+ Custom
+
+
+
+
+ {!isTracking && (
+
+
+
+
+
+
+ We haven't tracked long enough to provide statistics. Please check
+ back after a few days.
+
+
+
+ )}
+
+ {isTracking && }
);
}
diff --git a/src/components/BkniIndicator.tsx b/src/components/BkniIndicator.tsx
index 5c8d48da9..6c324b3a4 100644
--- a/src/components/BkniIndicator.tsx
+++ b/src/components/BkniIndicator.tsx
@@ -1,9 +1,9 @@
import { TimerIcon } from '@radix-ui/react-icons';
import { Button, Flex, Heading, Popover, Text } from '@radix-ui/themes';
-import getBkniPercentile, {
+import { parseBkni } from '../core/blitzkit/parseBkni';
+import {
BKNI_COLORS,
BKNI_PERCENTILES,
- BkniPercentile,
} from '../core/statistics/getBkniPercentile';
import strings from '../lang/en-US.json';
@@ -12,12 +12,8 @@ interface BkniIndicatorProps {
}
export function BkniIndicator({ bkni }: BkniIndicatorProps) {
- const bkniFraction = (bkni + 1) / 2;
- const bkniMetric = Math.round(bkniFraction * 200);
- const bkniPercentile = getBkniPercentile(bkniMetric);
- const lastBkniPercentile = Math.max(0, bkniPercentile - 1) as BkniPercentile;
- const bkniColor = BKNI_COLORS[bkniPercentile];
- const lastBkniColor = BKNI_COLORS[lastBkniPercentile];
+ const { bkniColor, bkniFraction, bkniMetric, bkniPercentile } =
+ parseBkni(bkni);
return (
@@ -28,24 +24,13 @@ export function BkniIndicator({ bkni }: BkniIndicatorProps) {
transform: 'scaleX(-1)',
}}
>
-
-
-
-
-
-
-
-
-