feat: localize game assets

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>
                     );