diff --git a/frontend/game/index.html b/frontend/game/index.html
index d5405ae..c6c86d7 100644
--- a/frontend/game/index.html
+++ b/frontend/game/index.html
@@ -9,8 +9,10 @@
-
-
+
+
+
+
diff --git a/frontend/game/scripts/Game/Elements/Playground.js b/frontend/game/scripts/Game/Elements/Playground.js
new file mode 100644
index 0000000..6308a27
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/game/scripts/Game/Game.js b/frontend/game/scripts/Game/Game.js
new file mode 100644
index 0000000..9340ad9
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/game/scripts/Game/Loop.js b/frontend/game/scripts/Game/Loop.js
index 6a7ac66..9bbe569 100644
--- a/frontend/game/scripts/Game/Loop.js
+++ b/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) });
}
diff --git a/frontend/game/scripts/Game/UI/UIManager.js b/frontend/game/scripts/Game/UI/UIManager.js
new file mode 100644
index 0000000..9372348
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/game/scripts/index.js b/frontend/game/scripts/index.js
index ec88c65..32f1c2c 100644
--- a/frontend/game/scripts/index.js
+++ b/frontend/game/scripts/index.js
@@ -1,4 +1,4 @@
-import Loop from "./Game/Loop.js";
+import Game from "./Game/Game.js";
class ServerConnectionManager {
constructor() {
@@ -7,31 +7,15 @@ class ServerConnectionManager {
this.body = document.getElementsByTagName("body")[0];
- this.gameStarted = false;
-
- this.loop = undefined;
+ this.game = new Game(this.socket);
// Socket.on Handler und Routen
- 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(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){
document.getElementById("wM").innerText = data.msg;
document.getElementById("wS").innerText = data.waitingSeconds;
diff --git a/frontend/game/style/mainStyle.css b/frontend/game/style/mainStyle.css
index 8673770..b408c76 100644
--- a/frontend/game/style/mainStyle.css
+++ b/frontend/game/style/mainStyle.css
@@ -1,3 +1,13 @@
-#tiles{
-
+table {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+
+td, tr {
+ margin: 0;
+ padding: 0;
+}
+
+td img {
+ vertical-align: top;
}
\ No newline at end of file