feat: localize game assets

packages/bot/package.json

@@ -5,6 +5,7 @@
   "types": "src/types.d.ts",
   "dependencies": {
     "@blitzkit/core": "workspace:*",
+    "@blitzkit/i18n": "workspace:*",
     "satori": "^0.10.14",
     "@resvg/resvg-js": "^2.6.2",
     "discord.js": "^14.16.3",

packages/bot/src/commands/breakdown/render.tsx

@@ -32,7 +32,7 @@ export async function renderBreakdown(
   filters: StatFilters,
   locale: Locale,
 ) {
-  const { t, translate } = translator(locale);
+  const { t, translate, unwrap } = translator(locale);
   const awaitedTankDefinitions = await tankDefinitions;
   const awaitedTankAverages = await blitzStarsTankAverages;
   const statsInPeriod = await getStatsInPeriod(region, id, start, end, locale);
@@ -190,8 +190,9 @@ export async function renderBreakdown(
           class={tankDefinition?.class}
           type={tankDefinition?.type}
           title={
-            tankDefinition?.name ??
-            translate('bot.commands.breakdown.body.unknown_tank', [`${id}`])
+            tankDefinition
+              ? unwrap(tankDefinition.name)
+              : translate('bot.commands.breakdown.body.unknown_tank', [`${id}`])
           }
           stats={[
             {

packages/bot/src/commands/ownedTanks.tsx

@@ -27,7 +27,7 @@ export const ownedTanksCommand = new Promise<CommandRegistry>((resolve) => {
       .addStringOption(addUsernameChoices),
 
     async handler(interaction) {
-      const { t, translate } = translator(interaction.locale);
+      const { t, translate, unwrap } = translator(interaction.locale);
       const tier = Number(interaction.options.getString('tier'));
       const { id, region } = await resolvePlayerFromCommand(interaction);
       const accountInfo = await getAccountInfo(region, id);
@@ -77,7 +77,7 @@ export const ownedTanksCommand = new Promise<CommandRegistry>((resolve) => {
         )
         .map(
           (tank) =>
-            `[${flags[tank.nation]} ${markdownEscape(tank.name)}](<https://blitzkit.app/tools/tankopedia/${tank.id}>)`,
+            `[${flags[tank.nation]} ${markdownEscape(unwrap(tank.name))}](<https://blitzkit.app/tools/tankopedia/${tank.id}>)`,
         );
       const lines = [title, ...tankList];
 

packages/bot/src/commands/replay.tsx

@@ -6,6 +6,7 @@ import {
   tankIcon,
   TIER_ROMAN_NUMERALS,
 } from '@blitzkit/core';
+import { Locale } from 'discord.js';
 import { clamp } from 'lodash-es';
 import { CommandWrapper } from '../components/CommandWrapper';
 import { TitleBar } from '../components/TitleBar';
@@ -18,6 +19,7 @@ import { RenderConfiguration } from '../core/blitzkit/renderConfiguration';
 import { blitzStarsTankAverages } from '../core/blitzstars/tankAverages';
 import { buttonLink } from '../core/discord/buttonLink';
 import { createLocalizedCommand } from '../core/discord/createLocalizedCommand';
+import { translator } from '../core/localization/translator';
 import { CommandRegistry } from '../events/interactionCreate';
 import { theme } from '../stitches.config';
 
@@ -218,11 +220,13 @@ function stat(value: string | number, flex = 2) {
 }
 
 async function playerListing(
+  locale: Locale,
   player: WotInspectorReplayPlayerData,
   protagonistTeam: boolean,
   winningTeam: number,
   recordingPlayer = false,
 ) {
+  const { unwrap } = translator(locale);
   const awaitedTankAverages = await blitzStarsTankAverages;
   const awaitedTankDefinitions = await tankDefinitions;
   const tank = awaitedTankDefinitions.tanks[player.vehicle_descr];
@@ -275,7 +279,7 @@ async function playerListing(
         }}
       >
         <img
-          alt={tank.name}
+          alt={unwrap(tank.name)}
           src={await iconPng(tankIcon(tank.id))}
           style={{
             width: 32,
@@ -312,7 +316,7 @@ async function playerListing(
                 fontSize: 16,
               }}
             >
-              {tank.name}
+              {unwrap(tank.name)}
             </span>
           </div>
 
@@ -530,6 +534,7 @@ export const replayCommand = new Promise<CommandRegistry>((resolve) => {
                   )
                   .map((player) =>
                     playerListing(
+                      interaction.locale,
                       player,
                       true,
                       replayData.winner_team,
@@ -553,7 +558,12 @@ export const replayCommand = new Promise<CommandRegistry>((resolve) => {
                 players
                   .filter((player) => player.team === antagonistTeamId)
                   .map((player) =>
-                    playerListing(player, false, replayData.winner_team),
+                    playerListing(
+                      interaction.locale,
+                      player,
+                      false,
+                      replayData.winner_team,
+                    ),
                   ),
               )}
             </div>

packages/bot/src/commands/research.tsx

@@ -77,7 +77,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
       .addStringOption(addUsernameChoices),
 
     async handler(interaction) {
-      const { t, translate } = translator(interaction.locale);
+      const { t, translate, unwrap } = translator(interaction.locale);
       const awaitedTankDefinitions = await tankDefinitions;
       const targetTankId = await resolveTankId(
         interaction.options.getString('target-tank', true),
@@ -99,7 +99,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
 
         if (targetTankId === startingTankId) {
           return translate('bot.commands.research.errors.start_end_equal', [
-            escapeMarkdown(targetTank.name),
+            escapeMarkdown(unwrap(targetTank.name)),
           ]);
         }
 
@@ -107,28 +107,28 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
 
         if (startingTank.tier > targetTank.tier) {
           return translate('bot.commands.research.errors.unordered', [
-            escapeMarkdown(startingTank.name),
-            escapeMarkdown(targetTank.name),
-            escapeMarkdown(targetTank.name),
+            escapeMarkdown(unwrap(startingTank.name)),
+            escapeMarkdown(unwrap(targetTank.name)),
+            escapeMarkdown(unwrap(targetTank.name)),
           ]);
         }
 
         if (!targetTankAncestry.includes(startingTankId)) {
           return translate('bot.commands.research.errors.tanks_not_on_line', [
-            escapeMarkdown(targetTank.name),
-            escapeMarkdown(startingTank.name),
+            escapeMarkdown(unwrap(targetTank.name)),
+            escapeMarkdown(unwrap(startingTank.name)),
           ]);
         }
       } else {
         if (targetTank.type !== TankType.RESEARCHABLE) {
           return translate('bot.commands.research.errors.non_tech_tree', [
-            escapeMarkdown(targetTank.name),
+            escapeMarkdown(unwrap(targetTank.name)),
           ]);
         }
 
         if (targetTank.tier === 1) {
           return translate('bot.commands.research.errors.tier_1', [
-            escapeMarkdown(targetTank.name),
+            escapeMarkdown(unwrap(targetTank.name)),
           ]);
         }
 
@@ -140,7 +140,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
 
         if (tankStats.some(({ tank_id }) => tank_id === targetTankId)) {
           return translate('bot.commands.research.errors.already_researched', [
-            escapeMarkdown(targetTank.name),
+            escapeMarkdown(unwrap(targetTank.name)),
           ]);
         }
 
@@ -452,7 +452,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                         }}
                       >
                         <img
-                          alt={tank.name}
+                          alt={unwrap(tank.name)}
                           src={TANK_ICONS[tank.class]}
                           width={16}
                           height={16}
@@ -463,7 +463,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                             color: theme.colors.textHighContrast,
                           }}
                         >
-                          {tank.name}
+                          {unwrap(tank.name)}
                         </span>
                       </div>
                     </div>

packages/bot/src/core/discord/autocompleteTanks.ts

@@ -1,15 +1,17 @@
 import { fetchTankNames, TankType } from '@blitzkit/core';
+import { SUPPORTED_LOCALES } from '@blitzkit/i18n';
 import {
   ApplicationCommandOptionChoiceData,
   AutocompleteInteraction,
   CacheType,
 } from 'discord.js';
 import { go } from 'fuzzysort';
+import { tankNames } from '../blitzkit/nonBlockingPromises';
+import { translator } from '../localization/translator';
 import {
   DISCORD_CHOICES_MAX_NAME_SIZE,
   OVERFLOW_SUFFIX,
 } from './autocompleteClan/constants';
-import { tankNames } from '../blitzkit/nonBlockingPromises';
 
 export const tankNamesTechTreeOnly = fetchTankNames().then((names) =>
   names.filter((tank) => tank.treeType === TankType.RESEARCHABLE),
@@ -20,6 +22,7 @@ export async function autocompleteTanks(
   techTreeOnly = false,
   fields = ['tank'],
 ) {
+  const { unwrap } = translator(interaction.locale);
   const focusedOption = interaction.options.getFocused(true);
   if (!fields.includes(focusedOption.name)) return;
 
@@ -30,18 +33,24 @@ export async function autocompleteTanks(
             focusedOption.value,
             await (techTreeOnly ? tankNamesTechTreeOnly : tankNames),
             {
-              keys: ['searchableName', 'searchableNameDeburr', 'camouflages'],
+              keys: [
+                ...SUPPORTED_LOCALES.map((locale) => [
+                  `searchableName.${locale}`,
+                  `searchableNameDeburr.${locale}`,
+                ]).flat(),
+                'camouflages',
+              ],
               limit: 10,
             },
           ).map(async (item) => {
-            let name = item.obj.searchableName;
+            let name = unwrap(item.obj.searchableName);
 
             if (name.length > DISCORD_CHOICES_MAX_NAME_SIZE) {
               const overSize = name.length - DISCORD_CHOICES_MAX_NAME_SIZE;
 
-              name = `${item.obj.searchableName.slice(
+              name = `${unwrap(item.obj.searchableName).slice(
                 0,
-                item.obj.searchableName.length -
+                unwrap(item.obj.searchableName).length -
                   overSize -
                   OVERFLOW_SUFFIX.length,
               )}${OVERFLOW_SUFFIX}`;

packages/bot/src/core/localization/strings/constants.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_LOCALE, SupportedLocale } from '@blitzkit/core';
+import { DEFAULT_LOCALE, SupportedLocale } from '@blitzkit/i18n';
 import { Locale } from 'discord.js';
 
 const SUPPORTED_LOCALES_DISCORD_MAP: Record<SupportedLocale, Locale> = {

packages/bot/src/core/localization/translator.ts

@@ -1,8 +1,10 @@
+import { unwrapper } from '@blitzkit/i18n';
 import { Locale } from 'discord.js';
 import { translations } from './strings';
 import {
   DEFAULT_LOCALE_DISCORD,
   SUPPORTED_LOCALES_DISCORD,
+  SUPPORTED_LOCALES_DISCORD_MAP_INVERSE,
 } from './strings/constants';
 
 export function translator(localeRaw: Locale) {
@@ -74,5 +76,7 @@ export function translator(localeRaw: Locale) {
       .join('');
   }
 
-  return { locale, translate, t };
+  const unwrap = unwrapper(SUPPORTED_LOCALES_DISCORD_MAP_INVERSE[locale]);
+
+  return { locale, translate, t, unwrap };
 }

packages/bot/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*", "../core/src/blitzkit/supportedLocales.ts"]
+  "include": ["src/**/*", "../core/src/blitzkit/supportedLocales.ts", "../i18n/src/unwrapper.ts"]
 }