From 9a41cd3cdf67fe44b5fd4db1b3c0dd012e26fa94 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Mon, 17 Oct 2022 20:34:23 -0700
Subject: [PATCH] Use new localizations in web components

---
 src/common/i18n.mjs                           | 21 +++++++++++++++++++
 src/components/gear/DailyDropGear.vue         |  2 +-
 src/components/gear/GearCard.vue              |  8 +++----
 src/components/gear/GearCardHorizontal.vue    |  8 +++----
 src/components/salmonrun/SalmonRunWeapons.vue |  2 +-
 5 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/common/i18n.mjs b/src/common/i18n.mjs
index 42d6ef7..3978984 100644
--- a/src/common/i18n.mjs
+++ b/src/common/i18n.mjs
@@ -19,6 +19,8 @@ export function initializeI18n() {
       messages: { ...languages },
     });
 
+    loadLocale();
+
     // Listen for local storage changes
     window.addEventListener('storage', reload);
   }
@@ -28,6 +30,25 @@ export function initializeI18n() {
 
 function reload() {
   i18n.global.locale.value = currentLocale().code;
+  loadLocale();
+}
+
+async function loadLocale() {
+  let locale = currentLocale().code;
+  let response = await fetch(`/data/locale/${locale}.json`);
+
+  if (!response.ok) {
+    console.error(response);
+
+    return;
+  }
+
+  let json = await response.json();
+
+  i18n.global.setLocaleMessage(locale, {
+    ...i18n.global.getLocaleMessage(locale),
+    splatnet: json,
+  });
 }
 
 function currentLocale() {
diff --git a/src/components/gear/DailyDropGear.vue b/src/components/gear/DailyDropGear.vue
index 00521fe..06b4286 100644
--- a/src/components/gear/DailyDropGear.vue
+++ b/src/components/gear/DailyDropGear.vue
@@ -17,7 +17,7 @@
             <img src="@/assets/img/gesotown-daily-drop-bg.png" class="w-64" />
             <div class="absolute inset-0 flex items-center ml-4">
               <div class="font-splatoon2 text-lg">
-                {{ brand.brand.name }}
+                {{ $t(`splatnet.brands.${brand.brand.id}.name`, brand.brand.name) }}
               </div>
             </div>
           </div>
diff --git a/src/components/gear/GearCard.vue b/src/components/gear/GearCard.vue
index 8cc17e7..ac31e8a 100644
--- a/src/components/gear/GearCard.vue
+++ b/src/components/gear/GearCard.vue
@@ -11,11 +11,11 @@
       <!-- Powers -->
       <div>
         <div class="flex items-center space-x-px">
-          <div :title="gear.primaryGearPower.name" class="bg-black rounded-full">
+          <div :title="$t(`splatnet.powers.${gear.primaryGearPower.__splatoon3ink_id}.name`, gear.primaryGearPower.name)" class="bg-black rounded-full">
             <img :src="gear.primaryGearPower.image.url" class="h-8" />
           </div>
 
-          <div v-for="(power, i) in gear.additionalGearPowers" :key="i" :title="power.name" class="bg-black rounded-full">
+          <div v-for="(power, i) in gear.additionalGearPowers" :key="i" :title="$t(`splatnet.powers.${power.__splatoon3ink_id}.name`, power.name)" class="bg-black rounded-full">
             <img :src="power.image.url" class="h-6" />
           </div>
         </div>
@@ -28,7 +28,7 @@
         </div>
         <div class="absolute inset-0 flex items-center justify-center">
           <div class="font-splatoon2 text-sm xl:text-base ss:text-lg text-shadow">
-            {{ gear.name }}
+            {{ $t(`splatnet.gear.${gear.__splatoon3ink_id}.name`, gear.name) }}
           </div>
         </div>
       </div>
@@ -49,7 +49,7 @@
       <div class="relative rotate-2">
         <img src="@/assets/img/gesotown-brand-bg.png" class="w-10" />
         <div class="absolute inset-0 p-2">
-          <img :src="gear.brand.image.url" class="w-full h-full" :title="gear.brand.name" />
+          <img :src="gear.brand.image.url" class="w-full h-full" :title="$t(`splatnet.brands.${gear.brand.id}.name`, gear.brand.name)" />
         </div>
       </div>
     </div>
diff --git a/src/components/gear/GearCardHorizontal.vue b/src/components/gear/GearCardHorizontal.vue
index dfc5a9c..ee41bfb 100644
--- a/src/components/gear/GearCardHorizontal.vue
+++ b/src/components/gear/GearCardHorizontal.vue
@@ -16,21 +16,21 @@
 
       <div class="flex items-center space-x-2">
         <div class="bg-white h-6 aspect-square rounded">
-          <img :src="gear.brand.image.url" :title="gear.brand.name" />
+          <img :src="gear.brand.image.url" :title="$t(`splatnet.brands.${gear.brand.id}.name`, gear.brand.name)" />
         </div>
 
         <div class="flex-1 font-splatoon2 text-shadow overflow-hidden overflow-ellipsis whitespace-nowrap">
-          {{ gear.name }}
+          {{ $t(`splatnet.gear.${gear.__splatoon3ink_id}.name`, gear.name) }}
         </div>
       </div>
 
       <div class="flex justify-between">
         <div class="flex items-center space-x-px">
-          <div :title="gear.primaryGearPower.name" class="bg-black rounded-full">
+          <div :title="$t(`splatnet.powers.${gear.primaryGearPower.__splatoon3ink_id}.name`, gear.primaryGearPower.name)" class="bg-black rounded-full">
             <img :src="gear.primaryGearPower.image.url" class="h-8" />
           </div>
 
-          <div v-for="(power, i) in gear.additionalGearPowers" :key="i" :title="power.name" class="bg-black rounded-full">
+          <div v-for="(power, i) in gear.additionalGearPowers" :key="i" :title="$t(`splatnet.powers.${power.__splatoon3ink_id}.name`, power.name)" class="bg-black rounded-full">
             <img :src="power.image.url" class="h-6" />
           </div>
         </div>
diff --git a/src/components/salmonrun/SalmonRunWeapons.vue b/src/components/salmonrun/SalmonRunWeapons.vue
index 389f77d..7e63422 100644
--- a/src/components/salmonrun/SalmonRunWeapons.vue
+++ b/src/components/salmonrun/SalmonRunWeapons.vue
@@ -3,7 +3,7 @@
     <div v-for="(weapon, i) in props.weapons" :key="i">
       <img
         :src="weapon.image.url"
-        :title="weapon.name"
+        :title="$t(`splatnet.weapons.${weapon.__splatoon3ink_id}.name`, weapon.name)"
         class="aspect-square hover:scale-[1.15] hover:z-10 transition-transform"
         :class="weaponClass"
         />