diff --git a/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js b/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js index da263bf..4cb953c 100644 --- a/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js +++ b/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); } diff --git a/backend/src/SocketIO/GameManager/Game/Game.js b/backend/src/SocketIO/GameManager/Game/Game.js index 4fe5eac..3042124 100644 --- a/backend/src/SocketIO/GameManager/Game/Game.js +++ b/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 + } }); } diff --git a/frontend/game/scripts/Game/UI/UIManager.js b/frontend/game/scripts/Game/UI/UIManager.js index 7ffe82f..7ba64e1 100644 --- a/frontend/game/scripts/Game/UI/UIManager.js +++ b/frontend/game/scripts/Game/UI/UIManager.js @@ -118,24 +118,41 @@ class UIManager{ endDiv.appendChild(scoreDiv); - const replayButton = document.createElement("button"); - replayButton.id = "replayBtn"; - replayButton.innerHTML = ` -
- - - -
-
- Neue Runde -
- `; - replayButton.addEventListener("click", () => { window.location.href = "/game" }) - endDiv.appendChild(replayButton); + 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 = ` +
+ + + +
+
+ Neue Runde +
+ `; + 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; \ No newline at end of file diff --git a/frontend/game/style/mainStyle.css b/frontend/game/style/mainStyle.css index 1eac2e4..ce354e1 100644 --- a/frontend/game/style/mainStyle.css +++ b/frontend/game/style/mainStyle.css @@ -106,4 +106,11 @@ img{ #replayBtn{ background-color: orange; +} + +#replayContainer{ + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; } \ No newline at end of file