From 7900c61a9b6c9c91a1ce07b703868ea6bfad342c Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Tue, 14 Jan 2025 14:13:00 -0600 Subject: [PATCH] feat: localize tankopedia tech tree --- packages/core/lang/en.json | 12 ++++++++++-- .../Armor/components/ShotDisplayCard.tsx | 6 +++--- .../Options/components/CustomShellButton.tsx | 8 ++++---- .../Options/components/Thicknesses.tsx | 8 ++++---- .../HeroSection/components/Options/index.tsx | 4 ++-- .../TechTreeSection/components/Node.tsx | 19 +++++++++++-------- .../Tankopedia/TechTreeSection/index.tsx | 14 ++++++++++---- 7 files changed, 44 insertions(+), 27 deletions(-) diff --git a/packages/core/lang/en.json b/packages/core/lang/en.json index 3f1316d86..ad7061240 100644 --- a/packages/core/lang/en.json +++ b/packages/core/lang/en.json @@ -6,11 +6,12 @@ }, "common": { - "units_suffix": { + "units": { "m": "%s1m", "mm": "%s1mm", "deg": "%s1°", - "hp": "%s1hp" + "hp": "%s1hp", + "x": "x%s1" }, "shells": { @@ -923,6 +924,13 @@ "restoration": "Restoration price", "sale": "Sale price", "research": "Research XP" + }, + + "tech_tree": { + "title": "Tech tree", + "battle": "1 battle", + "battles": "%s1 battles", + "route": "Route %s1 of %s2" } }, "compare": { diff --git a/packages/website/src/components/Armor/components/ShotDisplayCard.tsx b/packages/website/src/components/Armor/components/ShotDisplayCard.tsx index 7fad8aee1..994e4a2c5 100644 --- a/packages/website/src/components/Armor/components/ShotDisplayCard.tsx +++ b/packages/website/src/components/Armor/components/ShotDisplayCard.tsx @@ -48,7 +48,7 @@ function LayerEntry({ {layer.type === null && ( <> - {literals(strings.common.units_suffix.mm, [ + {literals(strings.common.units.mm, [ Math.round(layer.distance * 1000).toLocaleString(locale), ])} @@ -65,7 +65,7 @@ function LayerEntry({ {layer.type === ArmorType.External && ( - {literals(strings.common.units_suffix.mm, [ + {literals(strings.common.units.mm, [ Math.round(layer.thickness).toLocaleString(locale), ])} @@ -77,7 +77,7 @@ function LayerEntry({ {literals( angle === undefined - ? strings.common.units_suffix.mm + ? strings.common.units.mm : strings.website.tools.tankopedia.sandbox.dynamic.shot_card .stats.thickness_and_angle, [ diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx index bda1e04dc..ff824c6f0 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx @@ -151,7 +151,7 @@ export function CustomShellButton() { }} > - {literals(strings.common.units_suffix.mm, [''])} + {literals(strings.common.units.mm, [''])} @@ -187,7 +187,7 @@ export function CustomShellButton() { }} > - {literals(strings.common.units_suffix.mm, [''])} + {literals(strings.common.units.mm, [''])} @@ -211,7 +211,7 @@ export function CustomShellButton() { minWidth="8rem" > - {literals(strings.common.units_suffix.deg, [ + {literals(strings.common.units.deg, [ (customShell.normalization ?? 0).toFixed(0), ])} @@ -241,7 +241,7 @@ export function CustomShellButton() { - {literals(strings.common.units_suffix.deg, [ + {literals(strings.common.units.deg, [ (customShell.ricochet ?? 90).toFixed(0), ])} diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx index 67e709548..f902ba16c 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx @@ -55,7 +55,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) { > - {literals(strings.common.units_suffix.mm, [ + {literals(strings.common.units.mm, [ (thicknessRange.value * 1.5).toFixed(0), ])} @@ -63,7 +63,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) { {strings.website.tools.tankopedia.sandbox.static.primary} - {literals(strings.common.units_suffix.mm, ['0'])} + {literals(strings.common.units.mm, ['0'])} @@ -96,7 +96,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) { > - {literals(strings.common.units_suffix.mm, [ + {literals(strings.common.units.mm, [ thicknessRange.value.toFixed(0), ])} @@ -104,7 +104,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) { {strings.website.tools.tankopedia.sandbox.static.spaced} - {literals(strings.common.units_suffix.mm, ['0'])} + {literals(strings.common.units.mm, ['0'])} diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx index 14adbba94..26f8a0119 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx @@ -127,7 +127,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) { > {!hasCustomShell && ( - {literals(strings.common.units_suffix.mm, [ + {literals(strings.common.units.mm, [ ( resolvePenetrationCoefficient( hasCalibratedShells, @@ -202,7 +202,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) { } secondaryDiscriminator={ - {literals(strings.common.units_suffix.mm, [ + {literals(strings.common.units.mm, [ gun.gun_type!.value.base.shells[0].caliber.toFixed( 0, ), diff --git a/packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx b/packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx index aae63e5d6..76e7bb8bb 100644 --- a/packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx +++ b/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)} @@ -121,7 +122,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) { objectPosition: 'center', }} /> - {formatCompact(tank.price.value)} + {formatCompact(locale, tank.price.value)} @@ -129,11 +130,13 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) { {averages && nextTanks && tank.tier !== 10 && ( {skeleton && } - {!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}`], + ))} )} diff --git a/packages/website/src/components/Tankopedia/TechTreeSection/index.tsx b/packages/website/src/components/Tankopedia/TechTreeSection/index.tsx index d2e4c2f94..f806ea284 100644 --- a/packages/website/src/components/Tankopedia/TechTreeSection/index.tsx +++ b/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" > - Tech tree + + {strings.website.tools.tankopedia.tech_tree.title} + {master.tier > 1 && ( @@ -156,7 +159,7 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) { pl="1" > - x{multiplier} + {literals(strings.common.units.x, [`${multiplier}`])} ); @@ -216,7 +219,10 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) { - Route {lineIndex + 1} of {lines.length} + {literals(strings.website.tools.tankopedia.tech_tree.route, [ + `${lineIndex + 1}`, + `${lines.length}`, + ])}