More location

client/src/locale/ca.json

@@ -3,7 +3,26 @@
     "create": "Create",
     "join": "Join",
     "view": "View",
-    "players": "Jugadores"
+    "players": "Jugadores",
+    "description": "Description",
+    "details": "Details",
+    "name": "Name",
+    "email": "Email",
+    "username": "Username",
+    "password": "Password",
+    "password-confirm": "Confirm your password",
+    "register": "Register"
+  },
+  "placeholders": {
+    "name": "John Doe",
+    "email": "john@doe.com",
+    "username": "Enter your username...",
+    "password": "Enter your password...",
+    "password-confirm": "Enter again your password..."
+  },
+  "register-admin": {
+    "title": "Register Admin Account",
+    "welcome-message": "<h1>Welcome!</h1><b>You have successfull setup Dragonroll!</b><p>Please create the admin account</p><p>Once the admin account has been created, you will be able to create user accounts that will be able to access Dragonroll</p><hr>"
   },
   "main-menu": {
     "title": "Dragonroll",
@@ -17,6 +36,10 @@
   },
   "settings": {
     "title": "Dragonroll settings",
+    "tabs": {
+      "account-settings": "Account Settings",
+      "site-administration": "Site Administration"
+    },
     "account": {
       "account-settings": "Account Settings",
       "language": "Language:"
@@ -50,5 +73,13 @@
   "systems": {
     "title": "Select a game system",
     "not-selected": "No game system selected"
+  },
+  "database": {
+    "title": "Database",
+    "tabs": {
+      "items": "Items",
+      "spells": "Spells",
+      "features": "Features"
+    }
   }
 }

client/src/locale/en-US.json

@@ -3,7 +3,26 @@
         "create": "Create",
         "join": "Join",
         "view": "View",
-        "players": "Jugadores"
+        "players": "Players",
+        "description": "Description",
+        "details": "Details",
+        "name": "Name",
+        "email": "Email",
+        "username": "Username",
+        "password": "Password",
+        "password-confirm": "Confirm your password",
+        "register": "Register"
+    },
+    "placeholders": {
+        "name": "John Doe",
+        "email": "john@doe.com",
+        "username": "Enter your username...",
+        "password": "Enter your password...",
+        "password-confirm": "Enter again your password..."
+    },
+    "register-admin": {
+        "title": "Register Admin Account",
+        "welcome-message": "<h1>Welcome!</h1><b>You have successfull setup Dragonroll!</b><p>Please create the admin account</p><p>Once the admin account has been created, you will be able to create user accounts that will be able to access Dragonroll</p><hr>"
     },
     "main-menu": {
         "title": "Dragonroll",
@@ -17,6 +36,10 @@
     },
     "settings": {
         "title": "Dragonroll settings",
+        "tabs": {
+            "account-settings": "Account Settings",
+            "site-administration": "Site Administration"
+        },
         "account": {
             "account-settings": "Account Settings",
             "language": "Language:"
@@ -52,6 +75,14 @@
     "systems": {
         "title": "Select a game system",
         "not-selected": "No game system selected"
+    },
+    "database": {
+        "title": "Database",
+        "tabs": {
+            "items": "Items",
+            "spells": "Spells",
+            "features": "Features"
+        }
     }
 
 }

client/src/locale/es-ES.json

@@ -3,7 +3,26 @@
     "create": "Crear",
     "join": "Entrar",
     "view": "Abrir",
-    "players": "Jugadores"
+    "players": "Jugadores",
+    "description": "Descripción",
+    "details": "Detalles",
+    "name": "Nombre",
+    "email": "Correo",
+    "username": "Nombre de usuario",
+    "password": "Contraseña",
+    "password-confirm": "Confirma tu contraseña",
+    "register": "Registrar-se"
+  },
+  "placeholders": {
+    "name": "John Doe",
+    "email": "john@doe.com",
+    "username": "Introduce tu nombre de usuario...",
+    "password": "Introduce tu contraseña...",
+    "password-confirm": "Vuelve a introducir tu contraseña..."
+  },
+  "register-admin": {
+    "title": "Registrar cuenta de administrador",
+    "welcome-message": "<h1>Bienvenido!</h1><b>Has configurado correctamente Dragonroll!</b><p>Porfavor, crea la cuenta de administrador</p><p>Una vez creada, esta cuenta te permitirá configurar el servidor y crear cuentas que puedan acceder a este</p><hr>"
   },
   "main-menu": {
     "title": "Dragonroll",
@@ -17,6 +36,10 @@
   },
   "settings": {
     "title": "Ajustes de Dragonroll",
+    "tabs": {
+      "account-settings": "Ajustes de cuenta",
+      "site-administration": "Administración"
+    },
     "account": {
       "account-settings": "Ajustes de la cuenta",
       "language": "Idioma:"
@@ -50,5 +73,13 @@
   "systems": {
     "title": "Selecciona un sistema de juego",
     "not-selected": "Ningún sistema de juego seleccionado"
+  },
+  "database": {
+    "title": "Base de datos",
+    "tabs": {
+      "items": "Items",
+      "spells": "Hechizos",
+      "features": "Características"
+    }
   }
 }

client/src/main.js

@@ -6,12 +6,8 @@ import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 import router from './router'
 
-import EN from './locale/en.json'
-import ES from './locale/es.json'
-import CA from './locale/ca.json'
-
 import mitt from 'mitt';
-import { GetUser, GetUserSetting } from './services/User'
+import { GetUser, GetUserSetting, LogoutUser } from './services/User'
 const emitter = mitt();
 
 const app = createApp(App);
@@ -29,18 +25,29 @@ console.clear();
 console.log("%cLoaded!!!", "color: #22ff22; font-size: 24px");
 
 // Determinem el locale
-let locale = 'en';
+let locale = 'en-US';
+
+let supportedLocales = ['en-US', 'es-ES', 'ca'];
+let navLocale = window.navigator.language;
+console.log(navLocale);
+
+if(supportedLocales.includes(navLocale)) locale = navLocale;
+
+try {
     if(GetUser()) locale = await GetUserSetting('lang');
+} catch(ex) {
+    LogoutUser();
+}
 console.log(locale);
 
 const i18n = createI18n({
     legacy: false,
     locale,
-    fallbackLocale: 'en',
+    fallbackLocale: 'en-US',
     messages: {
-        en: EN,
-        es: ES,
-        ca: CA
+        'en-US': (await import(`./locale/en-US.json`)).default,
+        'es-ES': (await import(`./locale/es-ES.json`)).default,
+        'ca': (await import(`./locale/ca.json`)).default,
     }
 });
 

client/src/services/User.js

@@ -41,7 +41,7 @@ function GetUserSetting(key){
             if(response.data.settings)
                 resolve(response.data.settings[key]);
             else resolve(undefined);
-        });
+        }).catch((ex) => reject(ex));
     });
 }
 

client/src/services/Windows.js

@@ -16,7 +16,7 @@ const defValues = {
     },
     'register': {
         id: 'register',
-        title: 'Register admin account',
+        title: 'register-admin.title',
     },
     'main_menu': {
         id: 'main_menu',
@@ -138,7 +138,7 @@ const defValues = {
     },
     'database': {
         id: 'database',
-        title: "Database",
+        title: "database.title",
         close: () => ClearWindow('database')
     }
 }

client/src/views/partials/Tabs.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { ref } from 'vue';
 const props = defineProps(['rows']);
-const rows = ref(props.rows);
 
 const rowDict = {}
-for(let i = 0; i < props.rows.length; i++) rowDict[props.rows[i].replace(/\s+/g, '-').toLowerCase()] = i;
-let selectedTab = ref(props.rows[0].replace(/\s+/g, '-').toLowerCase());
+for(let i = 0; i < props.rows.length; i++) rowDict[props.rows[i].id] = i;
+let selectedTab = ref(props.rows[0].id);
 
 function SelectTab(row){
     selectedTab.value = row;
@@ -16,15 +15,15 @@ function SelectTab(row){
 <template>
     <div class="tab-container">
         <div class="row">
-            <div class="toggler" :class="{ selected: row.replace(/\s+/g, '-').toLowerCase() == selectedTab }" v-for="row in rows" v-on:click.prevent="SelectTab(row.replace(/\s+/g, '-').toLowerCase())">
-                {{ row }}
+            <div class="toggler" :class="{ selected: row.id == selectedTab }" v-for="row in rows" v-on:click.prevent="SelectTab(row.id)">
+                {{ $t(row.value) }}
             </div>
         </div>
         <div class="tab-container-outer">
             <div v-for="row in rows" class="tab-content">
                 <TransitionGroup name="tab">
-                    <div class="tab-content-inner" v-show="row.replace(/\s+/g, '-').toLowerCase() == selectedTab" :key="row">
-                        <slot :name="row.replace(/\s+/g, '-').toLowerCase()" />
+                    <div class="tab-content-inner" v-show="row.id == selectedTab" :key="row.id">
+                        <slot :name="row.id" />
                     </div>
                 </TransitionGroup>
             </div>

client/src/views/windows/RegisterWindow.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n() 
 
 import VersionRender from '@/views/others/VersionRender.vue'
 import ErrorMessage from '@/views/others/ErrorMessage.vue'
@@ -74,37 +76,32 @@ function register(){
         <WindowHandle :window="id" ref="handle"></WindowHandle>
 
         <div class="window-content">
-            <div class="document">
-                <h1>Welcome!</h1>
-                <b>You have successfull setup Dragonroll!</b>
-                <p>Please create the admin account</p>
-                <p>Once the admin account has been created, you will be able to create user accounts that will be able to access Dragonroll</p>
-                <hr>
+            <div class="document" v-html="t('register-admin.welcome-message')">
             </div>
         <form v-on:submit.prevent="register">
             <div class="form-field">
-                <label for="name">Name</label>
-                <input id="name-field" type="text" placeholder="Aran Roig" name="name" v-model="name" autocomplete="off" >
+                <label for="name">{{$t('general.name')}}</label>
+                <input id="name-field" type="text" :placeholder="t('placeholders.name')" name="name" v-model="name" autocomplete="off" >
             </div>
             <div class="form-field">
-                <label for="email">Email</label>
-                <input id="email-field" type="email" placeholder="aran@aranroig.com" name="email" v-model="email" autocomplete="off" >
+                <label for="email">{{$t('general.email')}}</label>
+                <input id="email-field" type="email" :placeholder="t('placeholders.email')" name="email" v-model="email" autocomplete="off" >
             </div>
             
             <div class="form-field">
-                <label for="username">Username</label>
-                <input id="username-field" type="text" placeholder="Enter your username..." name="username" v-model="username" autocomplete="off" >
+                <label for="username">{{$t('general.username')}}</label>
+                <input id="username-field" type="text" :placeholder="t('placeholders.username')" name="username" v-model="username" autocomplete="off" >
             </div>
             <div class="form-field">
-                <label for="password">Password</label>
-                <input id="password-field" type="password" placeholder="Enter your password..." name="password" v-model="password" autocomplete="off" >
+                <label for="password">{{$t('general.password')}}</label>
+                <input id="password-field" type="password" :placeholder="t('placeholders.password')" name="password" v-model="password" autocomplete="off" >
             </div>
             <div class="form-field">
-                <label for="confirm-password">Confirm your password</label>
-                <input id="confirm-password-field" type="password" placeholder="Enter again your password..." name="confirm-password" v-model="confirmPassword" autocomplete="off" >
+                <label for="confirm-password">{{$t('general.password-confirm')}}</label>
+                <input id="confirm-password-field" type="password" :placeholder="t('placeholders.password-confirm')" name="confirm-password" v-model="confirmPassword" autocomplete="off" >
             </div>
             <div class="form-field">
-                <button class="btn-primary sound-click confirm-form-button">Register</button>
+                <button class="btn-primary sound-click confirm-form-button">{{$t('general.register')}}</button>
             </div>
         </form>
 

client/src/views/windows/SettingsWindow.vue

@@ -15,7 +15,7 @@ const data = props.data;
 
 let id = data.id;
 
-let rows = ref(["Account settings"]);
+let rows = ref([{id: "account-settings", value: "settings.tabs.account-settings"}]);
 
 const languageOptions = ref(["English", "Spanish", "Catalan"])
 const langSelector = ref(null);
@@ -23,15 +23,18 @@ const currentLanguage = ref("");
 
 onBeforeMount(() => {
     let codes = {
-        "en": "English",
-        "es": "Spanish",
+        "en-US": "English",
+        "es-ES": "Spanish",
         "ca": "Catalan"
     }
     GetUserSetting('lang').then(value => {
         currentLanguage.value = codes[value ?? 'en']
         console.log(currentLanguage.value)
     });
-    if(GetUser().admin) rows.value.push("Site Administration");
+    if(GetUser().admin) rows.value.push({
+        id: "site-administration",
+        value: "settings.tabs.site-administration"
+    });
 });
 
 onMounted(() => {
@@ -42,8 +45,8 @@ onMounted(() => {
 
 async function OnLanguageChange(value){
     let codes = {
-        "English": "en",
-        "Spanish": "es",
+        "English": "en-US",
+        "Spanish": "es-ES",
         "Catalan": "ca"
     }
     await SetUserSetting("lang", codes[value]);
@@ -64,7 +67,7 @@ async function OnLanguageChange(value){
                         <Dropdown :options="languageOptions" :onselect="OnLanguageChange" :selected="currentLanguage"></Dropdown>
                     </div>
                 </div>
-            </template>Hola
+            </template>
             <template #site-administration>
 
             </template>

client/src/views/windows/game/DatabaseWindow.vue

@@ -45,7 +45,11 @@ function OpenCreateItemPrompt(){
         <WindowHandle :window="id" ref="handle"></WindowHandle>
 
         <div class="main-container">
-            <Tabs :rows="['Items', 'Spells', 'Features']">
+            <Tabs :rows="[
+                    {id: 'items', value: 'database.tabs.items'}, 
+                    {id: 'spells', value: 'database.tabs.spells'},
+                    {id: 'features', value: 'database.tabs.features'}
+                ]">
                 <template #items>
                     <ConceptList :elements="elements"></ConceptList>
                 </template>

client/src/views/windows/game/dnd-5e/ItemSheet.vue

@@ -168,7 +168,10 @@ onMounted(() => {
                     </div>
                 </div>
             </div>
-            <Tabs :rows="['Description', 'Details']">
+            <Tabs :rows="[
+                {id: 'description', value: 'general.description'},
+                {id: 'details', value: 'general.details'}
+            ]">
                 <template #description>
                     <div class="description-container">
                         <div class="description-sidebar">

prebuild.js

@@ -41,8 +41,8 @@ console.log("Generated " + iconCount + " icons");
 
 // Locale generation
 const locales = [
-    './client/src/locale/en.json',
-    './client/src/locale/es.json',
+    './client/src/locale/en-US.json',
+    './client/src/locale/es-ES.json',
     './client/src/locale/ca.json',
 ];