kmitresse/cards-rush
1
0
Fork 0
mirror of https://github.com/kmitresse/Cards-Rush.git synced 2026-07-09 13:27:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dev-web - begin front

Browse Source
This commit is contained in:
kmitresse
2024-04-05 18:00:33 +02:00
parent eeea468845
commit a541ba929a
13 changed files with 319 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
S2/DevWeb/Projet/src/main/java/uppa/project/servlet/IndexServlet.java
+33
View File
@@ -0,0 +1,33 @@
/*
* LoginServlet.java, 20/03/2024
* UPPA M1 TI 2023-2024
* Pas de copyright, aucun droits
*/
package uppa.project.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "indexServlet", value = "/index")
public class IndexServlet extends HttpServlet {
public void init() {
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
if (request.getSession().getAttribute("user") != null) {
response.sendRedirect(request.getContextPath() + "/main-menu");
return;
}
request.getRequestDispatcher("/WEB-INF/views/index.jsp").forward(request, response);
}
public void destroy() {
}
}
S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/navbar.jsp
+10 -8
View File
@@ -13,16 +13,18 @@
<nav> <nav>
<a href="${pageContext.request.contextPath}/index"><img src="${pageContext.request.contextPath}/static/img/CardsRushLogo.png" alt="Logo CardsRush"> </a> <a href="${pageContext.request.contextPath}/index"><img src="${pageContext.request.contextPath}/static/img/CardsRushLogo.png" alt="Logo CardsRush"> </a>
<% if (currentPage == "register" || currentPage == "forgotten-password" || currentPage == "reset-password"){ %> <% if (currentPage == "register" || currentPage == "forgotten-password" || currentPage == "reset-password"){ %>
<button><a href="${pageContext.request.contextPath}/login">Se connecter</a></button> <a class="button" href="${pageContext.request.contextPath}/login">Se connecter</a>
<% } <% }
if (currentPage == "login" || currentPage == "forgotten-password" || currentPage == "reset-password") { %> if (currentPage == "login" || currentPage == "forgotten-password" || currentPage == "reset-password") { %>
<button> <a href="${pageContext.request.contextPath}/register">S'inscrire</a></button> <a class="button" href="${pageContext.request.contextPath}/register">S'inscrire</a>
<% } else if (currentPage == "main-menu"){ %> <% } else if (currentPage == "main-menu"){ %>
<% User user = (User) request.getAttribute("user"); %> <div class="content">
<p> <% User user = (User) request.getAttribute("user"); %>
pseudo: <%= user != null ? user.getUsername() : "anonyme"%> <br/> <p class="user">
nombre de victoires: <%= user != null ? user.getNbWin() : "0" %> <%= user != null ? user.getUsername() : "anonyme"%> <br/>
</p> <%= user != null ? user.getNbWin() : "0" %> victoires
<button><a href="${pageContext.request.contextPath}/logout">Se déconnecter</a></button> </p>
<a class="button" href="${pageContext.request.contextPath}/logout">Se déconnecter</a>
</div>
<% } %> <% } %>
</nav> </nav>
S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/index.jsp
+28
View File
@@ -0,0 +1,28 @@
<%--
Created by IntelliJ IDEA.
User: kmitr
Date: 03/04/2024
Time: 14:48
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>Card Rush</title>
<link href="${pageContext.request.contextPath}/static/css/global.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/index.css" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<%@include file="../components/navbar.jsp" %>
<div class="content">
<h1>Plongez dans l'excitation de cardRush!</h1>
<p>Défiez votre réactivité et dominez le jeu avec des amis dans cette course effrénée aux cartes ! Rejoignez maintenant pour vivre l'adrénaline.</p>
<div class="buttons">
<a class="button" href="${pageContext.request.contextPath}/register">S'inscrire</a>
<a class="button" href="${pageContext.request.contextPath}/login">Se connecter</a>
</div>
</div>
</body>
</html>
S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/login.jsp
+17 -20
View File
@@ -3,6 +3,7 @@
<html> <html>
<head> <head>
<title> Cards Rush - Connexion</title> <title> Cards Rush - Connexion</title>
<link href="${pageContext.request.contextPath}/static/css/global.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/login.css" rel="stylesheet"> <link href="${pageContext.request.contextPath}/static/css/login.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/js/login.js" defer></script> <script src="${pageContext.request.contextPath}/static/js/login.js" defer></script>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -10,31 +11,27 @@
<body> <body>
<%@include file="../components/navbar.jsp"%> <%@include file="../components/navbar.jsp"%>
<main> <main>
<section id="title">Cards Rush</section> <div class="flex-column login-gap">
<section id="form"> <div>
<div class="border-left"></div> <h1>Se connecter</h1>
<div class="flex-column login-gap"> <form id="login-form" action="${pageContext.request.contextPath}/api/auth/login" method="POST">
<div>
<h1>Login</h1>
<form id="login-form" action="${pageContext.request.contextPath}/api/auth/login" method="POST">
<label id="username-label" for="username">Username:</label> <label id="username-label" for="username">Username:</label>
<input type="text" id="username" name="username" required> <input type="text" id="username" name="username" required>
<label id="password-label" for="password">Password:</label> <label id="password-label" for="password">Password:</label>
<input type="password" id="password" name="password" required> <input type="password" id="password" name="password" required>
<input id="login-submit" type="submit" value="Login"> <input class="button" id="login-submit" type="submit" value="Login">
</form> </form>
</div>
<div>
<p><a href="${pageContext.request.contextPath}/forgotten-password">Forgotten password?</a></p>
<hr>
<p>Don't have an account? <a href="${pageContext.request.contextPath}/register">Register</a></p>
</div>
</div> </div>
</section> <div>
<p><a href="${pageContext.request.contextPath}/forgotten-password">Forgotten password?</a></p>
<hr>
<p>Don't have an account? <a href="${pageContext.request.contextPath}/register">Register</a></p>
</div>
</div>
</main> </main>
</body> </body>
</html> </html>
S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp
+6 -4
View File
@@ -5,7 +5,9 @@
<html> <html>
<head> <head>
<title>Cards Rush</title> <title>Cards Rush</title>
<%-- <link href="${pageContext.request.contextPath}/static/css/main-menu.css" rel="stylesheet">--%> <link href="${pageContext.request.contextPath}/static/css/global.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/main-menu.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/modal.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/js/modal.js" defer></script> <script src="${pageContext.request.contextPath}/static/js/modal.js" defer></script>
<script src="${pageContext.request.contextPath}/static/js/new-game.js" defer></script> <script src="${pageContext.request.contextPath}/static/js/new-game.js" defer></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -14,10 +16,10 @@
<%@include file="../components/navbar.jsp"%> <%@include file="../components/navbar.jsp"%>
<main> <main>
<section id="main"> <section id="main">
<h1 id="Title">Titre du jeu</h1> <h1 id="title">Cards Rush!</h1>
<div class="main-button"> <div class="main-button">
<button class="modal-toggle" data-target="#newGameModal" >Nouvelle Partie</button> <button class="modal-toggle button" data-target="#newGameModal" >Nouvelle Partie</button>
<button class="modal-toggle" data-target="#statisticsModal" >Statistiques</button> <button class="modal-toggle button" data-target="#statisticsModal" >Statistiques</button>
</div> </div>
</section> </section>
<%@include file="../components/new-game.jsp"%> <%@include file="../components/new-game.jsp"%>
S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/register.jsp
+4 -7
View File
@@ -3,18 +3,16 @@
<html> <html>
<head> <head>
<title>Register</title> <title>Register</title>
<link href="${pageContext.request.contextPath}/static/css/global.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/login.css" rel="stylesheet"> <link href="${pageContext.request.contextPath}/static/css/login.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/js/register.js" defer></script> <script src="${pageContext.request.contextPath}/static/js/register.js" defer></script>
</head> </head>
<body> <body>
<%@include file="../components/navbar.jsp"%> <%@include file="../components/navbar.jsp"%>
<main> <main>
<section id="title">Inscription</section>
<section id="form">
<div class="border-left"></div>
<div class="flex-column register-gap"> <div class="flex-column register-gap">
<div> <div>
<h1>Register</h1> <h1>S'inscrire</h1>
<form id="register-form" action="${pageContext.request.contextPath}/api/auth/register" method="POST"> <form id="register-form" action="${pageContext.request.contextPath}/api/auth/register" method="POST">
<label for="email">Email :</label> <label for="email">Email :</label>
@@ -26,7 +24,7 @@
<label for="password">Mot de passe :</label> <label for="password">Mot de passe :</label>
<input type="password" id="password" name="password" required> <input type="password" id="password" name="password" required>
<label for="confirmPassword">Confirmez le mot de pass :</label> <label for="confirmPassword">Confirmez le mot de passe :</label>
<input type="password" id="confirmPassword" name="confirmPassword" required> <input type="password" id="confirmPassword" name="confirmPassword" required>
<label for="birthdate">Date de naissance :</label> <label for="birthdate">Date de naissance :</label>
@@ -40,7 +38,7 @@
<option value="OTHER">Autre</option> <option value="OTHER">Autre</option>
</select> </select>
<input id="register-submit" type="submit" value="Register"> <input class="button" id="register-submit" type="submit" value="Register">
</form> </form>
</div> </div>
<div> <div>
@@ -48,7 +46,6 @@
<p>Déjà un compte ? <a href="${pageContext.request.contextPath}/login">Se connecter</a></p> <p>Déjà un compte ? <a href="${pageContext.request.contextPath}/login">Se connecter</a></p>
</div> </div>
</div> </div>
</section>
</main> </main>
</body> </body>
S2/DevWeb/Projet/src/main/webapp/static/css/global.css
+39
View File
@@ -0,0 +1,39 @@
:root {
--color-red-800: #991B1B;
--color-rose-700: #BE123C;
--sizes-button-input-nav-larger-padding-v: 12px;
--sizes-button-input-nav-larger-padding-h: 32px;
--sizes-button-input-nav-larger-gap: 12px;
--Button-Border-radius: 8px;
--Button-Light-Default-Border: rgba(255, 255, 255, 0.00);
--Button-Light-Default-Background: rgba(255, 255, 255, 0.30);
}
html{
height: 100%;
width: 100%;
}
body {
width: 100%;
height: 832px;
flex-shrink: 0;
background: url("../img/Home.svg") lightgray 50% / cover no-repeat;
opacity: 0.6;
color: #FFF;
}
a.button, input.button button.button{
display: flex;
padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h);
justify-content: center;
align-items: center;
gap: var(--sizes-button-input-nav-larger-gap);
border-radius: var(--Button-Border-radius);
border: 1px solid var(--Button-Light-Default-Border);
background: var(--Button-Light-Default-Background);
color: #FFF;
text-decoration: none;
height: fit-content;
}
S2/DevWeb/Projet/src/main/webapp/static/css/index.css
+56
View File
@@ -0,0 +1,56 @@
html{
height: 100%;
}
.content {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
padding: 10%
}
h1 {
width: 656px;
height: 122px;
color: #FFF;
font-family: Poppins;
font-size: 48px;
font-style: normal;
font-weight: 900;
line-height: 63px; /* 131.25% */
letter-spacing: 0.48px;
}
p {
width: 389px;
color: #FFF;
/* Text/Medium */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
.buttons {
display: flex;
align-items: flex-start;
gap: 30px;
}
a.button{
display: flex;
padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h);
justify-content: center;
align-items: center;
gap: var(--sizes-button-input-nav-larger-gap);
border-radius: var(--Button-Border-radius);
border: 1px solid var(--Button-Light-Default-Border);
background: var(--Button-Light-Default-Background);
color: #FFF;
text-decoration: none;
}
S2/DevWeb/Projet/src/main/webapp/static/css/login.css
+26 -36
View File
@@ -1,19 +1,13 @@
html { :root {
height: 100%; --spacing-615-rem-24-px: 12px;
display: flex;
align-items: center;
} }
body {
width: 100%;
}
main { main {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center;
} }
/*Common */ /*Common */
@@ -42,39 +36,35 @@ hr {
} }
h1 { h1 {
justify-self: center;
}
.flex-column { font-family: Poppins;
display: flex; font-size: 48px;
flex-direction: column; font-style: normal;
justify-content: left; font-weight: 900;
line-height: 63px; /* 131.25% */
letter-spacing: 0.48px;
} }
.login-gap {
gap: 20px;
}
.register-gap {
gap: 75px;
}
#login-form, #register-form { #login-form, #register-form {
display: grid; display: flex;
grid-template-columns: 1fr 1fr; flex-direction: column;
grid-gap: 8% 2%; align-items: flex-start;
gap: var(--spacing-615-rem-24-px);
} }
#login-submit { label {
grid-column: 2/2; font-family: Inter;
grid-row: 3/3; font-size: 16px;
justify-self: right; font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
} }
#register-submit { input {
grid-column: 2/2; width: 100%;
grid-row: 7/7; }
justify-self: right;
a {
color: #ffffff;
bold: true;
} }
S2/DevWeb/Projet/src/main/webapp/static/css/main-menu.css
+41
View File
@@ -0,0 +1,41 @@
#main {
width: 100%;
display: inline-flex;
height: 392px;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
#title {
color: #FFF;
text-align: center;
font-family: Poppins;
font-size: 80px;
font-style: normal;
font-weight: 900;
line-height: 63px; /* 78.75% */
letter-spacing: 0.8px;
}
.main-button {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
button {
display: flex;
padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h);
justify-content: center;
align-items: center;
gap: var(--sizes-button-input-nav-larger-gap);
border-radius: var(--Button-Border-radius);
border: 1px solid var(--Button-Light-Default-Border);
background: var(--Button-Light-Default-Background);
color: #FFF;
text-decoration: none;
height: fit-content;
}
S2/DevWeb/Projet/src/main/webapp/static/css/modal.css
-12
View File
@@ -1,17 +1,5 @@
body {
font-family: sans-serif;
padding: 30px;
}
.demo-description {
max-width: 460px;
margin: 0 auto;
line-height: 1.5;
}
.modal-toggle { .modal-toggle {
cursor: pointer; cursor: pointer;
color: #268bd2;
} }
.modal-wrapper { .modal-wrapper {
S2/DevWeb/Projet/src/main/webapp/static/css/navbar.css
+11 -1
View File
@@ -1,5 +1,15 @@
nav { nav {
display: flex; display: flex;
justify-content: right; flex-direction: row;
justify-content: space-between;
padding: 10px; padding: 10px;
} }
.content {
display: flex;
flex-direction: row;
gap: 40px;
}
p.user{
padding:10px;
}
S2/DevWeb/Projet/src/main/webapp/static/img/Home.svg
+48
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 4.3 MiB