Item name translation on wish history and character page

src/i18n.js

@@ -1,17 +1,7 @@
-import { addMessages, init, getLocaleFromNavigator, locale as $locale } from 'svelte-i18n';
+import { register, addMessages, init, getLocaleFromNavigator, locale as $locale } from 'svelte-i18n';
 
 import en from './locales/en.json';
-import id from './locales/id.json';
-import ru from './locales/ru.json';
-import ko from './locales/ko.json';
-import fr from './locales/fr.json';
-import zh from './locales/zh.json';
-import pt from './locales/pt.json';
-import tw from './locales/tw.json';
-import es from './locales/es.json';
-import de from './locales/de.json';
-import th from './locales/th.json';
-import vi from './locales/vi.json';
+import enItems from './locales/items/en.json';
 
 const INIT_OPTIONS = {
   fallbackLocale: 'en',
@@ -32,17 +22,29 @@ $locale.subscribe((value) => {
 
 const supportedLanguage = ['en', 'id', 'ru', 'ko', 'fr', 'zh', 'pt', 'tw', 'es', 'de', 'th', 'vi'];
 addMessages('en', en);
-addMessages('id', id);
-addMessages('ru', ru);
-addMessages('ko', ko);
-addMessages('fr', fr);
-addMessages('zh', zh);
-addMessages('pt', pt);
-addMessages('tw', tw);
-addMessages('es', es);
-addMessages('de', de);
-addMessages('th', th);
-addMessages('vi', vi);
+addMessages('en', enItems);
+register('id', () => import('./locales/id.json'));
+register('ru', () => import('./locales/ru.json'));
+register('ko', () => import('./locales/ko.json'));
+register('fr', () => import('./locales/fr.json'));
+register('zh', () => import('./locales/zh.json'));
+register('pt', () => import('./locales/pt.json'));
+register('tw', () => import('./locales/tw.json'));
+register('es', () => import('./locales/es.json'));
+register('de', () => import('./locales/de.json'));
+register('th', () => import('./locales/th.json'));
+register('vi', () => import('./locales/vi.json'));
+register('id', () => import('./locales/items/id.json'));
+register('ru', () => import('./locales/items/ru.json'));
+register('ko', () => import('./locales/items/ko.json'));
+register('fr', () => import('./locales/items/fr.json'));
+register('zh', () => import('./locales/items/zh.json'));
+register('pt', () => import('./locales/items/pt.json'));
+register('tw', () => import('./locales/items/tw.json'));
+register('es', () => import('./locales/items/es.json'));
+register('de', () => import('./locales/items/de.json'));
+register('th', () => import('./locales/items/th.json'));
+register('vi', () => import('./locales/items/vi.json'));
 
 export function startClient() {
   let used = 'en';

src/routes/_layout.svelte

@@ -1,3 +1,11 @@
+<script context="module">
+  import { waitLocale } from 'svelte-i18n';
+
+  export async function preload() {
+    return waitLocale();
+  }
+</script>
+
 <script>
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';

src/routes/characters/[id].svelte

@@ -197,7 +197,7 @@
       <div class="flex flex-col items-start mt-4 xl:mt-0 side-detail pt-4 xl:pt-0">
         <div class="flex items-center px-4 md:px-8">
           <h1 class="font-display font-black text-4xl leading-10 md:leading-normal md:text-5xl text-white mr-4 z-0">
-            {character.name}
+            {$t(character.name)}
           </h1>
           <img
             class="h-10 mr-4 z-10 object-contain"

src/routes/characters/index.svelte

@@ -393,7 +393,7 @@
               <div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
                 <div class="w-full  overflow-hidden absolute bottom-0">
                   <p class="text-white p-1 text-center text-sm">
-                    {char.name}
+                    {$t(char.name)}
                   </p>
                 </div>
               </div>
@@ -458,7 +458,7 @@
                 <td class="rarity w-16 sticky" style="padding: 0; left: 0px;">
                   <img class="w-12 h-12 rounded-full" src={`/images/characters/${id}.png`} alt={char.name} />
                 </td>
-                <td><a href="/characters/{id}">{char.name}</a></td>
+                <td><a href="/characters/{id}">{$t(char.name)}</a></td>
                 <td class="text-center">
                   <img class="w-8 h-8 inline" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
                 </td>

src/routes/wish/[id].svelte

@@ -609,7 +609,7 @@
                       : '/images/wish.png'}
                     alt={pull.name}
                   />
-                  <span class="h-8 leading-8 pr-4">{pull.name}</span>
+                  <span class="h-8 leading-8 pr-4">{$t(pull.name)}</span>
                 </td>
                 <td class="border-t border-gray-700 px-2 text-gray-200 text-center">{pull.rarity}</td>
                 <td class="border-t border-gray-700 px-4 text-gray-200">

src/routes/wish/_summaryItem.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { t } from 'svelte-i18n';
   import { mdiStar } from '@mdi/js';
 
   import Icon from '../../components/Icon.svelte';
@@ -17,10 +18,7 @@
   }
 </script>
 
-<div
-  class="bg-item rounded-xl p-4 flex flex-col w-full"
-  style="height: min-content;"
->
+<div class="bg-item rounded-xl p-4 flex flex-col w-full" style="height: min-content;">
   <table>
     <tr>
       <td class="text-white text-md font-semibold pr-2 md:pr-4 flex-1 w-full">{type.name}</td>
@@ -57,9 +55,7 @@
       </td>
     </tr>
     <tr>
-      <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700">
-        └ Character
-      </td>
+      <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700"> └ Character </td>
       <td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
         {numberFormat.format(avg.rare.character.total)}
       </td>
@@ -71,9 +67,7 @@
       </td>
     </tr>
     <tr>
-      <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700">
-        └ Weapon
-      </td>
+      <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700"> └ Weapon </td>
       <td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
         {numberFormat.format(avg.rare.weapon.total)}
       </td>
@@ -88,7 +82,7 @@
   {#if avg.legendary.pulls.length > 0}
     <div class="flex flex-wrap mt-2 overflow-y-auto" style="max-height: 500px;">
       {#each avg.legendary.pulls as pull}
-        <span class="pity">{pull.name} <span style={calculateColor((90 - pull.pity) / 90)}>{pull.pity}</span></span>
+        <span class="pity">{$t(pull.name)} <span style={calculateColor((90 - pull.pity) / 90)}>{pull.pity}</span></span>
       {/each}
     </div>
   {/if}