Initial commit

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

@@ -0,0 +1,86 @@
+class LobbyHandler {
+    /**@param {import("../../../../../backend/node_modules/socket.io-client".Socket} socket Autocompletions VSC*/
+    constructor(socket) {
+        this.socket = socket;
+
+        this.errorMsg = document.getElementById("errorMsg");
+
+        this.code = null;
+        this.playerList = [];
+
+        this.user = null;
+
+        this.socket.emit("requestIdentification");
+        this.socket.on("identification", (user) => { this.user = user });
+
+        // Für das Erstellen
+        this.socket.on("lobbyCreated", (code) => { this.joinedLobby(code) });
+
+        // Für das Beitreten
+        this.socket.on("lobbyJoinError", (msg) => { this.showJoinError(msg) });
+        this.socket.on("lobbyJoined", (code) => { this.joinedLobby(code) });
+
+        // Für das Aktualisieren
+        this.socket.on("lobbyUserUpdate", (data) => { this.lobbyUserUpdate(data) });
+    }
+
+    handleCreateClick() {
+        this.socket.emit("createLobby");
+    }
+
+    handleJoinClick(){
+        const code = prompt("Bitte gib den 6 Stelligen Code ein");
+        this.socket.emit("joinLobby", code);
+    }
+
+    showJoinError(msg){
+        this.errorMsg.innerText = msg;
+        this.errorMsg.style.display = "block";
+    }
+
+    joinedLobby(code) {
+        this.code = code;
+
+        this.updateUI();
+
+        console.log(`Lobby beigerteten mit Code: ${code}`);
+    }
+
+    updateUI() {
+        const lobbyContainer = document.getElementById("mainDiv");
+
+        let playerHTML = "";
+        this.playerList.forEach((player, index) => {
+            const amI = player.id === this.user.id ? " (Ich)" : "";
+            playerHTML += `
+                <div class="player" id="player${index + 1}">
+                    <h1>Spieler ${index + 1}${amI}</h1>
+                    <h1>${player.username}</h1>
+                    </div>
+                `;
+
+            lobbyContainer.innerHTML = `
+                <div class="screen">
+                    <nav>
+                        <h1>Spiel-Code:</h1>
+                        <h1 class="message">${this.code}</h1>
+                    </nav>
+                    <div id="playerList">
+                        ${playerHTML}
+                    </div>
+                </div>
+                `;
+        });
+
+        this.errorMsg.style.display = "none";
+    }
+
+
+    lobbyUserUpdate(data) {
+        this.playerList = data.users;
+
+        this.updateUI();
+    }
+}
+
+export default LobbyHandler;

frontend/dashboard/lobby/scripts/index.js

@@ -0,0 +1,52 @@
+import LobbyHandler from "./Handler/LobbyHandler.js";
+
+class ServerConnectionManager{
+    constructor(){
+        /**@type {import("../../../../backend/node_modules/socket.io-client".Socket} für Autocompletions VSC*/
+        this.socket = io(`http://${window.location.hostname}:${window.location.port}`);
+
+        this.createBtn = document.getElementById("createBtn");
+        this.joinBtn = document.getElementById("joinBtn");
+        this.leaveBtn = document.getElementById("leaveBtn");
+
+        this.lobbyHandler = new LobbyHandler(this.socket);
+
+        this.basicSetup();
+        this.addButtonHandler();
+    }
+
+    basicSetup(){
+        this.socket.emit("hereForLobby");
+
+        this.socket.on("connect", () => {
+            console.log("Verbindung zum Server hergestellt!");
+        });
+
+        this.socket.on("connect_error", (error) => {
+            console.log(error);
+            window.location.pathname = "/dashboard";
+        });
+
+        this.socket.on("disconnect", () => {
+            console.log("Die verbindung wurde unterbrochen!");
+            window.location.pathname = "/dashboard";
+        })
+    }
+
+    addButtonHandler(){
+        this.createBtn.addEventListener("click", () => {
+            this.lobbyHandler.handleCreateClick();
+        });
+
+        this.joinBtn.addEventListener("click", () => {
+            this.lobbyHandler.handleJoinClick();
+        });
+        
+        this.leaveBtn.addEventListener("click", () => {
+            this.socket.disconnect();
+            window.location.pathname = "/dashboard";
+        });
+    }
+}
+
+new ServerConnectionManager();