Initial commit
This commit is contained in:
69
frontend/dashboard/lobby/index.html
Normal file
69
frontend/dashboard/lobby/index.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lobby</title>
|
||||
<link rel="stylesheet" href="../../style/generalStyle.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container menu">
|
||||
<h1 class="title">Lobby</h1>
|
||||
<main class="container buttonMenu">
|
||||
<h2 class="error" id="errorMsg"></h2>
|
||||
<div class="container navButtons" id="mainDiv">
|
||||
<button id="createBtn">
|
||||
<div class="buttonIcon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
|
||||
fill="#FFFFFF">
|
||||
<path
|
||||
d="m272-440 208 120 208-120-168-97v137h-80v-137l-168 97Zm168-189v-17q-44-13-72-49.5T340-780q0-58 41-99t99-41q58
|
||||
0 99 41t41 99q0 48-28 84.5T520-646v17l280 161q19 11 29.5 29.5T840-398v76q0 22-10.5 40.5T800-252L520-91q-19 11-40 11t-40
|
||||
-11L160-252q-19-11-29.5-29.5T120-322v-76q0-22 10.5-40.5T160-468l280-161Zm0 378L200-389v67l280 162 280-162v-67L520-251q-19
|
||||
11-40 11t-40-11Zm40-469q25 0 42.5-17.5T540-780q0-25-17.5-42.5T480-840q-25 0-42.5 17.5T420-780q0 25 17.5 42.5T480-720Zm0 560Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="buttonText">
|
||||
Code Erstellen
|
||||
</div>
|
||||
</button>
|
||||
<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">
|
||||
Mit Code Beitreten
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<button id="leaveBtn">
|
||||
<div class="buttonIcon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
|
||||
fill="#FFFFFF">
|
||||
<path
|
||||
d="M200-120q-33 0-56.5-23.5T120-200v-160h80v160h560v-560H200v160h-80v-160q0-33 23.5-56.5T200-840h560q33 0
|
||||
56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm220-160-56-58 102-102H120v-80h346L364-622l56-58 200 200-200 200Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="buttonText">
|
||||
Verlassen
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
|
||||
<script src="./scripts/index.js" type="module"></script>
|
||||
|
||||
</html>
|
||||
86
frontend/dashboard/lobby/scripts/Handler/LobbyHandler.js
Normal file
86
frontend/dashboard/lobby/scripts/Handler/LobbyHandler.js
Normal file
@@ -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;
|
||||
52
frontend/dashboard/lobby/scripts/index.js
Normal file
52
frontend/dashboard/lobby/scripts/index.js
Normal file
@@ -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();
|
||||
66
frontend/dashboard/lobby/style.css
Normal file
66
frontend/dashboard/lobby/style.css
Normal file
@@ -0,0 +1,66 @@
|
||||
button {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
#joinBtn{
|
||||
background-color: rgb(0, 119, 255);
|
||||
}
|
||||
|
||||
#leaveBtn{
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.screen{
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border: 2px solid rgba(255, 255, 255, 0.6);
|
||||
border-radius: 15px;
|
||||
|
||||
height: 35vh;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.screen nav{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
height: 20%;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.377);
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
#playerList{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.player{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.player h1{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#player1{
|
||||
background-color: rgba(255, 8, 0, 0.377);
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
#player2{
|
||||
background-color: rgba(0, 89, 255, 0.377);
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user