💄 Improve the UI so the grids doesn't disappear and then reappear at each modification

businesses/Room.js

@@ -44,11 +44,13 @@ class Room {
             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(), player: this.actualPlayer}
+                isWin: this.checkWin()}
 
             let tmp = this.actualPlayer;
             this.actualPlayer = this.ennemy;
             this.ennemy = tmp;
+
+            ret.player = this.actualPlayer
         }
         
         return ret

index.js

@@ -34,16 +34,16 @@ app.get('/game', (req, res) => {
 
   if (!token) {
     res.sendFile(path.join(__dirname, '/public/pages/connectionView.html'))
+  } else {
+    res.sendFile(path.join(__dirname, '/public/pages/gameView.html'))
   }
-
-  res.sendFile(path.join(__dirname, '/public/pages/gameView.html'))
 })
 
 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 = ?';
@@ -227,7 +227,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)

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();

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");