TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 18:57:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: localize tankopedia tech tree

Browse Source
This commit is contained in:
tresabhi committed 2025-01-14 14:13:00 -06:00
1 parent ceb7842d49
commit 7900c61a9b
7 files changed
+44 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/core/lang/en.json
+10 -2
View File
@@ -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": {
packages/website/src/components/Armor/components/ShotDisplayCard.tsx
+3 -3
View File
@@ -48,7 +48,7 @@ function LayerEntry({
{layer.type === null && (
<>
<Text size="2" color={shotStatusColor} style={{ width: 64 }}>
{literals(strings.common.units_suffix.mm, [
{literals(strings.common.units.mm, [
Math.round(layer.distance * 1000).toLocaleString(locale),
])}
</Text>
@@ -65,7 +65,7 @@ function LayerEntry({
{layer.type === ArmorType.External && (
<Text size="2" color={shotStatusColor} style={{ width: 64 }}>
{literals(strings.common.units_suffix.mm, [
{literals(strings.common.units.mm, [
Math.round(layer.thickness).toLocaleString(locale),
])}
</Text>
@@ -77,7 +77,7 @@ function LayerEntry({
<Text size="2" color={shotStatusColor} style={{ width: 80 }}>
{literals(
angle === undefined
? strings.common.units_suffix.mm
? strings.common.units.mm
: strings.website.tools.tankopedia.sandbox.dynamic.shot_card
.stats.thickness_and_angle,
[
packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx
+4 -4
View File
@@ -151,7 +151,7 @@ export function CustomShellButton() {
}}
>
<TextField.Slot side="right">
{literals(strings.common.units_suffix.mm, [''])}
{literals(strings.common.units.mm, [''])}
</TextField.Slot>
</TextField.Root>
</Flex>
@@ -187,7 +187,7 @@ export function CustomShellButton() {
}}
>
<TextField.Slot side="right">
{literals(strings.common.units_suffix.mm, [''])}
{literals(strings.common.units.mm, [''])}
</TextField.Slot>
</TextField.Root>
</Flex>
@@ -211,7 +211,7 @@ export function CustomShellButton() {
minWidth="8rem"
>
<Text color="gray">
{literals(strings.common.units_suffix.deg, [
{literals(strings.common.units.deg, [
(customShell.normalization ?? 0).toFixed(0),
])}
</Text>
@@ -241,7 +241,7 @@ export function CustomShellButton() {
<Flex align="center" gap="2" flexGrow="1" maxWidth="15rem">
<Text color="gray">
{literals(strings.common.units_suffix.deg, [
{literals(strings.common.units.deg, [
(customShell.ricochet ?? 90).toFixed(0),
])}
</Text>
packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx
+4 -4
View File
@@ -55,7 +55,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
>
<Flex direction="column" align="end" justify="between">
<Text color="gray" size="1">
{literals(strings.common.units_suffix.mm, [
{literals(strings.common.units.mm, [
(thicknessRange.value * 1.5).toFixed(0),
])}
</Text>
@@ -63,7 +63,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
{strings.website.tools.tankopedia.sandbox.static.primary}
</Text>
<Text color="gray" size="1">
{literals(strings.common.units_suffix.mm, ['0'])}
{literals(strings.common.units.mm, ['0'])}
</Text>
</Flex>
@@ -96,7 +96,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
>
<Flex direction="column" align="end" justify="between">
<Text color="gray" size="1">
{literals(strings.common.units_suffix.mm, [
{literals(strings.common.units.mm, [
thicknessRange.value.toFixed(0),
])}
</Text>
@@ -104,7 +104,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
{strings.website.tools.tankopedia.sandbox.static.spaced}
</Text>
<Text color="gray" size="1">
{literals(strings.common.units_suffix.mm, ['0'])}
{literals(strings.common.units.mm, ['0'])}
</Text>
</Flex>
packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
+2 -2
View File
@@ -127,7 +127,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
>
{!hasCustomShell && (
<Text color="gray" size={{ initial: '1', sm: '2' }}>
{literals(strings.common.units_suffix.mm, [
{literals(strings.common.units.mm, [
(
resolvePenetrationCoefficient(
hasCalibratedShells,
@@ -202,7 +202,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
}
secondaryDiscriminator={
<Text style={{ fontSize: '0.75em' }}>
{literals(strings.common.units_suffix.mm, [
{literals(strings.common.units.mm, [
gun.gun_type!.value.base.shells[0].caliber.toFixed(
0,
),
packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx
+11 -8
View File
@@ -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
+10 -4
View File
@@ -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"