feat: more command locales

src/components/AllStatsOverview/components/WN8Display/index.tsx

@@ -1,30 +1,21 @@
+import { Locale } from 'discord.js';
 import { Percentile } from '../../../../constants/percentiles';
+import { translator } from '../../../../core/localization/translator';
 import getWN8Percentile from '../../../../core/statistics/getWN8Percentile';
 import { theme } from '../../../../stitches.config';
 import { PERCENTILE_COLORS } from '../../../PercentileIndicator';
 import { Glow } from './components/Glow';
 
 export interface WN8DisplayProps {
-  WN8?: number;
+  wn8?: number;
+  locale: Locale;
 }
 
-export const PERCENTILE_NAMES = {
-  [Percentile.VeryBad]: 'Very Bad',
-  [Percentile.Bad]: 'Bad',
-  [Percentile.BelowAverage]: 'Below Average',
-  [Percentile.Average]: 'Average',
-  [Percentile.AboveAverage]: 'Above Average',
-  [Percentile.Good]: 'Good',
-  [Percentile.VeryGood]: 'Very Good',
-  [Percentile.Great]: 'Great',
-  [Percentile.Unicum]: 'Unicum',
-  [Percentile.SuperUnicum]: 'Super Unicum',
-};
-
-export function WN8Display({ WN8 }: WN8DisplayProps) {
+export function WN8Display({ wn8, locale }: WN8DisplayProps) {
   const percentile =
-    WN8 === undefined ? Percentile.VeryBad : getWN8Percentile(WN8);
+    wn8 === undefined ? Percentile.VeryBad : getWN8Percentile(wn8);
   const color = PERCENTILE_COLORS[percentile];
+  const { translate } = translator(locale);
 
   return (
     <div
@@ -59,7 +50,7 @@ export function WN8Display({ WN8 }: WN8DisplayProps) {
             color: theme.colors.textHighContrast,
           }}
         >
-          {WN8 === undefined ? '--' : WN8.toFixed(0)}
+          {wn8 === undefined ? '--' : wn8.toFixed(0)}
         </span>
         <span
           style={{
@@ -67,7 +58,7 @@ export function WN8Display({ WN8 }: WN8DisplayProps) {
             color: theme.colors.textHighContrast,
           }}
         >
-          {PERCENTILE_NAMES[percentile]}
+          {translate(`common.wn8_percentile.${percentile}`)}
         </span>
       </div>
 

src/components/AllStatsOverview/index.tsx

@@ -1,4 +1,6 @@
+import { Locale } from 'discord.js';
 import { AllStats, SupplementaryStats } from '../../core/blitz/getAccountInfo';
+import { translator } from '../../core/localization/translator';
 import { WN8Display } from './components/WN8Display';
 import {
   WN8SurroundingStat,
@@ -8,12 +10,16 @@ import {
 export interface AllStatsOverviewProps {
   stats: AllStats;
   supplementaryStats: SupplementaryStats;
+  locale: Locale;
 }
 
 export default function AllStatsOverview({
   stats,
+  locale,
   supplementaryStats,
 }: AllStatsOverviewProps) {
+  const { t } = translator(locale);
+
   return (
     <div
       style={{
@@ -32,18 +38,18 @@ export default function AllStatsOverview({
         }}
       >
         <WN8SurroundingStat
-          label="Battles"
+          label={t`bot.commands.stats.body.battles`}
           value={stats.battles.toLocaleString()}
           align={WN8SurroundingStatAlign.Right}
         />
         <WN8SurroundingStat
-          label="Winrate"
+          label={t`bot.commands.stats.body.winrate`}
           value={`${(100 * (stats.wins / stats.battles)).toFixed(2)}%`}
           align={WN8SurroundingStatAlign.Right}
           padded
         />
         <WN8SurroundingStat
-          label="Damage"
+          label={t`bot.commands.stats.body.damage`}
           value={Math.round(
             stats.damage_dealt / stats.battles,
           ).toLocaleString()}
@@ -51,13 +57,13 @@ export default function AllStatsOverview({
           padded
         />
         <WN8SurroundingStat
-          label="Dmg. ratio"
+          label={t`bot.commands.stats.body.damage_ratio`}
           value={(stats.damage_dealt / stats.damage_received).toFixed(2)}
           align={WN8SurroundingStatAlign.Right}
         />
       </div>
 
-      <WN8Display WN8={supplementaryStats.WN8} />
+      <WN8Display locale={locale} wn8={supplementaryStats.WN8} />
 
       <div
         style={{
@@ -68,25 +74,25 @@ export default function AllStatsOverview({
         }}
       >
         <WN8SurroundingStat
-          label="Tier"
+          label={t`bot.commands.stats.body.tier`}
           value={
             supplementaryStats.tier ? supplementaryStats.tier.toFixed(2) : '--'
           }
         />
         <WN8SurroundingStat
-          label="Survival"
+          label={t`bot.commands.stats.body.survival`}
           value={`${(100 * (stats.survived_battles / stats.battles)).toFixed(
             2,
           )}%`}
           padded
         />
         <WN8SurroundingStat
-          label="Accuracy"
+          label={t`bot.commands.stats.body.accuracy`}
           value={`${(100 * (stats.hits / stats.shots)).toFixed(2)}%`}
           padded
         />
         <WN8SurroundingStat
-          label="Kill ratio"
+          label={t`bot.commands.stats.body.kill_ratio`}
           value={(
             stats.frags /
             (stats.battles - stats.survived_battles)