feat: percentile indicator

.vscode/settings.json

@@ -9,6 +9,7 @@
     "Smri",
     "strvk",
     "tankopedia",
+    "Unicum",
     "Unregistering",
     "vickers",
     "wargaming",

src/commands/stats.tsx

@@ -85,12 +85,12 @@ export default {
 
             return accumulator + tankTier * stats.battles;
           }, 0) / totalBattles,
-        wn8:
+        WN8:
           entries.reduce((accumulator, [tankIdString, stats]) => {
             const tankId = Number(tankIdString);
-            const tankWn8 = getWN8(tankAverages[tankId].all, stats);
+            const tankWN8 = getWN8(tankAverages[tankId].all, stats);
 
-            return accumulator + tankWn8 * stats.battles;
+            return accumulator + tankWN8 * stats.battles;
           }, 0) / totalBattles,
       };
 

src/commands/tankstats.tsx

@@ -100,7 +100,7 @@ export default {
             stats={stats}
             supplementaryStats={{
               tier: tankopedia[tankId].tier,
-              wn8: getWN8(tankAverages[tankId].all, stats),
+              WN8: getWN8(tankAverages[tankId].all, stats),
             }}
           />
         )}

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],
+      }}
+    />
+  );
+}

src/constants/percentiles.ts

@@ -0,0 +1,13 @@
+// http://www.wotinfo.net/en/wn8scale
+export enum Percentile {
+  VeryBad,
+  Bad,
+  BelowAverage,
+  Average,
+  AboveAverage,
+  Good,
+  VeryGood,
+  Great,
+  Unicum,
+  SuperUnicum,
+}

src/core/blitz/getWN8Percentile.ts

@@ -0,0 +1,21 @@
+import { Percentile } from '../../constants/percentiles.js';
+
+const WN8_PERCENTILES: [number, Percentile][] = [
+  [0, Percentile.VeryBad],
+  [300, Percentile.Bad],
+  [450, Percentile.BelowAverage],
+  [650, Percentile.Average],
+  [900, Percentile.AboveAverage],
+  [1200, Percentile.Good],
+  [1600, Percentile.VeryGood],
+  [2000, Percentile.Great],
+  [2450, Percentile.Unicum],
+  [2900, Percentile.SuperUnicum],
+];
+
+export default function getWN8Percentile(WN8: number) {
+  const lastIndex = WN8_PERCENTILES.findLastIndex(
+    ([WN8Listing]) => WN8Listing <= WN8,
+  );
+  return WN8_PERCENTILES[lastIndex === -1 ? 0 : lastIndex][1];
+}

src/types/accountInfo.ts

@@ -19,7 +19,7 @@ export interface AllStats {
 }
 
 export interface SupplementaryStats {
-  wn8: number;
+  WN8: number;
   tier: number;
 }