From 2e15735b2dad2efb9dfe6540bd8e9b0be06bfe2a Mon Sep 17 00:00:00 2001 From: Jonas Date: Tue, 25 Mar 2025 12:01:11 +0100 Subject: [PATCH] =?UTF-8?q?Lobby=20Start=20Mechanik=20und=20abfangen=20all?= =?UTF-8?q?er=20M=C3=B6glichen=20Fehler?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/src/Express/ExpressManager.js | 3 +- .../SocketIO/LobbyManager/Classes/Lobby.js | 26 +++++++++++++++-- .../LobbyManager/Classes/TemporaryLobby.js | 14 ++++++++-- .../src/SocketIO/LobbyManager/LobbyManager.js | 4 +-- frontend/game/index.html | 17 +++++++++++ frontend/game/scripts/index.js | 28 +++++++++++++++++++ frontend/game/style/mainStyle.css | 0 7 files changed, 84 insertions(+), 8 deletions(-) create mode 100644 frontend/game/index.html create mode 100644 frontend/game/scripts/index.js create mode 100644 frontend/game/style/mainStyle.css diff --git a/backend/src/Express/ExpressManager.js b/backend/src/Express/ExpressManager.js index 63a4e5a..3c13605 100644 --- a/backend/src/Express/ExpressManager.js +++ b/backend/src/Express/ExpressManager.js @@ -32,7 +32,8 @@ class ExpressManager{ // Routen wo man für Angemeldet sein muss this.authRoutes = [ "/api/dashboard", - "/dashboard" + "/dashboard", + "/game" ]; // Routen Einbinden diff --git a/backend/src/SocketIO/LobbyManager/Classes/Lobby.js b/backend/src/SocketIO/LobbyManager/Classes/Lobby.js index 2e3b987..34029c1 100644 --- a/backend/src/SocketIO/LobbyManager/Classes/Lobby.js +++ b/backend/src/SocketIO/LobbyManager/Classes/Lobby.js @@ -1,10 +1,13 @@ const socketIO = require("socket.io"); const SocketUser = require("./SocketUser"); +const LobbyManager = require("../LobbyManager"); +const TemporaryLobby = require("./TemporaryLobby"); class Lobby { - /** @param {socketIO.Server} io @param {Map} users*/ - constructor(io, code) { + /** @param {socketIO.Server} io @param {LobbyManager} lobbyManager @param {number} code */ + constructor(io, lobbyManager, code) { this.io = io; + this.lobbyManager = lobbyManager; this.code = code; /** @type {Array} */ this.users = []; @@ -21,7 +24,7 @@ class Lobby { if(this.users.length === 2) { console.log("Starte Spiel"); - setTimeout(this.startGame.bind(this), 2000); + this.startGame(); } return 0; @@ -74,6 +77,23 @@ class Lobby { this.io.to(`lobby-${this.code}`).emit("startGame", data); this.currentSecond--; + + if(this.currentSecond === 0){ + const newUserList = []; + + this.users.forEach(x => { + const user = new SocketUser(x.id, x.username); + newUserList.push(user); + }) + + const tempLobby = new TemporaryLobby( + this.code, + newUserList, + this.lobbyManager + ); + + this.lobbyManager.oldLobbys.push(tempLobby); + } if(this.currentSecond === -2) { this.gameStart = false; diff --git a/backend/src/SocketIO/LobbyManager/Classes/TemporaryLobby.js b/backend/src/SocketIO/LobbyManager/Classes/TemporaryLobby.js index 6b7581b..87903d8 100644 --- a/backend/src/SocketIO/LobbyManager/Classes/TemporaryLobby.js +++ b/backend/src/SocketIO/LobbyManager/Classes/TemporaryLobby.js @@ -1,8 +1,18 @@ +const LobbyManager = require("../LobbyManager"); + class TemporaryLobby{ - /** @param { string } code @param {Array} users */ - constructor(code, users){ + /** @param { string } code @param {Array} users @param {LobbyManager} lobbyManager*/ + constructor(code, users, lobbyManager){ this.code = code; this.users = users; + this.lobbyManager = lobbyManager; + + setTimeout(this.selfDestroy.bind(this), 5000); + } + + selfDestroy(){ + const i = this.lobbyManager.oldLobbys.findIndex(x => x.code == this.code); + this.lobbyManager.oldLobbys.splice(i, 1); } } diff --git a/backend/src/SocketIO/LobbyManager/LobbyManager.js b/backend/src/SocketIO/LobbyManager/LobbyManager.js index 2fb2dc5..52aa608 100644 --- a/backend/src/SocketIO/LobbyManager/LobbyManager.js +++ b/backend/src/SocketIO/LobbyManager/LobbyManager.js @@ -16,7 +16,7 @@ class LobbyManager { // Zeigt die Anzahl der Lobbys an | Für Testing // setInterval(() => { - // console.log(this.lobbys.size); + // console.log(this.oldLobbys.length); // }, 1000); } @@ -24,7 +24,7 @@ class LobbyManager { /** @param {SocketUser} user */ createLobby(user){ const code = this.generateNonExistingCode(); - const lobby = new Lobby(this.io, code); + const lobby = new Lobby(this.io, this ,code); lobby.addUser(user); this.lobbys.set(code, lobby); return code; diff --git a/frontend/game/index.html b/frontend/game/index.html new file mode 100644 index 0000000..c055eb6 --- /dev/null +++ b/frontend/game/index.html @@ -0,0 +1,17 @@ + + + + + + Doublesnake - Game + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/game/scripts/index.js b/frontend/game/scripts/index.js new file mode 100644 index 0000000..2c5af3f --- /dev/null +++ b/frontend/game/scripts/index.js @@ -0,0 +1,28 @@ +class ServerConnectionManager { + constructor() { + /**@type {import("../../../backend/node_modules/socket.io-client".Socket} für Autocompletions VSC*/ + this.socket = io(`${window.location.protocol}//${window.location.hostname}:${window.location.port}`); + + this.basicSetup(); + } + + basicSetup() { + this.socket.emit("hereForGame"); + + this.socket.on("connect", () => { + console.log("Verbindung zum Server hergestellt!"); + }); + + this.socket.on("connect_error", (error) => { + console.log(error); + window.location.pathname = "/dashboard"; + }); + + this.socket.on("disconnect", () => { + console.log("Die verbindung wurde unterbrochen!"); + window.location.pathname = "/dashboard"; + }); + } +} + +new ServerConnectionManager(); \ No newline at end of file diff --git a/frontend/game/style/mainStyle.css b/frontend/game/style/mainStyle.css new file mode 100644 index 0000000..e69de29