From 5ca795d162b4997465081e5bf54348336529dffd Mon Sep 17 00:00:00 2001
From: Jonas <familiehimmelberg@gmail.com>
Date: Fri, 4 Apr 2025 11:09:13 +0200
Subject: [PATCH] =?UTF-8?q?Alle=20Vorrausetzungwn=20f=C3=BCrs=20spielfeld?=
 =?UTF-8?q?=20geschrieben?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Speicher.txt                                  |  6 ------
 backend/src/SocketIO/GameManager/Game/Game.js |  5 ++++-
 .../src/SocketIO/GameManager/Game/GameLoop.js |  6 +++++-
 .../src/SocketIO/LobbyManager/LobbyManager.js |  2 +-
 frontend/game/scripts/Game/Loop.js            | 17 +++++++++++++++
 frontend/game/scripts/index.js                | 21 ++++++++++++++++---
 frontend/game/style/mainStyle.css             |  3 +++
 7 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 frontend/game/scripts/Game/Loop.js

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
 <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
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<string, Lobby>}*/
         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 = "<h1>Spielfeld</h1>"; 
+    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