✨ Refactor lot of the old function. New implementation of room. Room creation with dedicated code and multiple room

app.js

@@ -1,9 +1,8 @@
 const { io } = require(`${__dirname}/index.js`);
 const { Player } = require(`${__dirname}/businesses/Player.js`);
-const { Room } = require(`${__dirname}/businesses/Room.js`);
+const uuid = require("uuid");
 
-let room;
-let game;
+let rooms = [];
 let players = [];
 
 io.on("connection", (socket) => {
@@ -18,12 +17,9 @@ io.on("connection", (socket) => {
   });
   */
 
-  socket.on("first connection", (socketId, callback) => {
+  socket.on("first connection", (socketId) => {
     let player = new Player(socketId);
     players.push(player);
-    callback({
-      player: player,
-    });
   });
 
   socket.on("Hello", (callback) => {
@@ -32,109 +28,106 @@ io.on("connection", (socket) => {
     });
   });
 
-  socket.on("room creation", (player) => {
-    room = new Room();
-    room.addPlayer(player);
+  socket.on("room creation", (id, callback) => {
+    let room = new Room();
+    room.addPlayer(players.find((p) => p.id === id));
+    rooms.push(room);
+
+    callback({
+      roomId: room.id,
     });
+  });
+
+  socket.on("ask for room", (roomId, id) => {
+    let room = rooms.find((r) => r.id === roomId);
+
+    room.addPlayer(players.find((p) => p.id === id));
+    room.validBoards();
 
-  socket.on("ask for room", (player) => {
-    room.addPlayer(player);
-    game = new Game(room);
-    game.validBoards();
-    game.room.players.forEach((player) => {
-      io.to(player.socketId).emit("start game");
+    room.players.forEach((player) => {
+      io.to(player.id).emit("start game");
     });
-    game.start();
+
+    room.start();
   });
 
-  socket.on("play", (id, move) => {
-    game.modifyEnnemyGrid(id, move);
-    game.move(move);
+  socket.on("play", (roomId, id, move) => {
+    let room = rooms.find((r) => r.id === roomId);
+
+    room.move(move);
   });
 
   socket.on("get player", (id, callback) => {
-    let out = "";
-    players.forEach((p) => {
-      if (p.socketId === id) {
-        out = p;
-      }
-    });
+    const out = players.find((p) => p.id === id);
+
     callback({
       player: out,
     });
   });
 
-  socket.on("get ennemy", (id, callack) => {
-    let out = "";
-    players.forEach((p) => {
-      if (p.socketId !== id) {
-        out = p;
-      }
-    });
+  socket.on("get ennemy", (roomId, id, callack) => {
+    const out = players.find((p) => p.id !== id)
+    //const out = rooms.find((r) => r.id === roomId)
+    //  .players.find((p) => p.id !== id);
+
     callack({
       player: out,
     });
   });
 
   socket.on("update grid", (id, grid, callback) => {
-    players.forEach((p) => {
-      if (p.socketId === id) {
-        p.grid = grid;
-      }
-    });
+    const player = players.find((p) => p.id === id);
+    player.grid = grid;
+
     callback({
       status: true,
     });
   });
 
   socket.on("update piece", (playerId, piece) => {
-    players.forEach((p) => {
-      if (p.socketId === playerId) {
-        for (let i = 0; i < p.pieces.length; i++) {
-          if (p.pieces[i].id === piece.id) {
-            p.pieces[i] = piece;
-          }
-        }
-      }
-    });
+    const player = players.find((p) => p.id === playerId);
+    const index = player.pieces.findIndex((p) => p.id === piece.id);
+
+    player.pieces[index] = piece;
   });
 
   socket.on("change selection status", (playerId, pieceId, status) => {
-    players.forEach((p) => {
-      if (p.id === playerId) {
-        p.pieces.forEach((piece) => {
-          if (piece.id === pieceId) {
-            piece.isSelected = status;
-          }
-        });
-      }
-    });
+    players
+      .find((p) => p.id === playerId)
+      .pieces.find((piece) => piece.id === pieceId).isSelected = status;
   });
 });
 
 const askToPlay = (game) => {
-  io.to(game.actualPlayer.socketId).emit("play");
+  console.log(game.actualPlayer)
+  io.to(game.actualPlayer).emit("play");
 };
 
 const playedMoove = (game, isHit, isWin) => {
-  game.room.players.forEach((player) => {
-    io.to(player.socketId).emit("played move", isHit, isWin);
+  game.players.forEach((player) => {
+    io.to(player.id).emit("played move", isHit, isWin);
   });
 };
 
-class Game {
+class Room {
   constructor(room) {
+    this.id = this.generateRoomId(); // change the id with something prettier
+    this.players = [];
     this.room = room;
     this.actualPlayer = "";
     this.ennemy = "";
   }
 
+  addPlayer(player) {
+    this.players.push(player);
+  }
+
   start() {
     let rand = Math.floor(Math.random() * (1 - 0 + 1) + 0);
-    this.actualPlayer = this.room.players[rand];
+    this.actualPlayer = this.players[rand].id;
     rand === 0
-      ? (this.ennemy = this.room.players[1])
-      : (this.ennemy = this.room.players[0]);
+      ? (this.ennemy = this.players[1].id)
+      : (this.ennemy = this.players[0].id);
 
     players.forEach((p) => {
       for (let i = 0; i < p.pieces.length; i++) {
@@ -154,44 +147,41 @@ class Game {
   }
   */
 
-  modifyEnnemyGrid(id, move) {
-    players.forEach((p) => {
-      if (p.socketId !== id) {
-        p.grid.cases[move.col][move.row].isPlayed = true;
-      }
-    });
-  }
-
   move(move) {
-    let playedCase = this.ennemy.grid.cases[move.col][move.row];
+    let playedCase = this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row];
+
     if (playedCase.isPlayed === false) {
-      playedCase.isPlayed = true;
-      let isHit = playedCase.isShip;
-      let isWin = this.checkWin();
-      playedMoove(this, isHit, isWin);
-      let temp = this.actualPlayer;
+      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;
       this.actualPlayer = this.ennemy;
-      this.ennemy = temp;
+      this.ennemy = tmp;
     }
+
     askToPlay(this);
   }
 
   checkWin() {
+    const e = this.players.find((p) => p.id === this.ennemy);
     let w = true;
-    for (let i = 0; i < this.ennemy.grid.cases.length; i++) {
-      for (let j = 0; j < this.ennemy.grid.cases.length; j++) {
-        let c = this.ennemy.grid.cases[i][j];
+
+    for (let i = 0; i < e.grid.cases.length; i++) {
+      for (let j = 0; j < e.grid.cases.length; j++) {
+        let c = e.grid.cases[i][j];
+
         if (c.isShip && !c.isPlayed) {
           w = false;
           break;
         }
       }
     }
+
     return w;
   }
 
   validBoards() {
-    this.room.players.forEach((player) => {
+    this.players.forEach((player) => {
       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++) {
@@ -201,4 +191,17 @@ class Game {
       });
     });
   }
+  
+  generateRoomId() {
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    const idLength = 5;
+    let roomId = '';
+  
+    for (let i = 0; i < idLength; i++) {
+      const randomIndex = Math.floor(Math.random() * characters.length);
+      roomId += characters[randomIndex];
+    }
+  
+    return roomId;
+  }
 }

businesses/Player.js

@@ -4,8 +4,7 @@ const { Piece } = require("./Piece.js");
 
 class Player {
   constructor(socketId) {
-    this.id = uuid.v4();
-    this.socketId = socketId;
+    this.id = socketId;
     this.grid = new Grid();
     this.pieces = [];
     this.pieces.push(new Piece(1, { x: 0, y: 0 }, { x: 0, y: 0 }));

businesses/Room.js

@@ -1,16 +0,0 @@
-const uuid = require("uuid");
-
-class Room {
-  constructor() {
-    this.id = uuid.v4();
-    this.players = [];
-  }
-
-  addPlayer(player) {
-    this.players.push(player);
-  }
-}
-
-module.exports = {
-  Room,
-};

public/index.html

@@ -8,11 +8,15 @@
         <title>Maettleship</title>
     </head>
     <body>
+        <div id="roomkeyHolder">
+            
+        </div>
         <div id="loader">
             <button class="btn-primary" id="start" type="submit">
                 Create private room
             </button>
 
+            <input type="text" class="input-container" id="roomKey" minlength="2" placeholder="room key" required>
             <button class="btn-primary" id="join" type="submit">
                 Join room
             </button>

public/scripts/game.js

@@ -1,4 +1,4 @@
-import { sendMove, socket } from "./index.js";
+import { sendMove, socket, roomId } from "./index.js";
 
 const ownCanvas = document.getElementById("own_board");
 const ownCtx = ownCanvas.getContext("2d");
@@ -70,7 +70,7 @@ export function drawGrid() {
 export function drawEnnemyGrid() {
   ennemyCtx.strokeStyle = "red";
 
-  socket.emit("get ennemy", socket.id, (response) => {
+  socket.emit("get ennemy", roomId, socket.id, (response) => {
     let player = response.player;
     for (let i = 0; i < player.grid.cases.length; i++) {
       for (let j = 0; j < player.grid.cases.length; j++) {
@@ -198,6 +198,7 @@ function validMoove(player, piece, movement) {
 function clickNewCase(piece) {
   const clickNewCasehandler = function (event) {
     let selectedCase = getCursorPosition(ownCanvas, event);
+
     socket.emit("get player", socket.id, (response) => {
       let player = response.player;
       player.pieces.forEach((p) => {
@@ -316,11 +317,11 @@ function clickChoose(event) {
         let oldPieceId = selectedPiece.id;
         player.pieces.forEach((p) => {
           if (p.id === oldPieceId) {
-            socket.emit("change selection status", player.id, p.id, false);
+            socket.emit("change selection status", socket.id, p.id, false);
           }
           if (p.id === piece.id) {
             selectedPiece = p;
-            socket.emit("change selection status", player.id, p.id, true);
+            socket.emit("change selection status", socket.id, p.id, true);
           }
         });
       }

public/scripts/index.js

@@ -1,19 +1,20 @@
 import { drawGrid, drawEnnemyGrid, play, selectPiece } from "./game.js";
 
 export const socket = io();
+export let roomId = "";
 
 function startConnection() {
-  socket.emit("first connection", socket.id, (response) => {
+  socket.emit("first connection", socket.id)
+
   drawGrid();
   selectPiece();
 
   document
     .querySelector("#start")
-      .addEventListener("click", onCreateRoom(response.player));
+    .addEventListener("click", onCreateRoom());
   document
     .querySelector("#join")
-      .addEventListener("click", onJoinRoom(response.player));
-  });
+    .addEventListener("click", onJoinRoom());
 }
 
 socket.on("start game", () => {
@@ -56,29 +57,39 @@ socket.on("played move", (isHit, isWin) => {
 
 export function sendMove(move) {
   const notification = document.querySelector("#play_notification");
-  socket.emit("play", socket.id, move);
+  socket.emit("play", roomId, socket.id, move);
   notification.classList.add("hidden-element");
 }
 
-function onCreateRoom(player) {
+function onCreateRoom() {
   const handler = function (event) {
     event.preventDefault();
     const loader = document.querySelector("#loader");
+    const roomkeyHolder = document.querySelector("#roomkeyHolder");
     loader.classList.add("hidden-element");
 
-    socket.emit("room creation", player);
+    socket.emit("room creation", socket.id, (response) => {
+      roomId = response.roomId;
+      roomkeyHolder.innerHTML += `Your room key is : <strong>` + roomId + `</strong>`;
+    });
   };
 
   return handler;
 }
 
-function onJoinRoom(player) {
+function onJoinRoom() {
   const handler = function (event) {
     event.preventDefault();
+
     const loader = document.querySelector("#loader");
+    const roomKey = document.querySelector("#roomKey").value;
+    const roomkeyHolder = document.querySelector("#roomkeyHolder");
+
     loader.classList.add("hidden-element");
 
-    socket.emit("ask for room", player);
+    roomId = roomKey;
+    roomkeyHolder.innerHTML += `Your room key is : <strong>` + roomId + `</strong>`;
+    socket.emit("ask for room", roomKey, socket.id);
   };
 
   return handler;