feat: ratings stats

src/components/AllStatsOverview/components/HeroStat/components/Glow.tsx

@@ -4,6 +4,8 @@ export interface GlowProps {
   rotation?: number;
 }
 
+const width = 16;
+
 export function Glow({
   color,
   direction = 'default',
@@ -11,7 +13,6 @@ export function Glow({
 }: GlowProps) {
   const color1 = color;
   const color2 = `${color}00`;
-
   const background = `linear-gradient(${
     direction === 'default' ? 0 : 180
   }deg, ${color1} 0%, ${color2} 100%)`;
@@ -25,11 +26,11 @@ export function Glow({
         transform: `rotate(${rotation}deg)`,
       }}
     >
-      <div style={{ height: 54, width: 16, background }} />
-      <div style={{ height: 72, width: 16, background }} />
-      <div style={{ height: 80, width: 16, background }} />
-      <div style={{ height: 72, width: 16, background }} />
-      <div style={{ height: 54, width: 16, background }} />
+      <div style={{ height: 54, width, background }} />
+      <div style={{ height: 72, width, background }} />
+      <div style={{ height: 80, width, background }} />
+      <div style={{ height: 72, width, background }} />
+      <div style={{ height: 54, width, background }} />
     </div>
   );
 }

src/components/AllStatsOverview/components/HeroStat/constants.ts

@@ -0,0 +1,9 @@
+import { amber, brown, purple, sandDark, slate } from '@radix-ui/colors';
+
+export const LEAGUE_COLORS = [
+  purple.purple9,
+  sandDark.sand11,
+  amber.amber10,
+  slate.slate9,
+  brown.brown9,
+];

src/components/AllStatsOverview/components/HeroStat/index.tsx

@@ -1,21 +1,40 @@
 import { Locale } from 'discord.js';
 import { Percentile } from '../../../../constants/percentiles';
+import { SupplementaryStats } from '../../../../core/blitz/getAccountInfo';
+import { getLeagueFromScore } from '../../../../core/blitz/getLeagueFromScore';
 import { translator } from '../../../../core/localization/translator';
 import getWN8Percentile from '../../../../core/statistics/getWN8Percentile';
 import { theme } from '../../../../stitches.config';
 import { PERCENTILE_COLORS } from '../../../PercentileIndicator/constants';
 import { Glow } from './components/Glow';
+import { LEAGUE_COLORS } from './constants';
 
 export interface WN8DisplayProps {
-  wn8?: number;
+  stats: SupplementaryStats;
   locale: Locale;
 }
 
-export function WN8Display({ wn8, locale }: WN8DisplayProps) {
-  const percentile =
-    wn8 === undefined ? Percentile.VeryBad : getWN8Percentile(wn8);
-  const color = PERCENTILE_COLORS[percentile];
+export function HeroStat({ stats, locale }: WN8DisplayProps) {
   const { translate } = translator(locale);
+  let color: string;
+  let heroStat: string | number;
+  let subtitle: string | number | undefined;
+  let subtitleImage: string | undefined;
+
+  if (stats.type === 'random') {
+    const percentile =
+      stats.WN8 === undefined
+        ? Percentile.VeryBad
+        : getWN8Percentile(stats.WN8);
+    color = PERCENTILE_COLORS[percentile];
+    heroStat = stats.WN8 === undefined ? '--' : stats.WN8.toFixed(0);
+    subtitle = translate(`common.wn8_percentile.${percentile}`);
+  } else {
+    heroStat = stats.score;
+    const league = getLeagueFromScore(stats.score);
+    color = LEAGUE_COLORS[league.index];
+    subtitle = translate(`common.leagues.${league.name}`);
+  }
 
   return (
     <div
@@ -50,7 +69,7 @@ export function WN8Display({ wn8, locale }: WN8DisplayProps) {
             color: theme.colors.textHighContrast,
           }}
         >
-          {wn8 === undefined ? '--' : wn8.toFixed(0)}
+          {heroStat}
         </span>
         <span
           style={{
@@ -58,7 +77,7 @@ export function WN8Display({ wn8, locale }: WN8DisplayProps) {
             color: theme.colors.textHighContrast,
           }}
         >
-          {translate(`common.wn8_percentile.${percentile}`)}
+          {subtitle}
         </span>
       </div>
 

src/components/AllStatsOverview/index.tsx

@@ -1,7 +1,7 @@
 import { Locale } from 'discord.js';
 import { SupplementaryStats } from '../../core/blitz/getAccountInfo';
 import { translator } from '../../core/localization/translator';
-import { WN8Display } from './components/WN8Display';
+import { HeroStat } from './components/HeroStat';
 import {
   WN8SurroundingStat,
   WN8SurroundingStatAlign,
@@ -47,18 +47,18 @@ export default function AllStatsOverview({
         }}
       >
         <WN8SurroundingStat
-          label={t`bot.commands.stats.body.battles`}
+          label={t`bot.common.hero_stats.battles`}
           value={stats.battles.toLocaleString()}
           align={WN8SurroundingStatAlign.Right}
         />
         <WN8SurroundingStat
-          label={t`bot.commands.stats.body.winrate`}
+          label={t`bot.common.hero_stats.winrate`}
           value={`${(100 * (stats.wins / stats.battles)).toFixed(2)}%`}
           align={WN8SurroundingStatAlign.Right}
           padded
         />
         <WN8SurroundingStat
-          label={t`bot.commands.stats.body.damage`}
+          label={t`bot.common.hero_stats.damage`}
           value={Math.round(
             stats.damage_dealt / stats.battles,
           ).toLocaleString()}
@@ -66,13 +66,13 @@ export default function AllStatsOverview({
           padded
         />
         <WN8SurroundingStat
-          label={t`bot.commands.stats.body.damage_ratio`}
+          label={t`bot.common.hero_stats.damage_ratio`}
           value={(stats.damage_dealt / stats.damage_received).toFixed(2)}
           align={WN8SurroundingStatAlign.Right}
         />
       </div>
 
-      <WN8Display locale={locale} wn8={supplementaryStats.WN8} />
+      <HeroStat locale={locale} stats={supplementaryStats} />
 
       <div
         style={{
@@ -82,30 +82,37 @@ export default function AllStatsOverview({
           flex: 1,
         }}
       >
+        {supplementaryStats.type === 'random' && (
+          <WN8SurroundingStat
+            label={t`bot.common.hero_stats.tier`}
+            value={
+              supplementaryStats.tier
+                ? supplementaryStats.tier.toFixed(2)
+                : '--'
+            }
+          />
+        )}
+        {supplementaryStats.type === 'rating' && (
+          <WN8SurroundingStat
+            label={t`bot.common.hero_stats.tier`}
+            value="idk lol"
+          />
+        )}
         <WN8SurroundingStat
-          label={t`bot.commands.stats.body.tier`}
-          value={
-            supplementaryStats.tier ? supplementaryStats.tier.toFixed(2) : '--'
-          }
-        />
-        <WN8SurroundingStat
-          label={t`bot.commands.stats.body.survival`}
+          label={t`bot.common.hero_stats.survival`}
           value={`${(100 * (stats.survived_battles / stats.battles)).toFixed(
             2,
           )}%`}
           padded
         />
         <WN8SurroundingStat
-          label={t`bot.commands.stats.body.accuracy`}
+          label={t`bot.common.hero_stats.accuracy`}
           value={`${(100 * (stats.hits / stats.shots)).toFixed(2)}%`}
           padded
         />
         <WN8SurroundingStat
-          label={t`bot.commands.stats.body.kill_ratio`}
-          value={(
-            stats.frags /
-            (stats.battles - stats.survived_battles)
-          ).toFixed(2)}
+          label={t`bot.common.hero_stats.kills`}
+          value={(stats.frags / stats.battles).toFixed(2)}
         />
       </div>
     </div>

src/components/GenericAllStats/index.tsx

@@ -23,6 +23,12 @@ export default function GenericAllStats({
   const killsToDeathRatio =
     stats.frags / (stats.battles - stats.survived_battles);
 
+  if (supplementaryStats && supplementaryStats.type !== 'random') {
+    throw new Error(
+      'Generic all stats does not support random supplementary stats',
+    );
+  }
+
   return (
     <Root>
       <Row>