feat: flipped tabs

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 (
+    <Tabs.Trigger {...props}>
+      <Text
+        style={{
+          transform: 'scaleY(-1)',
+        }}
+      >
+        {children}
+      </Text>
+    </Tabs.Trigger>
+  );
+}

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 (
     <>
       <PageWrapper
-        py="8"
-        color="blue"
+        p={{
+          initial: '6',
+          md: '8',
+        }}
+        size={1024}
+        noFlex1
+        color={bkniColor}
         containerProps={{
           style: {
-            backgroundColor: 'var(--color-surface)',
+            background: `linear-gradient(var(--${bkniColor}-a2), var(--${bkniColor}-a1))`,
           },
         }}
       >
-        <Flex justify="between" align="center">
-          <Flex direction="column">
-            <Heading size="8">{accountInfo.nickname} </Heading>
+        <Flex
+          justify="between"
+          align="center"
+          direction={{
+            initial: 'column-reverse',
+            md: 'row',
+          }}
+          gap={{
+            initial: '8',
+            md: '4',
+          }}
+        >
+          <Flex
+            direction="column"
+            align={{
+              initial: 'center',
+              md: 'start',
+            }}
+          >
+            <Heading
+              size={{
+                initial: '7',
+                xs: '8',
+              }}
+            >
+              {accountInfo.nickname}
+            </Heading>
 
             <Text color="gray">
               {clanAccountInfo?.clan && `[${clanAccountInfo.clan.tag}] • `}
-              {strings.common.regions.normal[region]}
+              {strings.common.regions.short[region]}
             </Text>
           </Flex>
 
@@ -38,7 +82,40 @@ export default async function Page({ params }: { params: { id: string } }) {
         </Flex>
       </PageWrapper>
 
-      <Box flexGrow="1" />
+      <PageWrapper color={bkniColor} noFlex1 pt="0" align="center">
+        <Tabs.Root
+          style={{
+            transform: 'scaleY(-1)',
+          }}
+          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>
+
+      {!isTracking && (
+        <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" />}
     </>
   );
 }

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 (
     <Flex direction="column" align="center">
@@ -28,24 +24,13 @@ export function BkniIndicator({ bkni }: BkniIndicatorProps) {
           transform: 'scaleX(-1)',
         }}
       >
-        <defs>
-          <linearGradient id="bkni-gradient">
-            <stop offset="0%" stopColor={`var(--${bkniColor}-indicator)`} />
-            <stop offset="50%" stopColor={`var(--${bkniColor}-indicator)`} />
-            <stop
-              offset="100%"
-              stopColor={`var(--${lastBkniColor}-indicator)`}
-            />
-          </linearGradient>
-        </defs>
-
         <circle
           cx={90}
           cy={90}
           r={80}
           strokeLinecap="round"
           fill="none"
-          stroke="var(--color-panel-solid)"
+          stroke="var(--color-surface)"
           strokeWidth={20}
           strokeDasharray={80 * Math.PI}
           strokeDashoffset={80 * Math.PI}
@@ -56,7 +41,7 @@ export function BkniIndicator({ bkni }: BkniIndicatorProps) {
           r={80}
           strokeLinecap="round"
           fill="none"
-          stroke="url(#bkni-gradient)"
+          stroke={`var(--${bkniColor}-indicator)`}
           strokeWidth={20}
           strokeDasharray={(160 - 80 * bkniFraction) * Math.PI}
           strokeDashoffset={(160 - 80 * bkniFraction) * Math.PI}
@@ -70,7 +55,12 @@ export function BkniIndicator({ bkni }: BkniIndicatorProps) {
 
         <Popover.Root>
           <Popover.Trigger>
-            <Button color="gray" size="2" variant="ghost">
+            <Button
+              style={{ position: 'relative' }}
+              color="gray"
+              size="2"
+              variant="ghost"
+            >
               <TimerIcon />
               {strings.common.bkni_percentile[bkniPercentile]}
             </Button>
@@ -83,9 +73,9 @@ export function BkniIndicator({ bkni }: BkniIndicatorProps) {
                 width: 'fit-content',
               }}
             >
-              <Flex direction="column" mb="3">
+              <Flex direction="column" mb="3" align="center">
                 <Heading weight="bold" size="5">
-                  BlitzKit Neutrality Index
+                  BkNI
                 </Heading>
                 <Text size="2" color="gray" wrap="wrap">
                   A next generation performance metric
@@ -93,7 +83,11 @@ export function BkniIndicator({ bkni }: BkniIndicatorProps) {
               </Flex>
 
               {BKNI_PERCENTILES.map(({ percentile, min }, index) => (
-                <Button radius="none" color={BKNI_COLORS[percentile]}>
+                <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">

src/core/blitzkit/parseBkni.ts

@@ -0,0 +1,23 @@
+import getBkniPercentile, {
+  BKNI_COLORS,
+  BkniPercentile,
+} from '../statistics/getBkniPercentile';
+
+export function parseBkni(bkni: number) {
+  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];
+
+  return {
+    bkni,
+    bkniFraction,
+    bkniMetric,
+    bkniPercentile,
+    lastBkniPercentile,
+    bkniColor,
+    lastBkniColor,
+  };
+}