feat: translate compare

packages/i18n/strings/en.json

@@ -1013,6 +1013,7 @@
             "power_to_weight_ratio": "Power to weight ratio",
             "hull_traverse_speed": "Hull traverse speed",
             "camouflage": "Camouflage",
+            "reload": "Reload",
 
             "crewCount": "Crew count",
             "shellNormalization": "Normalization",
@@ -1111,6 +1112,7 @@
         "button": "Compare tanks",
         "description": "Compare tank statistics",
         "seo_description": "Compare tanks statistics and loadouts in World of Tanks Blitz",
+
         "actions": {
           "add": {
             "button": "Add",
@@ -1124,9 +1126,31 @@
             "absolute": "Absolute"
           }
         },
+
         "no_tanks": {
           "title": "No tanks selected",
           "body": "Press the Add button to get started"
+        },
+
+        "table": {
+          "equipment": {
+            "clear": "Clear",
+            "apply_to_all": "Apply to all"
+          },
+          "skills": {
+            "clear": "Clear",
+            "maximize": "Maximize"
+          },
+          "modules": {
+            "stock": "Stock",
+            "upgrade": "Upgrade"
+          },
+          "provisions": {
+            "clear": "Clear"
+          },
+          "consumables": {
+            "clear": "Clear"
+          }
         }
       },
       "performance": {

packages/website/src/components/Compare/Body.tsx

@@ -16,7 +16,7 @@ export function Body({ stats }: BodyProps) {
   const hasNonRegularGun = members.some(
     ({ gun }) => gun.gun_type!.$case !== 'regular',
   );
-  const { unwrap } = useLocale();
+  const { unwrap, strings } = useLocale();
   const mutateCompareEphemeral = CompareEphemeral.useMutation();
 
   return (
@@ -78,10 +78,10 @@ export function Body({ stats }: BodyProps) {
       </Table.Header>
 
       <Table.Body>
-        <CompareRow stats={stats} name="DPM" value="dpm" decimals={0} />
+        <CompareRow stats={stats} value="dpm" decimals={0} />
         <CompareRow
           stats={stats}
-          name="Reload"
+          name={strings.website.tools.tankopedia.characteristics.values.reload}
           deltaType="lowerIsBetter"
           value={(stats) =>
             stats.shellReload ??
@@ -98,90 +98,44 @@ export function Body({ stats }: BodyProps) {
           <>
             <CompareRow
               stats={stats}
-              name="Intra-clip"
               deltaType="lowerIsBetter"
               value="intraClip"
               decimals={2}
             />
-            <CompareRow
+            <CompareRow stats={stats} value="shells" decimals={0} />
-              stats={stats}
-              name="Shells"
-              value="shells"
-              decimals={0}
-            />
           </>
         )}
-        <CompareRow
+        <CompareRow stats={stats} value="penetration" decimals={0} />
-          stats={stats}
+        <CompareRow stats={stats} value="damage" decimals={0} />
-          name="Penetration"
-          value="penetration"
-          decimals={0}
-        />
-        <CompareRow stats={stats} name="Damage" value="damage" decimals={0} />
         {hasNonRegularGun && (
-          <CompareRow
+          <CompareRow stats={stats} indent value="clipDamage" decimals={0} />
-            stats={stats}
-            name="clipping potential"
-            indent
-            value="clipDamage"
-            decimals={0}
-          />
         )}
+        <CompareRow stats={stats} value="moduleDamage" decimals={0} />
+        <CompareRow stats={stats} value="caliber" decimals={0} />
+        <CompareRow stats={stats} value="shellNormalization" decimals={0} />
         <CompareRow
           stats={stats}
-          name="Module damage"
-          value="moduleDamage"
-          decimals={0}
-        />
-        <CompareRow stats={stats} name="Caliber" value="caliber" decimals={0} />
-        <CompareRow
-          stats={stats}
-          name="Normalization"
-          value="shellNormalization"
-          decimals={0}
-        />
-        <CompareRow
-          stats={stats}
-          name="Ricochet"
           value="shellRicochet"
           deltaType="lowerIsBetter"
           decimals={0}
         />
+        <CompareRow stats={stats} value="shellVelocity" decimals={0} />
+        <CompareRow stats={stats} value="shellRange" decimals={0} />
+        <CompareRow stats={stats} value="shellCapacity" decimals={0} />
         <CompareRow
           stats={stats}
-          name="Shell velocity"
-          value="shellVelocity"
-          decimals={0}
-        />
-        <CompareRow
-          stats={stats}
-          name="Shell range"
-          value="shellRange"
-          decimals={0}
-        />
-        <CompareRow
-          stats={stats}
-          name="Shell capacity"
-          value="shellCapacity"
-          decimals={0}
-        />
-        <CompareRow
-          stats={stats}
-          name="Aim time"
           value="aimTime"
           deltaType="lowerIsBetter"
           decimals={2}
         />
         <CompareRow
           stats={stats}
-          name="Dispersion"
           value="dispersion"
           deltaType="lowerIsBetter"
           decimals={3}
         />
         <CompareRow
           stats={stats}
-          name="moving"
           indent
           value="dispersionMoving"
           deltaType="lowerIsBetter"
@@ -189,7 +143,6 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="hull traversing"
           indent
           value="dispersionHullTraversing"
           deltaType="lowerIsBetter"
@@ -197,7 +150,6 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="turret traversing"
           indent
           value="dispersionTurretTraversing"
           deltaType="lowerIsBetter"
@@ -205,7 +157,6 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="shooting"
           indent
           value="dispersionShooting"
           deltaType="lowerIsBetter"
@@ -213,79 +164,42 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="gun damaged"
           indent
           value="dispersionGunDamaged"
           deltaType="lowerIsBetter"
           decimals={3}
         />
-        <CompareRow
+        <CompareRow stats={stats} value="gunDepression" decimals={1} />
-          stats={stats}
+        <CompareRow stats={stats} indent value="gunElevation" decimals={1} />
-          name="Gun depression"
-          value="gunDepression"
-          decimals={1}
-        />
-        <CompareRow
-          stats={stats}
-          name="elevation"
-          indent
-          value="gunElevation"
-          decimals={1}
-        />
       </Table.Body>
 
       <CompareSectionTitle>Maneuverability</CompareSectionTitle>
       <Table.Body>
+        <CompareRow stats={stats} value="speedForwards" decimals={0} />
+        <CompareRow stats={stats} indent value="speedBackwards" decimals={0} />
+        <CompareRow stats={stats} value="enginePower" decimals={0} />
+        <CompareRow stats={stats} value="weight" decimals={1} />
+        <CompareRow stats={stats} value="hardTerrainCoefficient" decimals={0} />
         <CompareRow
           stats={stats}
-          name="Speed forwards"
-          value="speedForwards"
-          decimals={0}
-        />
-        <CompareRow
-          stats={stats}
-          name="backwards"
-          indent
-          value="speedBackwards"
-          decimals={0}
-        />
-        <CompareRow
-          stats={stats}
-          name="Engine power"
-          value="enginePower"
-          decimals={0}
-        />
-        <CompareRow stats={stats} name="Weight" value="weight" decimals={1} />
-        <CompareRow
-          stats={stats}
-          name="Terrain coefficient"
-          value="hardTerrainCoefficient"
-          decimals={0}
-        />
-        <CompareRow
-          stats={stats}
-          name="medium terrain"
           indent
           value="mediumTerrainCoefficient"
           decimals={0}
         />
         <CompareRow
           stats={stats}
-          name="soft terrain"
           indent
           value="softTerrainCoefficient"
           decimals={0}
         />
         <CompareRow
           stats={stats}
-          name="Raw terrain coefficient"
           value="hardTerrainCoefficientRaw"
           deltaType="lowerIsBetter"
           decimals={2}
         />
         <CompareRow
           stats={stats}
-          name="medium terrain"
           indent
           value="mediumTerrainCoefficientRaw"
           deltaType="lowerIsBetter"
@@ -293,7 +207,6 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="soft terrain"
           indent
           value="softTerrainCoefficientRaw"
           deltaType="lowerIsBetter"
@@ -301,46 +214,35 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="Power to weight ratio"
           value="powerToWeightRatioHardTerrain"
           decimals={1}
         />
         <CompareRow
           stats={stats}
-          name="medium terrain"
           indent
           value="powerToWeightRatioMediumTerrain"
           decimals={1}
         />
         <CompareRow
           stats={stats}
-          name="soft terrain"
           indent
           value="powerToWeightRatioSoftTerrain"
           decimals={1}
         />
+        <CompareRow stats={stats} value="turretTraverseSpeed" decimals={1} />
         <CompareRow
           stats={stats}
-          name="Turret traverse speed"
-          value="turretTraverseSpeed"
-          decimals={1}
-        />
-        <CompareRow
-          stats={stats}
-          name="Traverse speed"
           value="hullTraverseHardTerrain"
           decimals={1}
         />
         <CompareRow
           stats={stats}
-          name="medium terrain"
           indent
           value="hullTraverseMediumTerrain"
           decimals={1}
         />
         <CompareRow
           stats={stats}
-          name="soft terrain"
           indent
           value="hullTraverseSoftTerrain"
           decimals={1}
@@ -349,31 +251,23 @@ export function Body({ stats }: BodyProps) {
 
       <CompareSectionTitle>Survivability</CompareSectionTitle>
       <Table.Body>
-        <CompareRow stats={stats} name="Health" value="health" decimals={0} />
+        <CompareRow stats={stats} value="health" decimals={0} />
         <CompareRow
           stats={stats}
-          name="Fire chance"
           value="fireChance"
           deltaType="lowerIsBetter"
           display={(stats) => (stats.fireChance * 100).toFixed(0)}
           deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
         />
+        <CompareRow stats={stats} value="viewRange" decimals={0} />
         <CompareRow
           stats={stats}
-          name="View range"
-          value="viewRange"
-          decimals={0}
-        />
-        <CompareRow
-          stats={stats}
-          name="Camouflage"
           value="camouflageStill"
           display={(stats) => (stats.camouflageStill * 100).toFixed(2)}
           deltaNominalDisplay={(delta) => (delta * 100).toFixed(2)}
         />
         <CompareRow
           stats={stats}
-          name="moving"
           indent
           value="camouflageMoving"
           display={(stats) => (stats.camouflageMoving * 100).toFixed(2)}
@@ -381,7 +275,6 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="shooting"
           indent
           value="camouflageShootingStill"
           display={(stats) => (stats.camouflageShootingStill * 100).toFixed(2)}
@@ -389,7 +282,6 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="shooting & moving"
           indent
           value="camouflageShootingMoving"
           display={(stats) => (stats.camouflageShootingMoving * 100).toFixed(2)}
@@ -397,7 +289,6 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="caught on fire"
           indent
           value="camouflageCaughtOnFire"
           display={(stats) => (stats.camouflageCaughtOnFire * 100).toFixed(2)}
@@ -405,14 +296,12 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="Volume"
           value="volume"
           deltaType="lowerIsBetter"
           decimals={1}
         />
         <CompareRow
           stats={stats}
-          name="width"
           indent
           value="width"
           deltaType="lowerIsBetter"
@@ -420,7 +309,6 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="height"
           indent
           value="height"
           deltaType="lowerIsBetter"
@@ -428,7 +316,6 @@ export function Body({ stats }: BodyProps) {
         />
         <CompareRow
           stats={stats}
-          name="length"
           indent
           value="length"
           deltaType="lowerIsBetter"

packages/website/src/components/Compare/CompareRow.tsx

@@ -4,17 +4,15 @@ import {
   CaretSortIcon,
 } from '@radix-ui/react-icons';
 import { Flex, IconButton, Table, Text } from '@radix-ui/themes';
+import { useRef } from 'react';
 import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics';
 import { Var } from '../../core/radix/var';
+import { useLocale } from '../../hooks/useLocale';
 import { CompareEphemeral } from '../../stores/compareEphemeral';
 import { ComparePersistent } from '../../stores/comparePersistent';
 import { StickyRowHeaderCell } from '../StickyRowHeaderCell';
 
-interface CompareRowProps {
+type CompareRowProps = {
-  name: string;
-  value:
-    | keyof TankCharacteristics
-    | ((member: TankCharacteristics) => number | undefined);
   display?: (
     member: Awaited<TankCharacteristics>,
   ) => number | string | undefined;
@@ -23,24 +21,39 @@ interface CompareRowProps {
   deltaNominalDisplay?: (delta: number) => string | number;
   indent?: boolean;
   stats: TankCharacteristics[];
-}
+} & (
+  | {
+      name: string;
+      value: (member: TankCharacteristics) => number | undefined;
+    }
+  | {
+      value: keyof TankCharacteristics;
+    }
+);
 
 export function CompareRow({
-  value,
-  name,
   display,
   deltaType = 'higherIsBetter',
   decimals,
   deltaNominalDisplay,
   indent,
   stats,
+  ...props
 }: CompareRowProps) {
+  const { strings } = useLocale();
   const mutateCompareEphemeral = CompareEphemeral.useMutation();
   const sorting = CompareEphemeral.use((state) => state.sorting);
   const deltaMode = ComparePersistent.use((state) => state.deltaMode);
   const values = stats.map((stat) =>
-    typeof value === 'function' ? value(stat)! : (stat[value] as number),
+    typeof props.value === 'function'
+      ? props.value(stat)!
+      : (stat[props.value] as number),
   );
+  const id = useRef(Math.random());
+  const name =
+    typeof props.value === 'string'
+      ? strings.website.tools.tankopedia.characteristics.values[props.value]
+      : props.name;
 
   return (
     <Table.Row>
@@ -51,7 +64,7 @@ export function CompareRow({
           gap={indent ? { initial: '4', sm: '6' } : { initial: '1', sm: '2' }}
         >
           <IconButton
-            color={sorting?.by === name ? undefined : 'gray'}
+            color={sorting?.by === id.current ? undefined : 'gray'}
             variant="ghost"
             onClick={() => {
               mutateCompareEphemeral((draft) => {
@@ -62,26 +75,26 @@ export function CompareRow({
                   const valueB = values[indexB];
 
                   return draft.sorting?.direction === 'ascending' &&
-                    draft.sorting.by === name
+                    draft.sorting.by === id.current
                     ? valueA - valueB
                     : valueB - valueA;
                 });
 
                 draft.sorting = {
-                  by: name,
+                  by: id.current,
                   direction:
                     draft.sorting?.direction === 'ascending' &&
-                    draft.sorting.by === name
+                    draft.sorting.by === id.current
                       ? 'descending'
                       : 'ascending',
                 };
               });
             }}
           >
-            {(sorting === undefined || sorting.by !== name) && (
+            {(sorting === undefined || sorting.by !== id.current) && (
               <CaretSortIcon style={{ transform: 'rotate(90deg)' }} />
             )}
-            {sorting?.by === name && (
+            {sorting?.by === id.current && (
               <>
                 {sorting.direction === 'ascending' && <CaretRightIcon />}
                 {sorting.direction === 'descending' && <CaretLeftIcon />}

packages/website/src/components/Compare/CompareTable.tsx

@@ -44,7 +44,7 @@ export function CompareTable({ stats }: CompareTableProps) {
   const crewSkills = CompareEphemeral.use((state) => state.crewSkills);
   const members = CompareEphemeral.use((state) => state.members);
   const mutateCompareEphemeral = CompareEphemeral.useMutation();
-  const { unwrap } = useLocale();
+  const { unwrap, strings } = useLocale();
 
   return (
     <StickyTableRoot
@@ -142,7 +142,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                         });
                       }}
                     >
-                      Clear
+                      {strings.website.tools.compare.table.skills.clear}
                     </Button>
                     <Button
                       variant="ghost"
@@ -154,7 +154,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                         });
                       }}
                     >
-                      Maximize
+                      {strings.website.tools.compare.table.skills.maximize}
                     </Button>
                   </Flex>
                 </Popover.Content>
@@ -257,7 +257,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                               });
                             }}
                           >
-                            Stock
+                            {strings.website.tools.compare.table.modules.stock}
                           </Button>
                           <Button
                             variant="ghost"
@@ -274,7 +274,10 @@ export function CompareTable({ stats }: CompareTableProps) {
                               });
                             }}
                           >
-                            Upgrade
+                            {
+                              strings.website.tools.compare.table.modules
+                                .upgrade
+                            }
                           </Button>
                         </Flex>
                       </Popover.Content>
@@ -357,7 +360,10 @@ export function CompareTable({ stats }: CompareTableProps) {
                                 });
                               }}
                             >
-                              Clear
+                              {
+                                strings.website.tools.compare.table.provisions
+                                  .clear
+                              }
                             </Button>
                           </Flex>
                         </Popover.Content>
@@ -441,7 +447,10 @@ export function CompareTable({ stats }: CompareTableProps) {
                                 });
                               }}
                             >
-                              Clear
+                              {
+                                strings.website.tools.compare.table.equipment
+                                  .clear
+                              }
                             </Button>
                             <Button
                               variant="ghost"
@@ -455,7 +464,10 @@ export function CompareTable({ stats }: CompareTableProps) {
                                 });
                               }}
                             >
-                              Apply to all
+                              {
+                                strings.website.tools.compare.table.equipment
+                                  .apply_to_all
+                              }
                             </Button>
                           </Flex>
                         </Popover.Content>
@@ -539,7 +551,10 @@ export function CompareTable({ stats }: CompareTableProps) {
                                 });
                               }}
                             >
-                              Clear
+                              {
+                                strings.website.tools.compare.table.consumables
+                                  .clear
+                              }
                             </Button>
                           </Flex>
                         </Popover.Content>

packages/website/src/stores/compareEphemeral.ts

@@ -11,7 +11,7 @@ export interface CompareEphemeral {
   members: CompareMember[];
   sorting?: {
     direction: 'ascending' | 'descending';
-    by: string;
+    by: number;
   };
 }