From 0c7c1fd1f81093d80c64f98a8d5bef0c29f11b12 Mon Sep 17 00:00:00 2001
From: kmitresse <kmitresse@etud.univ-pau.fr>
Date: Wed, 3 Apr 2024 08:57:44 +0200
Subject: [PATCH] feat: dev-web - add modals in main-menu

---
 .../uppa/project/servlet/MainMenuServlet.java |  22 ++-
 .../webapp/WEB-INF/components/new-game.jsp    |  69 ++++----
 .../webapp/WEB-INF/components/statistics.jsp  | 167 +++++++++---------
 .../main/webapp/WEB-INF/static/css/modal.css  |  72 ++++++++
 .../main/webapp/WEB-INF/static/js/modal.js    |  16 ++
 .../main/webapp/WEB-INF/views/main-menu.jsp   |  16 +-
 6 files changed, 231 insertions(+), 131 deletions(-)
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/css/modal.css
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/js/modal.js

diff --git a/S2/DevWeb/Projet/src/main/java/uppa/project/servlet/MainMenuServlet.java b/S2/DevWeb/Projet/src/main/java/uppa/project/servlet/MainMenuServlet.java
index f540f59..b2d5f09 100644
--- a/S2/DevWeb/Projet/src/main/java/uppa/project/servlet/MainMenuServlet.java
+++ b/S2/DevWeb/Projet/src/main/java/uppa/project/servlet/MainMenuServlet.java
@@ -28,12 +28,12 @@ public class MainMenuServlet extends HttpServlet {
 
   public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
     User user = (User) request.getSession().getAttribute("user");
-    if (user == null) {
-      response.sendRedirect(request.getContextPath() + "/login");
-      return;
-    }
+//    if (user == null) {
+//      response.sendRedirect(request.getContextPath() + "/login");
+//      return;
+//    }
     manageNewGame(request, response, user);
-    manageStatistiques(request, response, user);
+    //manageStatistiques(request, response, user);
     request.getRequestDispatcher("/WEB-INF/views/main-menu.jsp").forward(request, response);
   }
 
@@ -58,10 +58,14 @@ public class MainMenuServlet extends HttpServlet {
 
   private void manageStatistiques(HttpServletRequest request, HttpServletResponse response, User sessionUser) throws IOException, ServletException {
     List<Game> games = new ArrayList<Game>();
-    for(Player player : sessionUser.getPlayedGames()) {
-      Game game = player.getGame();
-      game.sortPlayersByScore();
-      games.add(game);
+    System.out.println(sessionUser.toString());
+    System.out.println(sessionUser.getPlayedGames().size());
+    if (sessionUser.getPlayedGames() != null) {
+      for (Player player : sessionUser.getPlayedGames()) {
+        Game game = player.getGame();
+        game.sortPlayersByScore();
+        games.add(game);
+      }
     }
     request.setAttribute("games", games);
   }
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/new-game.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/new-game.jsp
index 002f215..3811aca 100644
--- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/new-game.jsp
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/new-game.jsp
@@ -1,41 +1,44 @@
 <%@ page import="uppa.project.pojo.User" %>
-<%@ page import="java.util.List" %>
 <%@ page import="uppa.project.pojo.Game" %>
-<%@ page import="uppa.project.pojo.Deck" %><%--
+<%@ page import="uppa.project.pojo.Deck" %>
+<%--
   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="timer">Timer</label>
-                <input type="number" id="timer" name="timer" min="<%= Game.TIMER_MIN %>" max="<%= Game.TIMER_MAX %>" value="<%= Game.TIMER_MIN %>">
-                <label for="nbColors">Nb couleurs</label>
-                <input type="range" id="nbColors" name="nbColors" min="<%= Deck.NB_COLORS_MIN %>" max="<%= Deck.NB_COLORS_MAX %>" value="<%= Deck.NB_COLORS_MAX %>">
-                <label for="nbValues">Nb valeurs par couleurs</label>
-                <input type="range" id="nbValues" name="nbValues" min="<%= Deck.NB_VALUES_PER_COLOR_MIN %>" max="<%= Deck.NB_VALUES_PER_COLOR_MAX %>" value="<%= Deck.NB_VALUES_PER_COLOR_MAX %>">
-                <label for="nbRounds">Nombre de tours</label>
-                <input type="number" id="nbRounds" name="nbRounds" min="<%= Game.NB_ROUNDS_MIN %>" max="<%= Deck.NB_COLORS_MAX * Deck.NB_VALUES_PER_COLOR_MAX %>" value="Deck.NB_COLORS_MAX * Deck.NB_VALUES_PER_COLOR_MAX">
-            </form>
+
+<div id="newGameModal" class="modal-wrapper" style="display: none">
+    <div class="modal">
+        <a href="#close" title="Close" class="close">&times;</a>
+        <div class="modal-header">
+            <h2>Nouvelle Partie</h2>
         </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) { %>
+        <div class="modal-content">
+            <div id="settings">
+                <form>
+                    <label for="timer">Timer</label>
+                    <input type="number" id="timer" name="timer" min="<%= Game.TIMER_MIN %>" max="<%= Game.TIMER_MAX %>" value="<%= Game.TIMER_MIN %>">
+                    <label for="nbColors">Nb couleurs</label>
+                    <input type="range" id="nbColors" name="nbColors" min="<%= Deck.NB_COLORS_MIN %>" max="<%= Deck.NB_COLORS_MAX %>" value="<%= Deck.NB_COLORS_MAX %>">
+                    <label for="nbValues">Nb valeurs par couleurs</label>
+                    <input type="range" id="nbValues" name="nbValues" min="<%= Deck.NB_VALUES_PER_COLOR_MIN %>" max="<%= Deck.NB_VALUES_PER_COLOR_MAX %>" value="<%= Deck.NB_VALUES_PER_COLOR_MAX %>">
+                    <label for="nbRounds">Nombre de tours</label>
+                    <input type="number" id="nbRounds" name="nbRounds" min="<%= Game.NB_ROUNDS_MIN %>" max="<%= Deck.NB_COLORS_MAX * Deck.NB_VALUES_PER_COLOR_MAX %>" value="Deck.NB_COLORS_MAX * Deck.NB_VALUES_PER_COLOR_MAX">
+                </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>
+                    <% for (User user : connectedUsers) { %>
                     <tr>
                         <td><%= user.getUsername() %></td>
                         <td><%= user.getNbPlayedGame() %></td>
@@ -44,10 +47,10 @@
                         <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>
+                    <% } %>
+                </table>
+                <button id="startGame">Commencer la partie</button>
+            </div>
         </div>
     </div>
 </div>
-```
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/statistics.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/statistics.jsp
index ae9fa4b..fc60bdb 100644
--- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/statistics.jsp
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/statistics.jsp
@@ -1,95 +1,98 @@
 <%@ 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" %><%--
+<%@ page import="uppa.project.pojo.Player" %>
+<%@ page import="java.util.Date" %>
+<%--
   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>
+<%--TODO: adapter les deux lignes suivante pour ne pas vérifier la valeur nulle--%>
+<% User user = (User) session.getAttribute("user") != null ? (User) session.getAttribute("user") : new User("toto", "toto@gmail.com", "totopassword", new Date(), User.Gender.MALE); %>
+<% ArrayList<Game> games = (ArrayList<Game>) request.getAttribute("games") != null ? (ArrayList<Game>) request.getAttribute("games") : new ArrayList<Game>() ; %>
+<div id="statisticsModal" class="modal-wrapper" style="display: none">
+    <div class="modal">
+        <a href="#close" title="Close" class="close">&times;</a>
+        <div class="modal-header">
+            <h2>Statistiques</h2>
         </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 class="modal-content">
+            <div id="self-stats">
+                <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>
+                            </tr>
+                            <% } %>
+                        </table>
+                    </tr>
+                    <% } %>
+                </table>
+            </div>
         </div>
     </div>
 </div>
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/css/modal.css b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/css/modal.css
new file mode 100644
index 0000000..bc3c2d3
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/css/modal.css
@@ -0,0 +1,72 @@
+body {
+    font-family: sans-serif;
+    padding: 30px;
+}
+
+.demo-description {
+    max-width: 460px;
+    margin: 0 auto;
+    line-height: 1.5;
+}
+
+.modal-toggle {
+    cursor: pointer;
+    color: #268bd2;
+}
+
+.modal-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background: rgba(0, 0, 0, 0.8);
+    display: none;
+
+    -webkit-transition: opacity 0.2s ease-in;
+    -moz-transition: opacity 0.2s ease-in;
+    transition: opacity 0.2s ease-in;
+
+    pointer-events: auto;
+}
+
+.modal-wrapper > div {
+    width: 460px;
+    height: 40%;
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    margin: auto;
+
+    vertical-align: middle;
+    padding: 20px;
+    border-radius: 6px;
+    background: #fff;
+
+    display: none;
+}
+
+.close {
+    background: #606061;
+    color: #ffffff;
+    line-height: 25px;
+    position: absolute;
+    right: -12px;
+    text-align: center;
+    top: -10px;
+    width: 24px;
+    text-decoration: none;
+    font-weight: bold;
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+    border-radius: 12px;
+}
+
+.close:hover {
+    background: #00d9ff;
+}
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/js/modal.js b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/js/modal.js
new file mode 100644
index 0000000..a13bd11
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/js/modal.js
@@ -0,0 +1,16 @@
+var cb = document.querySelectorAll(".close");
+for (i = 0; i < cb.length; i++) {
+  cb[i].addEventListener("click", function() {
+    var dia = this.parentNode.parentNode; /* You need to update this part if you change level of close button */
+    dia.style.display = "none";
+  });
+}
+
+var mt = document.querySelectorAll(".modal-toggle");
+for (i = 0; i < mt.length; i++) {
+  mt[i].addEventListener("click", function() {
+    var targetId = this.getAttribute("data-target");
+    var target = document.querySelector(targetId);
+    target.style.display = "block";
+  });
+}
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp
index d106f48..0d9510a 100644
--- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp
@@ -1,10 +1,10 @@
+<%@ page import="java.util.List" %>
 <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
-
+<% List<User> connectedUsers = (List<User>) request.getAttribute("connectedUsers"); %>
 <!DOCTYPE html>
 <html>
 <head>
   <title>Cards Rush</title>
-  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
 </head>
 <body>
   <main>
@@ -12,13 +12,15 @@
     <section id="main">
       <h1 id="Title">Titre du jeu</h1>
       <div class="main-button">
-        //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" >
+        <button class="modal-toggle" data-target="#newGameModal" >Nouvelle Partie</button>
+        <button class="modal-toggle" data-target="#statisticsModal" >Statistiques</button>
+        <%@include file="../components/new-game.jsp"%>
+        <%@include file="../components/statistics.jsp"%>
       </div>
     </section>
+
   </main>
 </body>
+<script defer type="text/javascript"><%@include file="../static/js/modal.js"%></script>
+<script defer type="text/javascript"><%@include file="../static/js/new-game.js"%></script>
 </html>