Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-03-21 17:54:13 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Use new localizations in web components

Browse Source
This commit is contained in:
Matt Isenhower 2022-10-17 20:34:23 -07:00
parent 47d0abb747
commit 9a41cd3cdf
5 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/common/i18n.mjs
View File

@ -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() {

2
src/components/gear/DailyDropGear.vue
View File

@ -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>

8
src/components/gear/GearCard.vue
View File

@ -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>

8
src/components/gear/GearCardHorizontal.vue
View File

@ -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>

2
src/components/salmonrun/SalmonRunWeapons.vue
View File

@ -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"
/>