diff --git a/backend/src/SocketIO/GameManager/Game/Classes/Fruits/Classes/Fruit.js b/backend/src/SocketIO/GameManager/Game/Classes/Fruits/Classes/Fruit.js index 19c476d..7a12425 100644 --- a/backend/src/SocketIO/GameManager/Game/Classes/Fruits/Classes/Fruit.js +++ b/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; } diff --git a/backend/src/SocketIO/GameManager/Game/Classes/Fruits/FruitManager.js b/backend/src/SocketIO/GameManager/Game/Classes/Fruits/FruitManager.js index 7da5ada..b1bfd29 100644 --- a/backend/src/SocketIO/GameManager/Game/Classes/Fruits/FruitManager.js +++ b/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(); diff --git a/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js b/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js index efb6a1d..4420f6c 100644 --- a/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js +++ b/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 - // if(exsitingtile === undefined){ - // // End Game weil außerhalb des Spielfeldes - // this.game.endGame(`${this.player.username} hat die Wand berührt!`) - // } - // if(exsitingtile?.class === "Snake"){ - // // Eng Game weil schon belegt mit anderer oder eigender Schlange - // this.game.endGame(`Ihr seit koolidiert!`) - // } + // TODO: Klammert man das ein Kann man alleine Spielen, da es keine Kolisionserkennung gibt + if(exsitingtile === undefined){ + // End Game weil außerhalb des Spielfeldes + this.game.endGame(`${this.player.username} hat die Wand berührt!`) + } + if(exsitingtile?.class === "Snake"){ + // Eng Game weil schon belegt mit anderer oder eigender Schlange + this.game.endGame(`Ihr seit koolidiert!`) + } 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 c965f38..5eca24e 100644 --- a/backend/src/SocketIO/GameManager/Game/Game.js +++ b/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; } } diff --git a/frontend/game/index.html b/frontend/game/index.html index c6c86d7..ff588b9 100644 --- a/frontend/game/index.html +++ b/frontend/game/index.html @@ -17,5 +17,6 @@ + \ No newline at end of file diff --git a/frontend/game/scripts/Game/Loop.js b/frontend/game/scripts/Game/Loop.js index 75d091f..ebd4c36 100644 --- a/frontend/game/scripts/Game/Loop.js +++ b/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; diff --git a/frontend/game/scripts/Game/UI/UIManager.js b/frontend/game/scripts/Game/UI/UIManager.js index 83ace4e..be6317e 100644 --- a/frontend/game/scripts/Game/UI/UIManager.js +++ b/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 = ` +
+ + + +
+
+ Verlassen +
+ `; + dashButton.addEventListener("click", () => { window.location.href = "/dashboard" }) + endDiv.appendChild(dashButton); + } } export default UIManager; \ No newline at end of file diff --git a/frontend/game/scripts/index.js b/frontend/game/scripts/index.js index 32f1c2c..b190783 100644 --- a/frontend/game/scripts/index.js +++ b/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() { diff --git a/frontend/game/style/mainStyle.css b/frontend/game/style/mainStyle.css index f332f68..b370d72 100644 --- a/frontend/game/style/mainStyle.css +++ b/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; } \ No newline at end of file