feat: start on final design

src/commands/evolution.tsx

@@ -7,7 +7,7 @@ import TitleBar from '../components/TitleBar';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import resolveTankId from '../core/blitz/resolveTankId';
-import { emblemIdToURL } from '../core/blitzkrieg/emblemIdToURL';
+import { emblemURL } from '../core/blitzkrieg/emblemURL';
 import getTankHistories from '../core/blitzkrieg/getTankHistories';
 import { getBlitzStarsLinkButton } from '../core/blitzstars/getBlitzStarsLinkButton';
 import getPlayerHistories from '../core/blitzstars/getPlayerHistories';
@@ -41,7 +41,7 @@ async function render(
 ) {
   const accountInfo = await getAccountInfo(region, id);
   const clan = (await getClanAccountInfo(region, id, ['clan']))?.clan;
-  const logo = clan ? emblemIdToURL(clan.emblem_set_id) : undefined;
+  const logo = clan ? emblemURL(clan.emblem_set_id) : undefined;
   const histories = await (type === 'player'
     ? getPlayerHistories(region, id, {
         start,

src/commands/fullStats.tsx

@@ -6,7 +6,7 @@ import TierWeights from '../components/TierWeights';
 import TitleBar from '../components/TitleBar';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
-import { emblemIdToURL } from '../core/blitzkrieg/emblemIdToURL';
+import { emblemURL } from '../core/blitzkrieg/emblemURL';
 import { filtersToDescription } from '../core/blitzkrieg/filtersToDescription';
 import { getBlitzStarsLinkButton } from '../core/blitzstars/getBlitzStarsLinkButton';
 import getStatsInPeriod from '../core/blitzstars/getStatsInPeriod';
@@ -40,7 +40,7 @@ async function render(
 ) {
   const { nickname } = await getAccountInfo(region, id);
   const clan = (await getClanAccountInfo(region, id, ['clan']))?.clan;
-  const clanImage = clan ? emblemIdToURL(clan.emblem_set_id) : undefined;
+  const clanImage = clan ? emblemURL(clan.emblem_set_id) : undefined;
   const diffedTankStats = await getStatsInPeriod(
     region,
     id,

src/commands/ratingSession.tsx

@@ -1,10 +1,15 @@
 import markdownEscape from 'markdown-escape';
-import AllStatsOverview from '../components/AllStatsOverview';
 import CommandWrapper from '../components/CommandWrapper';
+import { DeltaCaret } from '../components/DeltaCaret';
 import NoData from '../components/NoData';
 import TitleBar from '../components/TitleBar';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
+import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
+import { getLeagueFromScore } from '../core/blitz/getLeagueFromScore';
+import getRatingInfo from '../core/blitz/getRatingInfo';
 import { getRatingNeighbors } from '../core/blitz/getRatingNeighbors';
+import { normalizeLeagueIcon } from '../core/blitz/normalizeLeagueIcon';
+import { emblemURL } from '../core/blitzkrieg/emblemURL';
 import { getArchivedRatingLeaderboard } from '../core/blitzkrieg/getArchivedRatingLeaderboard';
 import addUsernameChoices from '../core/discord/addUsernameChoices';
 import { createLocalizedCommand } from '../core/discord/createLocalizedCommand';
@@ -13,6 +18,7 @@ import { translator } from '../core/localization/translator';
 import { deltaBkrlBlitzStats } from '../core/statistics/deltaBkrlBlitzStats';
 import { BkrlFormat } from '../core/streams/bkrl';
 import { CommandRegistry } from '../events/interactionCreate';
+import { theme } from '../stitches.config';
 
 export const ratingStatsCommand = new Promise<CommandRegistry>((resolve) => {
   resolve({
@@ -27,6 +33,8 @@ export const ratingStatsCommand = new Promise<CommandRegistry>((resolve) => {
     async handler(interaction) {
       const { t, translate } = translator(interaction.locale);
       const { id, region } = await resolvePlayerFromCommand(interaction);
+      const clan = (await getClanAccountInfo(region, id, ['clan']))?.clan;
+      const clanImage = clan ? emblemURL(clan.emblem_set_id) : undefined;
       const leaderboard = await getArchivedRatingLeaderboard(region, 53);
 
       if (leaderboard.format === BkrlFormat.Minimal) {
@@ -35,13 +43,18 @@ export const ratingStatsCommand = new Promise<CommandRegistry>((resolve) => {
         );
       }
 
+      const ratingInfo = await getRatingInfo(region);
       const accountInfo = await getAccountInfo(region, id, [
         'statistics.rating',
       ]);
       const statsA = leaderboard.entries.find((entry) => entry.id === id);
       const statsB1 = accountInfo.statistics.rating!;
       const [statsB2] = (await getRatingNeighbors(region, id, 0)).neighbors;
+      const league = getLeagueFromScore(statsB2.score);
 
+      if (ratingInfo.detail) {
+        throw new Error(`Rating info not available for ${region}`);
+      }
       if (!statsA) {
         return t`bot.commands.rating_session.errors.unrecorded_stats`;
       }
@@ -52,13 +65,17 @@ export const ratingStatsCommand = new Promise<CommandRegistry>((resolve) => {
         );
       }
 
-      const delta = deltaBkrlBlitzStats(statsA, accountInfo.statistics.rating!);
+      const delta = deltaBkrlBlitzStats(
+        statsA,
+        accountInfo.statistics.rating!,
+        statsB2,
+      );
 
       return (
         <CommandWrapper>
           <TitleBar
             title={accountInfo.nickname}
-            // image={clanImage} // TODO: add league icon here
+            image={clanImage}
             description={t`bot.commands.rating_session.body.subtitle`}
           />
 
@@ -66,24 +83,84 @@ export const ratingStatsCommand = new Promise<CommandRegistry>((resolve) => {
             <NoData type="battles_in_season" locale={interaction.locale} />
           )}
           {delta.battles > 0 && (
-            <AllStatsOverview
-              locale={interaction.locale}
-              stats={{
-                battles: delta.battles,
-                damage_dealt: delta.damageDealt,
-                damage_received: delta.damageReceived,
-                frags: delta.kills,
-                hits: delta.hits,
-                shots: delta.shots,
-                survived_battles: delta.survived,
-                wins: delta.wins,
+            <div
+              style={{
+                padding: 16,
+                backgroundColor: theme.colors.appBackground2_purple,
+                borderRadius: 4,
+                border: `1px solid ${theme.colors.componentInteractive_purple}`,
+                display: 'flex',
               }}
-              supplementaryStats={{
-                type: 'rating',
-                score: statsB2.score,
-                delta: statsB2.score - statsA.score,
-              }}
-            />
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  gap: 8,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <img
+                  style={{
+                    width: 64,
+                    height: 64,
+                    objectFit: 'contain',
+                  }}
+                  src={normalizeLeagueIcon(
+                    ratingInfo.leagues[league.index].big_icon,
+                  )}
+                />
+
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}
+                >
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <span
+                      style={{
+                        color: theme.colors.textHighContrast_purple,
+                        fontSize: 24,
+                        fontWeight: 900,
+                      }}
+                    >
+                      {statsB2.score.toLocaleString(interaction.locale)}
+                    </span>
+                    {delta.score !== 0 && (
+                      <>
+                        <DeltaCaret delta={delta.score} />
+                        <span
+                          style={{
+                            color:
+                              delta.score > 0
+                                ? theme.colors.textLowContrast_green
+                                : theme.colors.textLowContrast_red,
+                            fontSize: 16,
+                          }}
+                        >
+                          {delta.score.toLocaleString(interaction.locale)}
+                        </span>
+                      </>
+                    )}
+                  </div>
+                  <span
+                    style={{
+                      color: theme.colors.textLowContrast_purple,
+                      fontSize: 16,
+                    }}
+                  >
+                    #{statsB2.number.toLocaleString(interaction.locale)}
+                  </span>
+                </div>
+              </div>
+            </div>
           )}
         </CommandWrapper>
       );

src/commands/research.tsx

@@ -8,7 +8,7 @@ import getTankStats from '../core/blitz/getTankStats';
 import resolveTankId from '../core/blitz/resolveTankId';
 import { asset } from '../core/blitzkrieg/asset';
 import { buildTechTreeLine } from '../core/blitzkrieg/buildTechTreeLine';
-import { emblemIdToURL } from '../core/blitzkrieg/emblemIdToURL';
+import { emblemURL } from '../core/blitzkrieg/emblemURL';
 import { iconPng } from '../core/blitzkrieg/iconPng';
 import { resolveAncestry } from '../core/blitzkrieg/resolveAncestry';
 import { tankDefinitions } from '../core/blitzkrieg/tankDefinitions';
@@ -155,7 +155,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
       const line = [...techTreeLine, startingTankId].reverse();
       const { nickname } = await getAccountInfo(region, id);
       const clan = (await getClanAccountInfo(region, id, ['clan']))?.clan;
-      const clanImage = clan ? emblemIdToURL(clan.emblem_set_id) : undefined;
+      const clanImage = clan ? emblemURL(clan.emblem_set_id) : undefined;
       const costs = await Promise.all(
         line.map(async (id) => {
           const tank = awaitedTankDefinitions[id];

src/commands/stats.tsx

@@ -5,7 +5,7 @@ import NoData from '../components/NoData';
 import TitleBar from '../components/TitleBar';
 import { getAccountInfo } from '../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
-import { emblemIdToURL } from '../core/blitzkrieg/emblemIdToURL';
+import { emblemURL } from '../core/blitzkrieg/emblemURL';
 import { filtersToDescription } from '../core/blitzkrieg/filtersToDescription';
 import { getBlitzStarsLinkButton } from '../core/blitzstars/getBlitzStarsLinkButton';
 import getStatsInPeriod from '../core/blitzstars/getStatsInPeriod';
@@ -38,7 +38,7 @@ async function render(
 ) {
   const { nickname } = await getAccountInfo(region, id);
   const clan = (await getClanAccountInfo(region, id, ['clan']))?.clan;
-  const clanImage = clan ? emblemIdToURL(clan.emblem_set_id) : undefined;
+  const clanImage = clan ? emblemURL(clan.emblem_set_id) : undefined;
   const diffedTankStats = await getStatsInPeriod(
     region,
     id,