Small Fix with name + username. Implemented Playerlist

lobby.js

@@ -33,13 +33,12 @@ app.get("/lobby/create", async (req, res) => {
 
 app.get("/lobby/join", async (req, res) => {
     let lobbyId = req.query.lobbyId;
-    let name = req.query.name;
+    let username = req.query.username;
 
     const users = get_data();
-    const user = (users.find(u => u.username === name))
+    const user = users.find(u => u.username === username);
     if (!user) {
-        res.status(401).json({ error: "User doesn't exist or is required" });
-
+        return res.status(401).json({ error: "User doesn't exist" });
     }
 
     await joinLobby(lobbyId, user.username);
@@ -48,9 +47,11 @@ app.get("/lobby/join", async (req, res) => {
         playerMap[lobbyId] = [];
     }
 
-    playerMap[lobbyId].push(name);
+    if (!playerMap[lobbyId].includes(username)) {
+        playerMap[lobbyId].push(username);
+    }
 
-    res.send({lobbyId: lobbyId, name: name});
+    res.json({ lobbyId, username });
 });
 
 app.get("/lobby/players", async (req, res) => {

public/frontend_home.js

@@ -2,66 +2,72 @@ document.addEventListener("DOMContentLoaded", async () => {
     const logoutButton = document.getElementById("logout");
     const balance = document.getElementById("balance");
     const hostButton = document.getElementById("host");
-    const joinButton = document.getElementById("join");
+
+    const getUsernameFromToken = async () => {
         try {
-        const balanceRes = await fetch('/balance', {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
+            const res = await fetch("/verify", { method: "POST" });
+            const data = await res.json();
+            return data.user?.username;
+        } catch (err) {
+            console.error("Failed to get username from token");
+            return null;
         }
-        });
+    };
+
+    // Get and display user balance
+    try {
+        const balanceRes = await fetch('/balance', { method: "GET" });
         if (balanceRes.ok) {
             const balanceData = await balanceRes.json();
-            console.log(balanceData);
             balance.innerHTML = balanceData.balance;
         }
     } catch (error) {
-        console.log(error);
+        console.log("Balance error:", error);
     }
+
+    // Logout
     logoutButton.addEventListener("click", async (e) => {
         e.preventDefault();
         try {
-            const logoutRes = await fetch('/logout', {
-                method: "DELETE",
-                headers: {
-                    "Content-Type": "application/json",
-                }
-            });
-
+            const logoutRes = await fetch('/logout', { method: "DELETE" });
             if (logoutRes.ok) {
                 document.cookie = "authorization=; Max-Age=0; path=/;";
                 window.location.href = "/login";
-            } else {
-                console.log("Failed to logout");
             }
         } catch (err) {
             console.log("Logout error:", err);
         }
     });
+
+    // Host Lobby and join immediately
     hostButton.addEventListener("click", async (e) => {
         e.preventDefault();
+
+        const username = await getUsernameFromToken();
+        if (!username) return alert("User not authenticated");
+
         try {
-            const hostRes = await fetch('/lobby/create', {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json",
-                }
-            });
-            if (hostRes.ok) {
-                const lobbyId = await hostRes.text();
-                document.getElementById("lobby-id").textContent = lobbyId;
+            const res = await fetch(`/lobby/create?username=${username}`);
+            if (res.redirected) {
+                // If server redirects to join, follow the URL manually
+                const joinURL = new URL(res.url);
+                const lobbyId = joinURL.searchParams.get("lobbyId");
+
+                const joinRes = await fetch(joinURL.href);
+                const { lobbyId: finalLobbyId } = await joinRes.json();
+
+                document.getElementById("lobby-id").textContent = finalLobbyId;
                 document.getElementById("lobby-room").classList.remove("hidden");
+
                 setInterval(async () => {
-                    const res = await fetch(`/lobby/players?lobbyId=${lobbyId}`);
+                    const res = await fetch(`/lobby/players?lobbyId=${finalLobbyId}`);
                     const data = await res.json();
                     const playerList = document.getElementById("player-list");
                     playerList.innerHTML = data.players.map(p => `<p>${p}</p>`).join("") || "<p>No players yet</p>";
                 }, 3000);
-            } else {
-                console.log("Failed to create lobby:" + await hostRes.text());
             }
         } catch (err) {
-            console.log("Lobby create error:", err);
+            console.error("Lobby create/join error:", err);
         }
     });
 });