diff --git a/frontend/static/js/api/LanguageManager.js b/frontend/static/js/api/LanguageManager.js index 3e1c9b3..2c9ebb5 100644 --- a/frontend/static/js/api/LanguageManager.js +++ b/frontend/static/js/api/LanguageManager.js @@ -1,11 +1,17 @@ +import { reloadView } from '../index.js' + export default class LanguageManager { constructor() { this.availableLanguages = ['en', 'fr']; + this.dict = null; this.currentLang = 'en' this.chosenLang = localStorage.getItem('preferedLanguage') || this.currentLang; if (this.chosenLang !== this.currentLang && this.availableLanguages.includes(this.chosenLang)) { this.translatePage(); + this.currentLang = this.chosenLang; + } else { + this.loadDict(this.chosenLang); } } @@ -13,33 +19,48 @@ export default class LanguageManager { if (this.currentLang === this.chosenLang) return; - let dictUrl = `${location.origin}/static/js/lang/${this.chosenLang}.json`; - let translation = await fetch(dictUrl).then(response => { - if (response.status !== 200) - return null; - return response.json(); - }); - if (!translation) { - console.log(`No translation found for language ${this.chosenLang}`); + await this.loadDict(this.chosenLang); + if (!this.dict) return 1; - } + document.querySelectorAll('[data-i18n]').forEach(el => { let key = el.getAttribute('data-i18n'); - el.innerHTML = translation[key]; + el.innerHTML = this.dict[key]; }) + await reloadView(); - this.currentLang = this.chosenLang; return 0; } async changeLanguage(lang) { if (lang === this.currentLang || !this.availableLanguages.includes(lang)) - return; + return 1; this.chosenLang = lang; if (await this.translatePage() !== 0) - return; + return 1; + this.currentLang = this.chosenLang; localStorage.setItem('preferedLanguage', lang); + return 0; + } + + async loadDict(lang) { + let dictUrl = `${location.origin}/static/js/lang/${lang}.json`; + let response = await fetch(dictUrl); + + if (response.status !== 200) { + console.log(`No translation found for language ${lang}`); + return; + } + + this.dict = await response.json(); + } + + get(key, defaultTxt) { + if (!this.dict) + return defaultTxt; + + return this.dict[key] || defaultTxt; } } diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js index bfa0167..0c505cc 100644 --- a/frontend/static/js/index.js +++ b/frontend/static/js/index.js @@ -48,9 +48,11 @@ const navigateTo = async (uri) => { } }; +const reloadView = async _ => renderView(lastView); + async function renderView(view) { - let content = await view.getHtml(); + let content = await view?.getHtml(); if (content == null) return 1; @@ -141,12 +143,19 @@ document.addEventListener("DOMContentLoaded", async () => { //Languages Array.from(document.getElementById('languageSelector').children).forEach(el => { - el.onclick = _ => client.lang.changeLanguage(el.value); + el.onclick = async _ => { + if (await client.lang.changeLanguage(el.value)) + return; + document.querySelector('#languageSelector > .active')?.classList.remove('active'); + el.classList.add('active'); + }; }); + document.querySelector(`#languageSelector > [value=${client.lang.chosenLang}]`) + ?.classList.add('active'); await client.isAuthentificate(); router(location.pathname); document.querySelector('a[href=\'' + location.pathname + '\']')?.classList.add('active'); }); -export { client, navigateTo } +export { client, navigateTo, reloadView } diff --git a/frontend/static/js/lang/en.json b/frontend/static/js/lang/en.json index 3d9b14e..c558d5d 100644 --- a/frontend/static/js/lang/en.json +++ b/frontend/static/js/lang/en.json @@ -5,5 +5,10 @@ "navbarRegister": "Register", "navbarProfile": "My Profile", "navbarSettings": "Settings", - "navbarLogout": "Logout" + "navbarLogout": "Logout", + "homeTitle": "Home", + "homeOnline": "Play online", + "homeOffline": "Play offline", + "homeMe": "Me", + "homeLogout": "Logout" } diff --git a/frontend/static/js/lang/fr.json b/frontend/static/js/lang/fr.json index 3307204..76228c5 100644 --- a/frontend/static/js/lang/fr.json +++ b/frontend/static/js/lang/fr.json @@ -5,5 +5,10 @@ "navbarRegister": "S'inscrire", "navbarProfile": "Mon Profil", "navbarSettings": "Paramètres", - "navbarLogout": "Se déconnecter" + "navbarLogout": "Se déconnecter", + "homeTitle": "Maison", + "homeOnline": "Jouer en ligne", + "homeOffline": "Jouer hors ligne", + "homeMe": "Moi", + "homeLogout": "Se déconnecter" } diff --git a/frontend/static/js/views/HomeView.js b/frontend/static/js/views/HomeView.js index fb13511..1266d36 100644 --- a/frontend/static/js/views/HomeView.js +++ b/frontend/static/js/views/HomeView.js @@ -1,3 +1,4 @@ +import { client } from "../index.js"; import AbstractAuthentificateView from "./abstracts/AbstractAuthentifiedView.js"; export default class extends AbstractAuthentificateView { @@ -8,11 +9,11 @@ export default class extends AbstractAuthentificateView { async getHtml() { return /* HTML */ ` -

HOME

- Play a game - Play offline - Me - Logout +

${client.lang.get('homeTitle', 'Home')}

+ ${client.lang.get('homeOnline', 'Play online')} + ${client.lang.get('homeOffline', 'Play offline')} + ${client.lang.get('homeMe', 'Me')} + ${client.lang.get('homeLogout', 'Logout')} `; } }