feat: bkni indicator

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

@@ -1,9 +1,14 @@
-import { Flex, Heading, Text } from '@radix-ui/themes';
+import { TimerIcon } from '@radix-ui/react-icons';
+import { Button, Flex, Heading, Popover, Text } from '@radix-ui/themes';
 import PageWrapper from '../../../../components/PageWrapper';
 import { getAccountInfo } from '../../../../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../../../../core/blitz/getClanAccountInfo';
 import { idToRegion } from '../../../../core/blitz/idToRegion';
-import getBkniPercentile from '../../../../core/statistics/getBkniPercentile';
+import getBkniPercentile, {
+  BKNI_COLORS,
+  BKNI_PERCENTILES,
+  BkniPercentile,
+} from '../../../../core/statistics/getBkniPercentile';
 import strings from '../../../../lang/en-US.json';
 
 export default async function Page({ params }: { params: { id: string } }) {
@@ -12,12 +17,15 @@ export default async function Page({ params }: { params: { id: string } }) {
   const accountInfo = await getAccountInfo(region, id);
   const clanAccountInfo = await getClanAccountInfo(region, id, ['clan']);
   const bkniRaw = Math.random() * 2 - 1;
-  const bkniFraction = Math.random();
+  const bkniFraction = (bkniRaw + 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 (
-    <PageWrapper>
+    <PageWrapper color="blue">
       <Flex gap="2">
         <Heading>{accountInfo.nickname}</Heading>
         {clanAccountInfo?.clan && (
@@ -33,6 +41,17 @@ export default async function Page({ params }: { params: { id: string } }) {
             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}
@@ -50,20 +69,55 @@ export default async function Page({ params }: { params: { id: string } }) {
             r={80}
             strokeLinecap="round"
             fill="none"
-            stroke="purple"
+            stroke="url(#bkni-gradient)"
             strokeWidth={20}
             strokeDasharray={(160 - 80 * bkniFraction) * Math.PI}
             strokeDashoffset={(160 - 80 * bkniFraction) * Math.PI}
           />
         </svg>
 
-        <Flex direction="column" align="center" mt="-7">
+        <Flex direction="column" align="center" mt="-8">
           <Text weight="bold" size="8">
             {bkniMetric}
           </Text>
-          <Text color="gray" size="4">
-            {strings.common.bkni_percentile[bkniPercentile]}
-          </Text>
+
+          <Popover.Root>
+            <Popover.Trigger>
+              <Button 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">
+                  <Heading weight="bold" size="5">
+                    BlitzKit Neutrality Index
+                  </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]}>
+                    <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 ?? 200}
+                      </Text>
+                    </Flex>
+                  </Button>
+                ))}
+              </Flex>
+            </Popover.Content>
+          </Popover.Root>
         </Flex>
       </Flex>
     </PageWrapper>

src/components/Navbar/index.css.ts

@@ -1,8 +1,10 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 
+const MAX_EXPANDED_TOOLS = 680;
+
 export const hamburgerButton = style({
   '@media': {
-    'screen and (min-width: 592px)': {
+    [`screen and (min-width: ${MAX_EXPANDED_TOOLS}px)`]: {
       display: 'none',
     },
   },
@@ -47,7 +49,7 @@ export const toolCard = style({
 
 export const toolTexts = style({
   '@media': {
-    'screen and (max-width: 592px)': {
+    [`screen and (max-width: ${MAX_EXPANDED_TOOLS}px)`]: {
       display: 'none',
     },
   },

src/core/statistics/getBkniPercentile.ts

@@ -26,7 +26,7 @@ export enum BkniPercentile {
   SuperUnicum,
 }
 
-const BKNI_PERCENTILES = [
+export const BKNI_PERCENTILES = [
   { min: 0, percentile: BkniPercentile.SuperMalum },
   { min: 10, percentile: BkniPercentile.Malum },
   { min: 20, percentile: BkniPercentile.VeryBad },
@@ -40,6 +40,20 @@ const BKNI_PERCENTILES = [
   { min: 190, percentile: BkniPercentile.SuperUnicum },
 ];
 
+export const BKNI_COLORS = {
+  [BkniPercentile.SuperMalum]: 'tomato',
+  [BkniPercentile.Malum]: 'orange',
+  [BkniPercentile.VeryBad]: 'amber',
+  [BkniPercentile.Bad]: 'yellow',
+  [BkniPercentile.BelowAverage]: 'lime',
+  [BkniPercentile.Average]: 'green',
+  [BkniPercentile.AboveAverage]: 'teal',
+  [BkniPercentile.Good]: 'cyan',
+  [BkniPercentile.VeryGood]: 'pink',
+  [BkniPercentile.Unicum]: 'plum',
+  [BkniPercentile.SuperUnicum]: 'purple',
+} as const;
+
 export default function getBkniPercentile(wn8: number) {
   const lastIndex = BKNI_PERCENTILES.findLastIndex(({ min }) => min <= wn8);
   return BKNI_PERCENTILES[lastIndex === -1 ? 0 : lastIndex].percentile;