feat: devweb - Make translations on game room page

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

@@ -1,9 +1,11 @@
+<%@ 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>
+<layout:base title="${translator.translate('game_room_title')}">
     <jsp:attribute name="head">
         <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/card.css">
     </jsp:attribute>
@@ -13,18 +15,19 @@
 
             <div class="columns" id="gameWaiting">
                 <div class="column">
-                    <component:card title="Liste des joueurs dans la partie">
+                    <component:card title="${translator.translate('game_room_players_list')}">
                         <jsp:attribute name="footer">
                             <div class="card-footer">
-                                <a data-target="#user-list-modal" class="card-footer-item modal-trigger">Ajouter</a>
+                                <a id="leave-game-button" href="${pageContext.request.contextPath}/lobby" class="is-primary card-footer-item">${translator.translate('game_room_leave_game')}</a>
-                                <a id="start-game-button" class="is-primary card-footer-item">Démarrer</a>
+                                <a data-target="#user-list-modal" class="card-footer-item modal-trigger">${translator.translate('game_room_add_player')}</a>
+                                <a id="start-game-button"  class="is-primary card-footer-item">${translator.translate('game_room_start_game')}</a>
                             </div>
                         </jsp:attribute>
                         <jsp:body>
                             <table id="playerList" class="table is-fullwidth">
                                 <thead>
                                 <tr>
-                                    <td>Joueur</td>
+                                    <td>${translator.translate('game_room_player')}</td>
                                 </tr>
                                 </thead>
                                 <tbody></tbody>
@@ -33,14 +36,15 @@
                     </component:card>
                 </div>
                 <div class="column">
-                    <component:card title="Partie n°${pageContext.request.getParameter('id')}">
+                    <component:card title="${translator.translate('game_room_player')}">
                         <jsp:useBean id="game" scope="request" type="uppa.project.database.pojo.Game"/>
 
-                        <p><strong>Créé le:</strong> ${game.createdAt.toLocaleString()}</p>
+                        <p><strong>${translator.translate('game_information_created_at')}</strong> ${game.createdAt.toLocaleString()}</p>
-                        <p><strong>Difficulté:</strong> ${game.difficulty}</p>
+                        <p><strong>${translator.translate('game_information_difficulty')}</strong> ${game.difficulty}</p>
-                        <p><strong>Nombre de tours:</strong> ${game.nbRounds}</p>
+                        <p><strong>${translator.translate('game_information_rounds_number')}</strong> ${game.nbRounds}</p>
-                        <p><strong>Nombre de couleurs:</strong> ${game.nbColors}</p>
+                        <p><strong>${translator.translate('game_information_rounds_duration')}</strong> ${game.timer} ${translator.translate('timer_unit')}</p>
-                        <p><strong>Valeurs par couleur:</strong> ${game.nbValuesPerColor}</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:card>
                 </div>
             </div>
@@ -51,12 +55,12 @@
                     <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" class="title has-text-white"></p>
+                            <p id="round_info" class="title has-text-white">${translator.translate('game_round')} <span id="round"></span> </p>
-                            <p id="timer" class="subtitle has-text-white"></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">Même carte</button>
+                            <button class="button is-fullwidth" data-value="COLOR_VALUE">${translator.translate('game_same_card')}</button>
-                            <button class="button is-fullwidth" data-value="COLOR">Même couleur</button>
+                            <button class="button is-fullwidth" data-value="COLOR">${translator.translate('game_same_color')}</button>
-                            <button class="button is-fullwidth" data-value="VALUE">Même valeur</button>
+                            <button class="button is-fullwidth" data-value="VALUE">${translator.translate('game_same_value')}</button>
-                            <button class="button is-fullwidth" data-value="NONE">Aucun</button>
+                            <button class="button is-fullwidth" data-value="NONE">${translator.translate('game_none')}</button>
                         </div>
                     </div>
                 </div>
@@ -70,20 +74,20 @@
             <div class="modal-background"></div>
             <div class="modal-card modal-">
                 <header class="modal-card-head">
-                    <p class="modal-card-title">Liste des utilisateurs connectés</p>
+                    <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>Utilisateur</th>
+                            <th>${translator.translate('game_room_player_username')}</th>
-                            <th>Nombre de parties jouées</th>
+                            <th>${translator.translate('game_room_player_played_games')}</th>
-                            <th>Nombre de victoires</th>
+                            <th>${translator.translate('game_room_player_wins')}</th>
-                            <th>Score moyen</th>
+                            <th>${translator.translate('game_room_player_average_score')}</th>
-                            <th>Clics corrects</th>
+                            <th>${translator.translate('game_room_player_correct_clicks')}</th>
-                            <th>Clics rapides</th>
+                            <th>${translator.translate('game_room_player_rapid_clicks')}</th>
-                            <th>Action</th>
+                            <th>${translator.translate('game_room_player_action')}</th>
                         </tr>
                         </thead>
                         <tbody>
@@ -224,12 +228,12 @@
             let timerInterval;
 
             // Display timer
-            document.querySelector('#timer').innerText = "Temps restant: " + remainingTime + "s";
+            document.querySelector('#timer').innerText = remainingTime + "s";
 
             const interval = () => {
                 remainingTime--;
 
-                document.querySelector('#timer').innerText = "Temps restant: " + remainingTime + "s";
+                document.querySelector('#timer').innerText = remainingTime + "s";
 
                 if (remainingTime <= 0) clearInterval(timerInterval);
             }
@@ -292,7 +296,7 @@
                 round.innerText = "";
 
                 // Show current round
-                round.innerText = "Manche " + (currentGame.currentRound + 1)
+                round.innerText = (currentGame.currentRound + 1)
 
                 // Show other player cards
                 game.players
@@ -345,7 +349,7 @@
 
                 clearInterval(timerInterval);
                 remainingTime = timer;
-                document.querySelector('#timer').innerText = "Temps restant: " + remainingTime + "s";
+                document.querySelector('#timer').innerText = remainingTime + "s";
                 timerInterval = setInterval(interval, 1000);
 
                 // Reset content
@@ -357,7 +361,7 @@
                 choice.querySelectorAll('button').forEach(button => button.disabled = false);
 
                 // Show the current round
-                round.innerText = "Manche " + (currentGame.currentRound + 1)
+                round.innerText = (currentGame.currentRound + 1)
 
                 // Show other player cards
                 game.players

S2/DevWeb/Projet/src/main/webapp/WEB-INF/translations.json

@@ -251,11 +251,11 @@
     "FR": "Victoires"
   },
   "global_statistics_corrects_clics": {
-    "EN": "Corrects clics",
+    "EN": "Corrects clicks",
     "FR": "Clics corrects"
   },
   "global_statistics_rapid_clics": {
-    "EN": "Rapid clics",
+    "EN": "Rapid clicks",
     "FR": "Clics rapides"
   },
   "statistics_games_played" : {
@@ -478,5 +478,121 @@
   "new_game_create" : {
     "EN": "Create game",
     "FR": "Créer la partie"
+  },
+  "game_room_title" : {
+    "EN": "Game room",
+    "FR": "Salle de jeu"
+  },
+  "game_room_players_list" : {
+    "EN": "Players list in the game",
+    "FR": "Liste des joueurs dans la partie"
+  },
+  "game_room_connected_users_list" : {
+    "EN": "List of connected users",
+    "FR": "Liste des utilisateurs connectés"
+  },
+  "game_room_player" : {
+    "EN": "Player",
+    "FR": "Joueur"
+  },
+  "game_room_add_player" : {
+    "EN": "Add player",
+    "FR": "Ajouter un joueur"
+  },
+  "game_room_start_game" : {
+    "EN": "Start game",
+    "FR": "Démarrer la partie"
+  },
+  "game_room_leave_game" : {
+    "EN": "Leave game",
+    "FR": "Quitter la partie"
+  },
+  "game_room_player_username" : {
+    "EN": "Username",
+    "FR": "Nom d'utilisateur"
+  },
+  "game_room_player_played_games" : {
+    "EN": "Played games",
+    "FR": "Parties jouées"
+  },
+  "game_room_player_wins" : {
+    "EN": "Wins",
+    "FR": "Victoires"
+  },
+  "game_room_player_average_score" : {
+    "EN": "Average score",
+    "FR": "Score moyen"
+  },
+  "game_room_player_correct_clicks" : {
+    "EN": "Correct clicks",
+    "FR": "Clics corrects"
+  },
+  "game_room_player_rapid_clicks" : {
+    "EN": "Rapid clicks",
+    "FR": "Clics rapides"
+  },
+  "game_room_player_action" : {
+    "EN": "Action",
+    "FR": "Action"
+  },
+  "game_room_player_invite" : {
+    "EN": "Invite",
+    "FR": "Inviter"
+  },
+  "game_information_title" : {
+    "EN": "Game information",
+    "FR": "Informations de la partie"
+  },
+  "game_information_created_at" : {
+    "EN": "Created at",
+    "FR": "Créée le"
+  },
+  "game_information_difficulty" : {
+      "EN": "Difficulty",
+      "FR": "Difficulté"
+  },
+  "game_information_rounds_number" : {
+    "EN": "Number of rounds",
+    "FR": "Nombre de manches"
+  },
+  "game_information_rounds_duration" : {
+    "EN": "Duration of a round",
+    "FR": "Durée d'une manche"
+  },
+  "game_information_deck_color_number" : {
+    "EN": "Number of colors",
+    "FR": "Nombre de couleurs"
+  },
+  "game_information_deck_value_number" : {
+    "EN": "Number of values per color",
+    "FR": "Nombre de valeurs par couleur"
+  },
+  "timer_unit" : {
+    "EN": "seconds",
+    "FR": "secondes"
+  },
+  "game_same_card" : {
+    "EN": "Same cards",
+    "FR": "Mêmes cartes"
+  },
+  "game_same_color" : {
+      "EN": "Same color",
+      "FR": "Même couleur"
+  },
+  "game_same_value" : {
+      "EN": "Same value",
+      "FR": "Même valeur"
+  },
+  "game_none" : {
+      "EN": "None",
+      "FR": "Aucun"
+  },
+  "game_round" : {
+    "EN": "Round",
+    "FR": "Manche"
+  },
+  "game_timer" : {
+    "EN": "Remaining time:",
+    "FR": "Temps restant :"
   }
 }