From 298b89b2271f20d9428e69c23dc49800dbd75c50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 21 Mar 2024 22:32:01 -0500
Subject: [PATCH] feat: new rating stat style

---
 .../{ratingStats.tsx => ratingSession.tsx}    | 13 ++---
 .../components/HeroStat/index.tsx             | 48 +++++++++++--------
 src/components/AllStatsOverview/index.tsx     |  1 +
 src/events/interactionCreate/index.ts         |  2 +-
 src/lang/en-US.json                           |  4 +-
 5 files changed, 40 insertions(+), 28 deletions(-)
 rename src/commands/{ratingStats.tsx => ratingSession.tsx} (89%)

diff --git a/src/commands/ratingStats.tsx b/src/commands/ratingSession.tsx
similarity index 89%
rename from src/commands/ratingStats.tsx
rename to src/commands/ratingSession.tsx
index d50917e56..c328c17b9 100644
--- a/src/commands/ratingStats.tsx
+++ b/src/commands/ratingSession.tsx
@@ -17,7 +17,7 @@ import { CommandRegistry } from '../events/interactionCreate';
 export const ratingStatsCommand = new Promise<CommandRegistry>((resolve) => {
   resolve({
     command:
-      createLocalizedCommand('rating-stats').addStringOption(
+      createLocalizedCommand('rating-session').addStringOption(
         addUsernameChoices,
       ),
 
@@ -43,12 +43,13 @@ export const ratingStatsCommand = new Promise<CommandRegistry>((resolve) => {
       const [statsB2] = (await getRatingNeighbors(region, id, 0)).neighbors;
 
       if (!statsA) {
-        return t`bot.commands.rating_stats.errors.unrecorded_stats`;
+        return t`bot.commands.rating_session.errors.unrecorded_stats`;
       }
       if (!statsB1) {
-        return translate('bot.commands.rating_stats.errors.no_participation', [
-          markdownEscape(accountInfo.nickname),
-        ]);
+        return translate(
+          'bot.commands.rating_session.errors.no_participation',
+          [markdownEscape(accountInfo.nickname)],
+        );
       }
 
       const delta = deltaBkrlBlitzStats(statsA, accountInfo.statistics.rating!);
@@ -58,7 +59,7 @@ export const ratingStatsCommand = new Promise<CommandRegistry>((resolve) => {
           <TitleBar
             title={accountInfo.nickname}
             // image={clanImage} // TODO: add league icon here
-            description={t`bot.commands.rating_stats.body.subtitle`}
+            description={t`bot.commands.rating_session.body.subtitle`}
           />
 
           {delta.battles === 0 && (
diff --git a/src/components/AllStatsOverview/components/HeroStat/index.tsx b/src/components/AllStatsOverview/components/HeroStat/index.tsx
index ecfdb34e8..b71b882b5 100644
--- a/src/components/AllStatsOverview/components/HeroStat/index.tsx
+++ b/src/components/AllStatsOverview/components/HeroStat/index.tsx
@@ -19,7 +19,6 @@ export function HeroStat({ stats, locale }: WN8DisplayProps) {
   let color: string;
   let heroStat: string | number;
   let subtitle: string | number | undefined;
-  let subtitleImage: string | undefined;
 
   if (stats.type === 'random') {
     const percentile =
@@ -44,41 +43,52 @@ export function HeroStat({ stats, locale }: WN8DisplayProps) {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: -16,
+        gap: stats.type === 'rating' ? -20 : -16,
       }}
     >
       <Glow color={color} />
 
       <div
         style={{
-          width: 128,
-          height: 80,
+          width: stats.type === 'rating' ? 112 : 128,
+          height: stats.type === 'rating' ? 112 : 80,
           backgroundColor: color,
-          borderRadius: 40,
+          borderRadius: stats.type === 'rating' ? 8 : 40,
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
           gap: -4,
+          transform: stats.type === 'rating' ? 'rotate(45deg)' : '',
         }}
       >
-        <span
+        <div
           style={{
-            fontWeight: 900,
-            fontSize: 32,
-            color: theme.colors.textHighContrast,
+            transform: stats.type === 'rating' ? 'rotate(-45deg)' : '',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
           }}
         >
-          {heroStat}
-        </span>
-        <span
-          style={{
-            fontSize: 16,
-            color: theme.colors.textHighContrast,
-          }}
-        >
-          {subtitle}
-        </span>
+          <span
+            style={{
+              fontWeight: 900,
+              fontSize: 32,
+              color: theme.colors.textHighContrast,
+            }}
+          >
+            {heroStat}
+          </span>
+          <span
+            style={{
+              fontSize: 16,
+              color: theme.colors.textHighContrast,
+            }}
+          >
+            {subtitle}
+          </span>
+        </div>
       </div>
 
       <Glow color={color} direction="reverse" />
diff --git a/src/components/AllStatsOverview/index.tsx b/src/components/AllStatsOverview/index.tsx
index f78af5bc6..cc1dc51bc 100644
--- a/src/components/AllStatsOverview/index.tsx
+++ b/src/components/AllStatsOverview/index.tsx
@@ -33,6 +33,7 @@ export default function AllStatsOverview({
     <div
       style={{
         display: 'flex',
+        alignItems: 'center',
         gap: -64,
         width: '100%',
       }}
diff --git a/src/events/interactionCreate/index.ts b/src/events/interactionCreate/index.ts
index 04823b0d5..5441c54a3 100644
--- a/src/events/interactionCreate/index.ts
+++ b/src/events/interactionCreate/index.ts
@@ -26,7 +26,7 @@ import { permissionsCommand } from '../../commands/permissions';
 import { pingCommand } from '../../commands/ping';
 import { playerInfoCommand } from '../../commands/playerInfo';
 import { ratingLeaderboardCommand } from '../../commands/ratingLeaderboard';
-import { ratingStatsCommand } from '../../commands/ratingStats';
+import { ratingStatsCommand } from '../../commands/ratingSession';
 import { researchCommand } from '../../commands/research';
 import { searchClansCommand } from '../../commands/searchClans';
 import { searchPlayersCommand } from '../../commands/searchPlayers';
diff --git a/src/lang/en-US.json b/src/lang/en-US.json
index 977063329..95e6a61fa 100644
--- a/src/lang/en-US.json
+++ b/src/lang/en-US.json
@@ -541,8 +541,8 @@
         }
       },
 
-      "rating_stats": {
-        "$": "rating-stats",
+      "rating_session": {
+        "$": "rating-session",
         "description": "Rating player's statistics",
 
         "body": {