Added 'Join' error message when lobby is not found

public/frontend_home.js

@@ -7,7 +7,6 @@ document.addEventListener("DOMContentLoaded", async () => {
     const joinCodeInput = document.getElementById("join-code");
     const joinSubmit = document.getElementById("submit-join");
 
-
     const getUsernameFromToken = async () => {
         try {
             const res = await fetch("/verify", {method: "POST"});
@@ -83,9 +82,22 @@ document.addEventListener("DOMContentLoaded", async () => {
     joinSubmit.addEventListener("click", async (e) => {
         e.preventDefault();
         const lobbyId = joinCodeInput.value.trim();
-        if (!lobbyId) return alert("Please enter a lobby ID");
+        const joinError = document.getElementById("join-error");
+        joinError.classList.add("hidden"); // hide any previous error
+        joinError.textContent = "";
+
+        if (!lobbyId) {
+            joinError.textContent = "Please enter a lobby ID.";
+            joinError.classList.remove("hidden");
+            return;
+        }
+
         const username = await getUsernameFromToken();
-        if (!username) return alert("User not authenticated");
+        if (!username) {
+            joinError.textContent = "User not authenticated.";
+            joinError.classList.remove("hidden");
+            return;
+        }
 
         try {
             const joinRes = await fetch(`/lobby/join?lobbyId=${lobbyId}&username=${username}`);
@@ -94,6 +106,8 @@ document.addEventListener("DOMContentLoaded", async () => {
                 document.getElementById("lobby-id").textContent = finalLobbyId;
                 document.getElementById("lobby-room").classList.remove("hidden");
                 joinForm.classList.add("hidden");
+                joinCodeInput.value = "";
+
                 setInterval(async () => {
                     const res = await fetch(`/lobby/players?lobbyId=${finalLobbyId}`);
                     const data = await res.json();
@@ -102,11 +116,13 @@ document.addEventListener("DOMContentLoaded", async () => {
                 }, 3000);
             } else {
                 const error = await joinRes.json();
-                alert("Failed to join lobby: " + (error.error || "Unknown error"));
+                joinError.textContent = "Join failed: " + (error.error || "Unknown error");
+                joinError.classList.remove("hidden");
             }
         } catch (err) {
             console.error("Join lobby error:", err);
-            alert("Could not join lobby.");
+            joinError.textContent = "Could not join lobby. Please try again.";
+            joinError.classList.remove("hidden");
         }
     });
 });

public/home.html

@@ -18,6 +18,7 @@
     <input type="text" id="join-code" placeholder="Enter Lobby ID" />
     <button id="submit-join">Join</button>
 </div>
+<div id="join-error" class="error-message hidden"></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

@@ -114,4 +114,15 @@ button.logout {
     border: none;
     cursor: pointer;
     transition: 0.2s;
+}
+
+.error-message {
+    color: red;
+    margin-top: 10px;
+    font-weight: bold;
+    text-shadow: 0 0 3px red;
+}
+
+.hidden {
+    display: none;
 }