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>