✨ rematch implementation

businesses/Player.js

@@ -13,8 +13,8 @@ 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(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.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++) {

businesses/Room.js

@@ -4,6 +4,7 @@ class Room {
         this.players = [];
         this.actualPlayer = "";
         this.ennemy = "";
+        this.wantRematch = 0;
     }
 
     addPlayer(player) {

index.js

@@ -215,7 +215,7 @@ io.on("connection", (socket) => {
     room.validBoards();
 
     for (let i = 0; i < room.players.length; i++) {
-      io.to(room.players[i].id).emit("start game", room.players[i === 0 ? 1 : 0].username)
+      io.to(room.players[i].id).emit("start game")
     }
 
     /*
@@ -294,6 +294,41 @@ io.on("connection", (socket) => {
       .find((p) => p.id === playerId)
       .pieces.find((piece) => piece.id === pieceId).isSelected = status;
   });
+
+  // #region rematch hanlding
+
+  socket.on("ask for rematch", (roomId, playerId) => {
+    const room = rooms.find((r) => r.id === roomId)
+    const opponent = room.players.find((p) => p.id !== playerId)
+
+    io.to(opponent.id).emit("ask for rematch");
+  })
+
+  socket.on("rematch grid", (roomId) => {
+    const room = rooms.find((r) => r.id === roomId)
+
+    room.players.forEach(p => {
+      p.resetGrid()
+      io.to(p.id).emit("rematch grid")
+    })
+  })
+
+  socket.on("valid grid", (roomId) => {
+    const room = rooms.find((r) => r.id === roomId)
+
+    room.wantRematch = room.wantRematch + 1 
+
+    if (room.wantRematch === 2) {
+      room.validBoards();
+      room.wantRematch = 0
+      room.players.forEach(p => {
+        io.to(p.id).emit("start game")
+      })
+      askToPlay(room.start());
+    }
+  })
+
+  // #endregion rematch hanlding
 });
 
 const askToPlay = (player) => {

public/pages/gameView.html

@@ -25,6 +25,22 @@
             </div>
         </div>
 
+        <div class="modal" id="waitChoiceModal">
+            <div class="modalContent" id="waitChoiceModalContent">
+                <p>Waiting for opponent ...</p>
+            </div>
+        </div>
+
+        <div class="modal" id="rematchModal">
+            <div class="modalContent" id="rematchModalContent">
+                <p>Your opponent want to rematch !</p>
+                <div class="buttonChoice">
+                    <button id="acceptButton" class="close">Accept</button>
+                    <button id="goToMenuButton2" class="close">Go to menu</button>
+                </div>
+            </div>
+        </div>
+
         <div id="roomkeyHolder"></div>
         
         <div id="loader">
@@ -59,6 +75,12 @@
             Rotate
         </button>
 
+        <br>
+
+        <button class="btn-primary" style="display: none;" id="validGrid" type="submit">
+            Validate !
+        </button>
+
         <p id="playerInfo"></p>
 
         <div id="inGameNotification">

public/scripts/app.js

@@ -17,9 +17,13 @@ function startConnection() {
     .addEventListener("click", onJoinRoom());
 }
 
-socket.on("start game", (username) => {
+socket.on("start game", () => {
   const ennemyBoard = document.querySelector("#ennemy_board");
+  const waitChoiceModal = document.getElementById("waitChoiceModal")
+  const validGrid = document.getElementById("validGrid")
 
+  validGrid.style.display = 'none'
+  waitChoiceModal.style.display = 'none'
   ennemyBoard.style.display = 'block'
 
   drawGrid();
@@ -66,8 +70,49 @@ socket.on("go to menu", () => {
   goToMenu()
 })
 
+// #region rematch handling
+
+socket.on("ask for rematch", () => {
+  const rematchModal = document.getElementById("rematchModal")
+  const gameEndedModal = document.getElementById("gameEndedModal")
+
+  gameEndedModal.style.display = 'none'
+  rematchModal.style.display = 'block'
+})
+
+socket.on("rematch grid", () => {
+  const waitChoiceModal = document.getElementById("waitChoiceModal")
+  const rematchModal = document.getElementById("rematchModal")
+  const playNotification = document.querySelector("#play_notification");
+  const hitNotification = document.querySelector("#hit_notification");
+  const winNotification = document.querySelector("#win_notification");
+  const ennemyGrid = document.getElementById("ennemy_board")
+  const validGrid = document.getElementById("validGrid")
+
+  validGrid.style.display = 'block'
+  playNotification.style.display = 'none'
+  hitNotification.style.display = 'none'
+  winNotification.style.display = 'none'
+  waitChoiceModal.style.display = 'none'
+  rematchModal.style.display = 'none'
+  ennemyGrid.style.display = 'none'
+
+  drawGrid()
+})
+
+document.getElementById("validGrid").addEventListener('click', () => {
+  const waitChoiceModal = document.getElementById("waitChoiceModal")
+  waitChoiceModal.style.display = 'block'
+
+  socket.emit("valid grid", roomId)
+})
+
+// #endregion rematch handling
+
 function goToMenu() {
-  const modal = document.getElementById("gameEndedModal")
+  const gameEndedModal = document.getElementById("gameEndedModal")
+  const waitChoiceModal = document.getElementById("waitChoiceModal")
+  const rematchModal = document.getElementById("rematchModal")
   const ennemyGrid = document.getElementById("ennemy_board")
   const roomkeyHolder = document.getElementById("roomkeyHolder")
   const loader = document.querySelector("#loader");
@@ -80,7 +125,9 @@ function goToMenu() {
   playNotification.style.display = 'none'
   hitNotification.style.display = 'none'
   winNotification.style.display = 'none'
-  modal.style.display = 'none'
+  gameEndedModal.style.display = 'none'
+  waitChoiceModal.style.display = 'none'
+  rematchModal.style.display = 'none'
   ennemyGrid.style.display = 'none'
   loader.style.display = 'block'
 
@@ -152,8 +199,31 @@ document.getElementById('closeModalButton').addEventListener('click', () => {
   goToMenu()
 });
 
+document.getElementById('acceptButton').addEventListener('click', () => {
+  const rematchModal = document.getElementById('rematchModal')
+  rematchModal.style.display = 'none'
+
+  socket.emit('rematch grid', roomId)
+})
+
 document.getElementById('goToMenuButton').addEventListener('click', () => {
   socket.emit("game ended", roomId);
 })
 
+document.getElementById('goToMenuButton2').addEventListener('click', () => {
+  socket.emit("game ended", roomId);
+})
+
+//document.getElementById('acceptButton').addEventListener('')
+
+document.getElementById('rematchButton').addEventListener('click', () => {
+  const endGameModal = document.getElementById('gameEndedModal')
+  const waitChoicemodal = document.getElementById('waitChoiceModal');
+
+  waitChoicemodal.style.display = 'block'
+  endGameModal.style.display = 'none'
+
+  socket.emit("ask for rematch", roomId, socket.id)
+})
+
 setTimeout(startConnection, 100);