From 0d6a26d4072d5a1b4ea4caf36b1f7ecad2ff7d16 Mon Sep 17 00:00:00 2001
From: kmitresse <kmitresse@etud.univ-pau.fr>
Date: Thu, 13 Jun 2024 10:06:19 +0200
Subject: [PATCH] refacto: devweb - structure game.jsp with components

---
 .../src/main/webapp/WEB-INF/pages/game.jsp    | 72 ++-----------------
 .../tags/components/game-player-list.tag      | 11 +++
 .../tags/components/game-room-information.tag | 13 ++++
 .../WEB-INF/tags/components/game-start.tag    | 23 ++++++
 .../modal/connected-users-list-modal.tag      | 32 +++++++++
 .../websockets/game-management-websocket.js   |  0
 6 files changed, 85 insertions(+), 66 deletions(-)
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-player-list.tag
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-room-information.tag
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-start.tag
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/modal/connected-users-list-modal.tag
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/websockets/game-management-websocket.js

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 28252d0..83d05c6 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
@@ -2,17 +2,18 @@
 <%@ 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" %>
+<%@taglib prefix="modal" tagdir="/WEB-INF/tags/components/modal" %>
 <% Translator translator = (Translator) request.getSession().getAttribute("translator"); %>
 
 
 <layout:base title="${translator.translate('game_room_title')}">
     <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>
     </jsp:attribute>
     <jsp:body>
 
         <component:hero>
-
             <div class="columns" id="gameWaiting">
                 <div class="column">
                     <component:card title="${translator.translate('game_room_players_list')}">
@@ -24,82 +25,21 @@
                             </div>
                         </jsp:attribute>
                         <jsp:body>
-                            <table id="playerList" class="table is-fullwidth">
-                                <thead>
-                                <tr>
-                                    <td>${translator.translate('game_room_player')}</td>
-                                </tr>
-                                </thead>
-                                <tbody></tbody>
-                            </table>
+                            <component:game-player-list/>
                         </jsp:body>
                     </component:card>
                 </div>
                 <div class="column">
                     <component:card title="${translator.translate('game_information_title')}">
-                        <jsp:useBean id="game" scope="request" type="uppa.project.database.pojo.Game"/>
-
-                        <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>
-                        <p><strong>${translator.translate('game_information_rounds_duration')}</strong> ${game.timer} ${translator.translate('timer_unit')}</p>
-                        <p><strong>${translator.translate('game_information_deck_color_number')}</strong> ${game.nbColors}</p>
-                        <p><strong>${translator.translate('game_information_deck_value_number')}</strong> ${game.nbValuesPerColor}</p>
+                       <component:game-room-information/>
                     </component:card>
                 </div>
             </div>
-            <div id="gameStarted" style="display:none;">
-                <div class="columns" id="otherCards"></div>
-                <div class="columns">
-                    <div class="column is-flex is-flex-direction-column is-align-items-center" id="deck"></div>
-                    <div class="column is-one-quarter is-justify-content-center" id="choice"
-                         style="position: absolute; right: 0; z-index: 9999">
-                        <div class="buttons is-flex-direction-column">
-                            <p id="round_info" class="title has-text-white">${translator.translate('game_round')} <span id="round"></span> </p>
-                            <p id="timer_info" class="subtitle has-text-white">${translator.translate('game_timer')} <span id="timer"></span></p>
-                            <button class="button is-fullwidth" data-value="COLOR_VALUE">${translator.translate('game_same_card')}</button>
-                            <button class="button is-fullwidth" data-value="COLOR">${translator.translate('game_same_color')}</button>
-                            <button class="button is-fullwidth" data-value="VALUE">${translator.translate('game_same_value')}</button>
-                            <button class="button is-fullwidth" data-value="NONE">${translator.translate('game_none')}</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="columns is-centered" id="myCard">
-                </div>
-            </div>
+            <component:game-start/>
         </component:hero>
 
         <!-- Liste des utilisateurs dans le lobby -->
-        <div id="user-list-modal" class="modal">
-            <div class="modal-background"></div>
-            <div class="modal-card modal-">
-                <header class="modal-card-head">
-                    <p class="modal-card-title">${translator.translate('game_room_connected_users_list')}</p>
-                    <button class="delete" aria-label="close"></button>
-                </header>
-                <section class="modal-card-body">
-                    <table class="table is-fullwidth">
-                        <thead>
-                        <tr>
-                            <th>${translator.translate('game_room_player_username')}</th>
-                            <th>${translator.translate('game_room_player_played_games')}</th>
-                            <th>${translator.translate('game_room_player_wins')}</th>
-                            <th>${translator.translate('game_room_player_average_score')}</th>
-                            <th>${translator.translate('game_room_player_correct_clicks')}</th>
-                            <th>${translator.translate('game_room_player_rapid_clicks')}</th>
-                            <th>${translator.translate('game_room_player_action')}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-
-                        </tbody>
-                    </table>
-                </section>
-                <footer class="modal-card-foot">
-                    <button class="button is-light">Fermer</button>
-                </footer>
-            </div>
-        </div>
+        <modal:connected-users-list-modal/>
 
         <jsp:useBean id="user" scope="session" type="uppa.project.database.pojo.User"/>
         <script defer type="module">
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-player-list.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-player-list.tag
new file mode 100644
index 0000000..c4c6210
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-player-list.tag
@@ -0,0 +1,11 @@
+<%@tag description="component/game-player-list" pageEncoding="UTF-8" %>
+<%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
+
+<table id="playerList" class="table is-fullwidth">
+    <thead>
+    <tr>
+        <td>${translator.translate('game_room_player')}</td>
+    </tr>
+    </thead>
+    <tbody></tbody>
+</table>
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
new file mode 100644
index 0000000..dff9058
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-room-information.tag
@@ -0,0 +1,13 @@
+<%@tag description="component/game-room-information" pageEncoding="UTF-8" %>
+<%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
+
+<jsp:useBean id="game" scope="request" type="uppa.project.database.pojo.Game"/>
+
+<input type="hidden" id="game-id" value="${game.id}">
+
+<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>
+<p><strong>${translator.translate('game_information_rounds_duration')}</strong> ${game.timer} ${translator.translate('timer_unit')}</p>
+<p><strong>${translator.translate('game_information_deck_color_number')}</strong> ${game.nbColors}</p>
+<p><strong>${translator.translate('game_information_deck_value_number')}</strong> ${game.nbValuesPerColor}</p>
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-start.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-start.tag
new file mode 100644
index 0000000..293a61e
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-start.tag
@@ -0,0 +1,23 @@
+<%@tag description="component/game-start" pageEncoding="UTF-8" %>
+<%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
+<jsp:useBean id="game" scope="request" type="uppa.project.database.pojo.Game"/>
+
+<div id="gameStarted" style="display:none;">
+    <div class="columns" id="otherCards"></div>
+    <div class="columns">
+        <div class="column is-flex is-flex-direction-column is-align-items-center" id="deck"></div>
+        <div class="column is-one-quarter is-justify-content-center" id="choice"
+             style="position: absolute; right: 0; z-index: 9999">
+            <div class="buttons is-flex-direction-column">
+                <p id="round-info" class="title has-text-white">${translator.translate('game_round')} <span id="round"></span> </p>
+                <p id="timer-info" class="subtitle has-text-white">${translator.translate('game_timer')} <span id="timer"></span></p>
+                <button class="button is-fullwidth" data-value="COLOR_VALUE">${translator.translate('game_same_card')}</button>
+                <button class="button is-fullwidth" data-value="COLOR">${translator.translate('game_same_color')}</button>
+                <button class="button is-fullwidth" data-value="VALUE">${translator.translate('game_same_value')}</button>
+                <button class="button is-fullwidth" data-value="NONE">${translator.translate('game_none')}</button>
+            </div>
+        </div>
+    </div>
+    <div class="columns is-centered" id="myCard">
+    </div>
+</div>
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
new file mode 100644
index 0000000..036705e
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/modal/connected-users-list-modal.tag
@@ -0,0 +1,32 @@
+<%@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-">
+        <header class="modal-card-head">
+            <p class="modal-card-title">${translator.translate('game_room_connected_users_list')}</p>
+            <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+            <table class="table is-fullwidth">
+                <thead>
+                <tr>
+                    <th>${translator.translate('game_room_player_username')}</th>
+                    <th>${translator.translate('game_room_player_played_games')}</th>
+                    <th>${translator.translate('game_room_player_wins')}</th>
+                    <th>${translator.translate('game_room_player_average_score')}</th>
+                    <th>${translator.translate('game_room_player_correct_clicks')}</th>
+                    <th>${translator.translate('game_room_player_rapid_clicks')}</th>
+                    <th>${translator.translate('game_room_player_action')}</th>
+                </tr>
+                </thead>
+                <tbody>
+
+                </tbody>
+            </table>
+        </section>
+        <footer class="modal-card-foot">
+            <button class="button is-light">Fermer</button>
+        </footer>
+    </div>
+</div>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/game-management-websocket.js b/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/game-management-websocket.js
new file mode 100644
index 0000000..e69de29