diff --git a/Speicher.txt b/Speicher.txt index 41574c4..a2bf39a 100644 --- a/Speicher.txt +++ b/Speicher.txt @@ -5,12 +5,6 @@ Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -DB -php.himb.net -Server: 192.168.178.62:5555 -root -Jonas2007 - https://imagecolorchanger.com/upload-image UM Tabelle zu erstellen diff --git a/backend/src/SocketIO/GameManager/Game/Game.js b/backend/src/SocketIO/GameManager/Game/Game.js index 0f142ec..f5bbf4a 100644 --- a/backend/src/SocketIO/GameManager/Game/Game.js +++ b/backend/src/SocketIO/GameManager/Game/Game.js @@ -22,7 +22,10 @@ class Game{ } startGame(){ - this.io.to(`game-${this.code}`).emit("startGame"); + this.io.to(`game-${this.code}`).emit("startGame", { + width: this.gameLoop.playground.width, + height: this.gameLoop.playground.height + }); this.gameStarted = true; this.gameLoop.loop(); } diff --git a/backend/src/SocketIO/GameManager/Game/GameLoop.js b/backend/src/SocketIO/GameManager/Game/GameLoop.js index 559d2f7..6ac3222 100644 --- a/backend/src/SocketIO/GameManager/Game/GameLoop.js +++ b/backend/src/SocketIO/GameManager/Game/GameLoop.js @@ -14,7 +14,11 @@ class GameLoop{ loop(){ this.io.to(`game-${this.game.code}`).emit("loop", { code: this.game.code, - playground: this.playground + playground: { + height: this.playground.height, + width: this.playground.width, + tiles: this.playground.tiles, + } }); setTimeout(() => { diff --git a/backend/src/SocketIO/LobbyManager/LobbyManager.js b/backend/src/SocketIO/LobbyManager/LobbyManager.js index 3cbd3ae..8e766e1 100644 --- a/backend/src/SocketIO/LobbyManager/LobbyManager.js +++ b/backend/src/SocketIO/LobbyManager/LobbyManager.js @@ -7,7 +7,7 @@ class LobbyManager { /** @param {socketIO.Server} io */ constructor(io) { this.io = io; - + /** @type {Map}*/ this.lobbys = new Map(); diff --git a/frontend/game/scripts/Game/Loop.js b/frontend/game/scripts/Game/Loop.js new file mode 100644 index 0000000..6a7ac66 --- /dev/null +++ b/frontend/game/scripts/Game/Loop.js @@ -0,0 +1,17 @@ +class Loop{ + /**@param {import("../../../../backend/node_modules/socket.io-client".Socket} socket @param {HTMLDivElement} tilesDiv Autocompletions VSC*/ + constructor(socket, tilesDiv, tileSize){ + this.socket = socket; + this.tilesDiv = tilesDiv; + + this.tileSize = tileSize; + + this.socket.on("loop", (data) => { this.loop(data) }); + } + + loop(data){ + + } +} + +export default Loop; \ No newline at end of file diff --git a/frontend/game/scripts/index.js b/frontend/game/scripts/index.js index 9aea6c7..ec88c65 100644 --- a/frontend/game/scripts/index.js +++ b/frontend/game/scripts/index.js @@ -1,3 +1,5 @@ +import Loop from "./Game/Loop.js"; + class ServerConnectionManager { constructor() { /**@type {import("../../../backend/node_modules/socket.io-client".Socket} für Autocompletions VSC*/ @@ -5,16 +7,29 @@ class ServerConnectionManager { this.body = document.getElementsByTagName("body")[0]; + this.gameStarted = false; + + this.loop = undefined; + // Socket.on Handler und Routen - this.socket.on("startGame", () => { this.startGame() }); + this.socket.on("startGame", (data) => { this.startGame(data) }); this.socket.on("waitingForPlayers", (data) => { this.waitingForPlayers(data) }); this.socket.on("gameEnd", (msg) => { this.gameEnd(msg) }); this.basicSetup(); } - startGame(){ - this.body.innerHTML = "

Spielfeld

"; + startGame(tileSize){ + this.gameStarted = true; + this.body.innerHTML = ""; + + const tilesDiv = document.createElement("div") + this.body.appendChild(tilesDiv); + + tilesDiv.id="tiles"; + tilesDiv.classList.add("container") + + this.loop = new Loop(this.socket, tilesDiv, tileSize); } waitingForPlayers(data){ diff --git a/frontend/game/style/mainStyle.css b/frontend/game/style/mainStyle.css index e69de29..8673770 100644 --- a/frontend/game/style/mainStyle.css +++ b/frontend/game/style/mainStyle.css @@ -0,0 +1,3 @@ +#tiles{ + +} \ No newline at end of file