Füge Countdown-Logik für den Spielstart hinzu und verbessere die Benutzerverwaltung in Lobbys

frontend/dashboard/lobby/index.html

@@ -45,6 +45,9 @@
                 </button>
             </div>
             <div class="container">
+                <div id="gameStartCountdown" class="hidden">
+                    <h2>Das Spiel startet in <span id="countdown">5</span> Sekunden</h2>
+                </div>
                 <button id="leaveBtn">
                     <div class="buttonIcon">
                         <svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"

frontend/dashboard/lobby/scripts/Handler/LobbyHandler.js

@@ -1,3 +1,5 @@
+import StartGameHandler from "./StartGameHandler.js";
+
 class LobbyHandler {
     /**@param {import("../../../../../backend/node_modules/socket.io-client".Socket} socket Autocompletions VSC*/
     constructor(socket) {
@@ -22,6 +24,9 @@ class LobbyHandler {
 
         // Für das Aktualisieren
         this.socket.on("lobbyUserUpdate", (data) => { this.lobbyUserUpdate(data) });
+
+        // Für alles Was mit dem Starten zu tuhen hat
+        this.startGameHandler = new StartGameHandler(this.socket);
     }
 
     handleCreateClick() {

frontend/dashboard/lobby/scripts/Handler/StartGameHandler.js

@@ -0,0 +1,26 @@
+class StartGameHandler {
+    /**@param {import("../../../../../backend/node_modules/socket.io-client".Socket} socket Autocompletions VSC*/
+    constructor(socket) {
+        this.socket = socket;
+
+        this.countDownText = document.getElementById("countdown");
+
+        this.socket.on("startGame", (data) => { this.startGame(data) });
+        this.socket.on("interruptStart", () => { this.interruptStart() });
+    }
+
+    startGame(data) {
+        document.getElementById("gameStartCountdown").style.display = "block";
+        this.countDownText.innerText = data.currentSecond;
+
+        if(data.needRedirect){
+            window.location.pathname = `/game`;
+        }
+    }
+
+    interruptStart() {
+        document.getElementById("gameStartCountdown").style.display = "none";
+    }
+}
+
+export default StartGameHandler;

frontend/dashboard/lobby/style.css

@@ -72,4 +72,8 @@ button {
 
 #codeInp{
     text-align: center;
+}
+
+.hidden{
+    display: none;
 }