Merge branch 'main' of https://github.com/viastolfi/maettleship into docker-deployment

get last features from main branch
10 months ago · b3c0b37007
parent af78db7caa ac98851659
commit b3c0b37007
9 changed files with 197 additions and 125 deletions
--- a/businesses/Room.js
+++ b/businesses/Room.js
@ -1,8 +1,7 @@
 class Room {
-    constructor(room) {
+    constructor() {
        this.id = this.generateRoomId(); // change the id with something prettier
        this.players = [];
-        this.room = room;
        this.actualPlayer = "";
        this.ennemy = "";
    }
@ -28,14 +27,6 @@ class Room {
        return this.actualPlayer
    }

-    /*
-    endGame() {
-        this.room.players.forEach((player) =>
-            io.to(player.socketId).emit("end game"),
-        );
-    }
-    */
-
    move(move) {
        let ret = {isMove: false, player: this.actualPlayer}
        let playedCase = this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row];
@ -43,12 +34,14 @@ class Room {
        if (playedCase.isPlayed === false) {
            this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row].isPlayed = true;

+            ret = {isMove: true, players: this.players, isHit: playedCase.isShip, 
+                isWin: this.checkWin()}
+
            let tmp = this.actualPlayer;
            this.actualPlayer = this.ennemy;
            this.ennemy = tmp;

-            ret = {isMove: true, players: this.players, isHit: playedCase.isShip, 
-                isWin: this.checkWin(), player: this.actualPlayer}
+            ret.player = this.actualPlayer
        }
        
        return ret
@ -74,6 +67,7 @@ class Room {

    validBoards() {
        this.players.forEach((player) => {
+            // sometimes i get error here
            player.pieces.forEach((piece) => {
            for (let i = piece.startPos.x; i <= piece.endPos.x; i++) {
                for (let j = piece.startPos.y; j <= piece.endPos.y; j++) {
--- a/index.js
+++ b/index.js
@ -19,23 +19,26 @@ app.use(cookieParser());

 const secretKey = process.env.COOKIE_SECRET_KEY;

+// #region routing and cookies
+
 app.get('/',  (req, res) => {
  const token = req.cookies.authToken;

  if(token) {
-    res.sendFile(path.join(__dirname, '/public/pages/gameView.html'))
+    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/connectionView.html'))
+    }
  } else {
    res.sendFile(path.join(__dirname, '/public/pages/connectionView.html'))
  }
 })

 app.get('/game', (req, res) => {
-  const token = req.cookies.authToken;
-
-  if (!token) {
-    res.sendFile(path.join(__dirname, '/public/pages/connectionView.html'))
-  }
-
  res.sendFile(path.join(__dirname, '/public/pages/gameView.html'))
 })

@ -43,7 +46,7 @@ app.post('/logIn', (req, res) => {
  const { pseudo, password } = req.body;

  if (!pseudo || !password) {
-    return res.status(400).send('Email and password are required.');
+    return res.status(400).send('pseudo and password are required.');
  }

  const query = 'SELECT * FROM users WHERE pseudo = ? AND password = ?';
@ -120,6 +123,11 @@ app.get('/user-info', (req, res) => {
  }
 });

+// #endregion routing and cookies
+
+
+// #region socket and game
+
 let rooms = [];
 let players = [];

@ -128,8 +136,9 @@ io.on("connection", (socket) => {

  socket.on("disconnect", () => {
    const index = players.findIndex((p) => p.id === socket.id)
+    // if there is no room this line creates error
    const roomIndex = rooms.findIndex(room => 
-      room.players.some(player => player.id === socket.id)
+      room.players.some((player) => player.id === socket.id)
    );

    if (roomIndex !== -1) {
@ -154,6 +163,7 @@ io.on("connection", (socket) => {
  })

  socket.on("first connection", (socketId) => {
+    // error my occurs if cookie is expired
    const cookies = socket.request.headers.cookie;
    const authToken = cookies.split('; ').find(cookie => cookie.startsWith('authToken=')).split('=')[1];

@ -187,9 +197,20 @@ io.on("connection", (socket) => {
    });
  });

-  socket.on("ask for room", (roomId, id) => {
+  socket.on("ask for room", (roomId, id, callack) => {
    let room = rooms.find((r) => r.id === roomId);

+    if (room == null) {
+      callack({
+        status: false
+      })
+      return 
+    }
+
+    callack({
+      status: true
+    })
+
    room.addPlayer(players.find((p) => p.id === id));
    room.validBoards();

@ -216,7 +237,7 @@ io.on("connection", (socket) => {
    let out = ""
    const room = rooms.find((r) => r.id === roomId)

-    if (room === undefined) {
+    if (room == null) {
      out = players.find((p) => p.id === id);
    } else {
      out = room.players.find((p) => p.id === id)
@ -245,6 +266,22 @@ io.on("connection", (socket) => {
    });
  });

+  socket.on("game ended", (roomId) => {
+    const room = rooms.find((r) => r.id === roomId)
+    const roomIndex = rooms.findIndex((r) => r.id === roomId)
+
+    room.players.forEach(player => {
+      player.resetGrid()
+      io.to(player.id).emit("go to menu")
+    });
+
+    room.players = []
+    rooms.slice(roomIndex, 1)
+    delete room
+
+    console.log("rooms list : ", rooms)
+  })
+
  socket.on("reset grid", (roomId) => {
    const player = rooms.find((r) => r.id === roomId).players[0]
    player.resetGrid();
@ -277,6 +314,9 @@ const sendMoveToPlayers = (moveData) => {
  askToPlay(moveData.player)
 };

+// #endregion socket and game
+
+
 http.listen(port, () => {
  console.log(`Listening on http://localhost:${port}`);
 });
--- a/package-lock.json
+++ b/package-lock.json
@ -20,9 +20,9 @@
      }
    },
    "node_modules/@socket.io/component-emitter": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.1.tgz",
-      "integrity": "sha512-dzJtaDAAoXx4GCOJpbB2eG/Qj8VDpdwkLsWGzGm+0L7E8/434RyMbAHmk9ubXWVAb9nXmc44jUf8GKqVDiKezg=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
    },
    "node_modules/@types/cookie": {
      "version": "0.4.1",
@ -38,11 +38,11 @@
      }
    },
    "node_modules/@types/node": {
-      "version": "20.12.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
-      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
+      "version": "22.1.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.1.0.tgz",
+      "integrity": "sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==",
      "dependencies": {
-        "undici-types": "~5.26.4"
+        "undici-types": "~6.13.0"
      }
    },
    "node_modules/accepts": {
@ -160,9 +160,9 @@
      }
    },
    "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
      "engines": {
        "node": ">= 0.6"
      }
@ -179,14 +179,6 @@
        "node": ">= 0.8.0"
      }
    },
-    "node_modules/cookie-parser/node_modules/cookie": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
    "node_modules/cookie-signature": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
@ -300,25 +292,17 @@
      }
    },
    "node_modules/engine.io-parser": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz",
-      "integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==",
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
      "engines": {
        "node": ">=10.0.0"
      }
    },
-    "node_modules/engine.io/node_modules/cookie": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
-      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
    "node_modules/engine.io/node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
      "dependencies": {
        "ms": "2.1.2"
      },
@ -409,6 +393,14 @@
        "node": ">= 0.10.0"
      }
    },
+    "node_modules/express/node_modules/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/finalhandler": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@ -822,9 +814,12 @@
      }
    },
    "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "engines": {
+        "node": ">= 0.4"
+      },
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@ -950,9 +945,9 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
    "node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
      "bin": {
        "semver": "bin/semver.js"
      },
@ -1072,9 +1067,9 @@
      }
    },
    "node_modules/socket.io-adapter/node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
      "dependencies": {
        "ms": "2.1.2"
      },
@ -1105,9 +1100,9 @@
      }
    },
    "node_modules/socket.io-parser/node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
      "dependencies": {
        "ms": "2.1.2"
      },
@ -1126,9 +1121,9 @@
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
    "node_modules/socket.io/node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
      "dependencies": {
        "ms": "2.1.2"
      },
@ -1196,9 +1191,9 @@
      }
    },
    "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.13.0.tgz",
+      "integrity": "sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg=="
    },
    "node_modules/unpipe": {
      "version": "1.0.0",
--- a/public/assets/style.css
+++ b/public/assets/style.css
@ -8,7 +8,7 @@
    display: none;
 }

-#opponentLeftModal {
+.modal {
    display: none;
    position: fixed;
    z-index: 1;
@ -21,20 +21,7 @@
    background-color: rgba(0,0,0,0.4);
 }

-#gameEndedModal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0,0,0);
-    background-color: rgba(0,0,0,0.4);
-}
-
-#opponentLeftModalContent {
+.modalContent {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
@ -49,4 +36,16 @@
    padding: 15px 20px;
    border: none;
    cursor: pointer;
+}
+
+.buttonChoice {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+
+#errorHandler {
+    margin-top: 3%;
+    color: red;
 }
--- a/public/pages/gameView.html
+++ b/public/pages/gameView.html
@ -8,17 +8,20 @@
        <title>Maettleship</title>
    </head>
    <body>
-        <div id="opponentLeftModal">
-            <div id="opponentLeftModalContent">
+        <div class="modal" id="opponentLeftModal">
+            <div class="modalContent" id="opponentLeftModalContent">
                <p>Your opponent has left the game.</p>
                <button id="closeModalButton" class="close">Okay</button>
            </div>
        </div>

-        <div id="gameEndedModal">
-            <div id="gameEndedModalContent">
+        <div class="modal" id="gameEndedModal">
+            <div class="modalContent" id="gameEndendModalContent">
                <p>We have a winner</p>
-                <button id="closeEndGameModalButton" class="close">Okay</button>
+                <div class="buttonChoice">
+                    <button id="rematchButton" class="close">Rematch</button>
+                    <button id="goToMenuButton" class="close">Menu</button>
+                </div>
            </div>
        </div>

@ -33,6 +36,8 @@
            <button class="btn-primary" id="join" type="submit">
                Join room
            </button>
+
+            <div id="errorHandler"></div>
        </div>

        </br>
@ -56,9 +61,11 @@

        <p id="playerInfo"></p>

-        <h2 class="hidden-element" id="play_notification">You have to play</h2>
-        <h2 class="hidden-element" id="hit_notification">Hit !</h2>
-        <h2 class="hidden-element" id="win_notification">WIN !</h2>
+        <div id="inGameNotification">
+            <h2 class="hidden-element" id="play_notification">You have to play</h2>
+            <h2 class="hidden-element" id="hit_notification">Hit !</h2>
+            <h2 class="hidden-element" id="win_notification">WIN !</h2>
+        </div>

        <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
        <script type="module" src="../scripts/game.js"></script>
--- a/public/scripts/app.js
+++ b/public/scripts/app.js
@ -21,7 +21,6 @@ socket.on("start game", (username) => {
  const ennemyBoard = document.querySelector("#ennemy_board");

  ennemyBoard.classList.remove("hidden-element");
-  console.log(username)

  drawGrid();
  drawEnnemyGrid();
@ -43,7 +42,6 @@ socket.on("play", () => {
 });

 socket.on("played move", (isHit, isWin) => {
-  console.log("test")
  const hitNotification = document.querySelector("#hit_notification");
  const winNotification = document.querySelector("#win_notification");

@ -64,6 +62,24 @@ socket.on('opponent left', () => {
  modal.style.display = 'block';
 })

+socket.on("go to menu", () => {
+  const modal = document.getElementById("gameEndedModal")
+  const ennemyGrid = document.getElementById("ennemy_board")
+  const loader = document.getElementById("loader")
+  const roomkeyHolder = document.getElementById("roomkeyHolder")
+  const notifications = document.getElementById("inGameNotification")
+
+  roomId = ""
+
+  notifications.style.display = 'none'
+  modal.style.display = 'none'
+  ennemyGrid.style.display = 'none'
+  loader.classList.remove = "hidden-element"
+  roomkeyHolder.style.display = 'none'
+
+  drawGrid()
+})
+
 function gameEnd() {
  const modal = document.getElementById('gameEndedModal');
  modal.style.display = 'block';
@ -98,12 +114,20 @@ function onJoinRoom() {
    const loader = document.querySelector("#loader");
    const roomKey = document.querySelector("#roomKey").value;
    const roomkeyHolder = document.querySelector("#roomkeyHolder");
-
-    loader.classList.add("hidden-element");
+    const errorHolder = document.querySelector("#errorHandler")

    roomId = roomKey;
-    roomkeyHolder.innerHTML += `Your room key is : <strong>` + roomId + `</strong>`;
-    socket.emit("ask for room", roomKey, socket.id);
+    
+    socket.emit("ask for room", roomKey, socket.id, (response) => {
+      if (response.status !== true) {
+        if (errorHolder.textContent == "") {
+          errorHolder.append("Error : Room Id don't exist")
+        }
+      } else {
+        loader.classList.add("hidden-element");
+        roomkeyHolder.innerHTML += `Your room key is : <strong>` + roomId + `</strong>`;
+      }
+    });
  };

  return handler;
@ -120,15 +144,8 @@ document.getElementById('closeModalButton').addEventListener('click', () => {
  drawGrid()
 });

-document.getElementById('closeModalButton').addEventListener('click', () => {
-  const modal = document.getElementById('opponentLeftModal');
-  const ennemyBoard = document.querySelector("#ennemy_board");
-
-  ennemyBoard.classList.add("hidden-element");
-  modal.style.display = 'none';
-
-  socket.emit("reset grid", roomId)
-  drawGrid()
-});
+document.getElementById('goToMenuButton').addEventListener('click', () => {
+  socket.emit("game ended", roomId);
+})

 setTimeout(startConnection, 100);
--- a/public/scripts/connection.js
+++ b/public/scripts/connection.js
@ -15,8 +15,6 @@ document.getElementById('registerForm').addEventListener('submit', async functio
        });

        const result = await response.json();
-        console.log("test")
-        console.log(result)
        
        if (response.ok) {
            messageDiv.textContent = 'User registered successfully!';
@ -27,7 +25,6 @@ document.getElementById('registerForm').addEventListener('submit', async functio
            messageDiv.style.color = 'red';
        }
    } catch (error) {
-        console.log("testE")
        messageDiv.textContent = `Error: ${error.message}`;
        messageDiv.style.color = 'red';
    }
@ -60,7 +57,6 @@ document.getElementById('logInForm').addEventListener('submit', async function (
            messageDiv.style.color = 'red';
        }
    } catch (error) {
-        console.log("testEL")
        messageDiv.textContent = `Error: ${error.message}`;
        messageDiv.style.color = 'red';
    }
--- a/public/scripts/game.js
+++ b/public/scripts/game.js
@ -10,11 +10,7 @@ const CASE_SIZE = 30;
 let selectedPiece = "";

 export function drawGrid() {
-  ownCtx.clearRect(0, 0, ownCanvas.height, ownCanvas.width);
-
  ownCtx.strokeStyle = "black";
-
-  ownCtx.clearRect(0, 0, 301, 301)
  socket.emit("get player", roomId, socket.id, (response) => {
    let player = response.player;
    player.pieces.forEach((piece) => {
@ -43,6 +39,16 @@ export function drawGrid() {

    for (let i = 0; i < player.grid.cases.length; i++) {
      for (let j = 0; j < player.grid.cases.length; j++) {
+        if (!player.grid.cases[i][j].isShip) {
+          ownCtx.fillStyle = "white"
+          ownCtx.fillRect(
+            i * CASE_SIZE,
+            j * CASE_SIZE,
+            CASE_SIZE,
+            CASE_SIZE
+          )
+        }
+
        ownCtx.strokeRect(
          i * CASE_SIZE + 1,
          j * CASE_SIZE + 1,
@ -71,12 +77,20 @@ export function drawGrid() {
 export function drawEnnemyGrid() {
  ennemyCtx.strokeStyle = "red";

-  ennemyCtx.clearRect(0, 0, 301, 301)
  socket.emit("get ennemy", roomId, socket.id, (response) => {
    let player = response.player;
-    console.log(player.grid.cases[0])
    for (let i = 0; i < player.grid.cases.length; i++) {
      for (let j = 0; j < player.grid.cases.length; j++) {
+        if (!player.grid.cases[i][j].isPlayed) {
+          ennemyCtx.fillStyle = "white"
+          ennemyCtx.fillRect(
+            i * CASE_SIZE,
+            j * CASE_SIZE,
+            CASE_SIZE,
+            CASE_SIZE
+          )
+        }
+
        ennemyCtx.strokeRect(
          i * CASE_SIZE + 1,
          j * CASE_SIZE + 1,
@ -310,6 +324,7 @@ function clickChoose(event) {
  let selectedCase = getCursorPosition(ownCanvas, event);

  socket.emit("get player", " ", socket.id, (response) => {
+    // Sometimes i get an error there
    let player = response.player;
    if (player.grid.cases[selectedCase.col][selectedCase.row].isShip) {
      const rotate_button = document.querySelector("#rotate");
--- a/public/scripts/gamePageInfo.js
+++ b/public/scripts/gamePageInfo.js
@ -1,3 +1,7 @@
+function deleteCookie(name) {
+    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+}
+
 document.addEventListener('DOMContentLoaded', async () => {
    const playerInfoDiv = document.getElementById('playerInfo');

@ -9,11 +13,16 @@ document.addEventListener('DOMContentLoaded', async () => {
            },
        });

-        if (response.ok) {
+        if (response.status === 401) {
+            deleteCookie('authToken');
+            window.location.href = '/';
+        } else if (!response.ok) {
+            deleteCookie('authToken');
+            playerInfoDiv.textContent = 'Error: Could not retrieve user information.';
+            window.location.href = '/';
+        } else {
            const userInfo = await response.json();
            playerInfoDiv.textContent = `Logged in as: ${userInfo.pseudo}`;
-        } else {
-            playerInfoDiv.textContent = 'Error: Could not retrieve user information.';
        }
    } catch (error) {
        playerInfoDiv.textContent = `Error: ${error.message}`;