feat: dev-web - servlet part

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

@@ -0,0 +1,51 @@
+<%@ page import="uppa.project.pojo.User" %>
+<%@ page import="java.util.List" %><%--
+  Created by IntelliJ IDEA.
+  User: kmitr
+  Date: 19/03/2024
+  Time: 15:47
+  To change this template use File | Settings | File Templates.
+--%>
+<div id="newGameModal" class="modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h1> New Game</h1>
+        <div id="settings">
+            <form>
+                <label for="nbRounds">Nombre de tours</label>
+                <input type="number" id="nbRounds" name="nbRounds" min="1" max="50" value="10">
+                <label for="timer">Timer</label>
+                <input type="number" id="timer" name="timer" min="1" max="10" value="5">
+                <label for="nbColors">Nb couleurs</label>
+                <input type="range" id="nbColors" name="nbColors" min="1" max="4" value="4">
+                <label for="nbValues">Nb valeurs par coleurs</label>
+                <input type="range" id="nbValues" name="nbValues" min="5" max="13" value="13">
+            </form>
+        </div>
+        <div id="players-selection">
+            <table>
+                <tr>
+                    <th>Nom d'utilisateur</th>
+                    <th>Nombre de partie jouées</th>
+                    <th>% Parties Gagnées</th>
+                    <th>% Clicks corrects</th>
+                    <th>% Clicks rapides</th>
+                    <th>Invite</th>
+                </tr>
+                <% List<User> connectedUsers = (List<User>) request.getAttribute("connectedUsers"); %>
+                <% for (User user : connectedUsers) { %>
+                    <tr>
+                        <td><%= user.getUsername() %></td>
+                        <td><%= user.getNbPlayedGame() %></td>
+                        <td><%= user.getWinRate() %></td>
+                        <td><%= user.getRightClickPercentRate()%></td>
+                        <td><%= user.getRapidClickPercentRate()%></td>
+                        <td><input type="checkbox" id="<%= user.getUsername()%>-invite" name="<%= user.getUsername()%>-invite"/></td>
+                    </tr>
+                <% } %>
+            </table>
+            <button id="startGame">Commencer la partie</button>
+        </div>
+    </div>
+</div>
+```

S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/statistics.jsp

@@ -0,0 +1,95 @@
+<%@ page import="uppa.project.pojo.User" %>
+<%@ page import="uppa.project.pojo.Game" %>
+<%@ page import="java.util.Set" %>
+<%@ page import="java.util.ArrayList" %>
+<%@ page import="uppa.project.pojo.Player" %><%--
+  Created by IntelliJ IDEA.
+  User: kmitr
+  Date: 26/03/2024
+  Time: 11:05
+  To change this template use File | Settings | File Templates.
+--%>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+//modale statistque
+<% User user = (User) request.getAttribute("user"); %>
+<% ArrayList<Game> games = (ArrayList<Game>) request.getAttribute("games"); %>
+<div id="statisticsModal" class="modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h1> New Game</h1>
+        <div id="selfSettings">
+            <h2>Statistiques globales</h2>
+            <table>
+                <tr>
+                    <th>Nombre de parties jouées:</th>
+                    <td><%= user.getNbPlayedGame() %></td>
+                </tr>
+                <tr>
+                    <th>Nombre de parties gagnées:</th>
+                    <td><%= user.getNbWin() %>, <%= user.getWinRate()%></td>
+                </tr>
+                <tr>
+                    <th>Nombre de clicks total:</th>
+                    <td><%= user.getNbClicks() %></td>
+                </tr>
+                <tr>
+                    <th>Nombre de clicks corrects:</th>
+                    <td><%= user.getNbRightClicks() %>, <%= user.getRightClickPercentRate()%></td>
+                </tr>
+                <tr>
+                    <th>Nombre de clicks rapides:</th>
+                    <td><%= user.getNbRapidClicks() %>, <%= user.getRapidClickPercentRate()%></td>
+                </tr>
+            </table>
+        </div>
+        <div id="game-selection">
+            //listes de game dont chacune est un onglet déroulante des joueurs
+            <h2>Statistiques par jeu</h2>
+            <table>
+                <tr>
+                    <th>Date de la partie</th>
+                    <th>Nombre de joueurs</th>
+                    <th>Nombre de manches</th>
+                    <th>Nombre de couleurs</th>
+                    <th>Nombre de valeurs par couleur</th>
+                    <th>Vainqueur</th>
+                </tr>
+                <%
+                    for (Game game : games) {
+                %>
+                <tr>
+                    <td><%= game.getCreatedAt() %></td>
+                    <td><%= game.getNbPlayers() %></td>
+                    <td><%= game.getNbRounds() %></td>
+                    <td><%= game.getNbColors() %></td>
+                    <td><%= game.getNbValuesPerColor() %></td>
+                    <td><%= game.getPlayers().get(0).getUser().getUsername() %></td>
+                </tr>
+                <tr class="dropdown" aria-disabled="false">
+                    <table>
+                        <tr>
+                            <th>Username</th>
+                            <th>Score</th>
+                            <th>Nombre de click</th>
+                            <th>Nombre de click corrects</th>
+                            <th>Nombre de click rapides</th>
+                        </tr>
+                        <%
+                            for (Player player : game.getPlayers()) {
+                        %>
+                        <tr>
+                            <td><%= player.getUser().getUsername() %></td>
+                            <td><%= player.getScore() %></td>
+                            <td><%= player.getClickCount() %></td>
+                            <td><%= player.getRightClickCount() %>, <%= player.getRatioRightClick() %></td>
+                            <td><%= player.getRapidClickCount() %>, <%= player.getRatioRapidClick() %></td>
+                        <%
+                            }
+                        %>
+                    </table>
+                </tr>
+            </table>
+
+        </div>
+    </div>
+</div>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/js/forgotten-password.js

@@ -1,14 +1,13 @@
-window.onload = function (){
-    const urlParams = new URLSearchParams(window.location.search);
-    let error = null;
-    if (urlParams.has('error')) {
-        error = urlParams.get('error');
-    }
-    console.log(error);
-    if (error != null && error === "expired-token") {
-        window.alert("Lien expiré, veuillez recommencer la procédure de récupération de mot de passe.");
-    }
-    if (error != null && error === "invalid-token") {
-        window.alert("Lien invalide, veuillez recommencer la procédure de récupération de mot de passe.");
-    }
+const ERROR_MESSAGE = {
+    "expired-token": "Lien expiré, veuillez recommencer la procédure de récupération de mot de passe.",
+    "invalid-token": "Lien invalide, veuillez recommencer la procédure de récupération de mot de passe.",
+};
+
+const urlParams = new URLSearchParams(window.location.search);
+const error = urlParams.get('error');
+
+if (error) {
+    const errorMessage = ERROR_MESSAGE[error];
+    console.error(errorMessage);
+    window.alert(errorMessage);
 }

S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/js/login.js

@@ -24,14 +24,13 @@ loginForm.addEventListener("submit", (event) => {
     ;
 });
 
-window.onload = function (){
-    const urlParams = new URLSearchParams(window.location.search);
-    if (urlParams.has('success')) {
-        if (urlParams.get('success') === "account-created") {
-            window.alert("Compte créé avec succès.");
-        }
-        if (urlParams.get('success') === "password-reseted") {
-            window.alert("Mot de passe réinitialisé avec succès.");
-        }
+
+const urlParams = new URLSearchParams(window.location.search);
+if (urlParams.has('success')) {
+    if (urlParams.get('success') === "account-created") {
+        window.alert("Compte créé avec succès.");
+    }
+    if (urlParams.get('success') === "password-reseted") {
+        window.alert("Mot de passe réinitialisé avec succès.");
     }
 }

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

@@ -1,15 +1,19 @@
-// Mise à jour du nombre de rounds max en fonction du nombre de couleurs et de valeurs sélécetionnés
-document.getElementById("nbColors").addEventListener("change", function () {
-  let nbColors = document.getElementById("nbColors").value;
-  let nbValues = document.getElementById("nbValues").value;
-  let nbRounds = document.getElementById("nbRounds");
-  nbRounds.max = nbColors * nbValues;
-  nbRounds.value = nbRounds.value > nbRounds.max ? nbRounds.max : nbRounds.value;
-});
-document.getElementById("nbValues").addEventListener("change", function () {
-  let nbColors = document.getElementById("nbColors").value;
-  let nbValues = document.getElementById("nbValues").value;
-  let nbRounds = document.getElementById("nbRounds");
-  nbRounds.max = nbColors * nbValues;
-  nbRounds.value = nbRounds.value > nbRounds.max ? nbRounds.max : nbRounds.value;
-});
+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);

S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/js/register.js

@@ -0,0 +1,30 @@
+const registerForm = document.getElementById("register-form");
+const confirmPassword = document.getElementById("confirmPassword");
+
+registerForm.addEventListener("submit", function (event) {
+    event.preventDefault();
+    const formData = new FormData(registerForm);
+
+    const data = {};
+    formData.forEach((value, key) => data[key] = value);
+
+    const action = loginForm.getAttribute("action")
+    const method = loginForm.getAttribute("method")
+
+
+    fetch("/reset-password", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(data)
+    }).then(response => {
+        if (response.ok) {
+            window.location.href = "/login";
+        } else {
+            response.json().then(data => {
+                alert(data.message);
+            });
+        }
+    }).catch(error => console.error("Error:", error));
+});

S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/js/reset-password.js

@@ -1,15 +1,16 @@
-const ResetPasswordForm = document.getElementById("resetPasswordForm");
+const resetPasswordForm = document.getElementById("resetPasswordForm");
+const confirmPassword = document.getElementById("confirmPassword");
 
-ResetPasswordForm.addEventListener("submit", function (event) {
+resetPasswordForm.addEventListener("submit", function (event) {
     event.preventDefault();
-    const formData = new FormData(ResetPasswordForm);
+    const formData = new FormData(resetPasswordForm);
+
     const data = {};
     formData.forEach((value, key) => data[key] = value);
 
     const action = loginForm.getAttribute("action")
     const method = loginForm.getAttribute("method")
 
-
     fetch("/reset-password", {
         method: "POST",
         headers: {
@@ -28,5 +29,3 @@ ResetPasswordForm.addEventListener("submit", function (event) {
         console.error("Error:", error);
     });
 });
-
-

S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/forgotten-password.jsp

@@ -26,5 +26,5 @@
         <%}%>
     </main>
 </body>
-<script defer type="text/javascript"><%@include file="../static/js/forgotten-password.js"%></script>
+<script defer type="module"><%@include file="../static/js/forgotten-password.js"%></script>
 </html>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/login.jsp

@@ -4,6 +4,7 @@
 <head>
     <title> Cards Rush - Connexion</title>
     <style><%@include file="../static/css/login.css" %></style>
+    <meta charset="utf-8">
 </head>
 <body>
 
@@ -35,7 +36,7 @@
     </section>
 </main>
 
-<script defer type="text/javascript"><%@include file="../static/js/login.js" %></script>
+<script defer type="module"><%@include file="../static/js/login.js" %></script>
 
 </body>
 </html>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp

@@ -4,6 +4,7 @@
 <html>
 <head>
   <title>Cards Rush</title>
+  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
 </head>
 <body>
   <main>
@@ -11,8 +12,10 @@
     <section id="main">
       <h1 id="Title">Titre du jeu</h1>
       <div class="main-button">
-        <input type="button" value="New game" >
-        <input type="button" value="Hard mode" >
+        //create a modal button for new game:
+        <button data-toggle="modal" data-target="#newGameModal" >New Game</button>
+          <%@include file="../components/new-game.jsp"%>
+        </div>;
         <input type="button" value="Statistics" >
       </div>
     </section>

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

@@ -1,57 +0,0 @@
-<%@ page import="uppa.project.pojo.User" %><%--
-  Created by IntelliJ IDEA.
-  User: kmitr
-  Date: 19/03/2024
-  Time: 15:47
-  To change this template use File | Settings | File Templates.
---%>
-<%@ page contentType="text/html;charset=UTF-8" language="java" %>
-<html>
-<head>
-    <title>New game</title>
-</head>
-<body>
-    <main>
-        <section id="newGame">
-            <h1> New Game</h1>
-            <div id="settings">
-                <form>
-                    <label for="nbRounds">Nombre de tours</label>
-                    <input type="number" id="nbRounds" name="nbRounds" min="1" max="50" value="10">
-                    <label for="timer">Timer</label>
-                    <input type="number" id="timer" name="timer" min="1" max="10" value="5">
-                    <label for="nbColors">Nb coleurs</label>
-                    <input type="range" id="nbColors" name="nbColors" min="1" max="4" value="4">
-                    <label for="nbValues">Nb valeurs par coleurs</label>
-                    <input type="range" id="nbValues" name="nbValues" min="5" max="13" value="13">
-                </form>
-            </div>
-            <div id="players-selection">
-                <table>
-                    <tr>
-                        <th>Nom d'utilisateur</th>
-                        <th>Nombre de partie jouées</th>
-                        <th>% Parties Gagnées</th>
-                        <th>% Clicks corrects</th>
-                        <th>% Clicks rapides</th>
-                        <th>Invite</th>
-                    </tr>
-                    <% User[] connectedUsers = (User[]) request.getAttribute("connectedUsers"); %>
-                    <% for (User user : connectedUsers) { %>
-                        <tr>
-                            <td><%= user.getUsername() %></td>
-                            <td><%= user.getNbPlayedGame() %></td>
-                            <td><%= user.getWinRate() %></td>
-                            <td><%= user.getRightClickPercentRate()%></td>
-                            <td><%= user.getRapidClickPercentRate()%></td>
-                            <td><input type="checkbox" id="<%= user.getUsername()%>-invite" name="<%= user.getUsername()%>-invite"/></td>
-                        </tr>
-                    <% } %>
-                </table>
-                <button id="startGame">Commencer la partie</button>
-            </div>
-        </section>
-    </main>
-</body>
-<script defer type="text/javascript"> <%@include file="../static/js/new-game.js"%></script>
-</html>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/register.jsp

@@ -51,4 +51,5 @@
 </main>
 
 </body>
+<script defer type="module"><%@include file="../static/js/register.js"%></script>
 </html>