💄 All end games case working, possibilty to play other games even if opponent quit and one more boat for proper test

businesses/Player.js

@@ -8,8 +8,13 @@ class Player {
     this.username = username
     this.grid = new Grid();
     this.pieces = [];
+    this.createPiece()
+  }
+
+  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(3, { x: 4, y: 3 }, { x: 4, y: 5 }))
 
     this.pieces.forEach((piece) => {
       for (let i = piece.startPos.x; i <= piece.endPos.x; i++) {
@@ -21,19 +26,11 @@ class Player {
     });
   }
 
-  resetPiece() {
-    this.pieces = []
-    this.createPiece()
-  }
-
-  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 }));
-  }
-
   resetGrid() {
     this.grid = new Grid()
-    this.resetPiece()
+    this.pieces = []
+
+    this.createPiece()
   }
 }
 

public/pages/gameView.html

@@ -47,7 +47,7 @@
             <canvas id="own_board" width="301" height="301"></canvas>
             <canvas
                 id="ennemy_board"
-                class="hidden-element"
+                style="display: none;"
                 width="301"
                 height="301"
             ></canvas>
@@ -62,9 +62,9 @@
         <p id="playerInfo"></p>
 
         <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>
+            <h2 style="display: none;" id="play_notification">You have to play</h2>
+            <h2 style="display: none;" id="hit_notification">Hit !</h2>
+            <h2 style="display: none;" id="win_notification">WIN !</h2>
         </div>
 
         <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>

public/scripts/app.js

@@ -20,7 +20,7 @@ function startConnection() {
 socket.on("start game", (username) => {
   const ennemyBoard = document.querySelector("#ennemy_board");
 
-  ennemyBoard.classList.remove("hidden-element");
+  ennemyBoard.style.display = 'block'
 
   drawGrid();
   drawEnnemyGrid();
@@ -31,13 +31,13 @@ socket.on("end game", () => {
   const ennemyBoard = document.querySelector("#ennemy_board");
   const loader = document.querySelector("#loader");
 
-  loader.classList.remove("hidden-element");
-  ennemyBoard.classList.add("hidden-element");
+  loader.style.display = 'block'
+  ennemyBoard.style.display = 'none'
 });
 
 socket.on("play", () => {
   const notification = document.querySelector("#play_notification");
-  notification.classList.remove("hidden-element");
+  notification.style.display = 'block'
   play();
 });
 
@@ -45,13 +45,13 @@ socket.on("played move", (isHit, isWin) => {
   const hitNotification = document.querySelector("#hit_notification");
   const winNotification = document.querySelector("#win_notification");
 
-  if (isHit) hitNotification.classList.remove("hidden-element");
-  else hitNotification.classList.add("hidden-element");
+  if (isHit) hitNotification.style.display = 'block'
+  else hitNotification.style.display = 'none'
 
   if (isWin) gameEnd()
 
-  if (isWin) winNotification.classList.remove("hidden-element");
-  else winNotification.classList.add("hidden-element");
+  if (isWin) winNotification.style.display = 'block'
+  else winNotification.style.display = 'none'
 
   drawGrid();
   drawEnnemyGrid();
@@ -63,22 +63,32 @@ socket.on('opponent left', () => {
 })
 
 socket.on("go to menu", () => {
+  goToMenu()
+})
+
+function goToMenu() {
   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")
+  const loader = document.querySelector("#loader");
+  const playNotification = document.querySelector("#play_notification");
+  const hitNotification = document.querySelector("#hit_notification");
+  const winNotification = document.querySelector("#win_notification");
 
   roomId = ""
 
-  notifications.style.display = 'none'
+  playNotification.style.display = 'none'
+  hitNotification.style.display = 'none'
+  winNotification.style.display = 'none'
   modal.style.display = 'none'
   ennemyGrid.style.display = 'none'
-  loader.classList.remove = "hidden-element"
-  roomkeyHolder.style.display = 'none'
+  loader.style.display = 'block'
+
+  roomkeyHolder.innerHTML = ""
+  roomkeyHolder.style.display = 'block'
 
   drawGrid()
-})
+}
 
 function gameEnd() {
   const modal = document.getElementById('gameEndedModal');
@@ -88,7 +98,7 @@ function gameEnd() {
 export function sendMove(move) {
   const notification = document.querySelector("#play_notification");
   socket.emit("play", roomId, socket.id, move);
-  notification.classList.add("hidden-element");
+  notification.style.display = 'none'
 }
 
 function onCreateRoom() {
@@ -96,7 +106,7 @@ function onCreateRoom() {
     event.preventDefault();
     const loader = document.querySelector("#loader");
     const roomkeyHolder = document.querySelector("#roomkeyHolder");
-    loader.classList.add("hidden-element");
+    loader.style.display = 'none';
 
     socket.emit("room creation", socket.id, (response) => {
       roomId = response.roomId;
@@ -124,7 +134,7 @@ function onJoinRoom() {
           errorHolder.append("Error : Room Id don't exist")
         }
       } else {
-        loader.classList.add("hidden-element");
+        loader.style.display = "none";
         roomkeyHolder.innerHTML += `Your room key is : <strong>` + roomId + `</strong>`;
       }
     });
@@ -135,13 +145,11 @@ function onJoinRoom() {
 
 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()
+
+  goToMenu()
 });
 
 document.getElementById('goToMenuButton').addEventListener('click', () => {