Frederik Spirgi
383 lines
14 KiB
JavaScript
383 lines
14 KiB
JavaScript
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 hostForm = document.getElementById("host-form");
|
|
const createLobbyButton = document.getElementById("create-lobby");
|
|
const lobbyVisibilityInputs = document.querySelectorAll("input[name='lobby-visibility']");
|
|
const joinForm = document.getElementById("join-form");
|
|
const joinCodeInput = document.getElementById("join-code");
|
|
const joinSubmit = document.getElementById("submit-join");
|
|
const refreshLobbies = document.getElementById("refresh-lobbies");
|
|
const publicLobbies = document.getElementById("public-lobbies");
|
|
const leaveButton = document.getElementById("leave-button");
|
|
const joinError = document.getElementById("join-error");
|
|
const lobbyRoom = document.getElementById("lobby-room");
|
|
const lobbyIdDisplay = document.getElementById("lobby-id");
|
|
const playerList = document.getElementById("player-list");
|
|
const startGameButton = document.getElementById("start-game");
|
|
let socket = null;
|
|
let socketReady = null;
|
|
let currentUsername = null;
|
|
let currentLobbyId = null;
|
|
|
|
const showJoinError = (message) => {
|
|
joinError.textContent = message;
|
|
joinError.classList.remove("hidden");
|
|
};
|
|
|
|
const clearJoinError = () => {
|
|
joinError.textContent = "";
|
|
joinError.classList.add("hidden");
|
|
};
|
|
|
|
const renderPlayers = (players) => {
|
|
playerList.innerHTML = "";
|
|
|
|
if (!players.length) {
|
|
playerList.innerHTML = "<p>No players yet</p>";
|
|
return;
|
|
}
|
|
|
|
for (const player of players) {
|
|
const entry = document.createElement("p");
|
|
entry.textContent = player;
|
|
playerList.appendChild(entry);
|
|
}
|
|
};
|
|
|
|
const updateStartButton = (host, canStart) => {
|
|
const isHost = currentUsername && host === currentUsername;
|
|
startGameButton.classList.toggle("hidden", !isHost);
|
|
startGameButton.disabled = !isHost || !canStart;
|
|
startGameButton.textContent = canStart ? "Start Game" : "Waiting for 2 players";
|
|
};
|
|
|
|
const showLobby = (lobbyId, players = [], host = null, canStart = false) => {
|
|
currentLobbyId = lobbyId;
|
|
lobbyIdDisplay.textContent = lobbyId;
|
|
lobbyRoom.classList.remove("hidden");
|
|
joinForm.classList.add("hidden");
|
|
hostForm.classList.add("hidden");
|
|
renderPlayers(players);
|
|
updateStartButton(host, canStart);
|
|
};
|
|
|
|
const joinLobby = (lobbyId) => {
|
|
if (!currentUsername) {
|
|
showJoinError("User not authenticated.");
|
|
return Promise.reject(new Error("User not authenticated"));
|
|
}
|
|
return sendSocketMessage({type: "lobby:join", lobbyId});
|
|
};
|
|
|
|
const renderPublicLobbies = (lobbies = []) => {
|
|
publicLobbies.innerHTML = "";
|
|
|
|
if (!lobbies.length) {
|
|
publicLobbies.innerHTML = "<p>No public lobbies found</p>";
|
|
return;
|
|
}
|
|
|
|
lobbies.forEach((lobby) => {
|
|
const row = document.createElement("div");
|
|
row.className = "public-lobby";
|
|
|
|
const info = document.createElement("div");
|
|
info.className = "public-lobby-info";
|
|
|
|
const title = document.createElement("strong");
|
|
title.textContent = lobby.host ? `${lobby.host}'s lobby` : "Public lobby";
|
|
info.appendChild(title);
|
|
|
|
const meta = document.createElement("span");
|
|
meta.textContent = `${lobby.players} player${lobby.players === 1 ? "" : "s"} - ${lobby.gameStarted ? "Game running" : "Waiting"}`;
|
|
info.appendChild(meta);
|
|
|
|
const join = document.createElement("button");
|
|
join.type = "button";
|
|
join.textContent = "Join";
|
|
join.addEventListener("click", () => {
|
|
clearJoinError();
|
|
joinLobby(lobby.lobbyId).catch(() => showJoinError("Could not join lobby."));
|
|
});
|
|
|
|
row.appendChild(info);
|
|
row.appendChild(join);
|
|
publicLobbies.appendChild(row);
|
|
});
|
|
};
|
|
|
|
const loadPublicLobbies = async () => {
|
|
try {
|
|
publicLobbies.innerHTML = "<p>Loading lobbies...</p>";
|
|
const res = await fetch("/lobby/public", {credentials: "same-origin"});
|
|
if (!res.ok) {
|
|
throw new Error("Failed to load lobbies");
|
|
}
|
|
const data = await res.json();
|
|
renderPublicLobbies(data.lobbies || []);
|
|
} catch (error) {
|
|
publicLobbies.innerHTML = "<p>Could not load lobbies</p>";
|
|
}
|
|
};
|
|
|
|
const hideLobby = () => {
|
|
currentLobbyId = null;
|
|
lobbyRoom.classList.add("hidden");
|
|
lobbyIdDisplay.textContent = "N/A";
|
|
playerList.innerHTML = "<p>Waiting for players...</p>";
|
|
startGameButton.classList.add("hidden");
|
|
startGameButton.disabled = true;
|
|
};
|
|
|
|
const sendSocketMessage = async (message) => {
|
|
const ws = await connectSocket();
|
|
ws.send(JSON.stringify(message));
|
|
};
|
|
|
|
const connectSocket = () => {
|
|
if (socket && socket.readyState === WebSocket.OPEN && socket.authenticated) {
|
|
return Promise.resolve(socket);
|
|
}
|
|
|
|
if (socketReady) {
|
|
return socketReady;
|
|
}
|
|
|
|
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
|
socket = new WebSocket(`${protocol}//${window.location.host}`);
|
|
|
|
socketReady = new Promise((resolve, reject) => {
|
|
socket.addEventListener("error", () => reject(new Error("WebSocket connection failed")), {once: true});
|
|
socket.addEventListener("close", (event) => {
|
|
reject(new Error(`WebSocket closed before authentication: ${event.reason || event.code}`));
|
|
}, {once: true});
|
|
socket.addEventListener("message", (event) => {
|
|
const message = JSON.parse(event.data);
|
|
if (message.type === "auth:success") {
|
|
currentUsername = message.username;
|
|
socket.authenticated = true;
|
|
resolve(socket);
|
|
}
|
|
if (message.type === "auth:error") {
|
|
reject(new Error(message.message || "WebSocket authentication failed"));
|
|
}
|
|
}, {once: true});
|
|
});
|
|
|
|
socket.addEventListener("message", (event) => {
|
|
const message = JSON.parse(event.data);
|
|
|
|
if (message.type === "auth:error") {
|
|
showJoinError(message.message);
|
|
return;
|
|
}
|
|
|
|
if (message.type === "auth:success") {
|
|
currentUsername = message.username;
|
|
return;
|
|
}
|
|
|
|
if (message.type === "lobby:state") {
|
|
clearJoinError();
|
|
if (message.gameStarted) {
|
|
localStorage.setItem("activeLobbyId", message.lobbyId);
|
|
window.location.href = message.gameUrl || `/poker.html?lobbyId=${encodeURIComponent(message.lobbyId)}`;
|
|
return;
|
|
}
|
|
showLobby(message.lobbyId, message.players || [], message.host, Boolean(message.canStart));
|
|
return;
|
|
}
|
|
|
|
if (message.type === "poker:started") {
|
|
localStorage.setItem("activeLobbyId", message.lobbyId);
|
|
window.location.href = message.url || `/poker.html?lobbyId=${encodeURIComponent(message.lobbyId)}`;
|
|
return;
|
|
}
|
|
|
|
if (message.type === "lobby:left") {
|
|
hideLobby();
|
|
return;
|
|
}
|
|
|
|
if (message.type === "lobby:error" || message.type === "error" || message.type === "poker:error") {
|
|
showJoinError(message.message || "WebSocket request failed");
|
|
}
|
|
});
|
|
|
|
socket.addEventListener("close", () => {
|
|
socket = null;
|
|
socketReady = null;
|
|
});
|
|
|
|
return socketReady;
|
|
};
|
|
|
|
const getUsernameFromToken = async () => {
|
|
try {
|
|
const res = await fetch("/verify", {
|
|
method: "POST",
|
|
credentials: "same-origin"
|
|
});
|
|
if (!res.ok) {
|
|
console.error("Token verification failed", res.status, await res.text());
|
|
return null;
|
|
}
|
|
const data = await res.json();
|
|
return data.user?.username;
|
|
} catch (err) {
|
|
console.error("Failed to get username from token", err);
|
|
return null;
|
|
}
|
|
};
|
|
|
|
currentUsername = await getUsernameFromToken();
|
|
if (!currentUsername) {
|
|
showJoinError("User not authenticated.");
|
|
}
|
|
|
|
connectSocket().catch((error) => {
|
|
console.error("Home WebSocket connection failed:", error);
|
|
showJoinError("Real-time poker connection failed.");
|
|
});
|
|
|
|
try {
|
|
const balanceRes = await fetch("/balance", {
|
|
method: "GET",
|
|
credentials: "same-origin"
|
|
});
|
|
if (balanceRes.ok) {
|
|
const balanceData = await balanceRes.json();
|
|
balance.textContent = balanceData.balance;
|
|
}
|
|
} catch (error) {
|
|
console.log("Balance error:", error);
|
|
}
|
|
|
|
logoutButton.addEventListener("click", async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
if (socket && socket.readyState === WebSocket.OPEN && socket.authenticated) {
|
|
socket.close();
|
|
}
|
|
const logoutRes = await fetch("/logout", {
|
|
method: "DELETE",
|
|
credentials: "same-origin"
|
|
});
|
|
if (logoutRes.ok) {
|
|
localStorage.removeItem("activeLobbyId");
|
|
window.location.href = "/login.html";
|
|
}
|
|
} catch (err) {
|
|
console.log("Logout error:", err);
|
|
}
|
|
});
|
|
|
|
hostButton.addEventListener("click", async (e) => {
|
|
e.preventDefault();
|
|
clearJoinError();
|
|
hostForm.classList.toggle("hidden");
|
|
joinForm.classList.add("hidden");
|
|
});
|
|
|
|
createLobbyButton.addEventListener("click", async (e) => {
|
|
e.preventDefault();
|
|
clearJoinError();
|
|
if (!currentUsername) {
|
|
showJoinError("User not authenticated.");
|
|
return;
|
|
}
|
|
const selectedVisibility = [...lobbyVisibilityInputs].find(input => input.checked)?.value || "public";
|
|
sendSocketMessage({type: "lobby:create", private: selectedVisibility === "private"}).catch(() => {
|
|
showJoinError("Could not create lobby.");
|
|
});
|
|
});
|
|
|
|
joinButton.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
joinForm.classList.toggle("hidden");
|
|
hostForm.classList.add("hidden");
|
|
if (!joinForm.classList.contains("hidden")) {
|
|
joinCodeInput.focus();
|
|
loadPublicLobbies();
|
|
}
|
|
});
|
|
|
|
refreshLobbies.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
loadPublicLobbies();
|
|
});
|
|
|
|
joinSubmit.addEventListener("click", async (e) => {
|
|
e.preventDefault();
|
|
clearJoinError();
|
|
|
|
const lobbyId = joinCodeInput.value.trim();
|
|
if (!lobbyId) {
|
|
showJoinError("Please enter a lobby ID.");
|
|
return;
|
|
}
|
|
|
|
if (!currentUsername) {
|
|
showJoinError("User not authenticated.");
|
|
return;
|
|
}
|
|
|
|
joinLobby(lobbyId).then(() => {
|
|
joinForm.classList.add("hidden");
|
|
joinCodeInput.value = "";
|
|
}).catch(() => {
|
|
showJoinError("Could not join lobby. Please try again.");
|
|
});
|
|
});
|
|
|
|
leaveButton.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
const lobbyId = lobbyIdDisplay.textContent;
|
|
if (!lobbyId || lobbyId === "N/A") return;
|
|
sendSocketMessage({type: "lobby:leave", lobbyId}).catch(() => {
|
|
showJoinError("Could not leave lobby.");
|
|
});
|
|
});
|
|
|
|
startGameButton.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
if (!currentLobbyId || startGameButton.disabled) return;
|
|
sendSocketMessage({type: "poker:start", lobbyId: currentLobbyId}).catch(() => {
|
|
showJoinError("Could not start game.");
|
|
});
|
|
});
|
|
|
|
async function loadLeaderboard() {
|
|
try {
|
|
const res = await fetch("/leaderboard", {credentials: "same-origin"});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
const list = document.getElementById("leaderboard-list");
|
|
const yourRank = document.getElementById("your-rank");
|
|
|
|
list.innerHTML = "";
|
|
data.leaderboard.forEach((player, i) => {
|
|
const item = document.createElement("li");
|
|
item.textContent = `${i + 1}. ${player.username} - $${player.money}`;
|
|
if (player.username === data.self.username) {
|
|
item.classList.add("you");
|
|
item.textContent += " (you)";
|
|
}
|
|
list.appendChild(item);
|
|
});
|
|
|
|
yourRank.textContent = `You are ranked #${data.self.position} with $${data.self.money}`;
|
|
} else {
|
|
console.error("Failed to load leaderboard.");
|
|
}
|
|
} catch (err) {
|
|
console.error("Leaderboard error:", err);
|
|
}
|
|
}
|
|
|
|
await loadLeaderboard();
|
|
});
|