🚧 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) {
+    room.addPlayer(player);
-      let player = new Player(socketId);
+    game = new Game(room);
-      player.grid.cases[2][2].isShip = true;
+    game.validBoards();
-      room.addPlayer(player);
+    game.start();
-      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,20 +7,7 @@ const ennemyCanvas = document.getElementById("ennemy_board");
 const ennemyCtx = ennemyCanvas.getContext("2d");
 
 const CASE_SIZE = 30;
-
+let selectedPiece = "";
-function drawSelectedPiece(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 = "#F88379";
-      ownCtx.fillRect(
-        i * CASE_SIZE + 1,
-        j * CASE_SIZE + 1,
-        CASE_SIZE - 1,
-        CASE_SIZE - 1,
-      );
-    }
-  }
-}
 
 export function drawGrid(player) {
   ownCtx.clearRect(0, 0, ownCanvas.height, ownCanvas.width);
@@ -30,13 +17,23 @@ export function drawGrid(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++) {
-        ownCtx.fillStyle = "#A9A9A9";
+        if (piece.isSelected) {
-        ownCtx.fillRect(
+          ownCtx.fillStyle = "#F88379";
-          i * CASE_SIZE + 1,
+          ownCtx.fillRect(
-          j * CASE_SIZE + 1,
+            i * CASE_SIZE + 1,
-          CASE_SIZE - 1,
+            j * CASE_SIZE + 1,
-          CASE_SIZE - 1,
+            CASE_SIZE - 1,
-        );
+            CASE_SIZE - 1,
+          );
+        } else {
+          ownCtx.fillStyle = "#A9A9A9";
+          ownCtx.fillRect(
+            i * CASE_SIZE + 1,
+            j * CASE_SIZE + 1,
+            CASE_SIZE - 1,
+            CASE_SIZE - 1,
+          );
+        }
       }
     }
   });
@@ -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);
     });
-    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) {
-  event.preventDefault();
+  const handler = function (event) {
+    event.preventDefault();
+    const loader = document.querySelector("#loader");
+    loader.classList.add("hidden-element");
 
-  const loader = document.querySelector("#loader");
+    socket.emit("room creation", player);
-  loader.classList.add("hidden-element");
+  };
 
-  socket.emit("room creation", socket.id);
+  return handler;
-};
+}
 
-const onJoinRoom = function (event) {
+function onJoinRoom(player) {
-  event.preventDefault();
+  const handler = function (event) {
+    event.preventDefault();
+    const loader = document.querySelector("#loader");
+    loader.classList.add("hidden-element");
 
-  const loader = document.querySelector("#loader");
+    socket.emit("ask for room", player);
-  loader.classList.add("hidden-element");
+  };
 
-  socket.emit("ask for room", socket.id);
+  return handler;
-};
+}
 
-document.querySelector("#start").addEventListener("click", onCreateRoom);
-document.querySelector("#join").addEventListener("click", onJoinRoom);
 setTimeout(startConnection, 100);