feat: dev-web - frontend login, register, dashboard

This commit is contained in:
kmitresse
2024-03-20 13:41:23 +01:00
parent 19ba5514b4
commit 6229718c4f
14 changed files with 280 additions and 93 deletions
+4 -1
View File
@@ -6,6 +6,7 @@ CREATE TABLE IF NOT EXISTS `user`
(
id INT NOT NULL AUTO_INCREMENT,
username VARCHAR(255) NOT NULL UNIQUE,
email VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
gender VARCHAR(255) NOT NULL,
birth DATE NOT NULL,
@@ -15,11 +16,13 @@ CREATE TABLE IF NOT EXISTS `user`
-- Table: Game
CREATE TABLE IF NOT EXISTS game
(
id INT NOT NULL AUTO_INCREMENT,
id INT NOT NULL AUTO_INCREMENT,
difficulty VARCHAR(255) NOT NULL,
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (id)
);
-- Table: Player
CREATE TABLE IF NOT EXISTS player
(
id INT NOT NULL AUTO_INCREMENT,
@@ -9,16 +9,16 @@ import java.util.Set;
public class Deck {
private Set<Card> cards;
public Deck(){
public Deck(int nbColors, int nbValues){
cards = new HashSet<>();
initializeDeck();
initializeDeck(nbColors, nbValues);
shuffleDeck();
}
private void initializeDeck() {
for (Card.Color color : Card.Color.values()){
for (Card.Value value : Card.Value.values()) {
cards.add(new Card(color, value));
private void initializeDeck(int nbColors, int nbValues){
for (int i = 0; i < nbColors; i++) {
for (int j = 0; j < nbValues; j++) {
cards.add(new Card(Card.Color.values()[i], Card.Value.values()[j]));
}
}
}
@@ -3,6 +3,8 @@ package uppa.project.pojo;
import jakarta.persistence.CascadeType;
import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.EnumType;
import jakarta.persistence.Enumerated;
import jakarta.persistence.FetchType;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
@@ -31,12 +33,28 @@ public class Game implements Serializable {
@Column(name="created_at")
private Date createdAt;
@Column(name = "difficulty")
@Enumerated(EnumType.STRING)
private User.Gender difficulty;
@OneToMany(mappedBy = "game", cascade = CascadeType.ALL, fetch = FetchType.LAZY)
private Set<Player> players;
public Game() {
}
public Game(User.Gender difficulty) {
this.difficulty = difficulty;
}
public Game(BigDecimal id, Date createdAt, User.Gender difficulty, Set<Player> players) {
this.id = id;
this.createdAt = createdAt;
this.difficulty = difficulty;
this.players = players;
}
@Override
public int hashCode() {
return Objects.hash(id, createdAt, players);
@@ -49,6 +67,14 @@ public class Game implements Serializable {
return createdAt;
}
public User.Gender getDifficulty() {
return difficulty;
}
public void setDifficulty(User.Gender difficulty) {
this.difficulty = difficulty;
}
public Set<Player> getPlayers() {
return players;
}
@@ -67,4 +93,7 @@ public class Game implements Serializable {
public String toString() {
return String.format("Game{id=%s, createdAt=%s, players=%s}", id.toString(), createdAt, players);
}
public static enum difficulty {EASY, HARD}
}
@@ -32,35 +32,46 @@ public class User implements Serializable {
@Column(name = "username")
private String username;
@Column(name = "email")
private String email;
@Column(name = "password")
private String password;
@Temporal(TemporalType.DATE)
@Column(name = "birth")
private Date birth;
@Column(name = "gender")
@Enumerated(EnumType.STRING)
private Gender gender;
@OneToMany(mappedBy = "user", cascade = CascadeType.ALL, fetch = FetchType.LAZY)
private Set<Player> playedGame;
public User() {
}
public User(String username, String password, Date birth, Gender gender) {
public User(String username, String email, String password, Date birth, Gender gender) {
this.username = username;
this.email = email;
this.password = hashPassword(password);
this.birth = birth;
this.gender = gender;
}
public User(BigDecimal id, String username, String password) {
public User(BigDecimal id, String username, String email, String password, Date birth, Gender gender) {
this.id = id;
this.username = username;
this.email = email;
this.password = password;
this.birth = birth;
this.gender = gender;
}
@Override
public int hashCode() {
return Objects.hash(id, username, password, birth, gender);
return Objects.hash(id, username, email, password, birth, gender);
}
public BigDecimal getId() {
@@ -75,6 +86,14 @@ public class User implements Serializable {
this.username = username;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
@@ -135,5 +154,5 @@ public class User implements Serializable {
return String.format("User{id=%s, username='%s', birth=%s, gender=%s}", id.toString(), username, birth.toString(), gender.toString());
}
public enum Gender {MALE, FEMALE, OTHER}
public static enum Gender {MALE, FEMALE, OTHER}
}
@@ -0,0 +1,27 @@
html, body {
width: 100%;
height: 100%;
}
#main {
display: flex;
flex-direction: column;
align-items: center;
}
#Title {
text-align: center;
justify-self: center;
font-size: xxx-large;
}
.main-button {
display: flex;
flex-direction: column;
width: 180px;
}
input {
font-size: x-large;
margin: 10px 0;
}
+40 -22
View File
@@ -16,47 +16,65 @@ main {
align-items: center;
}
/*Common */
hr {
width: 100%;
}
.border-left {
border-left: ridge;
padding-left: 6%;
}
/*Section titre*/
#title {
width:60%;
text-align: center;
font-size: xxx-large;
}
/*Section login / register*/
#form {
width: 18%;
display: flex;
flex-direction: row;
height: 100%;
border-left: ridge;
padding-left: 6%;
}
h1 {
justify-self: center;
}
#loginForm, #registerForm {
display: grid;
}
.field {
.flex-column {
display: flex;
flex-direction: row;
width: auto;
justify-content: space-between;
margin: 1%;
flex-direction: column;
justify-content: left;
}
#birthdate {
width: 59%;
text-align: right;
.login-gap {
gap: 20px;
}
.submit {
.register-gap {
gap: 75px;
}
#login-form, #register-form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8% 2%;
}
#login-submit {
grid-column: 2/2;
grid-row: 3/3;
justify-self: right;
width: 35%;
margin: 1%;
}
p {
border-top: ridge;
padding-top: 5%;
}
#register-submit {
grid-column: 2/2;
grid-row: 7/7;
justify-self: right;
}
@@ -0,0 +1,5 @@
nav {
display: flex;
justify-content: right;
padding: 10px;
}
+14 -4
View File
@@ -4,10 +4,20 @@
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="css/dashboard.css"/>
<link rel="stylesheet" href="css/nav.css"/>
</head>
<body>
<main>
<jsp:include page="navBar.jsp"></jsp:include>
<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" >
<input type="button" value="Statistics" >
</div>
</section>
</main>
</body>
</html>
</html>
+16 -2
View File
@@ -1,11 +1,25 @@
<%@ page import="static jdk.internal.net.http.common.Utils.dump" %>
<%@ page import="uppa.project.pojo.User" %>
<%@ page import="uppa.project.dao.jpa.Game_JPA_DAO_Factory" %>
<%@ page import="uppa.project.dao.DAO" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
User user = (User) (request.getAttribute("session"));
%>
<!DOCTYPE html>
<html>
<head>
<title>JSP - Hello World</title>
</head>
<body>
<% if (user == null) { %>
<%-- Pas de user connecté -> On envoi sur la page de connection --%>
<jsp:include page="login.jsp"></jsp:include>
<% } else {
session.setAttribute("sessionUser", session);
%>
<jsp:include page="dashboard.jsp"></jsp:include>
<% } %>
</body>
</html>
</html>
+3 -3
View File
@@ -17,9 +17,9 @@ loginForm.addEventListener("submit", (event) => {
})
.then(res => res.json())
.then(data => {
if (data)
window.location.href = action;
console.log(data);
if (data.status == 200) window.location.href = action;
})
.catch(error => console.error("Error:", error))
;
});
});
+20 -16
View File
@@ -11,23 +11,27 @@
<main>
<section id="title"> Titre du jeu </section>
<section id="form">
<h1>Login</h1>
<form id="loginForm" data-login-endpoint="api/login" action="dashboard.jsp" method="POST">
<div class="field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<div class="border-left"></div>
<div class="flex-column login-gap">
<div>
<h1>Login</h1>
<form id="login-form" data-login-endpoint="api/login" action="dashboard.jsp" method="POST">
<label id="username-label" for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label id="password-label" for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input id="login-submit" type="submit" value="Login">
</form>
</div>
<div>
<hr>
<p>Don't have an account? <a href="register.jsp">Register</a></p>
</div>
</div>
<div class="field">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<input class="submit" type="submit" value="Login">
<p>Don't have an account? <a href="register.jsp">Register</a></p>
</form>
</section>
</main>
@@ -0,0 +1,14 @@
<%--
Created by IntelliJ IDEA.
User: kmitr
Date: 19/03/2024
Time: 11:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<nav>
<p>
username: <!-- Récuperer le nom utilisateur --> <br/>
best score: <!-- Récuperer le meilleur score -->
</p>
</nav>
@@ -0,0 +1,43 @@
<%--
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>Title</title>
</head>
<body>
<main>
<section id="newGame">
<h1> New Game</h1>
<div id="settings">
<form>
<label for="nbRounds">Nb Rounds</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 colors</label>
<input type="range" id="nbColors" name="nbColors" min="1" max="4" value="4">
<label for="nbValues">Nb values per colors</label>
<input type="range" id="nbValues" name="nbValues" min="5" max="13" value="13">
</form>
</div>
<div id="players-selection">
<table>
<tr>
<th>User</th>
<th>Game played</th>
<th>Game won</th>
<th>Invite</th>
</tr>
<%-- Récuperer les joueurs connecter et les lister sous forme de tableau--%>
</table>
</div>
</section>
</main>
</body>
</html>
+36 -35
View File
@@ -9,43 +9,44 @@
<main>
<section id="title">Titre du jeu</section>
<section id="form"><h1>Register</h1>
<form id="registerForm"action="register" method="post">
<div class="field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<section id="form">
<div class="border-left"></div>
<div class="flex-column register-gap">
<div>
<h1>Register</h1>
<form id="register-form" action="register" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="password">RePassword:</label>
<input type="password" id="repassword" name="password" required>
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>
<label for="gender">Gender:</label>
<select name="gender" id="gender">
<option value="">--Please choose an option--</option>
<option value="male">Mâle</option>
<option value="female">Female</option>
<option value="non-binary">Non-binary</option>
</select>
<input id="register-submit" type="submit" value="Register">
</form>
</div>
<div class="field">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<div>
<hr>
<p>Already have an account? <a href="login.jsp">Login</a></p>
</div>
<div class="field">
<label for="password">RePassword:</label>
<input type="password" id="repassword" name="password" required>
</div>
<div class="field">
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>
</div>
<div class="field">
<label for="gender">Gender:</label>
<select name="gender" id="gender">
<option value="">--Please choose an option--</option>
<option value="male">Mâle</option>
<option value="female">Female</option>
<option value="non-binary">Non-binary</option>
</select>
</div>
<input class="submit" type="submit" value="Login">
<p>Already have an account? <a href="login.jsp">Login</a></p>
</form>
</div>
</section>
</main>