feat: localize performance

packages/website/src/components/Performance/Header.tsx

@@ -4,21 +4,23 @@ import {
   CaretUpIcon,
 } from '@radix-ui/react-icons';
 import { Button, Flex, Table } from '@radix-ui/themes';
+import { useLocale } from '../../hooks/useLocale';
 import { TankPerformanceSort } from '../../stores/tankPerformanceSort';
-import {
-  TankPerformanceSortTypeNames,
-  TankPerformanceSortTypeNamesArray,
-} from '../../stores/tankPerformanceSort/constants';
+import { TankPerformanceSortTypeNamesArray } from '../../stores/tankPerformanceSort/constants';
 import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
 
 export function Header() {
   const sort = TankPerformanceSort.use();
   const store = TankPerformanceSort.useStore();
+  const { strings } = useLocale();
 
   return (
     <Table.Header>
       <Table.Row align="center">
-        <StickyColumnHeaderCell>Tank</StickyColumnHeaderCell>
+        <StickyColumnHeaderCell>
+          {strings.website.tools.performance.table.tanks.header}
+        </StickyColumnHeaderCell>
+
         {TankPerformanceSortTypeNamesArray.map((type) => {
           const isSelected = sort.type === type;
 
@@ -42,7 +44,7 @@ export function Header() {
                     }
                   }}
                 >
-                  {TankPerformanceSortTypeNames[type]}
+                  {strings.website.tools.performance.table.stats[type]}
 
                   {!isSelected && <CaretSortIcon />}
                   {isSelected && (

packages/website/src/components/Performance/PlayerCountControl.tsx

@@ -1,4 +1,5 @@
 import { Flex, Select, Text } from '@radix-ui/themes';
+import { useLocale } from '../../hooks/useLocale';
 import {
   TankPerformanceEphemeral,
   type PlayerCountPeriod,
@@ -9,10 +10,11 @@ export function PlayerCountControl() {
     (state) => state.playerCountPeriod,
   );
   const mutateTankPerformanceSort = TankPerformanceEphemeral.useMutation();
+  const { strings } = useLocale();
 
   return (
     <Flex justify="center" align="center" gap="2">
-      <Text>Player count</Text>
+      <Text>{strings.website.tools.performance.player_count.label}</Text>
       <Select.Root
         value={playerCountPeriod}
         onValueChange={(period) => {
@@ -23,13 +25,27 @@ export function PlayerCountControl() {
       >
         <Select.Trigger />
         <Select.Content>
-          <Select.Item value="total">Total</Select.Item>
-          <Select.Item value="d_120">Past 120 days</Select.Item>
-          <Select.Item value="d_90">Past 90 days</Select.Item>
-          <Select.Item value="d_60">Past 60 days</Select.Item>
-          <Select.Item value="d_30">This month</Select.Item>
-          <Select.Item value="d_7">This week</Select.Item>
-          <Select.Item value="d_1">Yesterday</Select.Item>
+          <Select.Item value="total">
+            {strings.common.player_count_period.total}
+          </Select.Item>
+          <Select.Item value="d_120">
+            {strings.common.player_count_period.d_120}
+          </Select.Item>
+          <Select.Item value="d_90">
+            {strings.common.player_count_period.d_90}
+          </Select.Item>
+          <Select.Item value="d_60">
+            {strings.common.player_count_period.d_60}
+          </Select.Item>
+          <Select.Item value="d_30">
+            {strings.common.player_count_period.d_30}
+          </Select.Item>
+          <Select.Item value="d_7">
+            {strings.common.player_count_period.d_7}
+          </Select.Item>
+          <Select.Item value="d_1">
+            {strings.common.player_count_period.d_1}
+          </Select.Item>
         </Select.Content>
       </Select.Root>
     </Flex>

packages/website/src/components/Performance/TankRow.tsx

@@ -3,6 +3,7 @@ import { Table } from '@radix-ui/themes';
 import { memo } from 'react';
 import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
 import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
+import { useLocale } from '../../hooks/useLocale';
 import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
 import { TankRowHeaderCell } from '../TankRowHeaderCell';
 
@@ -19,6 +20,7 @@ export const TankRow = memo<TankRowProps>(
     const playerCountPeriod = TankPerformanceEphemeral.use(
       (state) => state.playerCountPeriod,
     );
+    const { locale } = useLocale();
 
     return (
       <Table.Row>
@@ -29,13 +31,14 @@ export const TankRow = memo<TankRowProps>(
         </Table.Cell>
         <Table.Cell align="center">
           {formatCompact(
+            locale,
             Math.round(ratio * averages.samples[playerCountPeriod]),
           )}
         </Table.Cell>
         <Table.Cell align="center">
           {Math.round(
             averages.mu.damage_dealt / averages.mu.battles,
-          ).toLocaleString()}
+          ).toLocaleString(locale)}
         </Table.Cell>
         <Table.Cell align="center">
           {Math.round(
@@ -44,7 +47,9 @@ export const TankRow = memo<TankRowProps>(
           %
         </Table.Cell>
         <Table.Cell align="center">
-          {Math.round(averages.mu.xp / averages.mu.battles).toLocaleString()}
+          {Math.round(averages.mu.xp / averages.mu.battles).toLocaleString(
+            locale,
+          )}
         </Table.Cell>
         <Table.Cell align="center">
           {(averages.mu.frags / averages.mu.battles).toFixed(2)}
@@ -67,7 +72,7 @@ export const TankRow = memo<TankRowProps>(
         <Table.Cell align="center">
           {Math.round(
             averages.mu.damage_received / averages.mu.battles,
-          ).toLocaleString()}
+          ).toLocaleString(locale)}
         </Table.Cell>
         <Table.Cell align="center">
           {(averages.mu.capture_points / averages.mu.battles).toFixed(2)}

packages/website/src/components/Performance/Total.tsx

@@ -7,6 +7,7 @@ import { Table } from '@radix-ui/themes';
 import { memo, useCallback } from 'react';
 import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
 import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
+import { useLocale } from '../../hooks/useLocale';
 import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
 import { StickyRowHeaderCell } from '../StickyRowHeaderCell';
 
@@ -25,6 +26,7 @@ export const Total = memo<TotalProps>(
     const playerCountPeriod = TankPerformanceEphemeral.use(
       (state) => state.playerCountPeriod,
     );
+    const { strings, locale } = useLocale();
     const ratio = useAveragesExclusionRatio();
     const sum = useCallback(
       (slice: (tank: BlitzkitStats) => number) => {
@@ -54,20 +56,23 @@ export const Total = memo<TotalProps>(
     return (
       <Table.Row>
         <StickyRowHeaderCell style={{ overflow: 'hidden', display: 'flex' }}>
-          Total
+          {strings.website.tools.performance.table.tanks.total}
         </StickyRowHeaderCell>
         <Table.Cell align="center">{(winrate * 100).toFixed(1)}%</Table.Cell>
         <Table.Cell align="center">
-          {formatCompact(ratio * averageDefinitions.samples[playerCountPeriod])}
+          {formatCompact(
+            locale,
+            ratio * averageDefinitions.samples[playerCountPeriod],
+          )}
         </Table.Cell>
         <Table.Cell align="center">
-          {Math.round(damage).toLocaleString()}
+          {Math.round(damage).toLocaleString(locale)}
         </Table.Cell>
         <Table.Cell align="center">
           {Math.round(survival * 100).toFixed(1)}%
         </Table.Cell>
         <Table.Cell align="center">
-          {Math.round(xp).toLocaleString()}
+          {Math.round(xp).toLocaleString(locale)}
         </Table.Cell>
         <Table.Cell align="center">{kills.toFixed(2)}</Table.Cell>
         <Table.Cell align="center">{spots.toFixed(2)}</Table.Cell>
@@ -76,7 +81,7 @@ export const Total = memo<TotalProps>(
         <Table.Cell align="center">{hits.toFixed(1)}</Table.Cell>
         <Table.Cell align="center">{damageRatio.toFixed(2)}</Table.Cell>
         <Table.Cell align="center">
-          {Math.round(damageReceived).toLocaleString()}
+          {Math.round(damageReceived).toLocaleString(locale)}
         </Table.Cell>
         <Table.Cell align="center">{capturePoints.toFixed(2)}</Table.Cell>
       </Table.Row>