From 608519763c02c5bd8cfb6998553a68d4c1f1ee6c Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Tue, 21 May 2024 14:05:34 +0200 Subject: [PATCH] :sparkles: Game is now working. Socket utilisation is all rework. Piece movement and players move. --- Game.js | 79 ------------ app.js | 82 +++++++++++- businesses/Piece.js | 1 + public/scripts/game.js | 272 ++++++++++++++++++++++------------------ public/scripts/index.js | 35 ++---- 5 files changed, 236 insertions(+), 233 deletions(-) delete mode 100644 Game.js diff --git a/Game.js b/Game.js deleted file mode 100644 index 399ca94..0000000 --- a/Game.js +++ /dev/null @@ -1,79 +0,0 @@ -const { io } = require(`${__dirname}/index.js`); - -class Game { - constructor(room) { - this.room = room; - this.actualPlayer = ""; - this.ennemy = ""; - } - - start() { - this.room.players.forEach((player) => { - io.to(player.socketId).emit("start game", this); - }); - - let rand = Math.floor(Math.random() * (1 - 0 + 1) + 0); - this.actualPlayer = this.room.players[rand]; - rand === 0 - ? (this.ennemy = this.room.players[1]) - : (this.ennemy = this.room.players[0]); - - this.askToPlay(); - } - - endGame() { - this.room.players.forEach((player) => - io.to(player.socketId).emit("end game"), - ); - } - - askToPlay() { - io.to(this.actualPlayer.socketId).emit("play"); - } - - move(move) { - let playedCase = this.ennemy.grid.cases[move.col][move.row]; - if (playedCase.isPlayed === false) { - playedCase.isPlayed = true; - let isHit = playedCase.isShip; - let isWin = this.checkWin(); - this.room.players.forEach((player) => { - io.to(player.socketId).emit("played move", this, isHit, isWin); - }); - let temp = this.actualPlayer; - this.actualPlayer = this.ennemy; - this.ennemy = temp; - } - this.askToPlay(); - } - - checkWin() { - 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]; - if (c.isShip && !c.isPlayed) { - w = false; - break; - } - } - } - return w; - } - - validBoards() { - this.room.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++) { - player.grid.cases[i][j].isShip = true; - } - } - }); - }); - } -} - -module.exports = { - Game, -}; diff --git a/app.js b/app.js index 2ab0ef9..d3f2133 100644 --- a/app.js +++ b/app.js @@ -19,7 +19,6 @@ io.on("connection", (socket) => { */ socket.on("first connection", (socketId, callback) => { - console.log("first connection"); let player = new Player(socketId); players.push(player); callback({ @@ -43,14 +42,74 @@ io.on("connection", (socket) => { game = new Game(room); game.validBoards(); game.room.players.forEach((player) => { - io.to(player.socketId).emit("start game", game); + io.to(player.socketId).emit("start game"); }); game.start(); }); - socket.on("play", (move) => { + socket.on("play", (id, move) => { + game.modifyEnnemyGrid(id, move); game.move(move); }); + + socket.on("get player", (id, callback) => { + let out = ""; + players.forEach((p) => { + if (p.socketId === id) { + out = p; + } + }); + callback({ + player: out, + }); + }); + + socket.on("get ennemy", (id, callack) => { + let out = ""; + players.forEach((p) => { + if (p.socketId !== id) { + out = p; + } + }); + callack({ + player: out, + }); + }); + + socket.on("update grid", (id, grid, callback) => { + players.forEach((p) => { + if (p.socketId === id) { + p.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; + } + } + } + }); + }); + + 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; + } + }); + } + }); + }); }); const askToPlay = (game) => { @@ -59,7 +118,7 @@ const askToPlay = (game) => { const playedMoove = (game, isHit, isWin) => { game.room.players.forEach((player) => { - io.to(player.socketId).emit("played move", game, isHit, isWin); + io.to(player.socketId).emit("played move", isHit, isWin); }); }; @@ -77,6 +136,13 @@ class Game { ? (this.ennemy = this.room.players[1]) : (this.ennemy = this.room.players[0]); + players.forEach((p) => { + for (let i = 0; i < p.pieces.length; i++) { + p.pieces[i].isMovable = false; + p.pieces[i].isSelected = false; + } + }); + askToPlay(this); } @@ -88,6 +154,14 @@ 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]; if (playedCase.isPlayed === false) { diff --git a/businesses/Piece.js b/businesses/Piece.js index f48888e..76c36e8 100644 --- a/businesses/Piece.js +++ b/businesses/Piece.js @@ -8,6 +8,7 @@ class Piece { this.endPos = endPos; this.vertical = true; this.isSelected = false; + this.isMovable = true; } } diff --git a/public/scripts/game.js b/public/scripts/game.js index ccc6d0e..335373e 100644 --- a/public/scripts/game.js +++ b/public/scripts/game.js @@ -1,4 +1,4 @@ -import { sendMove } from "./index.js"; +import { sendMove, socket } from "./index.js"; const ownCanvas = document.getElementById("own_board"); const ownCtx = ownCanvas.getContext("2d"); @@ -9,98 +9,104 @@ const ennemyCtx = ennemyCanvas.getContext("2d"); const CASE_SIZE = 30; let selectedPiece = ""; -export function drawGrid(player) { +export function drawGrid() { 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, - 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, - ); + socket.emit("get player", socket.id, (response) => { + let player = response.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++) { + 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, + ); + } } } - } - }); + }); - for (let i = 0; i < player.grid.cases.length; i++) { - for (let j = 0; j < player.grid.cases.length; j++) { - ownCtx.strokeRect( - i * CASE_SIZE + 1, - j * CASE_SIZE + 1, - CASE_SIZE, - CASE_SIZE, - ); - - if (player.grid.cases[i][j].isPlayed) { - const centerX = CASE_SIZE / 2 + i * CASE_SIZE; - const centerY = CASE_SIZE / 2 + j * CASE_SIZE; - ownCtx.fillStyle = "red"; - - const pointSize = 5; - ownCtx.fillRect( - centerX - pointSize / 2, - centerY - pointSize / 2, - pointSize, - pointSize, + for (let i = 0; i < player.grid.cases.length; i++) { + for (let j = 0; j < player.grid.cases.length; j++) { + ownCtx.strokeRect( + i * CASE_SIZE + 1, + j * CASE_SIZE + 1, + CASE_SIZE, + CASE_SIZE, ); + + if (player.grid.cases[i][j].isPlayed) { + const centerX = CASE_SIZE / 2 + i * CASE_SIZE; + const centerY = CASE_SIZE / 2 + j * CASE_SIZE; + ownCtx.fillStyle = "red"; + + const pointSize = 5; + ownCtx.fillRect( + centerX - pointSize / 2, + centerY - pointSize / 2, + pointSize, + pointSize, + ); + } } } - } + }); } -export function drawEnnemyGrid(player) { +export function drawEnnemyGrid() { ennemyCtx.strokeStyle = "red"; - for (let i = 0; i < player.grid.cases.length; i++) { - for (let j = 0; j < player.grid.cases.length; j++) { - ennemyCtx.strokeRect( - i * CASE_SIZE + 1, - j * CASE_SIZE + 1, - CASE_SIZE, - CASE_SIZE, - ); - - if (player.grid.cases[i][j].isShip && player.grid.cases[i][j].isPlayed) { - ennemyCtx.fillStyle = "#FFFFCC"; - ennemyCtx.fillRect( + socket.emit("get ennemy", 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++) { + ennemyCtx.strokeRect( i * CASE_SIZE + 1, j * CASE_SIZE + 1, - CASE_SIZE - 1, - CASE_SIZE - 1, + CASE_SIZE, + CASE_SIZE, ); - } - if (player.grid.cases[i][j].isPlayed) { - const centerX = CASE_SIZE / 2 + i * CASE_SIZE; - const centerY = CASE_SIZE / 2 + j * CASE_SIZE; - ennemyCtx.fillStyle = "red"; - - const pointSize = 5; - ennemyCtx.fillRect( - centerX - pointSize / 2, - centerY - pointSize / 2, - pointSize, - pointSize, - ); + if (player.grid.cases[i][j].isPlayed) { + const centerX = CASE_SIZE / 2 + i * CASE_SIZE; + const centerY = CASE_SIZE / 2 + j * CASE_SIZE; + + if (player.grid.cases[i][j].isShip) { + ennemyCtx.fillStyle = "#FFFFCC"; + ennemyCtx.fillRect( + i * CASE_SIZE + 1, + j * CASE_SIZE + 1, + CASE_SIZE - 1, + CASE_SIZE - 1, + ); + } + + ennemyCtx.fillStyle = "red"; + const pointSize = 5; + ennemyCtx.fillRect( + centerX - pointSize / 2, + centerY - pointSize / 2, + pointSize, + pointSize, + ); + } } } - } + }); } function getCursorPosition(ennemyCanvas, event) { @@ -189,41 +195,55 @@ function validMoove(player, piece, movement) { return isValid; } -function clickNewCase(player, piece) { +function clickNewCase(piece) { const clickNewCasehandler = function (event) { let selectedCase = getCursorPosition(ownCanvas, event); - player.pieces.forEach((p) => { - if ( - p.id === piece.id && - p.isSelected && - validMoove(player, piece, { type: "move", selectedCase: selectedCase }) - ) { - 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; + socket.emit("get player", socket.id, (response) => { + let player = response.player; + player.pieces.forEach((p) => { + if ( + p.id === piece.id && + p.isSelected && + p.isMovable && + validMoove(player, piece, { + type: "move", + selectedCase: selectedCase, + }) + ) { + 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.startPos = { x: selectedCase.col, y: selectedCase.row }; - if (p.vertical) { - p.endPos = { - x: selectedCase.col, - y: selectedCase.row + piece.size - 1, - }; - } else { - p.endPos = { - x: selectedCase.col + piece.size - 1, - y: selectedCase.row, - }; - } - 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; + p.startPos = { x: selectedCase.col, y: selectedCase.row }; + if (p.vertical) { + p.endPos = { + x: selectedCase.col, + y: selectedCase.row + piece.size - 1, + }; + } else { + p.endPos = { + x: selectedCase.col + piece.size - 1, + y: selectedCase.row, + }; + } + 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; + } } + socket.emit("update piece", socket.id, p); + socket.emit("update grid", socket.id, player.grid, (response) => { + if (response.status === true) { + drawGrid(); + } else { + // TODO : error handling + } + }); } - } - drawGrid(player); + }); }); }; @@ -238,6 +258,7 @@ function rotatePiece(player, piece) { if ( p.id === piece.id && p.isSelected && + p.isMovable && validMoove(player, piece, { type: "rotation", selectedCase: p.startPos, @@ -271,39 +292,42 @@ function rotatePiece(player, piece) { return handler; } -function clickChoose(player) { - const clickHandler = function (event) { - let selectedCase = getCursorPosition(ownCanvas, event); +function clickChoose(event) { + event.preventDefault(); + let selectedCase = getCursorPosition(ownCanvas, event); + + 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"); rotate_button.classList.remove("hidden-element"); let piece = player.grid.cases[selectedCase.col][selectedCase.row].piece; - 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; - } - }); + if (piece.isMovable) { + let oldPieceId = selectedPiece.id; + player.pieces.forEach((p) => { + if (p.id === oldPieceId) { + socket.emit("change selection status", player.id, p.id, false); + } + if (p.id === piece.id) { + selectedPiece = p; + socket.emit("change selection status", player.id, p.id, true); + } + }); + } - drawGrid(player); + drawGrid(); - rotate_button.addEventListener("click", rotatePiece(player, piece)); - ownCanvas.addEventListener("mousedown", clickNewCase(player, piece)); + rotate_button.addEventListener("click", rotatePiece(piece)); + ownCanvas.addEventListener("mousedown", clickNewCase(piece)); } - }; - - return clickHandler; + }); } export function play() { ennemyCanvas.addEventListener("mousedown", clickPlay); } -export function selectPiece(player) { - ownCanvas.addEventListener("mousedown", clickChoose(player)); +export function selectPiece() { + ownCanvas.addEventListener("mousedown", clickChoose); } diff --git a/public/scripts/index.js b/public/scripts/index.js index 8197b01..a3527b7 100644 --- a/public/scripts/index.js +++ b/public/scripts/index.js @@ -4,9 +4,8 @@ export const socket = io(); function startConnection() { socket.emit("first connection", socket.id, (response) => { - console.log(response); - drawGrid(response.player); - selectPiece(response.player); + drawGrid(); + selectPiece(); document .querySelector("#start") @@ -17,12 +16,13 @@ function startConnection() { }); } -socket.on("start game", (game) => { +socket.on("start game", () => { const ennemyBoard = document.querySelector("#ennemy_board"); ennemyBoard.classList.remove("hidden-element"); - drawBoards(game); + drawGrid(); + drawEnnemyGrid(); }); socket.on("end game", () => { @@ -40,7 +40,7 @@ socket.on("play", () => { play(); }); -socket.on("played move", (game, isHit, isWin) => { +socket.on("played move", (isHit, isWin) => { const hitNotification = document.querySelector("#hit_notification"); const winNotification = document.querySelector("#win_notification"); @@ -50,30 +50,13 @@ socket.on("played move", (game, isHit, isWin) => { if (isWin) winNotification.classList.remove("hidden-element"); else winNotification.classList.add("hidden-element"); - drawBoards(game); + drawGrid(); + drawEnnemyGrid(); }); -function drawBoards(game) { - let p, e; - - let p1 = game.room.players[0]; - let p2 = game.room.players[1]; - - if (p1.socketId === socket.id) { - p = p1; - e = p2; - } else { - p = p2; - e = p1; - } - - drawGrid(p); - drawEnnemyGrid(e); -} - export function sendMove(move) { const notification = document.querySelector("#play_notification"); - socket.emit("play", move); + socket.emit("play", socket.id, move); notification.classList.add("hidden-element"); }