Merge pull request 'update' (#4) from main into malouze-cooking

Reviewed-on: https://codeberg.org/adrien-lsh/ft_transcendence/pulls/4

frontend/static/js/api/LanguageManager.js

@@ -0,0 +1,45 @@
+export default class LanguageManager {
+	constructor() {
+		this.availableLanguages = ['en', 'fr'];
+
+		this.currentLang = 'en'
+		this.chosenLang = localStorage.getItem('preferedLanguage') || this.currentLang;
+		if (this.chosenLang !== this.currentLang && this.availableLanguages.includes(this.chosenLang)) {
+			this.translatePage();
+		}
+	}
+
+	async translatePage() {
+		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}`);
+			return 1;
+		}
+		document.querySelectorAll('[data-i18n]').forEach(el => {
+			let key = el.getAttribute('data-i18n');
+			el.innerHTML = translation[key];
+		})
+
+		this.currentLang = this.chosenLang;
+		return 0;
+	}
+
+	async changeLanguage(lang) {
+		if (lang === this.currentLang || !this.availableLanguages.includes(lang))
+			return;
+
+		this.chosenLang = lang;
+		if (await this.translatePage() !== 0)
+			return;
+
+		localStorage.setItem('preferedLanguage', lang);
+	}
+}

frontend/static/js/api/MyProfile.js

@@ -15,7 +15,7 @@ class MyProfile extends Profile
 	/**
 	 * 
 	 * @param {*} form_data 
-	 * @returns 
+	 * @returns {Promise<Object>}
 	 */
 	async change_avatar(form_data)
 	{

frontend/static/js/api/account.js

@@ -16,7 +16,7 @@ class Account
 	/**
 	 * @param {String} username 
 	 * @param {String} password 
-	 * @returns 
+	 * @returns {?Promise<Object>}
 	 */
 	async create(username, password)
 	{
@@ -33,7 +33,7 @@ class Account
 
 	/**
 	 * @param {String} password 
-	 * @returns 
+	 * @returns {?Promise<Object>}
 	 */
 	async delete(password)
 	{
@@ -52,7 +52,7 @@ class Account
 
 	/**
 	 * Get account data (username)
-	 * @returns 
+	 * @returns {?Promise<Object>}
 	 */
 	async get()
 	{
@@ -71,7 +71,7 @@ class Account
 	 * 
 	 * @param {*} data 
 	 * @param {Number} password 
-	 * @returns 
+	 * @returns {?Object}
 	 */
 	async update(data, password)
 	{

frontend/static/js/api/client.js

@@ -7,6 +7,7 @@ import { navigateTo } from "../index.js"
 import { Tourmanents } from "./tournament/tournaments.js";
 import {Notice} from "./chat/notice.js"
 import { Channel } from "./chat/channel.js";
+import LanguageManager from './LanguageManager.js'
 
 function getCookie(name)
 {
@@ -70,11 +71,13 @@ class Client
 		 * @type {Notice}
 		 */
 		this.notice = new Notice(this);
+
+		this.lang = new LanguageManager;
 	}
 
 	/**
 	 * The only right way to determine is the user is logged
-	 * @returns {Boolean}
+	 * @returns {Promise<Boolean>}
 	 */
 	async isAuthentificate()
 	{
@@ -87,7 +90,7 @@ class Client
 	 * Send a GET request to %uri%
 	 * @param {String} uri 
 	 * @param {*} data 
-	 * @returns {Response}  
+	 * @returns {Promise<Response>}  
 	 */
 	async _get(uri, data)
 	{
@@ -102,7 +105,7 @@ class Client
 	 * Send a POST request
 	 * @param {String} uri 
 	 * @param {*} data 
-	 * @returns {Response} 
+	 * @returns {Promise<Response>} 
 	 */
     async _post(uri, data)
     {
@@ -121,7 +124,7 @@ class Client
 	 * Send a DELETE request
 	 * @param {String} uri 
 	 * @param {String} data 
-	 * @returns {Response} 
+	 * @returns {Promise<Response>} 
 	 */
 	async _delete(uri, data)
     {
@@ -140,7 +143,7 @@ class Client
 	 * Send a PATCH request with json
 	 * @param {String} uri 
 	 * @param {*} data 
-	 * @returns {Response} 
+	 * @returns {Promise<Response>} 
 	 */
 	async _patch_json(uri, data)
     {
@@ -159,7 +162,7 @@ class Client
 	 * Send a PATCH request with file
 	 * @param {String} uri 
 	 * @param {*} file 
-	 * @returns {Response}
+	 * @returns {Promise<Response>}
 	 */
 	async _patch_file(uri, file)
     {
@@ -175,7 +178,7 @@ class Client
 
 	/**
 	 * Change logged state. Use It if you recv an 403 error
-	 * @param {Boolean} state 
+	 * @param {Promise<?>} state 
 	 * @returns 
 	 */
 	async _update_logged(state)
@@ -207,7 +210,7 @@ class Client
 	 * Loggin the user
 	 * @param {String} username 
 	 * @param {String} password 
-	 * @returns 
+	 * @returns {Promise<Response>}
 	 */
 	async login(username, password)
 	{
@@ -220,6 +223,7 @@ class Client
 
 	/**
 	 * Logout the user
+	 * @returns {Promise<?>}
 	 */
 	async logout()
 	{
@@ -229,7 +233,7 @@ class Client
 
 	/**
 	 * Determine if the user is logged. NEVER USE IT, USE isAuthentificated()
-	 * @returns {Boolean}
+	 * @returns {Promise<Boolean>}
 	 */
 	async _test_logged()
 	{

frontend/static/js/api/matchmaking.js

@@ -19,7 +19,7 @@ class MatchMaking
 	 * @param {CallableFunction} receive_func 
 	 * @param {CallableFunction} disconnect_func 
 	 * @param {Number} mode The number of players in a game 
-	 * @returns {undefined}
+	 * @returns {Promise<?>}
 	 */
 	async start(receive_func, disconnect_func, mode)
 	{
@@ -50,6 +50,9 @@ class MatchMaking
 		this.disconnect_func(event);
 	}
 
+	/**
+	 * @returns {Promise<?>}
+	 */
 	async stop()
 	{
 		if (this._socket)

frontend/static/js/api/profile.js

@@ -33,6 +33,10 @@ class Profile
 		this.isBlocked = false;
 	}
 
+	/**
+	 * 
+	 * @returns {Promise<*>}
+	 */
 	async init()
 	{
 		let response = await this.client._get(`/api/profiles/${this.username}`);

frontend/static/js/api/profiles.js

@@ -15,7 +15,7 @@ class Profiles
 
 	/**
 	 * 
-	 * @returns {[Profile]}
+	 * @returns {Promise<[Profile]>}
 	 */
 	async all()
 	{
@@ -45,7 +45,7 @@ class Profiles
 	/**
 	 * Block a user
 	 * @param {Number} user_id 
-	 * @returns 
+	 * @returns {Promise<Object>}
 	 */
 	async block(user_id) {
 
@@ -62,7 +62,7 @@ class Profiles
 	/**
 	 * Unblock a user
 	 * @param {Number} user_id 
-	 * @returns 
+	 * @returns {Promise<Object>}
 	 */
 	async deblock(user_id) {
 

frontend/static/js/api/tournament/tournament.js

@@ -73,6 +73,10 @@ class Tourmanent
 		this.connected = false;
 	}
 
+	/**
+	 * 
+	 * @returns {Promise<?>}
+	 */
 	async init()
 	{
 		let response = await this.client._get(`/api/tournaments/${id}`);
@@ -108,6 +112,12 @@ class Tourmanent
 		this._socket.send(JSON.stringify({participate: ""}));
 	}
 
+	/**
+	 * Join the tournament Websocket
+	 * @param {CallableFunction} receive_func 
+	 * @param {CallableFunction} disconnect_func 
+	 * @returns {?}
+	 */
 	async join(receive_func, disconnect_func)
 	{
 		if (!await this.client.isAuthentificate())

frontend/static/js/api/tournament/tournaments.js

@@ -17,7 +17,7 @@ class Tourmanents
 	/**
 	 * 
 	 * @param {Number} id 
-	 * @returns 
+	 * @returns {?Promise<Tournament>}
 	 */
 	async getTournament(id)
 	{
@@ -47,6 +47,7 @@ class Tourmanents
 
 	/**
 	 * @param {String} state must be "finished", or "started", or "waiting". Any other return all elements
+	 * @returns {?Promise<[Tourmanent]>}
 	 */
 	async search(state)
 	{
@@ -76,6 +77,10 @@ class Tourmanents
 		return tournaments;
 	}
 
+	/**
+	 * Get all tournaments
+	 * @returns {?Promise<[Tourmanent]>}
+	 */
 	async all()
 	{
 		return await this.search("");

frontend/static/js/index.js

@@ -136,6 +136,12 @@ document.addEventListener("DOMContentLoaded", async () => {
             navigateTo(e.target.href.slice(location.origin.length));
         }
     });
+
+	//Languages
+	Array.from(document.getElementById('languageSelector').children).forEach(el => {
+		el.onclick = _ => client.lang.changeLanguage(el.value);
+	});
+
 	await client.isAuthentificate();
     router(location.pathname);
 	document.querySelector('a[href=\'' + location.pathname + '\']')?.classList.add('active');

frontend/static/js/lang/en.json

@@ -0,0 +1,9 @@
+{
+	"navbarSearch": "Search",
+	"navbarHome": "Home",
+	"navbarLogin": "Login",
+	"navbarRegister": "Register",
+	"navbarProfile": "My Profile",
+	"navbarSettings": "Settings",
+	"navbarLogout": "Logout"
+}

frontend/static/js/lang/fr.json

@@ -0,0 +1,9 @@
+{
+	"navbarSearch": "Recherche",
+	"navbarHome": "Maison",
+	"navbarLogin": "Se connecter",
+	"navbarRegister": "S'inscrire",
+	"navbarProfile": "Mon Profil",
+	"navbarSettings": "Paramètres",
+	"navbarLogout": "Se déconnecter"
+}

frontend/templates/index.html

@@ -12,23 +12,32 @@
 	<div class="container-fluid">
 		<div class="navbar-nav d-flex flex-row gap-2">
 			<a href="/" class="nav-link" data-link>Dashboard</a>
-			<a href="/search" class="nav-link" data-link>Search</a>
-			<a href="/home" class="nav-link" data-link>Home</a>
+			<a data-i18n='navbarSearch' href="/search" class="nav-link" data-link>Search</a>
+			<a data-i18n='navbarHome' href="/home" class="nav-link" data-link>Home</a>
 		</div>
-		<div class="navbar-nav justify-content-end">
+		<div class="navbar-nav justify-content-end d-flex flex-row gap-2">
+			<div class='nav-item dropdown-center me-2'>
+				<a class='nav-link dropdown-toggle' role='button' data-bs-toggle='dropdown'>
+					Lang.
+				</a>
+				<div id='languageSelector' class='dropdown-menu dropdown-menu-end position-absolute text-center px-2' style='min-width: 65px'>
+					<button value='en' type='button' class="dropdow-item nav-link text-center py-1">&#127468;&#127463; EN</a>
+					<button value='fr' type='button' class="dropdow-item nav-link text-center py-1">&#127467;&#127479; FR</a>
+				</div>
+			</div>
 			<div id='navbarLoggedOut' class='d-flex flex-row gap-2'>
-				<a href="/login" class="nav-link" data-link>Login</a>
-				<a href="/register" class="nav-link" data-link>Register</a>
+				<a data-i18n='navbarLogin' href="/login" class="nav-link" data-link>Login</a>
+				<a data-i18n='navbarRegister' href="/register" class="nav-link" data-link>Register</a>
 			</div>
 			<div id='navbarLoggedIn' class='d-none nav-item dropdown'>
 				<a id='navbarDropdownButton' class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
 					Me
 				</a>
 				<div class='dropdown-menu dropdown-menu-end position-absolute text-end px-2' style='min-width: 100px'>
-					<a id='myProfileLink' href='' class="dropdow-item nav-link pt-1" data-link>My Profile</a>
-					<a href="/me" class="dropdow-item nav-link pt-0" data-link>Settings</a>
+					<a data-i18n='navbarProfile' id='myProfileLink' href='' class="dropdow-item nav-link pt-1" data-link>My Profile</a>
+					<a data-i18n='navbarSettings' href="/me" class="dropdow-item nav-link pt-0" data-link>Settings</a>
 					<hr class='dropdown-separator my-auto mx-1'></hr>
-					<a href="/logout" class="dropdow-item nav-link pb-1" data-link>Logout</a>
+					<a data-i18n='navbarLogout' href="/logout" class="dropdow-item nav-link pb-1" data-link>Logout</a>
 				</div>
 			</div>
 		</div>

run.sh

@@ -1,10 +1,5 @@
 #!/bin/bash
 
-mkdir -p '/nfs/homes/'$USER'/.local/share/backgrnd'
-cp ''$PWD'/EmojiNerdYellowBackground.jpg' '/nfs/homes/'$USER'/.local/share/backgrnd'
-gsettings set org.gnome.desktop.background picture-uri '/nfs/homes/'$USER'/.local/share/backgrnd/EmojiNerdYellowBackground.jpg'
-gsettings set org.gnome.desktop.background picture-uri-dark '/nfs/homes/'$USER'/.local/share/backgrnd/EmojiNerdYellowBackground.jpg'
-
 python3 -m venv .env
 source .env/bin/activate
 pip install -r requirements.txt