Replay Funktion hinzugefügt.

backend/src/Database/ScoreManager/ScoreManager.js

@@ -26,12 +26,17 @@ class ScoreManager{
         const selectSql = `SELECT * FROM scores WHERE id = ${insertId}`;
         const selectResult = await this.connection.promise().query(selectSql);
 
-        return new Score(selectResult[0][0]);
+        const rank = await this.getRankById(insertId);
+        
+        return new Score(selectResult[0][0], rank);
     }
 
     async getScoreById(id){
         const response = await this.connection.promise().query(`SELECT * FROM scores WHERE id = ${id}`);
-        return new Score(response.rows[0][0]);
+
+        const rank = await this.getRankById(id);
+
+        return new Score(response[0][0], rank);
     }
 
     async getSplitedScoreCount(){
@@ -56,6 +61,14 @@ class ScoreManager{
 
         return sortedScoreSplit;
     }
+
+    async getRankById(id){
+        const rankSql = `SELECT COUNT(*) + 1 AS rank FROM scores WHERE score > (SELECT score FROM scores WHERE id = ${id})`;
+        const rankResult = await this.connection.promise().query(rankSql); 
+        const rank = rankResult[0][0].rank;
+
+        return rank;
+    }
 }
 
 module.exports = ScoreManager;

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

@@ -1,5 +1,6 @@
 const socketIO = require("socket.io");
 const SocketUser = require("../../Classes/SocketUser");
+const TemporaryLobby = require("../../LobbyManager/Classes/TemporaryLobby");
 const GameManager = require("../GameManager");
 const GameLoop = require("./GameLoop");
 const Snake = require("./Classes/Snake/Snake");
@@ -61,21 +62,46 @@ class Game{
     }
 
     async endGame(msg){
-        // TODO: Spielende in die Datenbank eintragen
-        this.gameStarted = false;
-        
-        const scoreDb = await this.gameManager.db.scoremanager.createScore({
+        let scoreDb = undefined;
+        if(this.gameStarted){
+            scoreDb = await this.gameManager.db.scoremanager.createScore({
                 user1: this.playerIds[0],
                 user2: this.playerIds[1],
                 score: this.score
             });
+        }
 
-        const rang = await this.gameManager.db.scoremanager.getScoreRang(scoreDb.id);
+        this.gameStarted = false;
+
+        /*
+            Hinzufügen der Funktion zum erneuten Spielen
+            Nur wenn noch beide Spieler da sind
+        */
+
+        if(this.players.length === 2){
+            const lobbyManager = this.gameManager.lobbyManager;
+
+            const newUserList = [];
+
+            this.players.forEach(x => {
+                const user = new SocketUser(x.id, x.username);
+                newUserList.push(user);
+            })
+
+            const tempLobby = new TemporaryLobby(
+                0,
+                newUserList,
+                lobbyManager,
+                10000
+            );
+
+            lobbyManager.oldLobbys.push(tempLobby);
+        }
 
         this.io.to(`game-${this.code}`).emit("gameEnd", {
             msg: msg,
             score: this.score,
-            rang: rang
+            rang: scoreDb?.rank || "-"
         });
     }
 

backend/src/SocketIO/LobbyManager/Classes/Lobby.js

@@ -89,7 +89,8 @@ class Lobby {
             const tempLobby = new TemporaryLobby(
                 this.code,
                 newUserList,
-                this.lobbyManager
+                this.lobbyManager,
+                4000
             );
 
             this.lobbyManager.oldLobbys.push(tempLobby);

backend/src/SocketIO/LobbyManager/Classes/TemporaryLobby.js

@@ -4,14 +4,14 @@ const SocketUser = require("../../Classes/SocketUser");
 
 class TemporaryLobby{
     /** @param { string } code  @param {Array<SocketUser>} users @param {LobbyManager} lobbyManager */
-    constructor(code, users, lobbyManager){
+    constructor(code, users, lobbyManager, destuctionTime){
         this.code = code;
         this.users = users;
         this.lobbyManager = lobbyManager;
 
         this.gameCode = null;
 
-        setTimeout(this.selfDestroy.bind(this), 4000);
+        setTimeout(this.selfDestroy.bind(this), destuctionTime);
     }
 
     selfDestroy(){

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

@@ -118,6 +118,25 @@ class UIManager{
 
         endDiv.appendChild(scoreDiv);
 
+        const replayButton = document.createElement("button");
+        replayButton.id = "replayBtn";
+        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
+                 91-109.16L331-639.67q-50 33.34-77.17 86.67-27.16 53.33-27.16 113.67 0 96 62.66 167.16 62.67 71.17
+                  158 83.5V-122Zm66.67 0v-66.67q95.67-13.33 157.83-84Q734-343.33 734-439.33q0-106-73.67-179.67-73.66-73.67-179.66-73.67h-14.3
+                  4L521-638l-47.33 47.33L338.33-726l135.34-135.33L521-814l-54.67 54.67h14.34q134 0 227 93.33t93 226.67q0 123.66-82.17 214.5
+                  Q636.33-134 514-122Z"/>
+                </svg>
+            </div>
+            <div class="buttonText">
+                Neue Runde
+            </div>
+        `;
+        replayButton.addEventListener("click", () => { window.location.href = "/game" })
+        endDiv.appendChild(replayButton);
+
         const dashButton = document.createElement("button");
         dashButton.id = "leaveBtn";
         dashButton.innerHTML = `

frontend/game/style/mainStyle.css

@@ -68,8 +68,8 @@ img{
     border-radius: 25px;
     border: 5px solid white;
     
-    height: 60vh;
-    width: 40vw;
+    height: 80vh;
+    width: 60vw;
 
     display: flex;
     flex-direction: column;
@@ -101,4 +101,9 @@ img{
 #reason{
     color: rgb(197, 46, 46);
     font-weight: 700;
+    text-align: center;
+}
+
+#replayBtn{
+    background-color: orange;
 }