feat: localize tankopedia config

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Consumables.tsx

@@ -10,6 +10,7 @@ import {
 } from '@radix-ui/themes';
 import { awaitableConsumableDefinitions } from '../../../../core/awaitables/consumableDefinitions';
 import { useEquipment } from '../../../../hooks/useEquipment';
+import { useLocale } from '../../../../hooks/useLocale';
 import { Duel } from '../../../../stores/duel';
 import { ConsumablesManager } from '../../../ConsumablesManager';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -34,12 +35,15 @@ export function Consumables() {
   );
   const hasConsumableDeliverySystem = useEquipment(118);
   const hasHighEndConsumables = useEquipment(101);
+  const { strings } = useLocale();
 
   return (
     <ConfigurationChildWrapper>
       <Flex gap="4" align="center">
         <Flex gap="2" align="center">
-          <Heading size="4">Consumables</Heading>
+          <Heading size="4">
+            {strings.website.tools.tankopedia.configuration.consumables.title}
+          </Heading>
 
           <Popover.Root>
             <Popover.Trigger>
@@ -50,8 +54,10 @@ export function Consumables() {
 
             <Popover.Content>
               <Text>
-                <Text color="amber">Yellow consumables</Text> do not affect the
-                statistics.
+                {
+                  strings.website.tools.tankopedia.configuration.consumables
+                    .info
+                }
               </Text>
             </Popover.Content>
           </Popover.Root>
@@ -66,7 +72,7 @@ export function Consumables() {
             });
           }}
         >
-          Clear
+          {strings.website.tools.tankopedia.configuration.consumables.clear}
         </Button>
       </Flex>
 

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equipment.tsx

@@ -1,5 +1,6 @@
 import { Button, Flex, Heading } from '@radix-ui/themes';
 import { awaitableEquipmentDefinitions } from '../../../../core/awaitables/equipmentDefinitions';
+import { useLocale } from '../../../../hooks/useLocale';
 import { Duel } from '../../../../stores/duel';
 import { EquipmentManager } from '../../../EquipmentManager';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -14,11 +15,14 @@ export function Equipment() {
   const equipmentMatrix = Duel.use(
     (state) => state.protagonist.equipmentMatrix,
   );
+  const { strings } = useLocale();
 
   return (
     <ConfigurationChildWrapper>
       <Flex gap="4" align="center">
-        <Heading size="4">Equipment</Heading>
+        <Heading size="4">
+          {strings.website.tools.tankopedia.configuration.equipment.title}
+        </Heading>
         <Button
           variant="ghost"
           color="red"
@@ -32,7 +36,7 @@ export function Equipment() {
             });
           }}
         >
-          Clear
+          {strings.website.tools.tankopedia.configuration.equipment.clear}
         </Button>
       </Flex>
 

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Miscellaneous.tsx

@@ -1,5 +1,6 @@
 import { asset } from '@blitzkit/core';
 import { Flex, Heading } from '@radix-ui/themes';
+import { useLocale } from '../../../../hooks/useLocale';
 import { Duel } from '../../../../stores/duel';
 import { GenericTankComponentButton } from '../../../ModuleButtons/GenericTankComponentButton';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -11,10 +12,13 @@ export function Miscellaneous() {
     (state) => state.protagonist.cooldownBooster,
   );
   const { tank } = Duel.use((state) => state.protagonist);
+  const { strings } = useLocale();
 
   return (
     <ConfigurationChildWrapper>
-      <Heading size="4">Miscellaneous</Heading>
+      <Heading size="4">
+        {strings.website.tools.tankopedia.configuration.miscellaneous.title}
+      </Heading>
 
       <Flex gap="2" align="center">
         {!tank.fixed_camouflage && (

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Modules.tsx

@@ -165,6 +165,7 @@ export function Modules() {
   const topGun = topTurret.guns.at(-1)!;
   const topEngine = tank.engines.at(-1)!;
   const topTrack = tank.tracks.at(-1)!;
+  const { strings } = useLocale();
 
   function setByUnlock(unlock: Unlock) {
     mutateDuel((draft) => {
@@ -354,7 +355,9 @@ export function Modules() {
   return (
     <ConfigurationChildWrapper>
       <Flex gap="4" align="center">
-        <Heading size="4">Modules</Heading>
+        <Heading size="4">
+          {strings.website.tools.tankopedia.configuration.modules.title}
+        </Heading>
 
         {hasUpgrades && (
           <>
@@ -372,7 +375,7 @@ export function Modules() {
                 });
               }}
             >
-              Stock
+              {strings.website.tools.tankopedia.configuration.modules.stock}
             </Button>
             <Button
               variant="ghost"
@@ -390,7 +393,7 @@ export function Modules() {
                 });
               }}
             >
-              Upgrade
+              {strings.website.tools.tankopedia.configuration.modules.upgrade}
             </Button>
           </>
         )}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Provisions.tsx

@@ -1,6 +1,7 @@
 import { availableProvisions } from '@blitzkit/core';
 import { Button, Flex, Heading } from '@radix-ui/themes';
 import { awaitableProvisionDefinitions } from '../../../../core/awaitables/provisionDefinitions';
+import { useLocale } from '../../../../hooks/useLocale';
 import { Duel } from '../../../../stores/duel';
 import { ProvisionsManager } from '../../../ProvisionsManager';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -12,11 +13,14 @@ export function Provisions() {
   const { tank, gun } = Duel.use((state) => state.protagonist);
   const provisions = Duel.use((state) => state.protagonist.provisions);
   const provisionsList = availableProvisions(tank, gun, provisionDefinitions);
+  const { strings } = useLocale();
 
   return (
     <ConfigurationChildWrapper>
       <Flex gap="4" align="center">
-        <Heading size="4">Provisions</Heading>
+        <Heading size="4">
+          {strings.website.tools.tankopedia.configuration.provisions.title}
+        </Heading>
         <Button
           variant="ghost"
           color="red"
@@ -26,7 +30,7 @@ export function Provisions() {
             });
           }}
         >
-          Clear
+          {strings.website.tools.tankopedia.configuration.provisions.clear}
         </Button>
       </Flex>
 

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Skills.tsx

@@ -4,10 +4,10 @@ import {
   Flex,
   Heading,
   IconButton,
-  Kbd,
   Popover,
   Text,
 } from '@radix-ui/themes';
+import { useLocale } from '../../../../hooks/useLocale';
 import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
 import { CrewSkillManager } from '../../../CrewSkillManager';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -15,12 +15,15 @@ import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 export function Skills() {
   const skillLevels = TankopediaEphemeral.use((state) => state.skills);
   const mutateTankopediaTemporary = TankopediaEphemeral.useMutation();
+  const { strings } = useLocale();
 
   return (
     <ConfigurationChildWrapper>
       <Flex gap="4" align="center">
         <Flex gap="2" align="center">
-          <Heading size="4">Crew skills</Heading>
+          <Heading size="4">
+            {strings.website.tools.tankopedia.configuration.skills.title}
+          </Heading>
 
           <Popover.Root>
             <Popover.Trigger>
@@ -32,12 +35,7 @@ export function Skills() {
             <Popover.Content>
               <Flex direction="column" gap="2">
                 <Text>
-                  <Text color="amber">Yellow skills</Text> only apply under
-                  special circumstances.
-                </Text>
-
-                <Text>
-                  Hold <Kbd>Shift</Kbd> to quickly toggle between level 0 and 7.
+                  {strings.website.tools.tankopedia.configuration.skills.info}
                 </Text>
               </Flex>
             </Popover.Content>
@@ -55,7 +53,7 @@ export function Skills() {
             });
           }}
         >
-          Clear
+          {strings.website.tools.tankopedia.configuration.skills.clear}
         </Button>
         <Button
           variant="ghost"
@@ -67,7 +65,7 @@ export function Skills() {
             });
           }}
         >
-          Maximize
+          {strings.website.tools.tankopedia.configuration.skills.maximize}
         </Button>
       </Flex>
 

packages/website/src/components/Tankopedia/CharacteristicsSection/index.tsx

@@ -1,4 +1,5 @@
 import { Flex, Heading } from '@radix-ui/themes';
+import { useLocale } from '../../../hooks/useLocale';
 import { Characteristics } from './components/Characteristics';
 import { CharacteristicsHeading } from './components/Characteristics/components/Heading';
 import { Consumables } from './components/Consumables';
@@ -9,6 +10,8 @@ import { Provisions } from './components/Provisions';
 import { Skills } from './components/Skills';
 
 export function CharacteristicsSection() {
+  const { strings } = useLocale();
+
   return (
     <Flex mt="4" px="4" style={{ boxSizing: 'border-box' }} gap="6">
       <Flex
@@ -24,7 +27,9 @@ export function CharacteristicsSection() {
           maxWidth="21rem"
           align={{ initial: 'center', sm: 'start' }}
         >
-          <Heading>Configuration</Heading>
+          <Heading>
+            {strings.website.tools.tankopedia.configuration.title}
+          </Heading>
           <Modules />
           <Equipment />
           <Provisions />