jhim/DoubleSnake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Jonas Himmelberg
2025-03-13 16:05:09 +01:00
commit 5950d5ae9d
44 changed files with 5505 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/dashboard/account/index.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Bearbeiten</title>
<link rel="stylesheet" href="../../style/generalStyle.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container menu">
<h1 class="title">Account</h1>
<h2>Ändere deine Benutzerdaten uns speichere sie ab!</h2>
<div class="buttonMenu container">
<form action="/api/account/update" method="post" class="container">
<h2 class="error" id="errorMsg"></h2>
<div class="splitContainerX">
<div>
<div class="formSection">
<p>Username:</p>
<input id="username" name="username" type="text" placeholder="Username">
</div>
<div class="formSection">
<p>Email:</p>
<input id="email" name="email" type="email" placeholder="E-mail">
</div>
</div>
<div>
<div class="formSection">
<p>Voller Name:</p>
<input id="fullName" name="fullName" type="text" placeholder="Name">
</div>
<div class="formSection">
<p>Neues Passwort:</p>
<input id="password" name="password" type="password" placeholder="Neues Password">
</div>
</div>
</div>
<input type="submit" value="Speichern">
</form>
<div class="container navButtons">
<button id="dashboardBtn">
<div class="buttonIcon">
<svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
fill="#ffffff">
<path d="M520-200 80-480l440-280-137 240h497v80H383l137 240Z" />
</svg>
</div>
<div class="buttonText">
Dashboard
</div>
</button>
</div>
</div>
</div>
</body>
<script src="../../scripts/ButtonManager.js"></script>
<script src="../../scripts/ErrorHandler.js"></script>
<script src="./index.js"></script>
</html>

20
frontend/dashboard/account/index.js Normal file
View File

@@ -0,0 +1,20 @@
class AccountManager{
constructor(){
this.username = document.getElementById("username");
this.email = document.getElementById("email");
this.fullName = document.getElementById("fullName");
this.setUserData();
}
async setUserData(){
const respone = await fetch("/api/dashboard");
this.data = await respone.json();
this.username.value = this.data.username;
this.email.value = this.data.email;
this.fullName.value = this.data.fullName;
}
}
new AccountManager();

3
frontend/dashboard/account/style.css Normal file
View File

@@ -0,0 +1,3 @@
#dashboardBtn{
background-color: orange;
}

83
frontend/dashboard/index.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="../style/generalStyle.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container menu">
<h1 class="title">Dashboard</h1>
<div class="container buttonMenu">
<h2 id="data" class="message"></h2>
<button id="lobbyBtn">
<div class="buttonIcon">
<svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
fill="#FFFFFF">
<path d="M640-200q-27 0-52.5-5T538-219q58-49 90-117t32-144q0-76-32-144t-90-117q24-9 49.5-14t52.5-5q117 0 198.5 81.5T920-480q0 117-81.5
198.5T640-200Zm-320 0q-117 0-198.5-81.5T40-480q0-117 81.5-198.5T320-760q27 0 52.5 5t49.5 14q-17 14-32 30.5T362-676q-10-2-20.5-3t-21.5-1q-83
0-141.5 58.5T120-480q0 83 58.5 141.5T320-280q11 0 21.5-1t20.5-3q13 18 28 34.5t32 30.5q-24 9-49.5 14t-52.5 5Zm160-50q-57-39-88.5-100T360-480q0-69
31.5-130T480-710q57 39 88.5 100T600-480q0 69-31.5 130T480-250Z" />
</svg>
</div>
<div class="buttonText">
Lobby
</div>
</button>
<button id="accountBtn">
<div class="buttonIcon">
<svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
fill="#FFFFFF">
<path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34
17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11
-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560
-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z" />
</svg>
</div>
<div class="buttonText">
Account
</div>
</button>
<div class="container navButtons">
<button id="homeBtn">
<div class="buttonIcon">
<svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
fill="#ffffff">
<path d="M520-200 80-480l440-280-137 240h497v80H383l137 240Z" />
</svg>
</div>
<div class="buttonText">
Startseite
</div>
</button>
<button id="logoutBtn">
<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-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58
102-102H360v-80h327L585-622l55-58 200 200-200 200Z" />
</svg>
</div>
<div class="buttonText">
Ausloggen
</div>
</button>
</div>
</div>
</div>
</body>
<script src="../scripts/ButtonManager.js"></script>
<script src="./index.js"></script>
</html>

15
frontend/dashboard/index.js Normal file
View File

@@ -0,0 +1,15 @@
class DataFetcher {
constructor() {
this.greetingText = document.getElementById("data");
this.init();
}
async init() {
const reponse = await fetch("/api/dashboard");
this.data = await reponse.json();
this.greetingText.innerText = `Hallo ${this.data.fullName ? this.data.fullName : this.data.username}, starte hier Double-Snake!`
}
}
new DataFetcher();

69
frontend/dashboard/lobby/index.html Normal file
View 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
View 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
View 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
View 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;
}

23
frontend/dashboard/style.css Normal file
View File

@@ -0,0 +1,23 @@
button{
width: 280px;
}
.buttonMenu{
height: 60%;
}
#joinBtn{
background-color: rgb(0, 119, 255);
}
#homeBtn{
background-color: rgb(122, 122, 0);
}
#accountBtn{
background-color: orange;
}
#logoutBtn{
background-color: rgb(103, 11, 156);
}