Erneutes Spielen sicherer Gemacht

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

@@ -186,16 +186,16 @@ class Snake{
             const exsitingtile = this.playground.getTile(tile.x, tile.y);
     
             // TODO: Klammert man das ein Kann man alleine Spielen, da es keine Kolisionserkennung gibt
-            // if(exsitingtile === undefined){
-            //     // End Game weil außerhalb des Spielfeldes
-            //     await this.game.endGame(`${this.player.username} hat die Wand berührt!`);
-            //     return;
-            // }
-            // if(exsitingtile?.class === "Snake"){
-            //     // Eng Game weil schon belegt mit anderer oder eigender Schlange
-            //     await this.game.endGame(`Es gab eine Kollision!`);
-            //     return;
-            // }
+            if(exsitingtile === undefined){
+                // End Game weil außerhalb des Spielfeldes
+                await this.game.endGame(`${this.player.username} hat die Wand berührt!`);
+                return;
+            }
+            if(exsitingtile?.class === "Snake"){
+                // Eng Game weil schon belegt mit anderer oder eigender Schlange
+                await this.game.endGame(`Es gab eine Kollision!`);
+                return;
+            }
     
             this.playground.setTile(tile.x, tile.y, tile);
         }

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

@@ -78,6 +78,9 @@ class Game{
             Nur wenn noch beide Spieler da sind
         */
 
+        let replayPossible = false;
+        const replayTime = 5000;
+
         if(this.players.length === 2){
             const lobbyManager = this.gameManager.lobbyManager;
 
@@ -92,16 +95,22 @@ class Game{
                 0,
                 newUserList,
                 lobbyManager,
-                10000
+                replayTime
             );
 
             lobbyManager.oldLobbys.push(tempLobby);
+
+            replayPossible = true;
         }
 
         this.io.to(`game-${this.code}`).emit("gameEnd", {
             msg: msg,
             score: this.score,
-            rang: scoreDb?.rank || "-"
+            rang: scoreDb?.rank || "-",
+            replay: {
+                possible: replayPossible,
+                time: replayTime
+            }
         });
     }
 

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

@@ -118,9 +118,14 @@ class UIManager{
 
         endDiv.appendChild(scoreDiv);
 
-        const replayButton = document.createElement("button");
-        replayButton.id = "replayBtn";
-        replayButton.innerHTML = `
+        if(data.replay.possible){
+            this.replayContainer = document.createElement("div");
+            this.replayContainer.id = "replayContainer"; // ID für den Container
+            endDiv.appendChild(this.replayContainer);
+
+            this.replayButton = document.createElement("button");
+            this.replayButton.id = "replayBtn";
+            this.replayButton.innerHTML = `
                 <div class="buttonIcon">
                     <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#FFFFFF">
                     <path d="M447.33-122Q325-133.67 242.5-224.5 160-315.33 160-439.33q0-73.34 32.33-138.84 32.34-65.5
@@ -134,8 +139,20 @@ class UIManager{
                     Neue Runde
                 </div>
             `;
-        replayButton.addEventListener("click", () => { window.location.href = "/game" })
-        endDiv.appendChild(replayButton);
+            this.replayButton.addEventListener("click", () => { window.location.href = "/game"; });
+            this.replayContainer.appendChild(this.replayButton);
+
+            this.timeText = document.createElement("p");
+            this.timeText.id = "timeText";
+            this.timeText.innerText = `Möglichkeit für nächste: ${data.replay.time / 1000} Sekunden`;
+            this.replayContainer.appendChild(this.timeText);
+
+            this.time = data.replay.time;
+
+            setTimeout(() => {
+                this.timerTimeOut();
+            }, 1000);
+        }
 
         const dashButton = document.createElement("button");
         dashButton.id = "leaveBtn";
@@ -155,6 +172,20 @@ class UIManager{
         dashButton.addEventListener("click", () => { window.location.href = "/dashboard" })
         endDiv.appendChild(dashButton);
     }
+
+    timerTimeOut(){
+        this.time -= 1000;
+
+        const newTime = this.time / 1000;
+        this.timeText.innerText = `Möglichkeit für nächste: ${newTime} Sekunden`
+        if(newTime <= 0){
+            this.replayContainer.style.display = "none";
+        }else{
+            setTimeout(() => {
+                this.timerTimeOut();
+            }, 1000);
+        }
+    }
 }
 
 export default UIManager;

frontend/game/style/mainStyle.css

@@ -107,3 +107,10 @@ img{
 #replayBtn{
     background-color: orange;
 }
+
+#replayContainer{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+}