Added Join button

public/frontend_home.js

@@ -2,6 +2,11 @@ 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 joinForm = document.getElementById("join-form");
+    const joinCodeInput = document.getElementById("join-code");
+    const joinSubmit = document.getElementById("submit-join");
+
 
     const getUsernameFromToken = async () => {
         try {
@@ -13,8 +18,6 @@ document.addEventListener("DOMContentLoaded", async () => {
             return null;
         }
     };
-
-    // Get and display user balance
     try {
         const balanceRes = await fetch('/balance', {method: "GET"});
         if (balanceRes.ok) {
@@ -49,10 +52,8 @@ document.addEventListener("DOMContentLoaded", async () => {
         try {
             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();
 
@@ -70,4 +71,44 @@ document.addEventListener("DOMContentLoaded", async () => {
             console.error("Lobby create/join error:", err);
         }
     });
+    joinButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        if (joinForm.classList.contains("hidden")) {
+            joinForm.classList.remove("hidden");
+            joinCodeInput.focus();
+        } else {
+            joinForm.classList.add("hidden");
+        }
+    });
+    joinSubmit.addEventListener("click", async (e) => {
+        e.preventDefault();
+        const lobbyId = joinCodeInput.value.trim();
+        if (!lobbyId) return alert("Please enter a lobby ID");
+        const username = await getUsernameFromToken();
+        if (!username) return alert("User not authenticated");
+
+        try {
+            const joinRes = await fetch(`/lobby/join?lobbyId=${lobbyId}&username=${username}`);
+            if (joinRes.ok) {
+                const {lobbyId: finalLobbyId} = await joinRes.json();
+
+                document.getElementById("lobby-id").textContent = finalLobbyId;
+                document.getElementById("lobby-room").classList.remove("hidden");
+                joinForm.classList.add("hidden");
+
+                setInterval(async () => {
+                    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 {
+                const error = await joinRes.json();
+                alert("Failed to join lobby: " + (error.error || "Unknown error"));
+            }
+        } catch (err) {
+            console.error("Join lobby error:", err);
+            alert("Could not join lobby.");
+        }
+    });
 });

public/home.html

@@ -14,6 +14,10 @@
     <button id="host">Host Lobby</button>
     <button id="join">Join Lobby</button>
 </div>
+<div id="join-form" class="hidden">
+    <input type="text" id="join-code" placeholder="Enter Lobby ID" />
+    <button id="submit-join">Join</button>
+</div>
 <div id="lobby-room" class="lobby-room hidden">
     <h2>Lobby ID: <span id="lobby-id">N/A</span></h2>
     <div id="player-list">

public/styles_home.css

@@ -83,3 +83,35 @@ button.logout {
 .hidden {
     display: none;
 }
+
+#join-form {
+    margin-top: 20px;
+    gap: 10px;
+    display: none; /* default hidden */
+}
+
+#join-form:not(.hidden) {
+    display: flex;
+}
+
+#join-form input {
+    padding: 10px;
+    border-radius: 8px;
+    border: 2px solid #0f0;
+    background-color: #111;
+    color: #0f0;
+    font-size: 16px;
+    box-shadow: 0 0 5px #0f0 inset;
+    width: 200px;
+}
+
+#join-form button {
+    background-color: #0f0;
+    color: #000;
+    font-weight: bold;
+    padding: 10px 20px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: 0.2s;
+}