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

S2/DevWeb/Projet/mysql/init.sql

@@ -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,

S2/DevWeb/Projet/src/main/java/uppa/project/pojo/Deck.java

@@ -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() {
+  private void initializeDeck(int nbColors, int nbValues){
-    for (Card.Color color : Card.Color.values()){
+    for (int i = 0; i < nbColors; i++) {
-      for (Card.Value value : Card.Value.values()) {
+      for (int j = 0; j < nbValues; j++) {
-        cards.add(new Card(color, value));
+        cards.add(new Card(Card.Color.values()[i], Card.Value.values()[j]));
       }
     }
   }

S2/DevWeb/Projet/src/main/java/uppa/project/pojo/Game.java

@@ -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}
 }

S2/DevWeb/Projet/src/main/java/uppa/project/pojo/User.java

@@ -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}
 }

S2/DevWeb/Projet/src/main/webapp/css/dashboard.css

@@ -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;
+}

S2/DevWeb/Projet/src/main/webapp/css/login.css

@@ -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 {
+.flex-column {
-    display: grid;
-}
-
-.field {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    width: auto;
+    justify-content: left;
-    justify-content: space-between;
-    margin: 1%;
 }
 
-#birthdate {
+.login-gap {
-    width: 59%;
+    gap: 20px;
-    text-align: right;
 }
-.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 {
+#register-submit {
-    border-top: ridge;
+    grid-column: 2/2;
-    padding-top: 5%;
+    grid-row: 7/7;
-}
+    justify-self: right;
 
+}

S2/DevWeb/Projet/src/main/webapp/css/nav.css

@@ -0,0 +1,5 @@
+nav {
+    display: flex;
+    justify-content: right;
+    padding: 10px;
+}

S2/DevWeb/Projet/src/main/webapp/dashboard.jsp

@@ -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>

S2/DevWeb/Projet/src/main/webapp/index.jsp

@@ -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>

S2/DevWeb/Projet/src/main/webapp/js/login.js

@@ -17,9 +17,9 @@ loginForm.addEventListener("submit", (event) => {
     })
         .then(res => res.json())
         .then(data => {
-            if (data)
+            console.log(data);
-            window.location.href = action;
+            if (data.status == 200) window.location.href = action;
         })
         .catch(error => console.error("Error:", error))
     ;
-});
+});

S2/DevWeb/Projet/src/main/webapp/login.jsp

@@ -11,23 +11,27 @@
 <main>
     <section id="title"> Titre du jeu </section>
     <section id="form">
-    <h1>Login</h1>
+        <div class="border-left"></div>
-    <form id="loginForm" data-login-endpoint="api/login" action="dashboard.jsp" method="POST">
+        <div class="flex-column login-gap">
-        <div class="field">
+            <div>
-            <label for="username">Username:</label>
+                <h1>Login</h1>
-            <input type="text" id="username" name="username" required>
+                <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>
 

S2/DevWeb/Projet/src/main/webapp/navBar.jsp

@@ -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>

S2/DevWeb/Projet/src/main/webapp/newGame.jsp

@@ -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>

S2/DevWeb/Projet/src/main/webapp/register.jsp

@@ -9,43 +9,44 @@
 
 <main>
   <section id="title">Titre du jeu</section>
-  <section id="form"><h1>Register</h1>
+  <section id="form">
-    <form id="registerForm"action="register" method="post">
+    <div class="border-left"></div>
-      <div class="field">
+    <div class="flex-column register-gap">
-        <label for="username">Username:</label>
+      <div>
-        <input type="text" id="username" name="username" required>
+        <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>
-      <div class="field">
+        <hr>
-        <label for="password">Password:</label>
+        <p>Already have an account? <a href="login.jsp">Login</a></p>
-        <input type="password" id="password" name="password" required>
       </div>
-
+    </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>
   </section>
 </main>