From 803f84696241475eee3fd7fba9c33c498f248d35 Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Wed, 17 Apr 2024 14:15:44 +0200 Subject: [PATCH] :construction: Improvement piece deplacement and start working on piece rotation --- app.js | 20 +++------ businesses/Piece.js | 1 + public/assets/style.css | 1 + public/index.html | 6 +++ public/scripts/game.js | 95 +++++++++++++++++++++++++++++------------ public/scripts/index.js | 39 +++++++++++------ 6 files changed, 107 insertions(+), 55 deletions(-) diff --git a/app.js b/app.js index 8f1a1c1..2f61a73 100644 --- a/app.js +++ b/app.js @@ -32,24 +32,16 @@ io.on("connection", (socket) => { }); }); - socket.on("room creation", (socketId) => { - let player; - players.forEach((p) => { - if (p.socketId === socketId) player = p; - }); + socket.on("room creation", (player) => { room = new Room(); room.addPlayer(player); }); - socket.on("ask for room", (socketId) => { - 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("ask for room", (player) => { + room.addPlayer(player); + game = new Game(room); + game.validBoards(); + game.start(); }); socket.on("play", (move) => { diff --git a/businesses/Piece.js b/businesses/Piece.js index ef3be9f..f48888e 100644 --- a/businesses/Piece.js +++ b/businesses/Piece.js @@ -7,6 +7,7 @@ class Piece { this.startPos = startPos; this.endPos = endPos; this.vertical = true; + this.isSelected = false; } } diff --git a/public/assets/style.css b/public/assets/style.css index c57f4a3..ee38811 100644 --- a/public/assets/style.css +++ b/public/assets/style.css @@ -1,6 +1,7 @@ #game { display: flex; flex-direction: row; + gap: 10px; } .hidden-element { diff --git a/public/index.html b/public/index.html index bfba9a0..d2b2aa7 100644 --- a/public/index.html +++ b/public/index.html @@ -31,6 +31,12 @@ > +
+ + +

You have to play

Hit !

WIN !

diff --git a/public/scripts/game.js b/public/scripts/game.js index 816e8e2..58473f2 100644 --- a/public/scripts/game.js +++ b/public/scripts/game.js @@ -7,20 +7,7 @@ const ennemyCanvas = document.getElementById("ennemy_board"); const ennemyCtx = ennemyCanvas.getContext("2d"); const CASE_SIZE = 30; - -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, - ); - } - } -} +let selectedPiece = ""; 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"; - ownCtx.fillRect( - i * CASE_SIZE + 1, - j * CASE_SIZE + 1, - CASE_SIZE - 1, - CASE_SIZE - 1, - ); + if (piece.isSelected) { + ownCtx.fillStyle = "#F88379"; + ownCtx.fillRect( + i * CASE_SIZE + 1, + j * 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); - ownCanvas.removeEventListener("mousedown", clickHandler); + let oldPieceId = selectedPiece.id; + 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)); } }; diff --git a/public/scripts/index.js b/public/scripts/index.js index 20f3b9d..83cbf6c 100644 --- a/public/scripts/index.js +++ b/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) { - event.preventDefault(); +function onCreateRoom(player) { + const handler = function (event) { + event.preventDefault(); + const loader = document.querySelector("#loader"); + loader.classList.add("hidden-element"); - const loader = document.querySelector("#loader"); - loader.classList.add("hidden-element"); + socket.emit("room creation", player); + }; - socket.emit("room creation", socket.id); -}; + return handler; +} -const onJoinRoom = function (event) { - event.preventDefault(); +function onJoinRoom(player) { + const handler = function (event) { + event.preventDefault(); + const loader = document.querySelector("#loader"); + loader.classList.add("hidden-element"); - const loader = document.querySelector("#loader"); - loader.classList.add("hidden-element"); + socket.emit("ask for room", player); + }; - socket.emit("ask for room", socket.id); -}; + return handler; +} -document.querySelector("#start").addEventListener("click", onCreateRoom); -document.querySelector("#join").addEventListener("click", onJoinRoom); setTimeout(startConnection, 100);