feat: localize tankopedia tech tree

packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx

@@ -2,6 +2,7 @@ import { asset, formatCompact, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
 import { Box, Flex, Skeleton, Text } from '@radix-ui/themes';
 import { awaitableAverageDefinitions } from '../../../../core/awaitables/averageDefinitions';
 import { awaitableTankDefinitions } from '../../../../core/awaitables/tankDefinitions';
+import { literals } from '../../../../core/i18n/literals';
 import { useLocale } from '../../../../hooks/useLocale';
 import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
 import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
@@ -19,7 +20,7 @@ const [tankDefinitions, averageDefinitions] = await Promise.all([
 ]);
 
 export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
-  const { locale } = useLocale();
+  const { locale, strings } = useLocale();
   const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
   const tank = tankDefinitions.tanks[id];
   const nextTanks = nextIds?.map((id) => tankDefinitions.tanks[id]);
@@ -106,7 +107,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
                       objectPosition: 'center',
                     }}
                   />
-                  {formatCompact(thisTankXp)}
+                  {formatCompact(locale, thisTankXp)}
                 </Flex>
               </Text>
               <Text color="gray" size="1" wrap="nowrap">
@@ -121,7 +122,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
                       objectPosition: 'center',
                     }}
                   />
-                  {formatCompact(tank.price.value)}
+                  {formatCompact(locale, tank.price.value)}
                 </Flex>
               </Text>
             </Flex>
@@ -129,11 +130,13 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
             {averages && nextTanks && tank.tier !== 10 && (
               <Text color="gray" size="1" mt="2">
                 {skeleton && <Skeleton height="1em" width="4em" />}
-                {!skeleton && (
-                  <>
-                    {games!} {games === 1 ? 'battle' : 'battles'}
-                  </>
-                )}
+                {!skeleton &&
+                  (games === 1
+                    ? strings.website.tools.tankopedia.tech_tree.battle
+                    : literals(
+                        strings.website.tools.tankopedia.tech_tree.battles,
+                        [`${games}`],
+                      ))}
               </Text>
             )}
           </Flex>

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

@@ -3,6 +3,7 @@ import { CaretLeftIcon, CaretRightIcon, PlusIcon } from '@radix-ui/react-icons';
 import { Flex, Heading, IconButton, ScrollArea, Text } from '@radix-ui/themes';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
+import { literals } from '../../../core/i18n/literals';
 import { useLocale } from '../../../hooks/useLocale';
 import { Duel } from '../../../stores/duel';
 import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
@@ -17,7 +18,7 @@ const tankDefinitions = await awaitableTankDefinitions;
 export const XP_MULTIPLIERS = [1, 2, 3, 4, 5, 10];
 
 export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
-  const { locale } = useLocale();
+  const { locale, strings } = useLocale();
   const master = Duel.use((state) => state.protagonist.tank);
   const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
@@ -91,7 +92,9 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
       py="6"
     >
       <Flex direction="column" align="center">
-        <Heading size="6">Tech tree</Heading>
+        <Heading size="6">
+          {strings.website.tools.tankopedia.tech_tree.title}
+        </Heading>
 
         {master.tier > 1 && (
           <Flex gap="4" align="center">
@@ -156,7 +159,7 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
                 pl="1"
               >
                 <Text size="2">
-                  x<b>{multiplier}</b>
+                  {literals(strings.common.units.x, [`${multiplier}`])}
                 </Text>
               </Flex>
             );
@@ -216,7 +219,10 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
               <CaretLeftIcon />
             </IconButton>
             <Text>
-              Route {lineIndex + 1} of {lines.length}
+              {literals(strings.website.tools.tankopedia.tech_tree.route, [
+                `${lineIndex + 1}`,
+                `${lines.length}`,
+              ])}
             </Text>
             <IconButton
               size="2"