Added Working Playground

frontend/game/scripts/Game/Elements/Playground.js

@@ -0,0 +1,43 @@
+import UIManager from "../UI/UIManager.js";
+import Game from "../Game.js";
+
+class Playground{
+    /**@param {import(Game} game @param {UIManager} uiManager */
+    constructor(game, uiManager, playgroundSize){
+        this.playgroundSize = playgroundSize;
+        this.game = game;
+        this.uiManager = uiManager;
+
+        this.tiles = [];
+  
+        this.tileSize = window.innerHeight / playgroundSize.height;
+
+        this.setupTiles();
+    }
+
+    setupTiles(){
+        for(let i = 0; i < this.playgroundSize.width; i++){
+            const row = document.createElement("tr");
+            let rowTiles = [];
+            this.uiManager.gameTable.appendChild(row);
+
+            for(let u = 0; u < this.playgroundSize.height; u++){
+                const td = document.createElement("td");
+
+                const bgImage = document.createElement("img");
+                (u % 2 == i % 2) ? bgImage.src = "./assets/Gras/Gras1.png" : bgImage.src = "./assets/Gras/Gras2.png";
+                bgImage.height = this.tileSize;
+                bgImage.width = this.tileSize;
+                bgImage.classList.add("backgroundTile");
+                td.appendChild(bgImage);
+                row.appendChild(td);
+
+                rowTiles.push(td);
+            }
+
+            this.tiles.push(rowTiles);
+        }
+    }
+}
+
+export default Playground;

frontend/game/scripts/Game/Game.js

@@ -0,0 +1,27 @@
+import Loop from "./Loop.js";
+import UIManager from "./UI/UIManager.js";
+import Playground from "./Elements/Playground.js";
+
+class Game{
+    /**@param {import("../../../../backend/node_modules/socket.io-client".Socket} socket Autocompletions VSC*/
+    constructor(socket) {
+        this.socket = socket;
+
+        this.loop = new Loop(this.socket, this);
+        this.uiManager = new UIManager();
+        this.playGround = undefined;
+
+        this.gameStarted = false;
+
+        this.socket.on("startGame", (data) => { this.start(data) });
+    }
+
+    start(playgroundSize){
+        this.gameStarted = true;
+        this.uiManager.loadGameContent();
+
+        this.playGround = new Playground(this, this.uiManager, playgroundSize);
+    }
+}
+
+export default Game;

frontend/game/scripts/Game/Loop.js

@@ -1,10 +1,10 @@
-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;
+import Game from "./Game.js"
 
-        this.tileSize = tileSize;
+class Loop{
+    /**@param {import("../../../../backend/node_modules/socket.io-client".Socket} socket  @param {Game} game  Autocompletions VSC*/
+    constructor(socket, game){
+        this.socket = socket;
+        this.game = game;
 
         this.socket.on("loop", (data) => { this.loop(data) });
     }

frontend/game/scripts/Game/UI/UIManager.js

@@ -0,0 +1,23 @@
+class UIManager{
+    constructor(){
+        this.mainDiv = document.getElementById("mainMenu");
+
+        this.gameTable = undefined;
+    }
+
+    // Erstellen des Grundgerüstes der UI
+    loadGameContent(){
+        this.mainDiv.innerHTML = "";
+
+        const body = document.body;
+        body.style.backgroundImage = "none";
+        body.style.backgroundRepeat = "no-repeat";
+        body.style.backgroundColor = "#3b3b3f";
+
+        this.gameTable = document.createElement("table");
+
+        this.mainDiv.appendChild(this.gameTable);
+    }
+}
+
+export default UIManager;