first commit

2025-12-04 21:21:30 +01:00
commit 3dd6b3ff36
2124 changed files with 338827 additions and 0 deletions
--- a/session/session.html
+++ b/session/session.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <base href="/session/">
+    <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Imposter</title>
+</head>
+<body>
+<div class="hello_username" id="hello_username"></div>
+
+<button class="button" onclick="show_user()">show user</button>
+
+<div id = "users"></div>
+
+<div>
+    <button id="readyButton" class="readyButton" onclick="ready()">Nicht Bereit!</button>
+</div>
+
+    <script src="./session.js" ></script>
+</body>
+</html>
--- a/session/session.js
+++ b/session/session.js
@ -0,0 +1,62 @@
+const parts = window.location.pathname.split('/').filter(Boolean);
+const sessionId = parts[0] ?? null;
+const username = parts[1] ?? null;
+//console.log(sessionId, username)
+
+
+const hello_username_div = document.getElementById('hello_username')
+hello_username_div.textContent = `Hallo ${username}👋`
+
+//liste an user zurückgeben
+setInterval(show_user, 2000);
+async function show_user() {
+    //console.log(sessionId)
+    const res = await fetch(`/api/user/${sessionId}`);
+    const users = await res.json();
+    const allUsers = users.map(u => u.ready);
+        if(allUsers.every(v => v === 1))  {
+        window.location.href = window.location.href = `/${sessionId}/${username}/game`
+    }
+
+    const user_div = document.getElementById('users');
+    
+    //todo ready status hinzufügen, eventuell WS nutzen
+    for (let i = 0; i < users.length; i++) {
+        const userObj = users[i];
+        if (!document.getElementById(userObj.user)) {
+            const new_div = document.createElement('div');
+            new_div.className = 'user';
+            new_div.id = userObj.user;
+            new_div.textContent = userObj.user;
+            user_div.appendChild(new_div);
+        }
+    }
+}
+//ready status updaten
+async function ready() {
+    const data = {
+        user: username,
+        ready: 1,
+    }
+    const  res = await fetch(`/api/ready/${sessionId}`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data)
+    });
+    
+    const resObj = await res.json();
+    console.log(resObj.ready)
+
+    //statusänderung des buttons abhänging von der server response
+    const readyButton = document.getElementById('readyButton');
+    if (resObj.ready == true) {
+        readyButton.classList.toggle('active');
+        readyButton.textContent = "Bereit!"
+    } else {
+        readyButton.classList.toggle('active');
+        readyButton.textContent = "Nicht Bereit!"
+    }
+    
+}
--- a/session/style.css
+++ b/session/style.css
@ -0,0 +1,49 @@
+   body {
+        background-color: #09161E;
+    }
+    .user {
+        display: flex;
+        justify-content: center;
+        background-color: white;
+        border-radius: 5px;
+        border-width: 4px;
+        max-width: 100px;
+        margin: 5px auto;
+        font-size: 30px;
+
+    }
+
+
+    .button {
+    display: flex;
+    justify-content: center;
+
+    }
+    .hello_username {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #0787D0;
+        color: white;
+        max-width: fit-content;
+        margin: 5px 10px 5px auto; 
+        border-radius: 5px;
+        font-size: 30px;
+
+    }
+    .readyButton {
+        display: flex;
+        justify-content: center;
+        background-color: white;
+        border: 2px solid #ccc;
+        border-radius: 5px;
+        border-color: red;
+        border-width: 4px;
+        max-width: fit-content;
+        margin: 100px auto;
+        font-size: 30px;
+        
+    }
+    .readyButton.active {
+        border-color: green;
+    }