lang: improved, Home view translation

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`;
+		await this.loadDict(this.chosenLang);
-		let translation = await fetch(dictUrl).then(response => {
+		if (!this.dict)
-			if (response.status !== 200)
-				return null;
-			return response.json();
-		});
-		if (!translation) {
-			console.log(`No translation found for language ${this.chosenLang}`);
 			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;
 	}
 }

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;
 
@@ -140,12 +142,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 }

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"
 }

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"
 }

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 */ `
-			<h1>HOME</h1>
+			<h1>${client.lang.get('homeTitle', 'Home')}</h1>
-            <a href="/matchmaking" class="nav__link" data-link>Play a game</a>
+            <a href="/matchmaking" data-link>${client.lang.get('homeOnline', 'Play online')}</a>
-            <a href="/games/offline" class="nav__link" data-link>Play offline</a>
+            <a href="/games/offline" data-link>${client.lang.get('homeOffline', 'Play offline')}</a>
-            <a href="/me" class="nav__link" data-link>Me</a>
+            <a href="/me" data-link>${client.lang.get('homeMe', 'Me')}</a>
-            <a href="/logout" class="nav__link" data-link>Logout</a>
+            <a href="/logout" data-link>${client.lang.get('homeLogout', 'Logout')}</a>
         `;
     }
 }