feat(i18n): update i18n functions

src/i18n.ts

@@ -1,23 +1,41 @@
 import en from '@/locales/en.json'
+import { useLocalStorage } from '@vueuse/core'
+import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
+import { useStore } from './store'
+
+export const availableLocales = ['en', 'ru']
+export const selectedLanguage = useLocalStorage('language', getBrowserLanguage())
 
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
-  availableLocales: ['en', 'ru'],
+  availableLocales,
   messages: {
     en,
   },
 })
 
-export function setI18nLanguage(locale: string): void {
-  // i18n.global.locale.value = locale as 'en' | 'ru'
+export async function setLanguage(locale: string) {
+  const store = useStore()
+  await loadLocaleMessages(locale)
+  i18n.global.locale.value = locale
+  selectedLanguage.value = locale
   document.querySelector('html')?.setAttribute('lang', locale)
+  store.loadData(locale)
 }
 
-export async function loadLocaleMessages(locale: string): Promise<void> {
-  const messages = await import(/* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`)
+export async function loadLocaleMessages(locale: string) {
+  const messages = await import(`./locales/${locale}.json`)
   i18n.global.setLocaleMessage(locale, messages.default)
+  return nextTick()
+}
+
+function getBrowserLanguage() {
+  if (!navigator.language) return 'en'
+  const navigatorLanguage = navigator.language.trim().split(/-|_/)[0]
+  if (availableLocales.indexOf(navigatorLanguage) > -1) return navigatorLanguage
+  else return 'en'
 }
 
 export default i18n

src/store.ts

@@ -57,13 +57,26 @@ export const useStore = defineStore('data', {
     },
   },
   actions: {
-    initData() {
+    loadData(locale = 'en') {
       const tables = ['classes', 'creatures', 'heroes', 'skills', 'levels', 'terrains', 'spells', 'towns']
 
+      // dynamic load data modules
       const promises = tables.map(async (table: string) => {
-        // dynamic load data module
-        const data = await import(`./assets/database/${table}.ts`)
-        this[table] = data[table]
+        // load original data if this not exist in store
+        if (!this[table].length || locale === 'en') {
+          const originalData = await import(`./assets/database/${table}.ts`)
+          this[table] = originalData[table]
+        }
+        if (locale === 'en') return
+
+        // load translation data
+        const data = await import(`./assets/database/locales/${locale}/${table}.ts`)
+        this[table] = this[table].map((tableData: Record<string, unknown>, index: number) => {
+          return {
+            ...tableData,
+            ...data[table][index],
+          }
+        })
       })
       Promise.all(promises).then(() => (this.isDataLoaded = true))
     },