🚧 Improvement piece deplacement and start working on piece rotation

app.js

@@ -32,24 +32,16 @@ io.on("connection", (socket) => {
     });
   });
 
-  socket.on("room creation", (socketId) => {
+  socket.on("room creation", (player) => {
-    let player;
-    players.forEach((p) => {
-      if (p.socketId === socketId) player = p;
-    });
     room = new Room();
     room.addPlayer(player);
   });
 
-  socket.on("ask for room", (socketId) => {
+  socket.on("ask for room", (player) => {
-    if (room.players.length === 1) {
-      let player = new Player(socketId);
-      player.grid.cases[2][2].isShip = true;
     room.addPlayer(player);
     game = new Game(room);
     game.validBoards();
     game.start();
-    }
   });
 
   socket.on("play", (move) => {

businesses/Piece.js

@@ -7,6 +7,7 @@ class Piece {
     this.startPos = startPos;
     this.endPos = endPos;
     this.vertical = true;
+    this.isSelected = false;
   }
 }
 

public/assets/style.css

@@ -1,6 +1,7 @@
 #game {
     display: flex;
     flex-direction: row;
+    gap: 10px;
 }
 
 .hidden-element {

public/index.html

@@ -31,6 +31,12 @@
             ></canvas>
         </div>
 
+        </br>
+
+        <button class="btn-primary hidden-element" id="rotate" type="submit">
+            Rotate
+        </button>
+
         <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>

public/scripts/game.js

@@ -7,10 +7,17 @@ const ennemyCanvas = document.getElementById("ennemy_board");
 const ennemyCtx = ennemyCanvas.getContext("2d");
 
 const CASE_SIZE = 30;
+let selectedPiece = "";
 
-function drawSelectedPiece(piece) {
+export function drawGrid(player) {
+  ownCtx.clearRect(0, 0, ownCanvas.height, ownCanvas.width);
+
+  ownCtx.strokeStyle = "black";
+
+  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++) {
+        if (piece.isSelected) {
           ownCtx.fillStyle = "#F88379";
           ownCtx.fillRect(
             i * CASE_SIZE + 1,
@@ -18,18 +25,7 @@ function drawSelectedPiece(piece) {
             CASE_SIZE - 1,
             CASE_SIZE - 1,
           );
-    }
+        } else {
-  }
-}
-
-export function drawGrid(player) {
-  ownCtx.clearRect(0, 0, ownCanvas.height, ownCanvas.width);
-
-  ownCtx.strokeStyle = "black";
-
-  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++) {
           ownCtx.fillStyle = "#A9A9A9";
           ownCtx.fillRect(
             i * CASE_SIZE + 1,
@@ -39,6 +35,7 @@ export function drawGrid(player) {
           );
         }
       }
+    }
   });
 
   for (let i = 0; i < player.grid.cases.length; i++) {
@@ -128,7 +125,7 @@ function clickNewCase(player, piece) {
   const clickNewCasehandler = function (event) {
     let selectedCase = getCursorPosition(ownCanvas, event);
     player.pieces.forEach((p) => {
-      if (p.id === piece.id) {
+      if (p.id === piece.id && p.isSelected) {
         for (let i = p.startPos.x; i <= p.endPos.x; i++) {
           for (let j = p.startPos.y; j <= p.endPos.y; j++) {
             player.grid.cases[i][j].piece = "";
@@ -154,22 +151,66 @@ function clickNewCase(player, piece) {
           }
         }
       }
-    });
       drawGrid(player);
-    ownCanvas.removeEventListener("mousedown", clickNewCasehandler);
+    });
-    selectPiece(player);
   };
 
   return clickNewCasehandler;
 }
 
+function rotatePiece(player, piece) {
+  const handler = function (event) {
+    event.preventDefault();
+
+    player.pieces.forEach((p) => {
+      if (p.id === piece.id && p.isSelected) {
+        console.log(p);
+        for (let i = p.startPos.x; i <= p.endPos.x; i++) {
+          for (let j = p.startPos.y; j <= p.endPos.y; j++) {
+            player.grid.cases[i][j].piece = "";
+            player.grid.cases[i][j].isShip = false;
+          }
+        }
+        p.vertical ? (p.vertical = false) : (p.vertical = true);
+        let oldPos = p.endPos;
+        p.endPos = { x: oldPos.y, y: oldPos.x };
+        for (let i = p.startPos.x; i <= p.endPos.x; i++) {
+          for (let j = p.startPos.y; j <= p.endPos.y; j++) {
+            player.grid.cases[i][j].piece = p;
+            player.grid.cases[i][j].isShip = true;
+          }
+        }
+        console.log(p);
+      }
+    });
+    drawGrid(player);
+  };
+
+  return handler;
+}
+
 function clickChoose(player) {
   const clickHandler = function (event) {
     let selectedCase = getCursorPosition(ownCanvas, event);
     if (player.grid.cases[selectedCase.col][selectedCase.row].isShip) {
+      const rotate_button = document.querySelector("#rotate");
+      rotate_button.classList.remove("hidden-element");
+
       let piece = player.grid.cases[selectedCase.col][selectedCase.row].piece;
-      drawSelectedPiece(piece);
+      let oldPieceId = selectedPiece.id;
-      ownCanvas.removeEventListener("mousedown", clickHandler);
+      player.pieces.forEach((p) => {
+        if (p.id === oldPieceId) {
+          p.isSelected = false;
+        }
+        if (p.id === piece.id) {
+          selectedPiece = p;
+          p.isSelected = true;
+        }
+      });
+
+      drawGrid(player);
+
+      rotate_button.addEventListener("click", rotatePiece(player, piece));
       ownCanvas.addEventListener("mousedown", clickNewCase(player, piece));
     }
   };

public/scripts/index.js

@@ -6,6 +6,13 @@ function startConnection() {
   socket.emit("first connection", socket.id, (response) => {
     drawGrid(response.player);
     selectPiece(response.player);
+
+    document
+      .querySelector("#start")
+      .addEventListener("click", onCreateRoom(response.player));
+    document
+      .querySelector("#join")
+      .addEventListener("click", onJoinRoom(response.player));
   });
 }
 
@@ -69,24 +76,28 @@ export function sendMove(move) {
   notification.classList.add("hidden-element");
 }
 
-const onCreateRoom = function (event) {
+function onCreateRoom(player) {
+  const handler = function (event) {
     event.preventDefault();
-
     const loader = document.querySelector("#loader");
     loader.classList.add("hidden-element");
 
-  socket.emit("room creation", socket.id);
+    socket.emit("room creation", player);
-};
+  };
 
-const onJoinRoom = function (event) {
+  return handler;
-  event.preventDefault();
+}
 
+function onJoinRoom(player) {
+  const handler = function (event) {
+    event.preventDefault();
     const loader = document.querySelector("#loader");
     loader.classList.add("hidden-element");
 
-  socket.emit("ask for room", socket.id);
+    socket.emit("ask for room", player);
-};
+  };
+
+  return handler;
+}
 
-document.querySelector("#start").addEventListener("click", onCreateRoom);
-document.querySelector("#join").addEventListener("click", onJoinRoom);
 setTimeout(startConnection, 100);