feat: migration 3

packages/bot/src/components/AllStatsOverview/index.tsx

@@ -0,0 +1,128 @@
+import { Percentile } from '@blitzkit/core/src/statistics/percentiles';
+import { Locale } from 'discord.js';
+import { SupplementaryStats } from '../../core/blitz/getAccountInfo';
+import { translator } from '../../core/localization/translator';
+import getWN8Percentile from '../../core/statistics/getWN8Percentile';
+import { PERCENTILE_COLORS } from '../PercentileIndicator/constants';
+import { HeroStat } from './components/HeroStat';
+import {
+  WN8SurroundingStat,
+  WN8SurroundingStatAlign,
+} from './components/WN8SurroundingStat';
+
+export interface AllStatsOverviewProps {
+  stats: {
+    battles: number;
+    wins: number;
+    damage_dealt: number;
+    damage_received: number;
+    survived_battles: number;
+    hits: number;
+    shots: number;
+    frags: number;
+  };
+  supplementaryStats: SupplementaryStats;
+  locale: Locale;
+}
+
+export default function AllStatsOverview({
+  stats,
+  locale,
+  supplementaryStats,
+}: AllStatsOverviewProps) {
+  const { t, translate } = translator(locale);
+  const percentile =
+    typeof supplementaryStats.WN8 === 'number'
+      ? getWN8Percentile(supplementaryStats.WN8)
+      : Percentile.VeryBad;
+  const color = PERCENTILE_COLORS[percentile];
+
+  const heroStat =
+    typeof supplementaryStats.WN8 === 'number'
+      ? supplementaryStats.WN8.toFixed(0)
+      : '--';
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: -64,
+        width: '100%',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+          alignItems: 'flex-end',
+          flex: 1,
+        }}
+      >
+        <WN8SurroundingStat
+          label={t`bot.common.hero_stats.battles`}
+          value={stats.battles.toLocaleString()}
+          align={WN8SurroundingStatAlign.Right}
+        />
+        <WN8SurroundingStat
+          label={t`bot.common.hero_stats.winrate`}
+          value={`${(100 * (stats.wins / stats.battles)).toFixed(2)}%`}
+          align={WN8SurroundingStatAlign.Right}
+          padded
+        />
+        <WN8SurroundingStat
+          label={t`bot.common.hero_stats.damage`}
+          value={Math.round(
+            stats.damage_dealt / stats.battles,
+          ).toLocaleString()}
+          align={WN8SurroundingStatAlign.Right}
+          padded
+        />
+        <WN8SurroundingStat
+          label={t`bot.common.hero_stats.damage_ratio`}
+          value={(stats.damage_dealt / stats.damage_received).toFixed(2)}
+          align={WN8SurroundingStatAlign.Right}
+        />
+      </div>
+
+      <HeroStat
+        value={heroStat}
+        subtitle={translate(`common.wn8_percentile.${percentile}`)}
+        color={color}
+      />
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+          flex: 1,
+        }}
+      >
+        <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(
+            2,
+          )}%`}
+          padded
+        />
+        <WN8SurroundingStat
+          label={t`bot.common.hero_stats.accuracy`}
+          value={`${(100 * (stats.hits / stats.shots)).toFixed(2)}%`}
+          padded
+        />
+        <WN8SurroundingStat
+          label={t`bot.common.hero_stats.kills`}
+          value={(stats.frags / stats.battles).toFixed(2)}
+        />
+      </div>
+    </div>
+  );
+}