Merge branch 'main' of https://github.com/kobolol/AbschlussProjekt

frontend/dashboard/lobby/index.html

@@ -30,7 +30,7 @@
                         Code Erstellen
                     </div>
                 </button>
-                <button id="joinBtn">
+                <button id="joinOverlayBtn">
                     <div class="buttonIcon">
                         <svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
                             fill="#FFFFFF">

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

@@ -28,8 +28,7 @@ class LobbyHandler {
         this.socket.emit("createLobby");
     }
 
-    handleJoinClick(){
+    handleJoinClick(code){
-        const code = prompt("Bitte gib den 6 Stelligen Code ein");
         this.socket.emit("joinLobby", code);
     }
 
@@ -56,14 +55,16 @@ class LobbyHandler {
                 <div class="player" id="player${index + 1}">
                     <h1>Spieler ${index + 1}${amI}</h1>
                     <h1>${player.username}</h1>
-                    </div>
+                </div>
                 `;
 
             lobbyContainer.innerHTML = `
                 <div class="screen">
                     <nav>
                         <h1>Spiel-Code:</h1>
-                        <h1 class="message">${this.code}</h1>
+                        <h1 class="message" id="code">
+                            ${this.code}
+                        </h1>
                     </nav>
                     <div id="playerList">
                         ${playerHTML}
@@ -72,6 +73,17 @@ class LobbyHandler {
                 `;
         });
 
+        const codeText = document.getElementById("code");
+        codeText.addEventListener("click", () => {
+            codeText.innerText = "Kopiert!"
+
+            setTimeout(() => {
+                codeText.innerText = this.code;
+            }, 1500);
+
+            navigator.clipboard.writeText(this.code);
+        })
+
         this.errorMsg.style.display = "none";
     }
 

frontend/dashboard/lobby/scripts/index.js

@@ -1,12 +1,13 @@
 import LobbyHandler from "./Handler/LobbyHandler.js";
 
-class ServerConnectionManager{
+class ServerConnectionManager {
-    constructor(){
+    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.lobbyContainer = document.getElementById("mainDiv");
         this.createBtn = document.getElementById("createBtn");
-        this.joinBtn = document.getElementById("joinBtn");
+        this.joinOverlayBtn = document.getElementById("joinOverlayBtn");
         this.leaveBtn = document.getElementById("leaveBtn");
 
         this.lobbyHandler = new LobbyHandler(this.socket);
@@ -15,7 +16,7 @@ class ServerConnectionManager{
         this.addButtonHandler();
     }
 
-    basicSetup(){
+    basicSetup() {
         this.socket.emit("hereForLobby");
 
         this.socket.on("connect", () => {
@@ -33,15 +34,40 @@ class ServerConnectionManager{
         })
     }
 
-    addButtonHandler(){
+    addButtonHandler() {
         this.createBtn.addEventListener("click", () => {
             this.lobbyHandler.handleCreateClick();
         });
 
-        this.joinBtn.addEventListener("click", () => {
+        this.joinOverlayBtn.addEventListener("click", () => {
-            this.lobbyHandler.handleJoinClick();
+            this.lobbyContainer.innerHTML = `
-        });
+                <div class="screen container">
-        
+                    <div class="formSection">
+                        <h2>Der Spiel-Code:</h2>
+                        <input type="text" id="codeInp" placeholder="1A2B3C">
+                    </div>
+                    <button id="joinBtn">
+                        <div class="buttonIcon">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
+                                fill="#FFFFFF">
+                                <path
+                                    d="M220-520 80-600v-160l140-80 140 80v160l-140 80Zm0-92 60-34v-68l-60-34-60 34v68l60 34Zm440 123v-93l140 82v280L560-80
+                                 320-220v-280l140-82v93l-60 35v188l160 93 160-93v-188l-60-35Zm-140 89v-480h360l-80 120 80 120H600v240h-80Zm40 69ZM220-680Z" />
+                            </svg>
+                        </div>
+                        <div class="buttonText">
+                            Beitreten
+                        </div>
+                    </button>
+                </div>
+            `
+
+            document.getElementById("joinBtn").addEventListener("click", () => {
+                const code = document.getElementById("codeInp").value;
+                this.lobbyHandler.handleJoinClick(code);
+            })
+        })
+
         this.leaveBtn.addEventListener("click", () => {
             this.socket.disconnect();
             window.location.pathname = "/dashboard";

frontend/dashboard/lobby/style.css

@@ -2,7 +2,7 @@ button {
     width: 350px;
 }
 
-#joinBtn{
+#joinOverlayBtn{
     background-color: rgb(0, 119, 255);
 }
 
@@ -63,4 +63,13 @@ button {
 #player2{
     background-color: rgba(0, 89, 255, 0.377);
     border-radius: 0 0 10px 10px;
+}
+
+.formSection h2{
+    text-align: center;
+    
+}
+
+#codeInp{
+    text-align: center;
 }