From 90de82ba204b343830d0e84e4434088a7184b8cc Mon Sep 17 00:00:00 2001 From: BlossomiShymae <87099578+BlossomiShymae@users.noreply.github.com> Date: Mon, 9 Sep 2024 15:58:00 -0500 Subject: [PATCH] Add i18n support for data --- composables/useLocale.ts | 54 ++++++++++++++++++++++++++ layouts/default.vue | 3 ++ package-lock.json | 5 +++ package.json | 1 + pages/champions/index.vue | 10 ++++- pages/champions/overview/[id].vue | 14 +++++-- pages/companions/index.vue | 14 +++++-- pages/companions/overview/[id].vue | 11 +++++- pages/items/index.vue | 9 ++++- pages/items/overview/[id].vue | 12 ++++-- pages/loots/index.vue | 25 ++++++++---- pages/runes/index.vue | 11 +++++- pages/settings.vue | 20 ++++++++++ pages/summoner-emotes/index.vue | 14 +++++-- pages/summoner-icons/index.vue | 14 +++++-- pages/summoner-icons/overview/[id].vue | 11 +++++- pages/ward-skins/index.vue | 12 ++++-- pages/ward-skins/overview/[id].vue | 11 +++++- 18 files changed, 210 insertions(+), 41 deletions(-) create mode 100644 composables/useLocale.ts create mode 100644 pages/settings.vue diff --git a/composables/useLocale.ts b/composables/useLocale.ts new file mode 100644 index 0000000..e21ec20 --- /dev/null +++ b/composables/useLocale.ts @@ -0,0 +1,54 @@ + +const locales = { + "ar_ae": "Arabic (United Arab Emirates)", + "cs_cz": "Czech (Czech Republic)", + "de_de": "German (Germany)", + "default": "English (United States)", + "el_gr": "Greek (Greece)", + "en_au": "English (Australia)", + "en_gb": "English (United Kingdom)", + "en_ph": "English (Philippines)", + "en_sg": "English (Singapore)", + "es_ar": "Spanish (Argentina)", + "es_es": "Spanish (Spain)", + "es_mx": "Spanish (Mexico)", + "fr_fr": "French (France)", + "hu_hu": "Hungarian (Hungary)", + "it_it": "Italian (Italy)", + "ja_jp": "Japanese (Japan)", + "ko_kr": "Korean (South Korea)", + "pl_pl": "Polish (Poland)", + "pt_br": "Portuguese (Brazil)", + "ro_ro": "Romanian (Romania)", + "ru_ru": "Russian (Russia)", + "th_th": "Thai (Thailand)", + "tr_tr": "Turkish (Turkey)", + "vi_vn": "Vietnamese (Vietnam)", + "zh_cn": "Chinese", + "zh_my": "Chinese (Malaysia)", + "zh_tw": "Chinese (Taiwan)" +}; + +const currentLocale = ref(getLocale()); + +function getLocale(): string { + var currentLocale: string | null = localStorage.getItem("locale"); + if (currentLocale == null) { + currentLocale = "default"; + setLocale(currentLocale); + } + return currentLocale; +} + +function setLocale(locale: string): void { + localStorage.setItem("locale", locale); + currentLocale.value = locale; +} + +export default function useLocale() { + return { + locales, + currentLocale, + setLocale + }; +} \ No newline at end of file diff --git a/layouts/default.vue b/layouts/default.vue index d6e1f83..ce436d6 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -73,6 +73,9 @@ GitHub + + Settings + blossomishymae.github.io CommunityDragon diff --git a/package-lock.json b/package-lock.json index eb45a2e..afdfb72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "aos": "^2.3.4", "axios": "^1.6.8", "nuxt": "^3.11.2", + "nuxt-app": "file:", "vue": "^3.4.21", "vue-router": "^4.3.0" }, @@ -7507,6 +7508,10 @@ } } }, + "node_modules/nuxt-app": { + "resolved": "", + "link": true + }, "node_modules/nypm": { "version": "0.3.8", "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.8.tgz", diff --git a/package.json b/package.json index 651758d..90b66c6 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "aos": "^2.3.4", "axios": "^1.6.8", "nuxt": "^3.11.2", + "nuxt-app": "file:", "vue": "^3.4.21", "vue-router": "^4.3.0" }, diff --git a/pages/champions/index.vue b/pages/champions/index.vue index 93bbee6..4f8a6a5 100644 --- a/pages/champions/index.vue +++ b/pages/champions/index.vue @@ -37,9 +37,15 @@ \ No newline at end of file diff --git a/pages/champions/overview/[id].vue b/pages/champions/overview/[id].vue index 89216c6..7f390d9 100644 --- a/pages/champions/overview/[id].vue +++ b/pages/champions/overview/[id].vue @@ -49,14 +49,22 @@ import Badge from '~/components/Badge.vue'; import { useRoute } from 'vue-router'; import useClient from '../../../composables/useClient'; +import useLocale from '~/composables/useLocale'; const route = useRoute(); const id = route.params.id as unknown; const { client } = useClient(); -const champion = await client.champions.getAsync(id as number, {locale: "default", version: "latest"}); -const currentSkin = ref(champion.skins[0].getLoadScreen('latest')); +const { currentLocale } = useLocale(); +const getChampion = async () => await client.champions.getAsync(id as number, {locale: currentLocale.value, version: "latest"}); + +const champion = ref(await getChampion()); +watch(currentLocale, async () => { + champion.value = await getChampion(); +}); + +const currentSkin = ref(champion.value.skins[0].getLoadScreen('latest')); const swapLoadScreen = (id: number) => { - currentSkin.value = champion.skins.find((x) => x.id == id)?.getLoadScreen('latest') as string; + currentSkin.value = champion.value.skins.find((x) => x.id == id)?.getLoadScreen('latest') as string; } \ No newline at end of file diff --git a/pages/companions/index.vue b/pages/companions/index.vue index d3c28a0..9e34285 100644 --- a/pages/companions/index.vue +++ b/pages/companions/index.vue @@ -50,23 +50,29 @@ \ No newline at end of file diff --git a/pages/items/index.vue b/pages/items/index.vue index 63b7e07..b19c5a7 100644 --- a/pages/items/index.vue +++ b/pages/items/index.vue @@ -43,7 +43,14 @@ \ No newline at end of file diff --git a/pages/items/overview/[id].vue b/pages/items/overview/[id].vue index 5dfc3e8..12465b4 100644 --- a/pages/items/overview/[id].vue +++ b/pages/items/overview/[id].vue @@ -47,6 +47,7 @@ diff --git a/pages/loots/index.vue b/pages/loots/index.vue index f435aa6..b8e5359 100644 --- a/pages/loots/index.vue +++ b/pages/loots/index.vue @@ -41,42 +41,51 @@ import MaterialIcon from '../../components/MaterialIcon.vue'; import Pagination from "../../components/Pagination.vue"; import useClient from '../../composables/useClient'; +import useLocale from '~/composables/useLocale'; import useIsNumeric from "../../composables/useIsNumeric"; import usePagination from '../../composables/usePagination'; import { Loot } from '../../core/models'; const { client } = useClient(); +const { currentLocale } = useLocale(); const query = ref(""); const filter = ref(""); +const getLoots = async () => (await client.loots.listAsync({locale: currentLocale.value, version: "latest"})) + .sort((a, b) => a.id.localeCompare(b.id)) + .filter((x) => x.id != ""); +const getSummaries = async () => await client.championSummaries.listAsync({locale: currentLocale.value, version: "latest"}); const clearFilter = () => filter.value = ""; const applyFilter = (category: string) => filter.value = category; // Alphanumerically sort by id, remove null entries -const loots = (await client.loots.listAsync({locale: "default", version: "latest"})) - .sort((a, b) => a.id.localeCompare(b.id)) - .filter((x) => x.id != ""); +const loots = ref(await getLoots()); -const categories = new Set(loots.map((x) => x.type)); +const categories = new Set(loots.value.map((x) => x.type)); const { isNumeric } = useIsNumeric(); const p = computed(() => { let filtered = []; - filtered = loots.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase())); + filtered = loots.value.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase())); if (filter.value != "") - filtered = loots.filter((x) => x.type == filter.value); + filtered = loots.value.filter((x) => x.type == filter.value); return usePagination(filtered, 100); }); -const summaries = await client.championSummaries.listAsync({locale: "default", version: "latest"}); +const summaries = ref(await getSummaries()); const getLootImage = (loot: Loot) => { if (loot.type.includes('Statstone')) - return summaries.find((x) => loot.name.toLowerCase().includes(x.name.toLowerCase()))?.getIcon({locale: "default", version: "latest"}); + return summaries.value.find((x) => loot.name.toLowerCase().includes(x.name.toLowerCase()))?.getIcon({locale: "default", version: "latest"}); return loot.getImage('latest'); } + +watch(currentLocale, async() => { + loots.value = await getLoots(); + summaries.value = await getSummaries(); +}); \ No newline at end of file diff --git a/pages/runes/index.vue b/pages/runes/index.vue index d54b4e4..835aa48 100644 --- a/pages/runes/index.vue +++ b/pages/runes/index.vue @@ -35,8 +35,15 @@ \ No newline at end of file diff --git a/pages/settings.vue b/pages/settings.vue new file mode 100644 index 0000000..0efafeb --- /dev/null +++ b/pages/settings.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/pages/summoner-emotes/index.vue b/pages/summoner-emotes/index.vue index 4e8943f..99f8e9b 100644 --- a/pages/summoner-emotes/index.vue +++ b/pages/summoner-emotes/index.vue @@ -31,23 +31,29 @@ import Pagination from '../../components/Pagination.vue'; import Badge from '~/components/Badge.vue'; import useClient from '../../composables/useClient'; +import useLocale from '~/composables/useLocale'; import useIsNumeric from '../../composables/useIsNumeric'; import usePagination from '../../composables/usePagination'; const { client } = useClient(); +const { currentLocale } = useLocale(); +const getEmotes = async () => (await client.summonerEmotes.listAsync({locale: currentLocale.value, version: "latest"})) +.sort((a, b) => a.id - b.id); const query = ref(""); -const emotes = (await client.summonerEmotes.listAsync({locale: "default", version: "latest"})) - .sort((a, b) => a.id - b.id); +const emotes = ref(await getEmotes()); +watch(currentLocale, async() => { + emotes.value = await getEmotes(); +}); const { isNumeric } = useIsNumeric(); const p = computed(() => { let filtered = []; if (isNumeric(query.value)) - filtered = emotes.filter((x) => x.id == parseInt(query.value, 10)); + filtered = emotes.value.filter((x) => x.id == parseInt(query.value, 10)); else - filtered = emotes.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase())); + filtered = emotes.value.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase())); return usePagination(filtered, 24); }) diff --git a/pages/summoner-icons/index.vue b/pages/summoner-icons/index.vue index dbce8ec..065f9a8 100644 --- a/pages/summoner-icons/index.vue +++ b/pages/summoner-icons/index.vue @@ -49,23 +49,29 @@ \ No newline at end of file diff --git a/pages/ward-skins/index.vue b/pages/ward-skins/index.vue index a54c133..6943ddd 100644 --- a/pages/ward-skins/index.vue +++ b/pages/ward-skins/index.vue @@ -49,22 +49,28 @@ \ No newline at end of file