feat: some stats

src/app/tools/player-stats/[id]/page.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+export const bkniIndicator = style({
+  scale: 0.8,
+
+  '@media': {
+    'screen and (min-width: 1024px)': {
+      scale: 1,
+    },
+  },
+});

src/app/tools/player-stats/[id]/page.tsx

@@ -22,19 +22,30 @@ import { parseBkni } from '../../../../core/blitzkit/parseBkni';
 import { useAwait } from '../../../../hooks/useAwait';
 import strings from '../../../../lang/en-US.json';
 import { FlippedTrigger } from './components/FlippedTrigger';
+import * as styles from './page.css';
 
 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 = ((Math.round(Date.now() / 1000 / 60) / 100) % 2) - 1;
+  const bkni = 2 * Math.random() - 1;
   const [period, setPeriod] = useState<'custom' | number>(30);
   const { bkniColor } = parseBkni(bkni);
   const isTracking = false;
   const [customFrom, setCustomFrom] = useState<Date>(
     new Date(Date.now() - 29 * 24 * 60 * 60 * 1000),
   );
+  const stats = [
+    ['Winrate', '70%'],
+    ['Damage', '3,203'],
+    ['Damage ratio', '2.45'],
+    ['Tier', '9.83'],
+    ['Survival', '70%'],
+    ['Accuracy', '91%'],
+    ['Kills', '1.54'],
+  ];
   const [customTo, setCustomTo] = useState<Date>(new Date());
   const [fromSelectorOpen, setFromSelectorOpen] = useState(false);
   const [toSelectorOpen, setToSelectorOpen] = useState(false);
@@ -46,8 +57,13 @@ export default function Page({ params }: { params: { id: string } }) {
           initial: '6',
           md: '8',
         }}
+        pt={{
+          initial: '9',
+          md: '8',
+        }}
         size={1024}
         noFlex1
+        position="relative"
         color={bkniColor}
         containerProps={{
           style: {
@@ -55,48 +71,12 @@ export default function Page({ params }: { params: { id: string } }) {
           },
         }}
       >
-        <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.short[region]}
-            </Text>
-          </Flex>
-
-          <BkniIndicator bkni={bkni} />
-        </Flex>
-      </PageWrapper>
-
-      <PageWrapper color={bkniColor} noFlex1 pt="0" align="center">
         <Tabs.Root
           style={{
-            transform: 'scaleY(-1)',
+            position: 'absolute',
+            top: 0,
+            left: '50%',
+            transform: 'scaleY(-1) translateX(-50%)',
           }}
           value={`${period}`}
           onValueChange={(value) => {
@@ -111,6 +91,39 @@ export default function Page({ params }: { params: { id: string } }) {
           </Tabs.List>
         </Tabs.Root>
 
+        <Flex
+          justify="between"
+          align="center"
+          direction={{
+            initial: 'column',
+            md: 'row',
+          }}
+          gap="4"
+        >
+          <Flex
+            direction="column"
+            align={{
+              initial: 'center',
+              md: 'start',
+            }}
+          >
+            <Heading size="8">{accountInfo.nickname}</Heading>
+
+            <Text color="gray">
+              {clanAccountInfo?.clan && `[${clanAccountInfo.clan.tag}] • `}
+              {
+                (clanAccountInfo?.clan
+                  ? strings.common.regions.short
+                  : strings.common.regions.normal)[region]
+              }
+            </Text>
+          </Flex>
+
+          <BkniIndicator bkni={bkni} className={styles.bkniIndicator} />
+        </Flex>
+      </PageWrapper>
+
+      <PageWrapper color={bkniColor} noFlex1 align="center">
         {period === 'custom' && (
           <Text>
             From{' '}
@@ -165,21 +178,35 @@ export default function Page({ params }: { params: { id: string } }) {
             </Popover.Root>
           </Text>
         )}
+
+        <Flex direction="column" align="center">
+          <Heading size="9">72%</Heading>
+          <Text color="gray">Winrate</Text>
+        </Flex>
+
+        <Flex wrap="wrap" gap="2" justify="center" maxWidth="416px">
+          {stats.map((stat) => (
+            <Flex minWidth="96px" direction="column" align="center">
+              <Text size="7">{stat[1]}</Text>
+              <Text color="gray" size="2">
+                {stat[0]}
+              </Text>
+            </Flex>
+          ))}
+        </Flex>
       </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>
-      )}
+      <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,5 +1,12 @@
 import { TimerIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Heading, Popover, Text } from '@radix-ui/themes';
+import {
+  Button,
+  Flex,
+  FlexProps,
+  Heading,
+  Popover,
+  Text,
+} from '@radix-ui/themes';
 import { parseBkni } from '../core/blitzkit/parseBkni';
 import {
   BKNI_COLORS,
@@ -7,16 +14,16 @@ import {
 } from '../core/statistics/getBkniPercentile';
 import strings from '../lang/en-US.json';
 
-interface BkniIndicatorProps {
+type BkniIndicatorProps = FlexProps & {
   bkni: number;
-}
+};
 
-export function BkniIndicator({ bkni }: BkniIndicatorProps) {
+export function BkniIndicator({ bkni, ...props }: BkniIndicatorProps) {
   const { bkniColor, bkniFraction, bkniMetric, bkniPercentile } =
     parseBkni(bkni);
 
   return (
-    <Flex direction="column" align="center">
+    <Flex direction="column" align="center" {...props}>
       <svg
         width={180}
         height={100}