feat: devweb - Make translations on lobby page and refacto websocket in js file

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"); %>
 
-
+<layout:base title="${translator.translate('lobby_title')}">
-<layout:base>
+    <jsp:attribute name="head">
+        <script defer type="module" src="${pageContext.request.contextPath}/static/js/websockets/connected-users-websocket.js"></script>
+    </jsp:attribute>
+    <jsp:body>
         <component:hero>
             <div class="columns">
                 <div class="column">
-                <component:card title="Menu principal">
+                    <component:card title="${translator.translate('lobby_title')}">
                         <ul>
-                        <li><a href="${pageContext.request.contextPath}/new">Nouvelle partie</a></li>
+                            <li><a href="${pageContext.request.contextPath}/new">${translator.translate('lobby_new_game')}</a></li>
-                        <li><a href="${pageContext.request.contextPath}/rules">Règles du jeu</a></li>
+                            <li><a href="${pageContext.request.contextPath}/rules">${translator.translate('lobby_rules')}</a></li>
                         </ul>
                     </component:card>
                 </div>
                 <div class="column">
-                <component:card title="Utilisateurs connectés">
+                    <component:card title="${translator.translate('lobby_title')}">
                         <component:connected-user-list/>
                     </component:card>
                 </div>
             </div>
         </component:hero>
+    </jsp:body>
 </layout:base>

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"); %>
+<input type="hidden" id="user_id" value="${user.getId()}">
 <table id="connected-user-list" class="table is-fullwidth">
     <thead>
     <tr>
-        <th>Nom d'utilisateur</th>
+        <th>${translator.translate('lobby_connected_users_username')}</th>
-        <th>Nombre de parties jouées</th>
+        <th>${translator.translate('lobby_connected_users_played_games')}</th>
-        <th>Nombre de victoires</th>
+        <th>${translator.translate('lobby_connected_users_wins')}</th>
-        <th>Score moyen</th>
+        <th>${translator.translate('lobby_connected_users_average_score')}</th>
     </tr>
     </thead>
     <tbody></tbody>
 </table>
 
-<script defer type="module">
-    import WebsocketToolkit from "${pageContext.request.contextPath}/static/js/WebsocketToolkit.js";
-
-    let users = [];
-    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);
-        });
-    }
-
-    // Create a new WebSocket
-    const url = new URL(window.location.href);
-    url.pathname = "${pageContext.request.contextPath}/ws/users/${user.id}";
-    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;
-        if (confirm(from.username + " vous a invité à rejoindre sa partie")) {
-            window.location.href = "${pageContext.request.contextPath}/game?id=" + game_id;
-        }
-    })
-    ws.onError((error) => console.error(error));
-    ws.onClose(() => console.log("Disconnected from the server"));
-</script>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag

@@ -13,7 +13,7 @@
         </div>
     </div>
     <div class="field">
-        <label class="label" for="email">${translator.translate('user_username')}</label>
+        <label class="label" for="email">${translator.translate('user_email')}</label>
         <div class="control has-icons-left">
             <input id="old-email" name="oldEmail" type="hidden" value="${user.email}" class="input is-fullwidth" required>
             <input id="email" name="email" type="email" value="${user.email}" class="input is-fullwidth" required>

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

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");

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"));