diff --git a/businesses/Player.js b/businesses/Player.js index 4e2b78f..72ac44f 100644 --- a/businesses/Player.js +++ b/businesses/Player.js @@ -13,8 +13,8 @@ class Player { createPiece() { this.pieces.push(new Piece(1, { x: 0, y: 0 }, { x: 0, y: 0 })); - this.pieces.push(new Piece(2, { x: 2, y: 2 }, { x: 2, y: 3 })); - this.pieces.push(new Piece(3, { x: 4, y: 3 }, { x: 4, y: 5 })) + //this.pieces.push(new Piece(2, { x: 2, y: 2 }, { x: 2, y: 3 })); + //this.pieces.push(new Piece(3, { x: 4, y: 3 }, { x: 4, y: 5 })) this.pieces.forEach((piece) => { for (let i = piece.startPos.x; i <= piece.endPos.x; i++) { diff --git a/businesses/Room.js b/businesses/Room.js index 3231837..06e4695 100644 --- a/businesses/Room.js +++ b/businesses/Room.js @@ -4,6 +4,7 @@ class Room { this.players = []; this.actualPlayer = ""; this.ennemy = ""; + this.wantRematch = 0; } addPlayer(player) { @@ -71,7 +72,7 @@ class Room { 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; + player.grid.cases[i][j].isShip = true; } } }); diff --git a/index.js b/index.js index 2247e7d..86b60ad 100644 --- a/index.js +++ b/index.js @@ -215,7 +215,7 @@ io.on("connection", (socket) => { room.validBoards(); for (let i = 0; i < room.players.length; i++) { - io.to(room.players[i].id).emit("start game", room.players[i === 0 ? 1 : 0].username) + io.to(room.players[i].id).emit("start game") } /* @@ -294,6 +294,41 @@ io.on("connection", (socket) => { .find((p) => p.id === playerId) .pieces.find((piece) => piece.id === pieceId).isSelected = status; }); + + // #region rematch hanlding + + socket.on("ask for rematch", (roomId, playerId) => { + const room = rooms.find((r) => r.id === roomId) + const opponent = room.players.find((p) => p.id !== playerId) + + io.to(opponent.id).emit("ask for rematch"); + }) + + socket.on("rematch grid", (roomId) => { + const room = rooms.find((r) => r.id === roomId) + + room.players.forEach(p => { + p.resetGrid() + io.to(p.id).emit("rematch grid") + }) + }) + + socket.on("valid grid", (roomId) => { + const room = rooms.find((r) => r.id === roomId) + + room.wantRematch = room.wantRematch + 1 + + if (room.wantRematch === 2) { + room.validBoards(); + room.wantRematch = 0 + room.players.forEach(p => { + io.to(p.id).emit("start game") + }) + askToPlay(room.start()); + } + }) + + // #endregion rematch hanlding }); const askToPlay = (player) => { diff --git a/public/pages/gameView.html b/public/pages/gameView.html index 5efaabc..7c5f4a3 100644 --- a/public/pages/gameView.html +++ b/public/pages/gameView.html @@ -25,6 +25,22 @@ + + + +
@@ -59,6 +75,12 @@ Rotate +
+ + +

diff --git a/public/scripts/app.js b/public/scripts/app.js index 3b92dc2..485e2c4 100644 --- a/public/scripts/app.js +++ b/public/scripts/app.js @@ -17,9 +17,13 @@ function startConnection() { .addEventListener("click", onJoinRoom()); } -socket.on("start game", (username) => { +socket.on("start game", () => { const ennemyBoard = document.querySelector("#ennemy_board"); + const waitChoiceModal = document.getElementById("waitChoiceModal") + const validGrid = document.getElementById("validGrid") + validGrid.style.display = 'none' + waitChoiceModal.style.display = 'none' ennemyBoard.style.display = 'block' drawGrid(); @@ -66,8 +70,49 @@ socket.on("go to menu", () => { goToMenu() }) +// #region rematch handling + +socket.on("ask for rematch", () => { + const rematchModal = document.getElementById("rematchModal") + const gameEndedModal = document.getElementById("gameEndedModal") + + gameEndedModal.style.display = 'none' + rematchModal.style.display = 'block' +}) + +socket.on("rematch grid", () => { + const waitChoiceModal = document.getElementById("waitChoiceModal") + const rematchModal = document.getElementById("rematchModal") + const playNotification = document.querySelector("#play_notification"); + const hitNotification = document.querySelector("#hit_notification"); + const winNotification = document.querySelector("#win_notification"); + const ennemyGrid = document.getElementById("ennemy_board") + const validGrid = document.getElementById("validGrid") + + validGrid.style.display = 'block' + playNotification.style.display = 'none' + hitNotification.style.display = 'none' + winNotification.style.display = 'none' + waitChoiceModal.style.display = 'none' + rematchModal.style.display = 'none' + ennemyGrid.style.display = 'none' + + drawGrid() +}) + +document.getElementById("validGrid").addEventListener('click', () => { + const waitChoiceModal = document.getElementById("waitChoiceModal") + waitChoiceModal.style.display = 'block' + + socket.emit("valid grid", roomId) +}) + +// #endregion rematch handling + function goToMenu() { - const modal = document.getElementById("gameEndedModal") + const gameEndedModal = document.getElementById("gameEndedModal") + const waitChoiceModal = document.getElementById("waitChoiceModal") + const rematchModal = document.getElementById("rematchModal") const ennemyGrid = document.getElementById("ennemy_board") const roomkeyHolder = document.getElementById("roomkeyHolder") const loader = document.querySelector("#loader"); @@ -80,7 +125,9 @@ function goToMenu() { playNotification.style.display = 'none' hitNotification.style.display = 'none' winNotification.style.display = 'none' - modal.style.display = 'none' + gameEndedModal.style.display = 'none' + waitChoiceModal.style.display = 'none' + rematchModal.style.display = 'none' ennemyGrid.style.display = 'none' loader.style.display = 'block' @@ -152,8 +199,31 @@ document.getElementById('closeModalButton').addEventListener('click', () => { goToMenu() }); +document.getElementById('acceptButton').addEventListener('click', () => { + const rematchModal = document.getElementById('rematchModal') + rematchModal.style.display = 'none' + + socket.emit('rematch grid', roomId) +}) + document.getElementById('goToMenuButton').addEventListener('click', () => { socket.emit("game ended", roomId); }) +document.getElementById('goToMenuButton2').addEventListener('click', () => { + socket.emit("game ended", roomId); +}) + +//document.getElementById('acceptButton').addEventListener('') + +document.getElementById('rematchButton').addEventListener('click', () => { + const endGameModal = document.getElementById('gameEndedModal') + const waitChoicemodal = document.getElementById('waitChoiceModal'); + + waitChoicemodal.style.display = 'block' + endGameModal.style.display = 'none' + + socket.emit("ask for rematch", roomId, socket.id) +}) + setTimeout(startConnection, 100); \ No newline at end of file