feat(DevWeb): Create WebsocketToolkit.js

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/connected-user-list.tag

@@ -1,95 +1,63 @@
+<jsp:useBean id="user" scope="session" type="uppa.project.database.pojo.User"/>
 <%@tag description="component/connected-user-list" pageEncoding="UTF-8" %>
 
 <%@tag import="com.google.gson.Gson" %>
-<%@tag import="uppa.project.database.pojo.User" %>
 
 <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
 
+<%@attribute name="anonymous"%>
+
 <table id="connected-user-list" class="table is-fullwidth">
     <thead>
     <tr>
         <th>Utilisateur</th>
-<%--        <th>Nombre de parties</th>--%>
-<%--        <th>Victoires (%)</th>--%>
-<%--        <th>Clics corrects (%)</th>--%>
-<%--        <th>Clics rapides (%)</th>--%>
-<%--        <th>Action</th>--%>
     </tr>
     </thead>
     <tbody></tbody>
 </table>
 
 <script defer type="module">
-    const tbodyElement = document.querySelector('#connected-user-list tbody');
+    import WebsocketToolkit from "${pageContext.request.contextPath}/static/js/WebsocketToolkit.js";
 
-    // effacer ce qu'il y a apres /project_war_exploded
-    const url = new URL(window.location.href);
-    url.pathname = "${pageContext.request.contextPath}/ws/connected-users";
-    url.protocol = "ws:"
+    let users = [];
+    function updateUsers() {
+        const table = document.querySelector('#connected-user-list tbody');
 
-    const websocket = new WebSocket(url);
+        // Clear the table
+        table.innerHTML = '';
 
-    <%
-    Gson gson = new Gson();
-    User user = (User) request.getSession().getAttribute("user");
-    %>
-    websocket.onopen = () => {
-        const linkUserSession = {
-            type: 'linkUserSession',
-            data: JSON.stringify(<%= gson.toJson(user) %>)
-        }
-        websocket.send(JSON.stringify(linkUserSession));
-    }
-
-    websocket.onmessage = (event) => {
-        const data = JSON.parse(event.data);
-
-        if (data.type === 'userList') {
-            const users = JSON.parse(data.data);
-            updateUserList(users);
-        }
-    }
-
-    websocket.onclose = () => {}
-    websocket.onerror = (error) => console.error(error);
-
-    function updateUserList(users) {
-        tbodyElement.innerHTML = '';
+        // Add the users to the table
         users.forEach(user => {
-            const trElement = document.createElement('tr');
-            const tdElement = [
-                document.createElement('td'),
-                // document.createElement('td'),
-                // document.createElement('td'),
-                // document.createElement('td'),
-                // document.createElement('td'),
-                // document.createElement('td')
-            ];
-            // const buttonElement = document.createElement('button');
+            const tr = document.createElement('tr');
+            const td = document.createElement('td');
 
-            tdElement[0].textContent = user.username;
-            // tdElement[1].textContent = user.nbPlayedGames;
-            // tdElement[2].textContent = user.WinRate + '%';
-            // tdElement[3].textContent = user.rightClickPercentRate + '%';
-            // tdElement[4].textContent = user.rapidClickPercentRate + '%';
+            td.dataset.id = user.id;
+            td.textContent = user.username;
 
-            // If it's not the current user, we can display the button
-            <%--if (user.id !== <%= user.getId() %>) {--%>
-            <%--    buttonElement.classList.add('button', 'is-light');--%>
-            <%--    buttonElement.textContent = 'Inviter';--%>
-
-            <%--    // TODO Ajouter l'événement click--%>
-            <%--}--%>
-
-            // tdElement[5].appendChild(buttonElement);
-            trElement.appendChild(tdElement[0]);
-            // trElement.appendChild(tdElement[1]);
-            // trElement.appendChild(tdElement[2]);
-            // trElement.appendChild(tdElement[3]);
-            // trElement.appendChild(tdElement[4]);
-            // trElement.appendChild(tdElement[5]);
-
-            tbodyElement.appendChild(trElement);
+            tr.appendChild(td);
+            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.onError((error) => console.error(error));
+    ws.onClose(() => console.log("Disconnected from the server"));
 </script>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/navbar.tag

@@ -6,13 +6,13 @@
         <% if (session.getAttribute("user") != null) { %>
 
         <a class="navbar-item" href="${pageContext.request.contextPath}/lobby">
-            <img src="${pageContext.request.contextPath}/static/img/CardsRushLogoBlack.svg" height="260">
+            <img src="${pageContext.request.contextPath}/static/img/CardsRushLogoBlack.svg" height="260" alt="Logo">
         </a>
 
         <% } else { %>
 
         <a class="navbar-item" href="${pageContext.request.contextPath}/">
-            <img src="${pageContext.request.contextPath}/static/img/CardsRushLogoBlack.svg" height="260">
+            <img src="${pageContext.request.contextPath}/static/img/CardsRushLogoBlack.svg" height="260" alt="Logo">
         </a>
 
         <% } %>

S2/DevWeb/Projet/src/main/webapp/static/js/Message.js

@@ -0,0 +1,13 @@
+export default class Message {
+    constructor(rawMessage) {
+        // Parse the message
+        const message = JSON.parse(rawMessage);
+        message.data = JSON.parse(message.data);
+
+        console.log(message);
+
+        // Set the message properties
+        this.type = message.type;
+        this.data = message.data;
+    }
+}

S2/DevWeb/Projet/src/main/webapp/static/js/WebsocketToolkit.js

@@ -0,0 +1,31 @@
+import Message from "./Message.js";
+
+export default class WebsocketToolkit {
+
+    action = {}
+
+    constructor(url) {
+        this.url = url;
+        this.ws = new WebSocket(url);
+    }
+
+    onOpen(callback) {
+        this.ws.onopen = callback;
+    }
+
+    onMessage(type, callback) {
+        this.action[type] = callback;
+        this.ws.onmessage = (event) => {
+            const message = new Message(event.data);
+            this.action[message.type](message.data)
+        };
+    }
+
+    onClose(callback) {
+        this.ws.onclose = callback;
+    }
+
+    onError(callback) {
+        this.ws.onerror = callback;
+    }
+}

S2/DevWeb/Projet/src/main/webapp/static/js/new-game.js

@@ -1,19 +0,0 @@
-const nbColorsElement = document.getElementById("nbColors");
-const nbValuesElement = document.getElementById("nbValues");
-const nbRoundsElement = document.getElementById("nbRounds")
-
-/**
- * Mise à jour du nombre de rounds max en fonction du nombre de couleurs et de valeurs séléctionnés
- */
-function updateOnChange() {
-  nbRoundsElement.max = nbColorsElement.value * nbValuesElement.value;
-
-  nbRoundsElement.value =
-    (nbRoundsElement.value > nbRoundsElement.max)
-      ? nbRoundsElement.max
-      : nbRoundsElement.value
-  ;
-}
-
-nbColorsElement.addEventListener("change", updateOnChange);
-nbValuesElement.addEventListener("change", updateOnChange);