feat: tier weights

src/commands/stats.tsx

@@ -2,6 +2,7 @@ import { SlashCommandBuilder } from 'discord.js';
 import GenericAllStats from '../components/GenericAllStats.js';
 import NoData, { NoDataType } from '../components/NoData.js';
 import PoweredByBlitzStars from '../components/PoweredByBlitzStars.js';
+import TierWeights, { TierWeightsRecord } from '../components/TierWeights.js';
 import TitleBar from '../components/TitleBar.js';
 import Wrapper from '../components/Wrapper.js';
 import { BLITZ_SERVERS } from '../constants/servers.js';
@@ -13,7 +14,7 @@ import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
 import resolveTankId from '../core/blitz/resolveTankId.js';
 import resolveTankName from '../core/blitz/resolveTankName.js';
 import sumStats from '../core/blitz/sumStats.js';
-import { tankopedia } from '../core/blitz/tankopedia.js';
+import { Tier, tankopedia } from '../core/blitz/tankopedia.js';
 import getPeriodNow from '../core/blitzstars/getPeriodNow.js';
 import getPeriodStart from '../core/blitzstars/getPeriodStart.js';
 import getTankStatsOverTime from '../core/blitzstars/getTankStatsOverTime.js';
@@ -113,34 +114,57 @@ export default {
     );
     let stats: AllStats;
     let supplementaryStats: SupplementaryStats;
+    let tierWeights: TierWeightsRecord;
 
     if (commandGroup === 'player') {
       const entries = Object.entries(tankStats);
       stats = sumStats(entries.map(([, stats]) => stats));
-      const battles = entries.reduce(
-        (accumulator, [, stats]) => accumulator + stats.battles,
-        0,
-      );
+      const battles = entries.reduce((accumulator, [tankIdString, stats]) => {
+        const tankId = parseInt(tankIdString);
+        const tankAverage = tankAverages[tankId];
+
+        return tankAverage ? accumulator + stats.battles : accumulator;
+      }, 0);
+
       supplementaryStats = {
         WN8:
-          entries.reduce(
-            (accumulator, [tankIdString, stats]) =>
-              accumulator +
-              getWN8(tankAverages[parseInt(tankIdString)].all, stats) *
-                stats.battles,
-            0,
-          ) / battles,
+          entries.reduce((accumulator, [tankIdString, stats]) => {
+            const tankId = parseInt(tankIdString);
+            const tankAverage = tankAverages[tankId];
+
+            return tankAverage
+              ? accumulator + getWN8(tankAverage.all, stats) * stats.battles
+              : accumulator;
+          }, 0) / battles,
         tier:
-          entries.reduce(
-            (accumulator, [tankIdString, stats]) =>
-              accumulator +
-              tankopedia[parseInt(tankIdString)].tier * stats.battles,
-            0,
-          ) / battles,
+          entries.reduce((accumulator, [tankIdString, stats]) => {
+            const tankId = parseInt(tankIdString);
+            const tankAverage = tankAverages[tankId];
+
+            return tankAverage
+              ? accumulator + tankopedia[tankId].tier * stats.battles
+              : accumulator;
+          }, 0) / battles,
       };
+      tierWeights = entries.reduce<TierWeightsRecord>(
+        (accumulator, [tankIdString, stats]) => {
+          const tankId = parseInt(tankIdString);
+          const tier = tankopedia[tankId].tier as Tier;
+
+          if (accumulator[tier]) {
+            accumulator[tier]! += stats.battles;
+          } else {
+            accumulator[tier] = stats.battles;
+          }
+
+          return accumulator;
+        },
+        {},
+      );
     } else if (commandGroup === 'tank') {
       const tankId = await resolveTankId(tankIdRaw);
       stats = tankStats[tankId];
+
       supplementaryStats = {
         WN8: getWN8(tankAverages[tankId].all, tankStats[tankId]),
         tier: tankopedia[tankId].tier,
@@ -163,6 +187,9 @@ export default {
         />
 
         {stats!.battles === 0 && <NoData type={NoDataType.BattlesInPeriod} />}
+        {stats!.battles > 0 && commandGroup === 'player' && (
+          <TierWeights weights={tierWeights!} />
+        )}
         {stats!.battles > 0 && (
           <GenericAllStats
             stats={stats!}

src/components/TierWeights.tsx

@@ -0,0 +1,34 @@
+import { TIER_ROMAN_NUMERALS, Tier } from '../core/blitz/tankopedia.js';
+import { themeLight } from '../stitches.config.js';
+
+export type TierWeightsRecord = Partial<Record<Tier, number>>;
+
+export interface TierWeightsProps {
+  weights: TierWeightsRecord;
+}
+
+export default function TierWeights({ weights }: TierWeightsProps) {
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      {Object.entries(weights).map(([tier, weight]) => (
+        <div
+          key={tier}
+          style={{
+            backgroundColor: themeLight.colors.appBackground1,
+            flex: weight,
+            color: themeLight.colors.textHighContrast,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 16,
+            overflow: 'hidden',
+            borderRadius: 8,
+            minWidth: 16,
+          }}
+        >
+          {TIER_ROMAN_NUMERALS[parseInt(tier) as Tier]}
+        </div>
+      ))}
+    </div>
+  );
+}

src/core/blitz/tankopedia.ts

@@ -50,7 +50,9 @@ export const TANK_ICONS: Record<TankType, string> = {
   heavyTank: 'https://i.imgur.com/ECeqlZa.png',
 };
 
-export const TIER_ROMAN_NUMERALS: Record<number, string> = {
+export type Tier = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+
+export const TIER_ROMAN_NUMERALS: Record<Tier, string> = {
   1: 'I',
   2: 'II',
   3: 'III',

src/stitches.config.ts

@@ -1,7 +1,6 @@
-import { slateDark } from '@radix-ui/colors';
+import { slate, slateDark } from '@radix-ui/colors';
 import { createColors } from 'bepaint';
 
 // this isn't really a stitches config, but the object is compliant
-export const theme = {
-  colors: createColors(slateDark),
-};
+export const theme = { colors: createColors(slateDark) };
+export const themeLight = { colors: createColors(slate) };