Endscreen und Verlängerung der Schlange bei einem Score

backend/src/SocketIO/GameManager/Game/Classes/Fruits/Classes/Fruit.js

@@ -20,7 +20,7 @@ class Fruit{
         if(tile === undefined) return;
 
         if(tile?.class === "Snake"){
-            this.fruitManager.scored(this.index);
+            this.fruitManager.scored(this.index, tile.color);
 
             return;
         }

backend/src/SocketIO/GameManager/Game/Classes/Fruits/FruitManager.js

@@ -60,9 +60,13 @@ class FruitManager{
         this.fruits.forEach(fruit => fruit.update());
     }
 
-    scored(fruitIndex){
+    scored(fruitIndex, snakeColor){
         this.game.score += 1;
 
+        this.game.gameLoop.snakes.forEach(snake => {
+            if(snake.color == snakeColor) snake.getBigger();
+        })
+
         this.fruits.splice(fruitIndex, 1);
 
         this.createFruit();

backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js

@@ -159,19 +159,41 @@ class Snake{
         this.checkAndDrawTiles();
     }
 
+    getBigger(){
+        const end = this.tiles[this.tiles.length - 1];
+        const beforeEnd = this.tiles[this.tiles.length - 2];
+        
+        // So setzen wir das neue Tile hinter dem Letzen auf der Richtigen Seite
+        const dx = end.x - beforeEnd.x;
+        const dy = end.y - beforeEnd.y;
+    
+        const newEnd = {
+            class: "Snake",
+            type: "End",
+            color: this.color,
+            deg: end.deg,
+            x: end.x + dx,
+            y: end.y + dy
+        };
+    
+        end.type = "Straight";
+    
+        this.tiles.push(newEnd);
+    }
+
     checkAndDrawTiles(){
         this.tiles.forEach(tile => {
             const exsitingtile = this.playground.getTile(tile.x, tile.y);
 
-            // TODO: Solang Entfernt kann man alleine Testen
+            // TODO: Klammert man das ein Kann man alleine Spielen, da es keine Kolisionserkennung gibt
-            // if(exsitingtile === undefined){
+            if(exsitingtile === undefined){
-            //     // End Game weil außerhalb des Spielfeldes
+                // End Game weil außerhalb des Spielfeldes
-            //     this.game.endGame(`${this.player.username} hat die Wand berührt!`)
+                this.game.endGame(`${this.player.username} hat die Wand berührt!`)
-            // }
+            }
-            // if(exsitingtile?.class === "Snake"){
+            if(exsitingtile?.class === "Snake"){
-            //     // Eng Game weil schon belegt mit anderer oder eigender Schlange
+                // Eng Game weil schon belegt mit anderer oder eigender Schlange
-            //     this.game.endGame(`Ihr seit koolidiert!`)
+                this.game.endGame(`Ihr seit koolidiert!`)
-            // }
+            }
 
             this.playground.setTile(tile.x, tile.y, tile);
         })

backend/src/SocketIO/GameManager/Game/Game.js

@@ -55,7 +55,12 @@ class Game{
     }
 
     endGame(msg){
-        this.io.to(`game-${this.code}`).emit("gameEnd", msg);
+        this.io.to(`game-${this.code}`).emit("gameEnd", {
+            msg: msg,
+            score: this.score,
+        });
+
+        // TODO: Spielende in die Datenbank eintragen 
     }
 
     waitingForPlayers(changeTime = false){
@@ -111,7 +116,7 @@ class Game{
         });
 
         if(this.players.length != 2){
-            this.endGame("gameEnd", "Das Spiel ist zu Ende, da ein Spieler verlassen hat!");
+            this.endGame("Das Spiel ist zu Ende, da ein Spieler verlassen hat!");
             return 1;
         }
     }

frontend/game/index.html

@@ -17,5 +17,6 @@
 
 <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
 <script type="module" src="./scripts/index.js"></script>
+<script src="../scripts/ButtonManager.js"></script>
 
 </html>

frontend/game/scripts/Game/Loop.js

@@ -14,7 +14,7 @@ class Loop{
         this.game.playGround.resetOverlay();
         const tiles = data.playground.tiles;
 
-        // Spielfeld Zeichenen
+        // Spielfeld Zeichenen TODO: Image Laden Bug Fixen
         tiles.forEach((row, x) => {
             row.forEach((tile, y) => {
                 if(!tile) return;

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

@@ -79,6 +79,54 @@ class UIManager{
 
         this.mainDiv.appendChild(infoDiv);
     }
+
+    showEndScreen(data){
+        const endDivOverlay = document.createElement("div");
+        endDivOverlay.id = "endDivOverlay";
+
+        this.mainDiv.appendChild(endDivOverlay);
+
+        const endDiv = document.createElement("div");
+        endDiv.id = "endDiv";
+        endDivOverlay.appendChild(endDiv);
+
+        const header = document.createElement("h1");
+        header.innerText = "Spiel Beendet"
+        endDiv.appendChild(header);
+
+        const reason = document.createElement("h2");
+        reason.id = "reason";
+        reason.innerText = `Grund: ${data.msg}`;
+        endDiv.appendChild(reason);
+
+        const scoreDiv = document.createElement("div");
+        scoreDiv.id = "scoreEndDiv"
+        const scoreSign = document.createElement("h3");
+        scoreSign.innerText = "Punktestand";
+        scoreDiv.appendChild(scoreSign)
+        const score = document.createElement("h2");
+        score.innerText = data.score;
+        scoreDiv.appendChild(score);
+        endDiv.appendChild(scoreDiv);
+
+        const dashButton = document.createElement("button");
+        dashButton.id = "leaveBtn";
+        dashButton.innerHTML = `
+            <div class="buttonIcon">
+                <svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
+                    fill="#FFFFFF">
+                    <path
+                        d="M200-120q-33 0-56.5-23.5T120-200v-160h80v160h560v-560H200v160h-80v-160q0-33 23.5-56.5T200-840h560q33 0
+                     56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm220-160-56-58 102-102H120v-80h346L364-622l56-58 200 200-200 200Z" />
+                </svg>
+            </div>
+            <div class="buttonText">
+                Verlassen
+            </div>
+        `;
+        dashButton.addEventListener("click", () => { window.location.href = "/dashboard" })
+        endDiv.appendChild(dashButton);
+    }
 }
 
 export default UIManager;

frontend/game/scripts/index.js

@@ -11,7 +11,7 @@ class ServerConnectionManager {
 
         // Socket.on Handler und Routen
         this.socket.on("waitingForPlayers", (data) => { this.waitingForPlayers(data) });
-        this.socket.on("gameEnd", (msg) => { this.gameEnd(msg) });
+        this.socket.on("gameEnd", (data) => { this.gameEnd(data) });
 
         this.basicSetup();
     }
@@ -21,10 +21,11 @@ class ServerConnectionManager {
         document.getElementById("wS").innerText = data.waitingSeconds;
     }
 
-    gameEnd(msg){
+    gameEnd(data){
+        // Sonst passiert das unten bei basicSetup und wir werden weitergeleitet
+        this.socket.off("disconnect");
         this.socket.disconnect();
-        confirm(msg)
+        this.game.uiManager.showEndScreen(data);
-        window.location.pathname = "/dashboard";
     }
     
     basicSetup() {

frontend/game/style/mainStyle.css

@@ -48,3 +48,57 @@ img{
     align-items: center;
     justify-content: space-evenly;
 }
+
+#endDivOverlay{
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.7);
+    height: 100vh;
+    width: 100vw;
+    position: absolute;
+    top: 0;
+    left: 0;
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#endDiv{
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 25px;
+    border: 5px solid white;
+    
+    height: 60vh;
+    width: 40vw;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+#endDiv h1{
+    font-size: 60px;
+}
+
+#scoreEndDiv{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 150px;
+}
+
+#scoreEndDiv h3{
+    font-size: 30px;
+}
+
+#scoreEndDiv h2{
+    font-size: 40px;
+    font-weight: 900;
+}
+
+#reason{
+    color: rgb(197, 46, 46);
+    font-weight: 700;
+}