Added Loading Screen

2025-05-06 14:24:54 +02:00
parent 48e6145d4b
commit 2c18ea1fa0
3 changed files with 76 additions and 7 deletions
@@ -15,9 +15,8 @@

            if (loginRes.ok) {
                const loginData = await loginRes.json();
-                alert(`Welcome back, ${loginData.username}!`);
-                document.cookie = `authorization=${loginData.token}`
-                window.location.href = "/";
+                document.cookie = `authorization=${loginData.token}`;
+                showLoadingScreen("Login successful. Loading Lobby...");
                return;
            }

@@ -29,9 +28,8 @@

            if (registerRes.ok) {
                const registerData = await registerRes.json();
-                alert(`Account created! Welcome!`);
-                document.cookie = `authorization=${registerData.token}`
-                window.location.href = "/";
+                document.cookie = `authorization=${registerData.token}`;
+                showLoadingScreen("Register successful. Loading Lobby...");
            } else {
                const error = await registerRes.json();
                alert("Register failed: " + (error.error || "Unknown error"));
@@ -41,4 +39,28 @@
            alert("Server unreachable.");
        }
    });
+
+    function showLoadingScreen(message) {
+        const loadingScreen = document.getElementById("loading-screen");
+        const loadingText = document.getElementById("loading-text");
+        const progress = document.getElementById("progress");
+
+        loadingText.textContent = message;
+        loadingScreen.classList.remove("hidden");
+
+        let percent = 0;
+        const interval = setInterval(() => {
+            percent += Math.floor(Math.random() * 10) + 5;
+            if (percent >= 100) {
+                percent = 100;
+                progress.style.width = percent + "%";
+                clearInterval(interval);
+                setTimeout(() => {
+                    window.location.href = "/";
+                }, 500);
+            } else {
+                progress.style.width = percent + "%";
+            }
+        }, 200);
+    }
 });