This commit is contained in:
2025-03-18 14:46:13 +01:00
4 changed files with 62 additions and 15 deletions

View File

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

View File

@@ -28,8 +28,7 @@ class LobbyHandler {
this.socket.emit("createLobby"); this.socket.emit("createLobby");
} }
handleJoinClick(){ handleJoinClick(code){
const code = prompt("Bitte gib den 6 Stelligen Code ein");
this.socket.emit("joinLobby", code); this.socket.emit("joinLobby", code);
} }
@@ -56,14 +55,16 @@ class LobbyHandler {
<div class="player" id="player${index + 1}"> <div class="player" id="player${index + 1}">
<h1>Spieler ${index + 1}${amI}</h1> <h1>Spieler ${index + 1}${amI}</h1>
<h1>${player.username}</h1> <h1>${player.username}</h1>
</div> </div>
`; `;
lobbyContainer.innerHTML = ` lobbyContainer.innerHTML = `
<div class="screen"> <div class="screen">
<nav> <nav>
<h1>Spiel-Code:</h1> <h1>Spiel-Code:</h1>
<h1 class="message">${this.code}</h1> <h1 class="message" id="code">
${this.code}
</h1>
</nav> </nav>
<div id="playerList"> <div id="playerList">
${playerHTML} ${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"; this.errorMsg.style.display = "none";
} }

View File

@@ -1,12 +1,13 @@
import LobbyHandler from "./Handler/LobbyHandler.js"; 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*/ /**@type {import("../../../../backend/node_modules/socket.io-client".Socket} für Autocompletions VSC*/
this.socket = io(`http://${window.location.hostname}:${window.location.port}`); this.socket = io(`http://${window.location.hostname}:${window.location.port}`);
this.lobbyContainer = document.getElementById("mainDiv");
this.createBtn = document.getElementById("createBtn"); this.createBtn = document.getElementById("createBtn");
this.joinBtn = document.getElementById("joinBtn"); this.joinOverlayBtn = document.getElementById("joinOverlayBtn");
this.leaveBtn = document.getElementById("leaveBtn"); this.leaveBtn = document.getElementById("leaveBtn");
this.lobbyHandler = new LobbyHandler(this.socket); this.lobbyHandler = new LobbyHandler(this.socket);
@@ -15,7 +16,7 @@ class ServerConnectionManager{
this.addButtonHandler(); this.addButtonHandler();
} }
basicSetup(){ basicSetup() {
this.socket.emit("hereForLobby"); this.socket.emit("hereForLobby");
this.socket.on("connect", () => { this.socket.on("connect", () => {
@@ -33,14 +34,39 @@ class ServerConnectionManager{
}) })
} }
addButtonHandler(){ addButtonHandler() {
this.createBtn.addEventListener("click", () => { this.createBtn.addEventListener("click", () => {
this.lobbyHandler.handleCreateClick(); 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.leaveBtn.addEventListener("click", () => {
this.socket.disconnect(); this.socket.disconnect();

View File

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