feat(DevWeb): Create invitations to play game

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/game.jsp

@@ -3,6 +3,7 @@
 <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
 
 <layout:base>
+
     <component:hero>
         <div class="columns">
             <div class="column">
@@ -35,7 +36,17 @@
                 <button class="delete" aria-label="close"></button>
             </header>
             <section class="modal-card-body">
-                TODO Liste des utilisateurs
+                <table class="table is-fullwidth">
+                    <thead>
+                    <tr>
+                        <th>Utilisateur</th>
+                        <th>Action</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+
+                    </tbody>
+                </table>
             </section>
             <footer class="modal-card-foot">
                 <button class="button is-success">Fermer</button>
@@ -43,7 +54,10 @@
         </div>
     </div>
 
+    <jsp:useBean id="user" scope="session" type="uppa.project.database.pojo.User"/>
     <script defer type="module">
+        // Modal
+
         // Modal
         document.querySelectorAll('.modal-trigger').forEach(($el) => {
             $el.addEventListener('click', () => {
@@ -68,4 +82,76 @@
         });
     </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 $tdAction = document.createElement('td');
+                const $button = document.createElement('button');
+
+                $button.classList.add('button', 'is-success');
+                $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;
+                    $tdAction.appendChild($button);
+
+                    $tr.appendChild($tdUsername);
+                    $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>
+
 </layout:base>

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

@@ -5,8 +5,6 @@
 
 <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
 
-<%@attribute name="anonymous"%>
-
 <table id="connected-user-list" class="table is-fullwidth">
     <thead>
     <tr>
@@ -58,6 +56,12 @@
         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>