From 0471eab01ce2b0def9bc6da7b2a9ab411dbb4f23 Mon Sep 17 00:00:00 2001 From: kmitresse Date: Wed, 12 Jun 2024 09:53:10 +0200 Subject: [PATCH] feat: devweb - Make translations on lobby page and refacto websocket in js file --- .../src/main/webapp/WEB-INF/pages/lobby.jsp | 42 ++++++----- .../tags/components/connected-user-list.tag | 75 ++----------------- .../webapp/WEB-INF/tags/forms/profile.tag | 2 +- .../src/main/webapp/WEB-INF/translations.json | 32 ++++++++ .../webapp/static/js/notification/success.js | 2 +- .../websockets/connected-users-websocket.js | 75 +++++++++++++++++++ 6 files changed, 140 insertions(+), 88 deletions(-) create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/websockets/connected-users-websocket.js diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/lobby.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/lobby.jsp index 151c5a8..76e3881 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/lobby.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/lobby.jsp @@ -1,24 +1,30 @@ +<%@ page import="uppa.project.web.translation.Translator" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %> <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %> +<% Translator translator = (Translator) request.getSession().getAttribute("translator"); %> - - - -
-
- - - + + + + + + +
+
+ + + +
+
+ + + +
-
- - - -
-
- + + diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/connected-user-list.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/connected-user-list.tag index a4ea74b..81451e5 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/connected-user-list.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/connected-user-list.tag @@ -2,81 +2,20 @@ <%@tag description="component/connected-user-list" pageEncoding="UTF-8" %> <%@tag import="com.google.gson.Gson" %> +<%@ tag import="uppa.project.web.translation.Translator" %> <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %> - +<% Translator translator = (Translator) request.getSession().getAttribute("translator"); %> + - - - - + + + +
Nom d'utilisateurNombre de parties jouéesNombre de victoiresScore moyen${translator.translate('lobby_connected_users_username')}${translator.translate('lobby_connected_users_played_games')}${translator.translate('lobby_connected_users_wins')}${translator.translate('lobby_connected_users_average_score')}
- diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag index 35b70a9..8c6a299 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag @@ -13,7 +13,7 @@
- +
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/translations.json b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/translations.json index 77743fb..716b2fc 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/translations.json +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/translations.json @@ -298,5 +298,37 @@ "back" : { "EN": "Back", "FR": "Retour" + }, + "lobby_title" : { + "EN": "Main Menu", + "FR": "Menu Principal" + }, + "lobby_connected_users" : { + "EN": "Connected users", + "FR": "Utilisateurs connectés" + }, + "lobby_new_game": { + "EN": "New game", + "FR": "Nouvelle partie" + }, + "lobby_rules": { + "EN": "Rules", + "FR": "Règles du jeu" + }, + "lobby_connected_users_username" : { + "EN": "Username", + "FR": "Nom d'utilisateur" + }, + "lobby_connected_users_played_games" : { + "EN": "Played games", + "FR": "Parties jouées" + }, + "lobby_connected_users_wins" : { + "EN": "Wins", + "FR": "Victoires" + }, + "lobby_connected_users_average_score" : { + "EN": "Average score", + "FR": "Score moyen" } } diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/notification/success.js b/S2/DevWeb/Projet/src/main/webapp/static/js/notification/success.js index f26d7d0..9d064f8 100644 --- a/S2/DevWeb/Projet/src/main/webapp/static/js/notification/success.js +++ b/S2/DevWeb/Projet/src/main/webapp/static/js/notification/success.js @@ -36,7 +36,7 @@ export function onSuccess(title, message) { const notificationTitle = document.createElement("p"); notificationTitle.classList.add("title", "is-6"); - notificationTitle.innerHTML = "Succès"; + notificationTitle.innerHTML = title; const notificationIcon = document.createElement("span"); notificationIcon.classList.add("icon"); diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/connected-users-websocket.js b/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/connected-users-websocket.js new file mode 100644 index 0000000..e5eec4d --- /dev/null +++ b/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/connected-users-websocket.js @@ -0,0 +1,75 @@ +import WebsocketToolkit from "../WebsocketToolkit.js"; + +let users = []; +const languageSelector = document.getElementById('language-select'); +function updateUsers() { + const table = document.querySelector('#connected-user-list tbody'); + + // Clear the table + table.innerHTML = ''; + + // Add the users to the table + users.forEach(user => { + const tr = document.createElement('tr'); + const tdUsername = document.createElement('td'); + tdUsername.dataset.id = user.id; + tdUsername.textContent = user.username; + const tdNbGames = document.createElement('td'); + tdNbGames.dataset.id = user.id; + tdNbGames.textContent = user.nbPlayedGames; + const tdNbWin = document.createElement('td'); + tdNbWin.dataset.id = user.id; + tdNbWin.textContent = user.nbWin + " (" + user.winRate + "%)"; + const tdScoreRate = document.createElement('td'); + tdScoreRate.dataset.id = user.id; + tdScoreRate.textContent = user.scoreRate + "%"; + + + tr.appendChild(tdUsername); + tr.appendChild(tdNbGames); + tr.appendChild(tdNbWin); + tr.appendChild(tdScoreRate); + table.appendChild(tr); + }); +} + +// Get the user id +const user = document.querySelector("#user_id") + +// Create a new WebSocket +const url = new URL(window.location.href); +const contextPath = url.pathname.substring(0, url.pathname.indexOf("/", 1) + 1) +console.log(url.pathname) +console.log(contextPath) +url.pathname = contextPath + "ws/users/"+user.value; +console.log(url.pathname) +url.protocol = "ws:" + +const ws = new WebsocketToolkit(url); +ws.onOpen(() => console.log("Connected to the server")); +ws.onMessage("init", (data) => { + users = data; + updateUsers(); +}); +ws.onMessage("addUser", (data) => { + users.push(data); + updateUsers(); +}); +ws.onMessage("removeUser", (data) => { + users = users.filter(user => user.id !== data.id); + updateUsers(); +}); +ws.onMessage("invite", (data) => { + const {from, to, game_id} = data; + let inviteMsg ; + if (languageSelector.value === "EN") { + inviteMsg = from.username + " invited you to join his game"; + } else { + inviteMsg = from.username + " vous a invité à rejoindre sa partie"; + } + if (confirm(from.username + inviteMsg)) { + window.location.href = contextPath+"game?id=" + game_id; + } +}) +ws.onError((error) => console.error(error)); +ws.onClose(() => console.log("Disconnected from the server"));