feat: start on final design

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

@@ -1,13 +1,11 @@
 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 {
   stats: SupplementaryStats;
@@ -16,24 +14,12 @@ export interface WN8DisplayProps {
 
 export function HeroStat({ stats, locale }: WN8DisplayProps) {
   const { translate } = translator(locale);
-  let color: string;
-  let heroStat: string | number;
-  let subtitle: string | number | 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}`);
-  }
+  const percentile =
+    stats.WN8 === undefined ? Percentile.VeryBad : getWN8Percentile(stats.WN8);
+  const color = PERCENTILE_COLORS[percentile];
+  const heroStat = stats.WN8 === undefined ? '--' : stats.WN8.toFixed(0);
+  const subtitle = translate(`common.wn8_percentile.${percentile}`);
 
   return (
     <div
@@ -43,28 +29,26 @@ export function HeroStat({ stats, locale }: WN8DisplayProps) {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: stats.type === 'rating' ? -20 : -16,
+        gap: -16,
       }}
     >
       <Glow color={color} />
 
       <div
         style={{
-          width: stats.type === 'rating' ? 112 : 128,
-          height: stats.type === 'rating' ? 112 : 80,
+          width: 128,
+          height: 80,
           backgroundColor: color,
-          borderRadius: stats.type === 'rating' ? 8 : 40,
+          borderRadius: 40,
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
           gap: -4,
-          transform: stats.type === 'rating' ? 'rotate(45deg)' : '',
         }}
       >
         <div
           style={{
-            transform: stats.type === 'rating' ? 'rotate(-45deg)' : '',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',

src/components/AllStatsOverview/index.tsx

@@ -83,22 +83,12 @@ 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.common.hero_stats.tier`}
+          value={
+            supplementaryStats.tier ? supplementaryStats.tier.toFixed(2) : '--'
+          }
+        />
         <WN8SurroundingStat
           label={t`bot.common.hero_stats.survival`}
           value={`${(100 * (stats.survived_battles / stats.battles)).toFixed(

src/components/CommandWrapper.tsx

@@ -16,7 +16,8 @@ export default function CommandWrapper({ children, fat }: CommandWrapperProps) {
         gap: 16,
         width: 480,
         color: theme.colors.textHighContrast,
-        background: theme.colors.appBackground1,
+        position: 'relative',
+        background: 'url(https://i.imgur.com/zjwyGv1.png)',
       }}
     >
       {children}

src/components/DeltaCaret.tsx

@@ -0,0 +1,17 @@
+interface DeltaCaretProps {
+  delta: number;
+}
+
+export function DeltaCaret({ delta }: DeltaCaretProps) {
+  return (
+    <img
+      width={16}
+      height={16}
+      src={
+        delta > 0
+          ? 'https://i.imgur.com/gjI4a5f.png'
+          : 'https://i.imgur.com/lLGZygN.png'
+      }
+    />
+  );
+}

src/components/GenericAllStats/index.tsx

@@ -23,12 +23,6 @@ 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>

src/components/TitleBar.tsx

@@ -15,6 +15,7 @@ export default function TitleBar({ title, image, description }: TitleBarProps) {
         flexDirection: 'column',
         justifyContent: 'center',
         alignItems: 'center',
+        padding: '8px 0px',
       }}
     >
       <div