Added Join button

This commit is contained in:
IM23a-spirgif
2025-04-17 18:15:02 +02:00
parent 3600ec0189
commit 10dc9b76d8
4 changed files with 88 additions and 11 deletions
+49 -8
View File
@@ -2,10 +2,15 @@ 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 {
const res = await fetch("/verify", { method: "POST" });
const res = await fetch("/verify", {method: "POST"});
const data = await res.json();
return data.user?.username;
} catch (err) {
@@ -13,10 +18,8 @@ document.addEventListener("DOMContentLoaded", async () => {
return null;
}
};
// Get and display user balance
try {
const balanceRes = await fetch('/balance', { method: "GET" });
const balanceRes = await fetch('/balance', {method: "GET"});
if (balanceRes.ok) {
const balanceData = await balanceRes.json();
balance.innerHTML = balanceData.balance;
@@ -29,7 +32,7 @@ document.addEventListener("DOMContentLoaded", async () => {
logoutButton.addEventListener("click", async (e) => {
e.preventDefault();
try {
const logoutRes = await fetch('/logout', { method: "DELETE" });
const logoutRes = await fetch('/logout', {method: "DELETE"});
if (logoutRes.ok) {
document.cookie = "authorization=; Max-Age=0; path=/;";
window.location.href = "/login";
@@ -49,12 +52,10 @@ 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();
const {lobbyId: finalLobbyId} = await joinRes.json();
document.getElementById("lobby-id").textContent = finalLobbyId;
document.getElementById("lobby-room").classList.remove("hidden");
@@ -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.");
}
});
});