feat: localize game assets

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>