feat: localize game assets

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

@@ -1,6 +1,7 @@
 import { asset } from '@blitzkit/core';
 import { Flex, Heading, IconButton, Table } from '@radix-ui/themes';
 import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics';
+import { useLocale } from '../../hooks/useLocale';
 import { CompareEphemeral } from '../../stores/compareEphemeral';
 import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
 import { CompareRow } from './CompareRow';
@@ -15,6 +16,7 @@ export function Body({ stats }: BodyProps) {
   const hasNonRegularGun = members.some(
     ({ gun }) => gun.gun_type!.$case !== 'regular',
   );
+  const { unwrap } = useLocale();
   const mutateCompareEphemeral = CompareEphemeral.useMutation();
 
   return (
@@ -60,7 +62,7 @@ export function Body({ stats }: BodyProps) {
                         }}
                       >
                         <img
-                          alt={thisShell.name}
+                          alt={unwrap(thisShell.name)}
                           width={16}
                           height={16}
                           src={asset(`icons/shells/${thisShell.icon}.webp`)}

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

@@ -9,6 +9,7 @@ import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDe
 import { awaitableSkillDefinitions } from '../../core/awaitables/skillDefinitions';
 import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics';
 import { Var } from '../../core/radix/var';
+import { useLocale } from '../../hooks/useLocale';
 import { CompareEphemeral } from '../../stores/compareEphemeral';
 import type { EquipmentMatrix } from '../../stores/duel';
 import { BlitzkitButtonGrayIcon } from '../BlitzkitButtonGrayIcon';
@@ -43,6 +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();
 
   return (
     <StickyTableRoot
@@ -293,10 +295,10 @@ export function CompareTable({ stats }: CompareTableProps) {
                             <Flex direction="column" justify="center">
                               {provisions.map((provision, index) => (
                                 <img
-                                  alt={
+                                  alt={unwrap(
                                     provisionDefinitions.provisions[provision]
-                                      .name
-                                  }
+                                      .name,
+                                  )}
                                   key={provision}
                                   src={asset(
                                     `/icons/provisions/${provision}.webp`,
@@ -473,11 +475,11 @@ export function CompareTable({ stats }: CompareTableProps) {
                             <Flex direction="column" justify="center">
                               {consumables.map((consumable, index) => (
                                 <img
-                                  alt={
+                                  alt={unwrap(
                                     consumableDefinitions.consumables[
                                       consumable
-                                    ].name
-                                  }
+                                    ].name,
+                                  )}
                                   key={consumable}
                                   src={asset(
                                     `/icons/consumables/${consumable}.webp`,

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

@@ -2,6 +2,7 @@ import { type TankDefinition, tankIcon } from '@blitzkit/core';
 import { Flex, Text } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
 import { Vector2 } from 'three';
+import { useLocale } from '../../hooks/useLocale';
 import { CompareEphemeral } from '../../stores/compareEphemeral';
 import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
 import { InsertionMarker } from './IntersectionMarker';
@@ -16,6 +17,7 @@ interface TankCardProps {
 export function TankCard({ index, tank }: TankCardProps) {
   const draggable = useRef<HTMLDivElement>(null);
   const mutateCompareEphemeral = CompareEphemeral.useMutation();
+  const { unwrap } = useLocale();
 
   useEffect(() => {
     const initial = new Vector2();
@@ -118,7 +120,7 @@ export function TankCard({ index, tank }: TankCardProps) {
           }}
         >
           <img
-            alt={tank.name}
+            alt={unwrap(tank.name)}
             src={tankIcon(tank.id)}
             width={64}
             height={64}
@@ -136,7 +138,7 @@ export function TankCard({ index, tank }: TankCardProps) {
               textOverflow: 'ellipsis',
             }}
           >
-            {tank.name}
+            {unwrap(tank.name)}
           </Text>
         </Flex>
       </Flex>

packages/website/src/components/Embeds/GenerateURL.tsx

@@ -3,7 +3,7 @@ import {
   type AccountListItem,
   type AccountListWithServer,
 } from '@blitzkit/core';
-import strings from '@blitzkit/core/lang/en.json';
+import strings from '@blitzkit/i18n/strings/en.json';
 import { CaretLeftIcon, Link2Icon, PersonIcon } from '@radix-ui/react-icons';
 import {
   Badge,

packages/website/src/components/Embeds/breakdown.tsx

@@ -8,7 +8,7 @@ import {
   sumCompositeStats,
   type IndividualTankStats,
 } from '@blitzkit/core';
-import strings from '@blitzkit/core/lang/en.json';
+import strings from '@blitzkit/i18n/strings/en.json';
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { ContextMenu } from '@radix-ui/themes';
 import { useEffect, useMemo, useState } from 'react';

packages/website/src/components/Home/HomeLocaleSwitcher.tsx

@@ -1,4 +1,4 @@
-import { DEFAULT_LOCALE } from '@blitzkit/core';
+import { DEFAULT_LOCALE } from '@blitzkit/i18n';
 import { GlobeIcon } from '@radix-ui/react-icons';
 import { Flex, Text } from '@radix-ui/themes';
 import type { LocaleAcceptorProps } from '../../hooks/useLocale';

packages/website/src/components/LinkI18n.tsx

@@ -1,4 +1,4 @@
-import { DEFAULT_LOCALE } from '@blitzkit/core';
+import { DEFAULT_LOCALE } from '@blitzkit/i18n';
 import { Link, type LinkProps } from '@radix-ui/themes';
 import type { LocaleAcceptorProps } from '../hooks/useLocale';
 

packages/website/src/components/LocaleSwitcher.tsx

@@ -1,9 +1,10 @@
+import {} from '@blitzkit/core';
 import {
   DEFAULT_LOCALE,
-  localizedStrings,
-  SUPPORTED_LOCALE_FLAGS,
   SUPPORTED_LOCALES,
-} from '@blitzkit/core';
+  SUPPORTED_LOCALE_FLAGS,
+  localizedStrings,
+} from '@blitzkit/i18n';
 import { Select } from '@radix-ui/themes';
 import type { LocaleAcceptorProps } from '../hooks/useLocale';
 

packages/website/src/components/ModuleButtons/ConsumableButton.tsx

@@ -3,6 +3,7 @@ import { ClockIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { Flex, Text } from '@radix-ui/themes';
 import { awaitableConsumableDefinitions } from '../../core/awaitables/consumableDefinitions';
 import { useDelta } from '../../hooks/useDelta';
+import { useLocale } from '../../hooks/useLocale';
 import { GenericTankComponentButton } from './GenericTankComponentButton';
 import type { TankComponentButtonProps } from './TankComponentButton';
 
@@ -22,11 +23,12 @@ export function ConsumableButton({
 }: ConsumableButtonProps) {
   const cooldownDelta = useDelta(cooldown ?? 0);
   const durationDelta = useDelta(duration ?? 0);
+  const { unwrap } = useLocale();
 
   return (
     <GenericTankComponentButton
       style={{ width: '6rem' }}
-      tooltip={consumableDefinitions.consumables[consumable].name}
+      tooltip={unwrap(consumableDefinitions.consumables[consumable].name)}
       icon={asset(`icons/consumables/${consumable}.webp`)}
       {...props}
     >

packages/website/src/components/ModuleButtons/EquipmentButton.tsx

@@ -1,5 +1,6 @@
 import { asset } from '@blitzkit/core';
 import { awaitableEquipmentDefinitions } from '../../core/awaitables/equipmentDefinitions';
+import { useLocale } from '../../hooks/useLocale';
 import { GenericTankComponentButton } from './GenericTankComponentButton';
 import type { TankComponentButtonProps } from './TankComponentButton';
 
@@ -10,9 +11,11 @@ interface EquipmentButtonProps extends TankComponentButtonProps {
 const equipmentDefinitions = await awaitableEquipmentDefinitions;
 
 export function EquipmentButton({ equipment, ...props }: EquipmentButtonProps) {
+  const { unwrap } = useLocale();
+
   return (
     <GenericTankComponentButton
-      tooltip={equipmentDefinitions.equipments[equipment].name}
+      tooltip={unwrap(equipmentDefinitions.equipments[equipment].name)}
       icon={asset(`icons/equipment/${equipment}.webp`)}
       {...props}
     />

packages/website/src/components/ModuleButtons/ProvisionButton.tsx

@@ -1,5 +1,6 @@
 import { asset } from '@blitzkit/core';
 import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
+import { useLocale } from '../../hooks/useLocale';
 import { GenericTankComponentButton } from './GenericTankComponentButton';
 import type { TankComponentButtonProps } from './TankComponentButton';
 
@@ -10,9 +11,11 @@ interface ProvisionButtonProps extends TankComponentButtonProps {
 const provisionDefinitions = await awaitableProvisionDefinitions;
 
 export function ProvisionButton({ provision, ...props }: ProvisionButtonProps) {
+  const { unwrap } = useLocale();
+
   return (
     <GenericTankComponentButton
-      tooltip={provisionDefinitions.provisions[provision].name}
+      tooltip={unwrap(provisionDefinitions.provisions[provision].name)}
       icon={asset(`icons/provisions/${provision}.webp`)}
       {...props}
     />

packages/website/src/components/ModuleManager.tsx

@@ -9,6 +9,7 @@ import {
 } from '@blitzkit/core';
 import { DropdownMenu, Flex } from '@radix-ui/themes';
 import { useState } from 'react';
+import { useLocale } from '../hooks/useLocale';
 import { ModuleButton } from './ModuleButtons/ModuleButton';
 
 interface ModuleManagerProps {
@@ -35,6 +36,7 @@ export function ModuleManager({
   const [gunMenuOpen, setGunMenuOpen] = useState(false);
   const [engineMenuOpen, setEngineMenuOpen] = useState(false);
   const [trackMenuOpen, setTrackMenuOpen] = useState(false);
+  const { unwrap } = useLocale();
 
   return (
     <Flex gap="1" wrap="wrap">
@@ -71,7 +73,7 @@ export function ModuleManager({
                     module="turret"
                     discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
                   />{' '}
-                  {turret.name}
+                  {unwrap(turret.name)}
                 </DropdownMenu.RadioItem>
               );
             })}
@@ -117,7 +119,7 @@ export function ModuleManager({
                       TIER_ROMAN_NUMERALS[gun.gun_type!.value.base.tier]
                     }
                   />{' '}
-                  {gun.gun_type!.value.base.name}
+                  {unwrap(gun.gun_type!.value.base.name)}
                 </DropdownMenu.RadioItem>
               );
             })}
@@ -156,7 +158,7 @@ export function ModuleManager({
                     module="engine"
                     discriminator={TIER_ROMAN_NUMERALS[engine.tier]}
                   />{' '}
-                  {engine.name}
+                  {unwrap(engine.name)}
                 </DropdownMenu.RadioItem>
               );
             })}
@@ -195,7 +197,7 @@ export function ModuleManager({
                     module="chassis"
                     discriminator={TIER_ROMAN_NUMERALS[track.tier]}
                   />{' '}
-                  {track.name}
+                  {unwrap(track.name)}
                 </DropdownMenu.RadioItem>
               );
             })}

packages/website/src/components/TankCard/index.tsx

@@ -28,7 +28,7 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
     }: TankCardProps,
     ref,
   ) => {
-    const { locale } = useLocale();
+    const { unwrap, locale } = useLocale();
     const provideLink = !noLink && onSelect === undefined;
     const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
     const Icon = classIcons[tank.class];
@@ -73,7 +73,7 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
           }}
         >
           <img
-            alt={tank.name}
+            alt={unwrap(tank.name)}
             src={asset(`icons/tanks/blitzkit/${tank.id}.webp`)}
             className="image"
             draggable={false}
@@ -89,7 +89,7 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
           >
             <Icon className="class-icon" />
             <Text align="center" className="name">
-              {tank.name}
+              {unwrap(tank.name)}
             </Text>
           </Flex>
 

packages/website/src/components/TankRowHeaderCell.tsx

@@ -10,7 +10,7 @@ interface TankRowHeaderCellProps {
 }
 
 export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
-  const { locale } = useLocale();
+  const { locale, unwrap } = useLocale();
   const Icon = classIcons[tank.class];
 
   return (
@@ -24,7 +24,7 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
         tabIndex={-1}
       >
         <img
-          alt={tank.name}
+          alt={unwrap(tank.name)}
           draggable={false}
           src={tankIcon(tank.id)}
           style={{
@@ -70,7 +70,7 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
           <ExperimentIcon style={{ width: '1em', height: '1em' }} />
         )}
 
-        {tank.name}
+        {unwrap(tank.name)}
       </LinkI18n>
     </StickyRowHeaderCell>
   );

packages/website/src/components/TankSearch/components/QuickLink.tsx

@@ -12,7 +12,7 @@ interface QuickLinkProps {
 
 export function QuickLink({ topResult }: QuickLinkProps) {
   const tankFilters = useStore($tankFilters);
-  const { locale } = useLocale();
+  const { locale, unwrap } = useLocale();
 
   if (!tankFilters.search || !topResult || tankFilters.searching) return null;
 
@@ -20,7 +20,7 @@ export function QuickLink({ topResult }: QuickLinkProps) {
     <TextField.Slot>
       <LinkI18n locale={locale} href={`/tools/tankopedia/${topResult.id}`}>
         <Button variant="ghost">
-          {topResult.name} <CaretRightIcon />
+          {unwrap(topResult.name)} <CaretRightIcon />
         </Button>
       </LinkI18n>
     </TextField.Slot>

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

@@ -27,6 +27,7 @@ import { awaitableProvisionDefinitions } from '../../../../../core/awaitables/pr
 import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
 import { tankCharacteristics } from '../../../../../core/blitzkit/tankCharacteristics';
 import { useEquipment } from '../../../../../hooks/useEquipment';
+import { useLocale } from '../../../../../hooks/useLocale';
 import { useTankModelDefinition } from '../../../../../hooks/useTankModelDefinition';
 import { Duel } from '../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral';
@@ -39,6 +40,7 @@ const [equipmentDefinitions, provisionDefinitions] = await Promise.all([
 ]);
 
 export function Characteristics() {
+  const { unwrap } = useLocale();
   const mutateDuel = Duel.useMutation();
   const crewSkills = TankopediaEphemeral.use((state) => state.skills);
   const penetrationDistanceInput = useRef<HTMLInputElement>(null);
@@ -146,7 +148,7 @@ export function Characteristics() {
 
             <Flex>
               {gun.gun_type!.value.base.shells.map((thisShell, shellIndex) => (
-                <Tooltip content={thisShell.name} key={thisShell.id}>
+                <Tooltip content={unwrap(thisShell.name)} key={thisShell.id}>
                   <IconButton
                     color={thisShell.id === shell.id ? undefined : 'gray'}
                     variant="soft"
@@ -172,7 +174,7 @@ export function Characteristics() {
                     }}
                   >
                     <img
-                      alt={thisShell.name}
+                      alt={unwrap(thisShell.name)}
                       width={16}
                       height={16}
                       src={asset(`icons/shells/${thisShell.icon}.webp`)}

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

@@ -103,7 +103,7 @@ function ModuleButton({
           gap={isTank ? '1' : undefined}
         >
           <Text size="1" color="gray">
-            {formatCompact(unlock.cost.value)}
+            {formatCompact(locale, unlock.cost.value)}
           </Text>
 
           <img

packages/website/src/components/Tankopedia/GameModeSection.tsx

@@ -3,6 +3,7 @@ import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { awaitableConsumableDefinitions } from '../../core/awaitables/consumableDefinitions';
 import { awaitableGameDefinitions } from '../../core/awaitables/gameDefinitions';
 import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
+import { useLocale } from '../../hooks/useLocale';
 import { Duel } from '../../stores/duel';
 
 const [gameDefinitions, consumableDefinitions, provisionDefinitions] =
@@ -13,6 +14,7 @@ const [gameDefinitions, consumableDefinitions, provisionDefinitions] =
   ]);
 
 export function GameModeSection() {
+  const { unwrap } = useLocale();
   const tank = Duel.use((state) => state.protagonist.tank);
   const roles = Object.entries(tank.roles);
 
@@ -67,7 +69,7 @@ export function GameModeSection() {
                 justify="center"
               >
                 <Text size="4" weight="bold">
-                  {gameMode.name}
+                  {unwrap(gameMode.name)}
                 </Text>
 
                 <Flex direction="column">
@@ -84,9 +86,9 @@ export function GameModeSection() {
                               objectFit: 'contain',
                             }}
                             src={asset(`icons/provisions/${id}.webp`)}
-                            alt={provisions.name}
+                            alt={unwrap(provisions.name)}
                           />
-                          {provisions.name}
+                          {unwrap(provisions.name)}
                         </Flex>
                       </Text>
                     );
@@ -104,9 +106,9 @@ export function GameModeSection() {
                               objectFit: 'contain',
                             }}
                             src={asset(`icons/consumables/${id}.webp`)}
-                            alt={consumable.name}
+                            alt={unwrap(consumable.name)}
                           />
-                          {consumable.name}
+                          {unwrap(consumable.name)}
                         </Flex>
                       </Text>
                     );

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -89,7 +89,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
   const antagonistUniqueGuns = uniqueGuns(antagonistTank.turrets);
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
-  const { strings } = useLocale();
+  const { strings, unwrap } = useLocale();
 
   return (
     <>
@@ -244,7 +244,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                 }}
               >
                 <img
-                  alt={thisShell.name}
+                  alt={unwrap(thisShell.name)}
                   src={asset(`icons/shells/${thisShell.icon}.webp`)}
                   style={{
                     width: '50%',
@@ -362,7 +362,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                   <Button variant="ghost">
                     <Flex gap="2" align="center">
                       <SmallTankIcon id={antagonistTank.id} size={16} />
-                      {antagonistTank.name}
+                      {unwrap(antagonistTank.name)}
                     </Flex>
                   </Button>
                 </Dialog.Trigger>

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

@@ -6,6 +6,7 @@ import { NAVBAR_HEIGHT } from '../../../constants/navbar';
 import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
 import { Var } from '../../../core/radix/var';
 import { useFullScreen } from '../../../hooks/useFullScreen';
+import { useLocale } from '../../../hooks/useLocale';
 import { Duel } from '../../../stores/duel';
 import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
 import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
@@ -18,6 +19,7 @@ import { TankSandboxLoader } from './components/TankSandboxLoader';
 const tankDefinitions = await awaitableTankDefinitions;
 
 export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
+  const { unwrap } = useLocale();
   const canvas = useRef<HTMLCanvasElement>(null);
   const isFullScreen = useFullScreen();
   const protagonist = Duel.use((state) => state.protagonist.tank);
@@ -117,7 +119,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
               wrap="nowrap"
               color={treeColor}
             >
-              {protagonist.name}
+              {unwrap(protagonist.name)}
             </Heading>
           </Flex>
 

packages/website/src/components/Tankopedia/MetaSection/components/Votes/components/VoteCaster.tsx

@@ -9,6 +9,7 @@ import {
   Text,
 } from '@radix-ui/themes';
 import { useState } from 'react';
+import { useLocale } from '../../../../../../hooks/useLocale';
 import { App } from '../../../../../../stores/app';
 import { Duel } from '../../../../../../stores/duel';
 import { Stars } from '../../Stars';
@@ -24,6 +25,7 @@ export function VoteCaster() {
   const [postVote, setPostVote] = useState<boolean | null>(null);
   // true = open, false = closed, null = casting
   const [showDialogue, setShowDialogue] = useState<boolean | null>(false);
+  const { unwrap } = useLocale();
 
   return (
     <>
@@ -35,7 +37,7 @@ export function VoteCaster() {
         </Dialog.Trigger>
 
         <Dialog.Content maxWidth="23rem">
-          <Dialog.Title>Voting for {tank.name}</Dialog.Title>
+          <Dialog.Title>Voting for {unwrap(tank.name)}</Dialog.Title>
 
           <Flex direction="column" mt="4">
             <Flex align="center" justify="between">

packages/website/src/components/Tankopedia/MetaSection/components/Votes/index.tsx

@@ -1,6 +1,7 @@
 import { formatCompact } from '@blitzkit/core';
 import { Flex, Heading, Skeleton, Text } from '@radix-ui/themes';
 import { memo } from 'react';
+import { useLocale } from '../../../../../hooks/useLocale';
 import { useTankVotes } from '../../../../../hooks/useTankVotes';
 import { App } from '../../../../../stores/app';
 import { Duel } from '../../../../../stores/duel';
@@ -13,13 +14,14 @@ export const Votes = memo(
     const id = Duel.use((state) => state.protagonist.tank.id);
     const votes = useTankVotes(id);
     const wargaming = App.use((state) => state.logins.wargaming);
+    const { locale } = useLocale();
 
     return (
       <Flex direction="column" gap="3">
         <Flex justify="between" align="center">
           <Heading size="4">
             {!votes && <Skeleton height="1em" width="4rem" />}
-            {votes && formatCompact(votes.votes)}{' '}
+            {votes && formatCompact(locale, votes.votes)}{' '}
             {votes && (votes.votes > 1 ? 'votes' : 'vote')}
           </Heading>
 

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

@@ -38,7 +38,7 @@ export function MetaSection() {
   const mutateDuel = Duel.useMutation();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const [showSwapDialog, setShowSwapDialog] = useState(false);
-  const { locale, strings } = useLocale();
+  const { locale, strings, unwrap } = useLocale();
 
   return (
     <Flex justify="center" align="center">
@@ -124,7 +124,7 @@ export function MetaSection() {
           <Flex direction="column" width="100%">
             {protagonist.name_full && (
               <Listing label={strings.website.tools.tankopedia.meta.full_name}>
-                {protagonist.name_full}
+                {unwrap(protagonist.name_full)}
               </Listing>
             )}
             <Listing label={strings.website.tools.tankopedia.meta.nation}>

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

@@ -20,7 +20,7 @@ const [tankDefinitions, averageDefinitions] = await Promise.all([
 ]);
 
 export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
-  const { locale, strings } = useLocale();
+  const { locale, strings, unwrap } = useLocale();
   const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
   const tank = tankDefinitions.tanks[id];
   const nextTanks = nextIds?.map((id) => tankDefinitions.tanks[id]);
@@ -78,7 +78,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
           }}
         >
           <img
-            alt={tank.name}
+            alt={unwrap(tank.name)}
             src={asset(`icons/tanks/big/${id}.webp`)}
             width={64}
             height={64}
@@ -92,7 +92,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
               <Text color="gray" size="1">
                 {TIER_ROMAN_NUMERALS[tank.tier]}
               </Text>
-              <Text wrap="nowrap">{tank.name}</Text>
+              <Text wrap="nowrap">{unwrap(tank.name)}</Text>
             </Flex>
             <Flex gap="2" align="center">
               <Text color="gray" size="1" wrap="nowrap">

packages/website/src/components/TanksEmbed.tsx

@@ -6,13 +6,14 @@ import {
   type CompositeStats,
   type CompositeStatsKey,
 } from '@blitzkit/core';
-import strings from '@blitzkit/core/lang/en.json';
+import strings from '@blitzkit/i18n/strings/en.json';
 import { amberDark, blueDark } from '@radix-ui/colors';
 import { Flex, Text, type FlexProps } from '@radix-ui/themes';
 import { times } from 'lodash-es';
 import type { ReactNode } from 'react';
 import { breakdownConfig } from '../constants/embeds';
 import { toRadiusVar } from '../core/radix/utils';
+import { useLocale } from '../hooks/useLocale';
 import { useEmbedStateCurry } from '../stores/embedState/utilities';
 import { ClassHeavy } from './ClassIcon/components/ClassHeavy';
 import { ClassLight } from './ClassIcon/components/ClassLight';
@@ -52,6 +53,7 @@ export function BreakdownEmbedCard({
 }: BreakdownEmbedCardProps) {
   const { useEmbedState, useRichText } =
     useEmbedStateCurry<typeof breakdownConfig>();
+  const { unwrap } = useLocale();
 
   return (
     <Flex
@@ -111,7 +113,7 @@ export function BreakdownEmbedCard({
               ? 'Total'
               : tank === undefined
                 ? `Unknown tank`
-                : tank.name}
+                : unwrap(tank.name)}
           </Flex>
         </Text>
       </Flex>