feat: composite stats

src/components/GenericAllStats/index.tsx

@@ -1,14 +1,15 @@
 import { Locale } from 'discord.js';
-import { AllStats, SupplementaryStats } from '../../core/blitz/getAccountInfo';
+import { SupplementaryStats } from '../../core/blitz/getAccountInfo';
 import { translator } from '../../core/localization/translator';
 import isNumber from '../../core/math/isNumber';
+import { BlitzStats } from '../../core/statistics/compositeStats/constants';
 import getWN8Percentile from '../../core/statistics/getWN8Percentile';
 import { Card } from './components/Card';
 import { Root } from './components/Root';
 import { Row } from './components/Row';
 
 interface GenericAllStatsProps {
-  stats: AllStats;
+  stats: BlitzStats;
   supplementaryStats?: SupplementaryStats;
   locale: Locale;
 }

src/components/TanksEmbed.tsx

@@ -5,6 +5,9 @@ import { ReactNode } from 'react';
 import { breakdownConfig } from '../app/tools/embed/configurations/breakdown';
 import { toRadiusVar } from '../app/tools/embed/utilities';
 import { TankDefinition } from '../core/blitzkit/tankDefinitions';
+import { previewCompositeStat } from '../core/statistics/compositeStats';
+import { CompositeStatsKey } from '../core/statistics/compositeStats/constants';
+import strings from '../lang/en-US.json';
 import { useEmbedStateCurry } from '../stores/embedState/utilities';
 import { ClassHeavy } from './ClassIcon/components/ClassHeavy';
 import { ClassLight } from './ClassIcon/components/ClassLight';
@@ -97,6 +100,8 @@ export function BreakdownEmbedCard({ tank }: BreakdownEmbedCardProps) {
       <Flex p={useState('cardBodyPadding')}>
         {times(4, (index) => {
           const column = (index + 1) as 1 | 2 | 3 | 4;
+          const columnState = useState(`column${column}`) as CompositeStatsKey;
+          const customLabel = useState(`column${column}CustomLabel`);
 
           return (
             <Flex
@@ -106,10 +111,12 @@ export function BreakdownEmbedCard({ tank }: BreakdownEmbedCardProps) {
               flexGrow="1"
             >
               <Text {...useRichText('columnValue')}>
-                70{useState(`column${column}Unit`)}
+                {previewCompositeStat(columnState)}
               </Text>
               <Text {...useRichText('columnLabel')}>
-                {useState(`column${column}Label`)}
+                {customLabel.length === 0
+                  ? strings.common.composite_stats[columnState]
+                  : customLabel}
               </Text>
             </Flex>
           );