From d433cd3263fad4b688530d52f90eb7eb49796b9b Mon Sep 17 00:00:00 2001
From: IM23a-spirgif <spirgif@bzz.ch>
Date: Wed, 30 Apr 2025 09:30:19 +0200
Subject: [PATCH] Added 'Join' error message when lobby is not found

---
 gambling.js             |  1 -
 public/frontend_home.js | 26 +++++++++++++++++++++-----
 public/home.html        |  1 +
 public/styles_home.css  | 11 +++++++++++
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/gambling.js b/gambling.js
index b635f47..24315db 100644
--- a/gambling.js
+++ b/gambling.js
@@ -240,7 +240,6 @@ app.get("/lobby/join", authenticateToken, async (req, res) => {
         if (!playerMap[lobbyId].includes(username)) {
             playerMap[lobbyId].push(username);
         }
-
         res.json({ lobbyId, username });
     } else {
         console.log("Lobby with " + lobbyId + " not found.");
diff --git a/public/frontend_home.js b/public/frontend_home.js
index 2e5e4cd..7c88684 100644
--- a/public/frontend_home.js
+++ b/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");
         }
     });
 });
\ No newline at end of file
diff --git a/public/home.html b/public/home.html
index bc1e87c..63701c8 100644
--- a/public/home.html
+++ b/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">
diff --git a/public/styles_home.css b/public/styles_home.css
index 9ceff4c..0673ad3 100644
--- a/public/styles_home.css
+++ b/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;
 }
\ No newline at end of file