Endscreen und Verlängerung der Schlange bei einem Score

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)
-        window.location.pathname = "/dashboard";
+        this.game.uiManager.showEndScreen(data);
     }
     
     basicSetup() {