feat: percentile indicator

src/components/GenericAllStats.tsx

@@ -1,3 +1,4 @@
+import getWN8Percentile from '../core/blitz/getWN8Percentile.js';
 import { AllStats, SupplementaryStats } from '../types/accountInfo.js';
 import GenericStats from './GenericStats/index.js';
 
@@ -14,7 +15,13 @@ export default function GenericAllStats({
     <GenericStats
       stats={[
         ['Winrate', `${(100 * (stats.wins / stats.battles)).toFixed(2)}%`],
-        ['WN8', supplementaryStats?.wn8.toFixed(0) ?? -Infinity],
+        [
+          'WN8',
+          supplementaryStats?.WN8.toFixed(0) ?? -Infinity,
+          supplementaryStats
+            ? getWN8Percentile(supplementaryStats.WN8)
+            : undefined,
+        ],
         [
           'Survival',
           `${(100 * (stats.survived_battles / stats.battles)).toFixed(2)}%`,

src/components/GenericStats/components/GenericStatsRow.tsx

@@ -1,6 +1,9 @@
 import { theme } from '../../../stitches.config.js';
 import { Stat } from '../index.js';
 
+import '../../../core/blitz/getWN8Percentile.js';
+import PercentileIndicator from '../../PercentileIndicator.js';
+
 export interface GenericStatsRowProps {
   stat: Stat;
 }
@@ -17,7 +20,18 @@ export default function GenericStatsRow({ stat }: GenericStatsRowProps) {
       <span style={{ color: theme.colors.textLowContrast, fontSize: 16 }}>
         {stat[0]}
       </span>
-      <span style={{ color: theme.colors.textHighContrast, fontWeight: 'bold', fontSize: 16 }}>
+      <span
+        style={{
+          color: theme.colors.textHighContrast,
+          fontWeight: 'bold',
+          fontSize: 16,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 4,
+        }}
+      >
+        {stat[2] && <PercentileIndicator percentile={stat[2]} />}
         {stat[1]}
       </span>
     </div>

src/components/GenericStats/index.tsx

@@ -1,6 +1,9 @@
+import { Percentile } from '../../constants/percentiles.js';
 import GenericStatsColumn from './components/GenericStatsColumn.js';
 
-export type Stat = [string, string | number];
+export type Stat =
+  | [string, string | number]
+  | [string, string | number, Percentile | undefined];
 
 export interface GenericStatsProps {
   stats: Stat[];

src/components/PercentileIndicator.tsx

@@ -0,0 +1,45 @@
+import {
+  blue,
+  green,
+  lime,
+  orange,
+  pink,
+  purple,
+  red,
+  slate,
+  teal,
+  yellow,
+} from '@radix-ui/colors';
+import { Percentile } from '../constants/percentiles.js';
+
+export interface PercentileIndicatorProps {
+  percentile: Percentile;
+}
+
+export const PERCENTILE_COLORS = {
+  [Percentile.VeryBad]: slate.slate9,
+  [Percentile.Bad]: red.red9,
+  [Percentile.BelowAverage]: orange.orange9,
+  [Percentile.Average]: yellow.yellow9,
+  [Percentile.AboveAverage]: lime.lime9,
+  [Percentile.Good]: green.green9,
+  [Percentile.VeryGood]: teal.teal9,
+  [Percentile.Great]: blue.blue9,
+  [Percentile.Unicum]: pink.pink9,
+  [Percentile.SuperUnicum]: purple.purple9,
+};
+
+export default function PercentileIndicator({
+  percentile,
+}: PercentileIndicatorProps) {
+  return (
+    <div
+      style={{
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: PERCENTILE_COLORS[percentile],
+      }}
+    />
+  );
+}