From ddb874a6a10c21e93bfaaba8c9aef247bc86fca4 Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Wed, 22 May 2024 16:26:22 +0200 Subject: [PATCH] :sparkles: Refactor lot of the old function. New implementation of room. Room creation with dedicated code and multiple room --- app.js | 167 ++++++++++++++++++++-------------------- businesses/Player.js | 3 +- businesses/Room.js | 16 ---- public/index.html | 4 + public/scripts/game.js | 9 ++- public/scripts/index.js | 43 +++++++---- 6 files changed, 122 insertions(+), 120 deletions(-) delete mode 100644 businesses/Room.js diff --git a/app.js b/app.js index d3f2133..910fc75 100644 --- a/app.js +++ b/app.js @@ -1,9 +1,8 @@ const { io } = require(`${__dirname}/index.js`); const { Player } = require(`${__dirname}/businesses/Player.js`); -const { Room } = require(`${__dirname}/businesses/Room.js`); +const uuid = require("uuid"); -let room; -let game; +let rooms = []; let players = []; io.on("connection", (socket) => { @@ -18,12 +17,9 @@ io.on("connection", (socket) => { }); */ - socket.on("first connection", (socketId, callback) => { + socket.on("first connection", (socketId) => { let player = new Player(socketId); players.push(player); - callback({ - player: player, - }); }); socket.on("Hello", (callback) => { @@ -32,109 +28,106 @@ io.on("connection", (socket) => { }); }); - socket.on("room creation", (player) => { - room = new Room(); - room.addPlayer(player); + socket.on("room creation", (id, callback) => { + let room = new Room(); + room.addPlayer(players.find((p) => p.id === id)); + rooms.push(room); + + callback({ + roomId: room.id, + }); }); - socket.on("ask for room", (player) => { - room.addPlayer(player); - game = new Game(room); - game.validBoards(); - game.room.players.forEach((player) => { - io.to(player.socketId).emit("start game"); + socket.on("ask for room", (roomId, id) => { + let room = rooms.find((r) => r.id === roomId); + + room.addPlayer(players.find((p) => p.id === id)); + room.validBoards(); + + room.players.forEach((player) => { + io.to(player.id).emit("start game"); }); - game.start(); + + room.start(); }); - socket.on("play", (id, move) => { - game.modifyEnnemyGrid(id, move); - game.move(move); + socket.on("play", (roomId, id, move) => { + let room = rooms.find((r) => r.id === roomId); + + room.move(move); }); socket.on("get player", (id, callback) => { - let out = ""; - players.forEach((p) => { - if (p.socketId === id) { - out = p; - } - }); + const out = players.find((p) => p.id === id); + callback({ player: out, }); }); - socket.on("get ennemy", (id, callack) => { - let out = ""; - players.forEach((p) => { - if (p.socketId !== id) { - out = p; - } - }); + socket.on("get ennemy", (roomId, id, callack) => { + const out = players.find((p) => p.id !== id) + //const out = rooms.find((r) => r.id === roomId) + // .players.find((p) => p.id !== id); + callack({ player: out, }); }); socket.on("update grid", (id, grid, callback) => { - players.forEach((p) => { - if (p.socketId === id) { - p.grid = grid; - } - }); + const player = players.find((p) => p.id === id); + player.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; - } - } - } - }); + const player = players.find((p) => p.id === playerId); + const index = player.pieces.findIndex((p) => p.id === piece.id); + + player.pieces[index] = 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; - } - }); - } - }); + players + .find((p) => p.id === playerId) + .pieces.find((piece) => piece.id === pieceId).isSelected = status; }); }); const askToPlay = (game) => { - io.to(game.actualPlayer.socketId).emit("play"); + console.log(game.actualPlayer) + io.to(game.actualPlayer).emit("play"); }; const playedMoove = (game, isHit, isWin) => { - game.room.players.forEach((player) => { - io.to(player.socketId).emit("played move", isHit, isWin); + game.players.forEach((player) => { + io.to(player.id).emit("played move", isHit, isWin); }); }; -class Game { +class Room { constructor(room) { + this.id = this.generateRoomId(); // change the id with something prettier + this.players = []; this.room = room; this.actualPlayer = ""; this.ennemy = ""; } + addPlayer(player) { + this.players.push(player); + } + start() { let rand = Math.floor(Math.random() * (1 - 0 + 1) + 0); - this.actualPlayer = this.room.players[rand]; + this.actualPlayer = this.players[rand].id; rand === 0 - ? (this.ennemy = this.room.players[1]) - : (this.ennemy = this.room.players[0]); + ? (this.ennemy = this.players[1].id) + : (this.ennemy = this.players[0].id); players.forEach((p) => { for (let i = 0; i < p.pieces.length; i++) { @@ -154,44 +147,41 @@ 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]; + let playedCase = this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row]; + if (playedCase.isPlayed === false) { - playedCase.isPlayed = true; - let isHit = playedCase.isShip; - let isWin = this.checkWin(); - playedMoove(this, isHit, isWin); - let temp = this.actualPlayer; + players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row].isPlayed = true; + playedMoove(this, playedCase.isShip, this.checkWin()); + + let tmp = this.actualPlayer; this.actualPlayer = this.ennemy; - this.ennemy = temp; + this.ennemy = tmp; } + askToPlay(this); } checkWin() { + const e = this.players.find((p) => p.id === this.ennemy); 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]; + + for (let i = 0; i < e.grid.cases.length; i++) { + for (let j = 0; j < e.grid.cases.length; j++) { + let c = e.grid.cases[i][j]; + if (c.isShip && !c.isPlayed) { w = false; break; } } } + return w; } validBoards() { - this.room.players.forEach((player) => { + this.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++) { @@ -201,4 +191,17 @@ class Game { }); }); } + + generateRoomId() { + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; + const idLength = 5; + let roomId = ''; + + for (let i = 0; i < idLength; i++) { + const randomIndex = Math.floor(Math.random() * characters.length); + roomId += characters[randomIndex]; + } + + return roomId; + } } diff --git a/businesses/Player.js b/businesses/Player.js index ff5cf30..ebe76bb 100644 --- a/businesses/Player.js +++ b/businesses/Player.js @@ -4,8 +4,7 @@ const { Piece } = require("./Piece.js"); class Player { constructor(socketId) { - this.id = uuid.v4(); - this.socketId = socketId; + this.id = socketId; this.grid = new Grid(); this.pieces = []; this.pieces.push(new Piece(1, { x: 0, y: 0 }, { x: 0, y: 0 })); diff --git a/businesses/Room.js b/businesses/Room.js deleted file mode 100644 index ddf9a5f..0000000 --- a/businesses/Room.js +++ /dev/null @@ -1,16 +0,0 @@ -const uuid = require("uuid"); - -class Room { - constructor() { - this.id = uuid.v4(); - this.players = []; - } - - addPlayer(player) { - this.players.push(player); - } -} - -module.exports = { - Room, -}; diff --git a/public/index.html b/public/index.html index de9d49c..0a46a45 100644 --- a/public/index.html +++ b/public/index.html @@ -8,11 +8,15 @@ Maettleship +
+ +
+ diff --git a/public/scripts/game.js b/public/scripts/game.js index 9cf1fa7..27bf9e5 100644 --- a/public/scripts/game.js +++ b/public/scripts/game.js @@ -1,4 +1,4 @@ -import { sendMove, socket } from "./index.js"; +import { sendMove, socket, roomId } from "./index.js"; const ownCanvas = document.getElementById("own_board"); const ownCtx = ownCanvas.getContext("2d"); @@ -70,7 +70,7 @@ export function drawGrid() { export function drawEnnemyGrid() { ennemyCtx.strokeStyle = "red"; - socket.emit("get ennemy", socket.id, (response) => { + socket.emit("get ennemy", roomId, 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++) { @@ -198,6 +198,7 @@ function validMoove(player, piece, movement) { function clickNewCase(piece) { const clickNewCasehandler = function (event) { let selectedCase = getCursorPosition(ownCanvas, event); + socket.emit("get player", socket.id, (response) => { let player = response.player; player.pieces.forEach((p) => { @@ -316,11 +317,11 @@ function clickChoose(event) { let oldPieceId = selectedPiece.id; player.pieces.forEach((p) => { if (p.id === oldPieceId) { - socket.emit("change selection status", player.id, p.id, false); + socket.emit("change selection status", socket.id, p.id, false); } if (p.id === piece.id) { selectedPiece = p; - socket.emit("change selection status", player.id, p.id, true); + socket.emit("change selection status", socket.id, p.id, true); } }); } diff --git a/public/scripts/index.js b/public/scripts/index.js index a3527b7..3211cae 100644 --- a/public/scripts/index.js +++ b/public/scripts/index.js @@ -1,19 +1,20 @@ import { drawGrid, drawEnnemyGrid, play, selectPiece } from "./game.js"; export const socket = io(); +export let roomId = ""; function startConnection() { - socket.emit("first connection", socket.id, (response) => { - drawGrid(); - selectPiece(); - - document - .querySelector("#start") - .addEventListener("click", onCreateRoom(response.player)); - document - .querySelector("#join") - .addEventListener("click", onJoinRoom(response.player)); - }); + socket.emit("first connection", socket.id) + + drawGrid(); + selectPiece(); + + document + .querySelector("#start") + .addEventListener("click", onCreateRoom()); + document + .querySelector("#join") + .addEventListener("click", onJoinRoom()); } socket.on("start game", () => { @@ -56,29 +57,39 @@ socket.on("played move", (isHit, isWin) => { export function sendMove(move) { const notification = document.querySelector("#play_notification"); - socket.emit("play", socket.id, move); + socket.emit("play", roomId, socket.id, move); notification.classList.add("hidden-element"); } -function onCreateRoom(player) { +function onCreateRoom() { const handler = function (event) { event.preventDefault(); const loader = document.querySelector("#loader"); + const roomkeyHolder = document.querySelector("#roomkeyHolder"); loader.classList.add("hidden-element"); - socket.emit("room creation", player); + socket.emit("room creation", socket.id, (response) => { + roomId = response.roomId; + roomkeyHolder.innerHTML += `Your room key is : ` + roomId + ``; + }); }; return handler; } -function onJoinRoom(player) { +function onJoinRoom() { const handler = function (event) { event.preventDefault(); + const loader = document.querySelector("#loader"); + const roomKey = document.querySelector("#roomKey").value; + const roomkeyHolder = document.querySelector("#roomkeyHolder"); + loader.classList.add("hidden-element"); - socket.emit("ask for room", player); + roomId = roomKey; + roomkeyHolder.innerHTML += `Your room key is : ` + roomId + ``; + socket.emit("ask for room", roomKey, socket.id); }; return handler;