Schlangen werden angezeigt aber sind noch nicht bewegbar

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

@@ -10,7 +10,7 @@ class Playground{
 
         this.tiles = [];
   
-        this.tileSize = window.innerHeight / playgroundSize.height;
+        this.tileSize = Math.floor(window.innerHeight / playgroundSize.height);
 
         this.setupTiles();
     }
@@ -24,20 +24,57 @@ class Playground{
             for(let u = 0; u < this.playgroundSize.height; u++){
                 const td = document.createElement("td");
 
+                // Container um Überlappung zu ermöglichen
+                const container = document.createElement("div");
+                container.style.position = "relative";
+                container.style.height = this.tileSize + "px";
+                container.style.width = this.tileSize + "px";
+
+                // Das Gras als Hintergrundbild
                 const bgImage = document.createElement("img");
-                (u % 2 == i % 2) ? bgImage.src = "./assets/Gras/Gras1.png" : bgImage.src = "./assets/Gras/Gras2.png";
+                bgImage.src = (u % 2 == i % 2) ? "./assets/Gras/Gras1.png" : "./assets/Gras/Gras2.png";
                 bgImage.height = this.tileSize;
                 bgImage.width = this.tileSize;
                 bgImage.classList.add("backgroundTile");
-                td.appendChild(bgImage);
+
+                // Je nach belieben Overlay-Bild
+                const overlayImage = document.createElement("img")
+                overlayImage.style.display = "none"
+                overlayImage.height = this.tileSize;
+                overlayImage.width = this.tileSize;
+                overlayImage.classList.add("overlayTile");
+
+                container.appendChild(bgImage);
+                container.appendChild(overlayImage);
+                td.appendChild(container);
                 row.appendChild(td);
 
-                rowTiles.push(td);
+                rowTiles.push(overlayImage);
             }
 
             this.tiles.push(rowTiles);
         }
     }
+
+    getOverlayTile(x, y){
+        if (
+            y >= 0 && y < this.tiles.length &&
+            x >= 0 && x < this.tiles[y].length
+        ) {
+            return this.tiles[y][x];
+        }
+
+        return null;
+    }
+
+    resetOverlays(){
+        this.tiles.forEach(r => {
+            r.forEach(e => {
+                e.style.display = "none";
+                e.src = "";
+            })
+        })
+    }
 }
 
 export default Playground;

frontend/game/scripts/Game/Game.js

@@ -15,7 +15,10 @@ class Game{
 
         this.gameStarted = false;
 
+        this.ourColor = null;
+
         this.socket.on("startGame", (data) => { this.start(data) });
+        this.socket.on("color", (data) => { this.setOutColor(data) })
     }
 
     start(playgroundSize){
@@ -25,6 +28,12 @@ class Game{
         this.movementHandler = new MovementHandler(this.socket);
         this.playGround = new Playground(this, this.uiManager, playgroundSize);
     }
+
+    setOutColor(color){
+        this.ourColor = color;
+
+        this.uiManager.addSnakeColorInfo(color);
+    }
 }
 
 export default Game;

frontend/game/scripts/Game/Loop.js

@@ -10,7 +10,23 @@ class Loop{
     }
 
     loop(data){
-         
+        this.game.playGround.resetOverlays();
+        const tiles = data.playground.tiles;
+
+        tiles.forEach((row, x) => {
+            row.forEach((tile, y) => {
+                if(!tile) return;
+                console.log(tile)
+                if(tile.class === "Snake"){
+                    /** @type {HTMLImageElement} */
+                    const tileImg = this.game.playGround.getOverlayTile(x, y);
+
+                    tileImg.src = `./assets/Snakes/${tile.color}/${tile.type}.png`;
+                    tileImg.style.display = "block"
+                    tileImg.style.transform = `rotate(${tile.deg}deg)`;
+                }
+            })
+        });
     }
 }
 

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

@@ -18,6 +18,47 @@ class UIManager{
 
         this.mainDiv.appendChild(this.gameTable);
     }
+
+    // Erstellen der Info für welche Schlange man ist
+    addSnakeColorInfo(color){
+        const infoDiv = document.createElement("div");
+        infoDiv.id = "infoDiv"
+
+        const header = document.createElement("h1")
+        header.innerText = "Deine Schlange:"
+        infoDiv.appendChild(header);
+
+        const snakeTable = document.createElement("table");
+        const lenght = 3;
+        for (let i = 0; i < lenght; i++) {
+            const tr = document.createElement("tr");
+            const td = document.createElement("td");
+    
+            const img = document.createElement("img");
+            switch (i) {
+                case 0:
+                    img.src = `./assets/Snakes/${color}/Head.png`;
+                    break;
+                case lenght - 1:
+                    img.src = `./assets/Snakes/${color}/End.png`;
+                    break;
+                default:
+                    img.src = `./assets/Snakes/${color}/Straight.png`;
+                    break;
+            }
+            img.style.transform = "rotate(270deg)";
+            img.style.width = "10vw"; 
+            img.style.height = "10vw";
+    
+            td.appendChild(img);
+            tr.appendChild(td);
+            snakeTable.appendChild(tr);
+        }
+
+        infoDiv.append(snakeTable);
+
+        this.mainDiv.appendChild(infoDiv);
+    }
 }
 
 export default UIManager;

frontend/game/style/mainStyle.css

@@ -10,7 +10,44 @@ td, tr {
 
 td img {
     vertical-align: top;
+}
+
+img{
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
-}
+}
+
+#infoDiv{
+    background-color: rgba(0, 0, 0, 0.3);
+
+    position: absolute;
+    height: 75vh;
+    width: 15vw;
+
+    border: 5px solid rgba(255, 255, 255, 0.678);
+    border-radius: 25px;
+    right: 2.5vw;
+
+    text-align: center;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.backgroundTile,
+.overlayTile {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.backgroundTile {
+    z-index: 0;
+}
+
+.overlayTile {
+    z-index: 1;
+}