Alle Vorrausetzungwn fürs spielfeld geschrieben

Speicher.txt

@@ -5,12 +5,6 @@ Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
 <script src="/socket.io/socket.io.js"></script>
 
 
-DB
-php.himb.net
-Server: 192.168.178.62:5555
-root
-Jonas2007
-
 https://imagecolorchanger.com/upload-image
 
 UM Tabelle zu erstellen

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();
     }

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(() => {

backend/src/SocketIO/LobbyManager/LobbyManager.js

@@ -7,7 +7,7 @@ class LobbyManager {
     /** @param {socketIO.Server} io */
     constructor(io) {
         this.io = io;
-
+        
         /** @type {Map<string, Lobby>}*/
         this.lobbys = new Map();
 

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;

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(){
+    startGame(tileSize){
-        this.body.innerHTML = "<h1>Spielfeld</h1>"; 
+        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){

frontend/game/style/mainStyle.css

@@ -0,0 +1,3 @@
+#tiles{
+    
+}