✨ rematch implementation

app.js

@@ -1,21 +1,38 @@
 const { io } = require(`${__dirname}/index.js`);
 const { Player } = require(`${__dirname}/businesses/Player.js`);
-const uuid = require("uuid");
 
 let rooms = [];
 let players = [];
 
 io.on("connection", (socket) => {
   console.log("New connected : ", socket.id);
-  /* TODO : handle disconnection
-  socket.on("disconnect", (reason) => {
-    if (game.room.players.length === 2) {
-      game.endGame();
-      delete game.room;
+
+  socket.on("disconnect", () => {
+    const index = players.findIndex((p) => p.id === socket.id)
+    const roomIndex = rooms.findIndex(room => 
+      room.players.some(player => player.id === socket.id)
+    );
+
+    if (roomIndex !== -1) {
+      const room = rooms[roomIndex];
+      const opponent = room.players.find(player => player.id !== socket.id);
+      const inRoomIndex = room.players.findIndex(player => player.id === socket.id);
+
+      if (opponent) {
+        io.to(opponent.id).emit('opponent left');
       }
-    console.debug(game);
-  });
-  */
+
+      room.players.splice(inRoomIndex, 1)
+
+      if (room.players.length === 0) {
+        rooms.splice(roomIndex, 1);
+      }
+    }
+
+    players.splice(index, 1)
+
+    console.log(`Player disconnected: ${socket.id}`);
+  })
 
   socket.on("first connection", (socketId) => {
     let player = new Player(socketId);
@@ -57,8 +74,15 @@ io.on("connection", (socket) => {
     room.move(move);
   });
 
-  socket.on("get player", (id, callback) => {
-    const out = players.find((p) => p.id === id);
+  socket.on("get player", (roomId, id, callback) => {
+    let out = ""
+    const room = rooms.find((r) => r.id === roomId)
+
+    if (room === undefined) {
+      out = players.find((p) => p.id === id);
+    } else {
+      out = room.players.find((p) => p.id === id)
+    }
 
     callback({
       player: out,
@@ -69,6 +93,7 @@ io.on("connection", (socket) => {
     const room = rooms.find((r) => r.id === roomId);
     const out = room.players.find((p) => p.id !== id);
 
+    console.log(out.grid.cases[0])
     callack({
       player: out,
     });
@@ -83,6 +108,11 @@ io.on("connection", (socket) => {
     });
   });
 
+  socket.on("reset grid", (roomId) => {
+    const player = rooms.find((r) => r.id === roomId).players[0]
+    player.resetGrid();
+  })
+
   socket.on("update piece", (playerId, piece) => {
     const player = players.find((p) => p.id === playerId);
     const index = player.pieces.findIndex((p) => p.id === piece.id);
@@ -149,7 +179,7 @@ class Room {
     let playedCase = this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row];
 
     if (playedCase.isPlayed === false) {
-      players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row].isPlayed = true;
+      this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row].isPlayed = true;
       playedMoove(this, playedCase.isShip, this.checkWin());
 
       let tmp = this.actualPlayer;

businesses/Player.js

@@ -19,6 +19,21 @@ 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()
+  }
 }
 
 module.exports = {

public/assets/style.css

@@ -7,3 +7,33 @@
 .hidden-element {
     display: none;
 }
+
+#opponentLeftModal {
+    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 {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    text-align: center;
+}
+
+.close {
+    background-color: #4CAF50;
+    color: white;
+    padding: 15px 20px;
+    border: none;
+    cursor: pointer;
+}

public/index.html

@@ -8,9 +8,15 @@
         <title>Maettleship</title>
     </head>
     <body>
-        <div id="roomkeyHolder">
-            
+        <div id="opponentLeftModal">
+            <div id="opponentLeftModalContent">
+                <p>Your opponent has left the game.</p>
+                <button id="closeModalButton" class="close">Okay</button>
+            </div>
         </div>
+
+        <div id="roomkeyHolder"></div>
+        
         <div id="loader">
             <button class="btn-primary" id="start" type="submit">
                 Create private room

public/scripts/game.js

@@ -14,7 +14,8 @@ export function drawGrid() {
 
   ownCtx.strokeStyle = "black";
 
-  socket.emit("get player", socket.id, (response) => {
+  ownCtx.clearRect(0, 0, 301, 301)
+  socket.emit("get player", roomId, socket.id, (response) => {
     let player = response.player;
     player.pieces.forEach((piece) => {
       for (let i = piece.startPos.x; i <= piece.endPos.x; i++) {
@@ -70,8 +71,10 @@ 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++) {
         ennemyCtx.strokeRect(
@@ -199,7 +202,7 @@ function clickNewCase(piece) {
   const clickNewCasehandler = function (event) {
     let selectedCase = getCursorPosition(ownCanvas, event);
 
-    socket.emit("get player", socket.id, (response) => {
+    socket.emit("get player", " ", socket.id, (response) => {
       let player = response.player;
       player.pieces.forEach((p) => {
         if (
@@ -255,7 +258,7 @@ function rotatePiece(piece) {
   const handler = function (event) {
     event.preventDefault();
 
-    socket.emit("get player", socket.id, (response) => {
+    socket.emit("get player", " ", socket.id, (response) => {
       let player = response.player;
       player.pieces.forEach((p) => {
         if (
@@ -306,7 +309,7 @@ function clickChoose(event) {
   event.preventDefault();
   let selectedCase = getCursorPosition(ownCanvas, event);
 
-  socket.emit("get player", socket.id, (response) => {
+  socket.emit("get player", " ", socket.id, (response) => {
     let player = response.player;
     if (player.grid.cases[selectedCase.col][selectedCase.row].isShip) {
       const rotate_button = document.querySelector("#rotate");

public/scripts/index.js

@@ -55,6 +55,11 @@ socket.on("played move", (isHit, isWin) => {
   drawEnnemyGrid();
 });
 
+socket.on('opponent left', () => {
+  const modal = document.getElementById('opponentLeftModal');
+  modal.style.display = 'block';
+})
+
 export function sendMove(move) {
   const notification = document.querySelector("#play_notification");
   socket.emit("play", roomId, socket.id, move);
@@ -95,4 +100,15 @@ function onJoinRoom() {
   return handler;
 }
 
+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()
+});
+
 setTimeout(startConnection, 100);