💄 Add first wave of style and css ! game isn't pretty but it's less terrible

businesses/Player.js

@@ -13,8 +13,11 @@ class Player {
 
   createPiece() {
     this.pieces.push(new Piece(1, { x: 0, y: 0 }, { x: 0, y: 0 }));
-    //this.pieces.push(new Piece(2, { x: 2, y: 2 }, { x: 2, y: 3 }));
+    this.pieces.push(new Piece(1, { x: 0, y: 3 }, { x: 0, y: 3 }));
-    //this.pieces.push(new Piece(3, { x: 4, y: 3 }, { x: 4, y: 5 }))
+    this.pieces.push(new Piece(2, { x: 2, y: 2 }, { x: 2, y: 3 }));
+    this.pieces.push(new Piece(2, { x: 8, y: 2 }, { x: 8, y: 3 }));
+    this.pieces.push(new Piece(3, { x: 4, y: 3 }, { x: 4, y: 5 }));
+    this.pieces.push(new Piece(4, { x: 6, y: 6 }, { x: 6, y: 9 }));
 
     this.pieces.forEach((piece) => {
       for (let i = piece.startPos.x; i <= piece.endPos.x; i++) {

businesses/Room.js

@@ -38,9 +38,11 @@ class Room {
             ret = {isMove: true, players: this.players, isHit: playedCase.isShip, 
                 isWin: this.checkWin()}
 
+            if(!ret.isHit) {
                 let tmp = this.actualPlayer;
                 this.actualPlayer = this.ennemy;
                 this.ennemy = tmp;
+            }
             
             ret.player = this.actualPlayer
         }

index.js

@@ -38,6 +38,23 @@ app.get('/',  (req, res) => {
   }
 })
 
+app.get('/register', (req, res) => {
+  const token = req.cookies.authToken;
+
+  if(token) {
+    try {
+      jwt.verify(token, secretKey);
+      res.status(200)
+      res.sendFile(path.join(__dirname, '/public/pages/gameView.html'))
+    } catch (ex) {
+      res.status(401)
+      res.sendFile(path.join(__dirname, '/public/pages/signupView.html'))
+    }
+  } else {
+    res.sendFile(path.join(__dirname, '/public/pages/signupView.html'))
+  }
+})
+
 app.get('/game', (req, res) => {
   res.sendFile(path.join(__dirname, '/public/pages/gameView.html'))
 })

public/assets/styles/formStyle.css

@@ -0,0 +1,39 @@
+.form-container {
+    margin-top: 5%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.form-entry{
+    height: 1.7rem;
+    width: 17rem;
+    border-radius: 100px;
+    border: var(--transparent-color);
+}
+
+
+.display-form{
+    gap: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 5%;
+    background: var(--color-background-secondary);
+    border-radius: 1rem;
+    padding: 1.5rem;
+}
+
+.form-validation-btn{
+    font-size: 1rem;
+    padding: 1rem 3rem;
+}
+
+.sub-text {
+    color: var(--color-primary);
+}
+
+input::placeholder {
+    padding-left: 1rem;
+}

public/assets/styles/global.css

@@ -0,0 +1,46 @@
+:root{
+    --color-primary : #e4f1fe;
+    --color-background-primary: #34495e;
+    --color-background-secondary: rgba(167, 224, 224, 0.3);
+    --color-background-secondary-hover: rgb(135, 255, 255);
+    --color-text-primary: #22313f;
+    --transparent-color: transparent;
+}
+
+html,
+body{
+    background-color: #ffffff;
+    background-image: url("../images/background.jpeg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: 0; 
+    height: 100%; 
+    overflow: hidden;
+    font-size: 1.1rem;
+    font-family: Arial, Helvetica, sans-serif;
+    color: var(--color-text-primary);
+}
+
+.title {
+    display: flex;
+    justify-content: center;
+    font-size: 3rem;
+}
+
+.btn{
+    color: var(--color-primary);
+    font-size: 1.5rem;
+    padding: 1rem 4.5rem;
+    background: var(--color-background-primary);
+    border-radius: 100px;
+    align-content: center;
+    border-color: transparent;
+    transition: 0.5s;
+    margin: 1rem;
+}
+
+.btn:hover{
+    color: var(--color-background-primary);
+    background: var(--color-primary);
+}

public/assets/styles/style.css

@@ -44,8 +44,14 @@
     justify-content: space-evenly;
 }
 
-
 #errorHandler {
     margin-top: 3%;
     color: red;
 }
+
+.board-container {
+    display: flex;
+    align-items: center;
+    justify-content: column;
+    justify-content: space-evenly;
+}

public/pages/connectionView.html

@@ -3,34 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Connection View</title>
+    <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
+    <link rel="stylesheet" href="assets/styles/global.css" />
+    <link rel="stylesheet" href="assets/styles/formStyle.css" />
+    <title>Maettleship</title>
 </head>
 <body>
-    <div class="container">
+    <div class="form-container">
-        <h1>Register</h1>
+        <h1 class="title">Maettleship</h1>
-        <form id="registerForm">
+        <form class="display-form" id="logInForm">
-            <label for="email">Pseudo :</label>
+            <h1>Log in</h1>
-            <input type="text" id="pseudo" name="pseudo" required>
+            <input class="form-entry" type="text" id="pseudoLogIn" name="pseudo" placeholder="Pseudo" required>
-            
+            <input class="form-entry" type="password" id="passwordLogIn" name="password" placeholder="Password" required>
-            <label for="password">Password:</label>
-            <input type="password" id="password" name="password" required>
             
-            <button type="submit">Register</button>
+            <button class="btn form-validation-btn" type="submit">Log in</button>
         </form>
-        <div id="message"></div>
-    </div>
 
-    <div class="container">
+        <p class="sub-text">No account ? <a href="/register">Sign up !</a> </p> 
-        <h1>Log in</h1>
-        <form id="logInForm">
-            <label for="email">Pseudo :</label>
-            <input type="text" id="pseudoLogIn" name="pseudo" required>
-            
-            <label for="password">Password:</label>
-            <input type="password" id="passwordLogIn" name="password" required>
 
-            <button type="submit">Log in</button>
-        </form>
         <div id="messageLogIn"></div>
     </div>
     

public/pages/gameView.html

@@ -4,7 +4,9 @@
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" href="assets/style.css" />
+        <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
+        <link rel="stylesheet" href="assets/styles/global.css" />
+        <link rel="stylesheet" href="assets/styles/style.css" />
         <title>Maettleship</title>
     </head>
     <body>
@@ -59,7 +61,7 @@
         </br>
         </br>
 
-        <div id="game">
+        <div class="board-container" id="game">
             <canvas id="own_board" width="301" height="301"></canvas>
             <canvas
                 id="ennemy_board"

public/pages/signupView.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Maettleship</title>
+    <link rel="stylesheet" href="assets/styles/global.css" />
+    <link rel="stylesheet" href="assets/styles/formStyle.css" />
+</head>
+<body>
+    <div class="form-container">
+        <h1 class="title">Maettleship</h1>
+        <form id="registerForm" class="display-form">
+            <h1>Sign up</h1>
+            <input class="form-entry" type="text" id="pseudo" name="pseudo" placeholder="Pseudo" required>
+            <input class="form-entry" type="password" id="password" name="password" placeholder="Password" required>
+            
+            <button class="btn form-validation-btn" type="submit">Sign up</button>
+            <div id="message"></div>
+        </form>
+
+        <p class="sub-text">Have an account ? <a href="/">Log in !</a></p> 
+
+        <script src="../scripts/register.js"></script>
+    </div>
+</body>
+</html>

public/scripts/connection.js

@@ -1,35 +1,3 @@
-document.getElementById('registerForm').addEventListener('submit', async function (event) {
-    event.preventDefault();
-
-    const pseudo = document.getElementById('pseudo').value;
-    const password = document.getElementById('password').value;
-    const messageDiv = document.getElementById('message');
-
-    try {
-        const response = await fetch('/register', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ pseudo, password }),
-        });
-
-        const result = await response.json();
-        
-        if (response.ok) {
-            messageDiv.textContent = 'User registered successfully!';
-            messageDiv.style.color = 'green';
-            window.location.href = result.redirectUrl;
-        } else {
-            messageDiv.textContent = `Error: ${result.message || 'Unknown error'}`;
-            messageDiv.style.color = 'red';
-        }
-    } catch (error) {
-        messageDiv.textContent = `Error: ${error.message}`;
-        messageDiv.style.color = 'red';
-    }
-});
-
 document.getElementById('logInForm').addEventListener('submit', async function (event) {
     event.preventDefault();
 

public/scripts/register.js

@@ -0,0 +1,31 @@
+document.getElementById('registerForm').addEventListener('submit', async function (event) {
+    event.preventDefault();
+
+    const pseudo = document.getElementById('pseudo').value;
+    const password = document.getElementById('password').value;
+    const messageDiv = document.getElementById('message');
+
+    try {
+        const response = await fetch('/register', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ pseudo, password }),
+        });
+
+        const result = await response.json();
+        
+        if (response.ok) {
+            messageDiv.textContent = 'User registered successfully!';
+            messageDiv.style.color = 'green';
+            window.location.href = result.redirectUrl;
+        } else {
+            messageDiv.textContent = `Error: ${result.message || 'Unknown error'}`;
+            messageDiv.style.color = 'red';
+        }
+    } catch (error) {
+        messageDiv.textContent = `Error: ${error.message}`;
+        messageDiv.style.color = 'red';
+    }
+});