lucasvbr/Cards-Rush
1
0
Fork 0
mirror of https://github.com/kmitresse/Cards-Rush.git synced 2026-05-13 17:11:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dev-web - add modals in main-menu

Browse Source
This commit is contained in:
kmitresse
2024-04-03 08:57:44 +02:00
parent 79cbad9d80
commit 0c7c1fd1f8
6 changed files with 231 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
S2/DevWeb/Projet/src/main/java/uppa/project/servlet/MainMenuServlet.java
+13 -9
View File
@@ -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);
}
S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/new-game.jsp
+36 -33
View File
@@ -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>
```
S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/statistics.jsp
+85 -82
View File
@@ -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>
S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/css/modal.css
+72
View File
@@ -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;
}
S2/DevWeb/Projet/src/main/webapp/WEB-INF/static/js/modal.js
+16
View File
@@ -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";
});
}
S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp
+9 -7
View File
@@ -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>