feat: migration 3

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

@@ -0,0 +1,50 @@
+import { ComponentProps } from 'react';
+
+export interface GlowProps extends ComponentProps<'div'> {
+  color: string;
+  direction?: 'default' | 'reverse';
+  rotation?: number;
+  startOpacity?: number;
+  endOpacity?: number;
+}
+
+const width = 16;
+
+export function Glow({
+  color,
+  direction = 'default',
+  rotation = 0,
+  style,
+  startOpacity = 0,
+  endOpacity = 1,
+  ...props
+}: GlowProps) {
+  const color1 = `${color}${Math.round(endOpacity * 255)
+    .toString(16)
+    .padStart(2, '0')}`;
+  const color2 = `${color}${Math.round(startOpacity * 255)
+    .toString(16)
+    .padStart(2, '0')}`;
+  const background = `linear-gradient(${
+    direction === 'default' ? 0 : 180
+  }deg, ${color1} 0%, ${color2} 100%)`;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: direction === 'default' ? 'flex-end' : 'flex-start',
+        justifyContent: 'center',
+        transform: `rotate(${rotation}deg)`,
+        ...style,
+      }}
+      {...props}
+    >
+      <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>
+  );
+}

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

@@ -0,0 +1,72 @@
+import { theme } from '../../../../stitches.config';
+import { Glow } from './components/Glow';
+
+export interface WN8DisplayProps {
+  subtitle: string;
+  color: string;
+  value: string | number;
+}
+
+export function HeroStat({ color, subtitle, value }: WN8DisplayProps) {
+  return (
+    <div
+      style={{
+        width: 128 * 2, // idk why twice the width turns into the correct width
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Glow color={color} style={{ marginBottom: -16 }} />
+
+      <div
+        style={{
+          width: 128,
+          height: 80,
+          backgroundColor: color,
+          borderRadius: 40,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 2,
+          }}
+        >
+          <span
+            style={{
+              display: 'block',
+              fontWeight: 900,
+              fontSize: 32,
+              color: theme.colors.textHighContrast,
+              lineHeight: '26px',
+              letterSpacing: '-0.03em',
+            }}
+          >
+            {value}
+          </span>
+          <span
+            style={{
+              display: 'block',
+              fontSize: 16,
+              lineHeight: '16px',
+              color: theme.colors.textHighContrast,
+            }}
+          >
+            {subtitle}
+          </span>
+        </div>
+      </div>
+
+      <Glow color={color} direction="reverse" style={{ marginTop: -16 }} />
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { theme } from '../../../stitches.config';
+
+export enum WN8SurroundingStatAlign {
+  Left,
+  Right,
+}
+
+export interface WN8SurroundingStatProps {
+  label: string;
+  value: string | number;
+  align?: WN8SurroundingStatAlign;
+  padded?: boolean;
+}
+
+export function WN8SurroundingStat({
+  label,
+  value,
+  align = WN8SurroundingStatAlign.Left,
+  padded = false,
+}: WN8SurroundingStatProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems:
+          align === WN8SurroundingStatAlign.Left ? 'flex-start' : 'flex-end',
+        paddingLeft: padded && align === WN8SurroundingStatAlign.Left ? 32 : 0,
+        paddingRight:
+          padded && align === WN8SurroundingStatAlign.Right ? 32 : 0,
+      }}
+    >
+      <span
+        style={{
+          color: theme.colors.textHighContrast,
+          fontSize: 24,
+          fontWeight: 700,
+        }}
+      >
+        {value}
+      </span>
+      <span style={{ color: theme.colors.textLowContrast, fontSize: 16 }}>
+        {label}
+      </span>
+    </div>
+  );
+}

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>
+  );
+}