From ae5d39abbf73adc782c0c92655b90086564988b8 Mon Sep 17 00:00:00 2001
From: kmitresse <kmitresse@etud.univ-pau.fr>
Date: Thu, 13 Jun 2024 10:16:04 +0200
Subject: [PATCH] refacto: devweb - structure modal and inviting websocket
 script in js files

---
 .../project/web/translation/Translator.java   |   2 -
 .../src/main/webapp/WEB-INF/pages/game.jsp    | 114 +-----------------
 .../tags/components/game-room-information.tag |   4 +-
 .../modal/connected-users-list-modal.tag      |   1 +
 .../Projet/src/main/webapp/static/js/modal.js |  21 ++++
 .../websockets/connected-users-websocket.js   |   3 -
 .../websockets/player-management-websocket.js |  99 +++++++++++++++
 7 files changed, 125 insertions(+), 119 deletions(-)
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/modal.js
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/websockets/player-management-websocket.js

diff --git a/S2/DevWeb/Projet/src/main/java/uppa/project/web/translation/Translator.java b/S2/DevWeb/Projet/src/main/java/uppa/project/web/translation/Translator.java
index a925e50..2b0057e 100644
--- a/S2/DevWeb/Projet/src/main/java/uppa/project/web/translation/Translator.java
+++ b/S2/DevWeb/Projet/src/main/java/uppa/project/web/translation/Translator.java
@@ -47,8 +47,6 @@ public class Translator {
   }
 
   public String translate(String text) {
-    System.out.println("Translating: " + text);
-    System.out.println("langue: " + this.language);
     return this.translations.get(text).getAsJsonObject().get(this.language).getAsString();
   }
 
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/game.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/game.jsp
index 83d05c6..036ef7b 100644
--- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/game.jsp
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/game.jsp
@@ -10,6 +10,7 @@
     <jsp:attribute name="head">
         <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/card.css">
         <script defer type="module" src="${pageContext.request.contextPath}/static/js/websockets/player-management-websocket.js"></script>
+        <script defer type="module" src="${pageContext.request.contextPath}/static/js/modal.js"></script>
     </jsp:attribute>
     <jsp:body>
 
@@ -41,119 +42,6 @@
         <!-- Liste des utilisateurs dans le lobby -->
         <modal:connected-users-list-modal/>
 
-        <jsp:useBean id="user" scope="session" type="uppa.project.database.pojo.User"/>
-        <script defer type="module">
-
-            // Modal
-            document.querySelectorAll('.modal-trigger').forEach(($el) => {
-                $el.addEventListener('click', () => {
-                    const target = $el.dataset.target;
-                    const $target = document.querySelector(target);
-                    $target.classList.add('is-active');
-                });
-            });
-
-            const closeModal = ($el) => $el.classList.remove('is-active');
-            const closeAllModals = () => (document.querySelectorAll('.modal') || []).forEach(($modal) => closeModal($modal));
-
-            // Add a click event on various child elements to close the parent modal
-            (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
-                const $target = $close.closest('.modal');
-                $close.addEventListener('click', () => closeModal($target));
-            });
-
-            // Add a keyboard event to close all modals
-            document.addEventListener('keydown', (event) => {
-                if (event.key === "Escape") closeAllModals();
-            });
-        </script>
-
-        <script defer type="module">
-            import WebsocketToolkit from "${pageContext.request.contextPath}/static/js/WebsocketToolkit.js";
-
-            let users = [];
-
-            function updateUsers() {
-                const $tbody = document.querySelector('#user-list-modal tbody');
-                $tbody.innerHTML = '';
-                users.forEach(user => {
-                    const $tr = document.createElement('tr');
-                    const $tdUsername = document.createElement('td');
-                    const $tdNbPlayedGame = document.createElement('td');
-                    const $tdNbWins = document.createElement('td');
-                    const $tdScore = document.createElement('td');
-                    const $tdRightClick = document.createElement('td');
-                    const $tdRapidClick = document.createElement('td');
-                    const $tdAction = document.createElement('td');
-                    const $button = document.createElement('button');
-
-                    $button.classList.add('button', 'is-primary', 'is-light');
-                    $button.textContent = 'Inviter';
-                    $button.addEventListener('click', () => {
-                        const data = {
-                            from: {
-                                id: ${user.id},
-                                username: "${user.username}"
-                            },
-                            to: {...user},
-                            game_id: ${game.id}
-                        };
-                        const message = {
-                            type: "invite",
-                            data: JSON.stringify(data)
-                        };
-
-                        ws.ws.send(JSON.stringify(message));
-                    })
-
-
-                    $tdUsername.textContent = user.username;
-                    $tdNbPlayedGame.textContent = user.nbPlayedGames;
-                    $tdNbWins.textContent = user.nbWin;
-                    $tdScore.textContent = user.scoreRate + "%";
-                    $tdRightClick.textContent = user.rigthClickPercentRate + "%";
-                    $tdRapidClick.textContent = user.rapidClickPercentRate + "%";
-                    $tdAction.appendChild($button);
-
-                    $tr.appendChild($tdUsername);
-                    $tr.appendChild($tdNbPlayedGame);
-                    $tr.appendChild($tdNbWins);
-                    $tr.appendChild($tdScore);
-                    $tr.appendChild($tdRightClick);
-                    $tr.appendChild($tdRapidClick);
-                    $tr.appendChild($tdAction);
-
-                    $tbody.appendChild($tr);
-                });
-            }
-
-            // Websocket for users in the lobby
-            const url = new URL(window.location.href);
-            url.pathname = "${pageContext.request.contextPath}/ws/users/0";
-            url.protocol = "ws:"
-            url.searchParams.delete("id")
-
-            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} = data;
-                console.log("User " + from.username + " invited " + to.username + " to play " + game.name);
-            })
-            ws.onError((error) => console.error(error));
-            ws.onClose(() => console.log("Disconnected from the server"));
-        </script>
 
         <script type="module" defer>
             import WebsocketToolkit from "${pageContext.request.contextPath}/static/js/WebsocketToolkit.js";
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-room-information.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-room-information.tag
index dff9058..ed0abbc 100644
--- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-room-information.tag
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-room-information.tag
@@ -2,9 +2,11 @@
 <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
 
 <jsp:useBean id="game" scope="request" type="uppa.project.database.pojo.Game"/>
+<jsp:useBean id="user" scope="session" type="uppa.project.database.pojo.User"/>
 
 <input type="hidden" id="game-id" value="${game.id}">
-
+<input type="hidden" id="user-id" value="${user.id}">
+<input type="hidden" id="user-username" value="${user.username}">
 <p><strong>${translator.translate('game_information_created_at')}</strong> ${game.createdAt.toLocaleString()}</p>
 <p><strong>${translator.translate('game_information_difficulty')}</strong> ${game.difficulty}</p>
 <p><strong>${translator.translate('game_information_rounds_number')}</strong> ${game.nbRounds}</p>
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/modal/connected-users-list-modal.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/modal/connected-users-list-modal.tag
index 036705e..d5e0554 100644
--- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/modal/connected-users-list-modal.tag
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/modal/connected-users-list-modal.tag
@@ -1,5 +1,6 @@
 <%@tag description="component/modal/connected-users-list-modal" pageEncoding="UTF-8" %>
 <%@taglib prefix="modal" tagdir="/WEB-INF/tags/components/modal" %>
+
 <div id="user-list-modal" class="modal">
     <div class="modal-background"></div>
     <div class="modal-card modal-">
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/modal.js b/S2/DevWeb/Projet/src/main/webapp/static/js/modal.js
new file mode 100644
index 0000000..24b45ae
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/js/modal.js
@@ -0,0 +1,21 @@
+document.querySelectorAll('.modal-trigger').forEach(($el) => {
+  $el.addEventListener('click', () => {
+    const target = $el.dataset.target;
+    const $target = document.querySelector(target);
+    $target.classList.add('is-active');
+  });
+});
+
+const closeModal = ($el) => $el.classList.remove('is-active');
+const closeAllModals = () => (document.querySelectorAll('.modal') || []).forEach(($modal) => closeModal($modal));
+
+// Add a click event on various child elements to close the parent modal
+(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+  const $target = $close.closest('.modal');
+  $close.addEventListener('click', () => closeModal($target));
+});
+
+// Add a keyboard event to close all modals
+document.addEventListener('keydown', (event) => {
+  if (event.key === "Escape") closeAllModals();
+});
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
index 571f52e..4a6db3a 100644
--- 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
@@ -40,10 +40,7 @@ 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);
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/player-management-websocket.js b/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/player-management-websocket.js
new file mode 100644
index 0000000..c861fb2
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/player-management-websocket.js
@@ -0,0 +1,99 @@
+
+import WebsocketToolkit from "../WebsocketToolkit.js";
+
+let users = [];
+const languageSelector = document.getElementById('language-select');
+let inviteLabel;
+if (languageSelector.value === 'EN') {
+  inviteLabel = 'Invite';
+}
+else {
+  inviteLabel = 'Inviter';
+
+}
+const game = document.querySelector('#game-id');
+const from_id = document.querySelector('#user-id');
+const from_username = document.querySelector('#user-username');
+
+console.log(game.value)
+function updateUsers(users) {
+  const $tbody = document.querySelector('#user-list-modal tbody');
+  $tbody.innerHTML = '';
+  users.forEach(user => {
+    const $tr = document.createElement('tr');
+    const $tdUsername = document.createElement('td');
+    const $tdNbPlayedGame = document.createElement('td');
+    const $tdNbWins = document.createElement('td');
+    const $tdScore = document.createElement('td');
+    const $tdRightClick = document.createElement('td');
+    const $tdRapidClick = document.createElement('td');
+    const $tdAction = document.createElement('td');
+    const $button = document.createElement('button');
+
+    $button.classList.add('button', 'is-primary', 'is-light');
+    $button.textContent = inviteLabel;
+    $button.addEventListener('click', () => {
+      const data = {
+        from: {
+          id: from_id.value,
+          username: from_username.value
+        },
+        to: {...user},
+        game_id: game.value
+      };
+      const message = {
+        type: "invite",
+        data: JSON.stringify(data)
+      };
+
+      ws.ws.send(JSON.stringify(message));
+    })
+
+
+    $tdUsername.textContent = user.username;
+    $tdNbPlayedGame.textContent = user.nbPlayedGames;
+    $tdNbWins.textContent = user.nbWin;
+    $tdScore.textContent = user.scoreRate + "%";
+    $tdRightClick.textContent = user.rigthClickPercentRate + "%";
+    $tdRapidClick.textContent = user.rapidClickPercentRate + "%";
+    $tdAction.appendChild($button);
+
+    $tr.appendChild($tdUsername);
+    $tr.appendChild($tdNbPlayedGame);
+    $tr.appendChild($tdNbWins);
+    $tr.appendChild($tdScore);
+    $tr.appendChild($tdRightClick);
+    $tr.appendChild($tdRapidClick);
+    $tr.appendChild($tdAction);
+
+    $tbody.appendChild($tr);
+  });
+}
+
+// Websocket for users in the lobby
+
+const url = new URL(window.location.href);
+const contextPath = url.pathname.substring(0, url.pathname.indexOf("/", 1) + 1)
+url.pathname = contextPath + "ws/users/0";
+url.protocol = "ws:"
+
+const ws = new WebsocketToolkit(url);
+ws.onOpen(_ => console.log("Connected to the server"));
+ws.onMessage("init", (data) => {
+  users = data;
+  updateUsers(users);
+});
+ws.onMessage("addUser", (data) => {
+  users.push(data);
+  updateUsers(users);
+});
+ws.onMessage("removeUser", (data) => {
+  users = users.filter(user => user.id !== data.id);
+  updateUsers(users);
+});
+ws.onMessage("invite", (data) => {
+  const {from, to, game} = data;
+  console.log("User " + from.username + " invited " + to.username + " to play " + game.name);
+})
+ws.onError((error) => console.error(error));
+ws.onClose(() => console.log("Disconnected from the server"));