Endscreen und Verlängerung der Schlange bei einem Score

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

frontend/game/style/mainStyle.css

@@ -47,4 +47,58 @@ img{
     flex-direction: column;
     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;
 }