Fretux/Gambling_API
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

try to fix this spaghetti of a code

Browse Source
This commit is contained in:
Frederik Spirgi
2026-09-09 10:48:55 +02:00
parent 9e099a41db
commit a5f8191c2e
13 changed files with 306 additions and 2318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/frontend_home.js
+59 -373
View File
@@ -1,382 +1,68 @@
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>";
}
};
document.addEventListener('DOMContentLoaded', async () => {
const byId = id => document.getElementById(id);
const client = new RealtimeClient();
let username; let lobbyId;
const error = message => {byId('join-error').textContent = message; byId('join-error').classList.toggle('hidden', !message);};
const send = async message => {try {error(''); await client.send(message);} catch (problem) {error(problem.message);}};
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;
lobbyId = null; localStorage.removeItem('activeLobbyId'); byId('lobby-room').classList.add('hidden');
byId('host').disabled = false; byId('join').disabled = false;
};
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 () => {
async function refreshBalance() {
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.");
const [balance, ranks] = await Promise.all([apiRequest('/balance'), apiRequest('/leaderboard')]);
byId('balance').textContent = balance.balance;
byId('leaderboard-list').replaceChildren(...ranks.leaderboard.map((player, index) => {
const item = document.createElement('li'); item.textContent = `${index + 1}. ${player.username}: ${player.money}`;
item.classList.toggle('you', player.username === username); return item;
}));
byId('your-rank').textContent = `Your rank: #${ranks.self.position}`;
} catch (problem) {error(problem.message);}
}
connectSocket().catch((error) => {
console.error("Home WebSocket connection failed:", error);
showJoinError("Real-time poker connection failed.");
client.addEventListener('status', event => {error(event.detail); byId('start-game').disabled = !client.ready || byId('start-game').dataset.allowed !== 'true';});
client.addEventListener('message', event => {
const message = event.detail;
if (message.type === 'auth:success') username = message.username;
if (message.type === 'lobby:left') {hideLobby(); refreshBalance();}
if (message.type !== 'lobby:state') return;
lobbyId = message.lobbyId;
if (message.gameStarted) {
localStorage.setItem('activeLobbyId', lobbyId);
location.assign(`/poker.html?lobbyId=${encodeURIComponent(lobbyId)}`); return;
}
byId('lobby-id').textContent = lobbyId; byId('lobby-room').classList.remove('hidden');
byId('host-form').classList.add('hidden'); byId('join-form').classList.add('hidden');
byId('host').disabled = true; byId('join').disabled = true;
byId('player-list').replaceChildren(...message.players.map(player => {const item = document.createElement('p'); item.textContent = player; return item;}));
const allowed = message.host === username && message.canStart;
byId('start-game').dataset.allowed = String(allowed);
byId('start-game').disabled = !allowed; byId('start-game').classList.toggle('hidden', message.host !== username);
});
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();
byId('host').addEventListener('click', () => {byId('host-form').classList.toggle('hidden'); byId('join-form').classList.add('hidden');});
byId('create-lobby').addEventListener('click', () => send({type: 'lobby:create', private: document.querySelector('[name="lobby-visibility"]:checked').value === 'private'}));
async function loadLobbies() {
try {
if (socket && socket.readyState === WebSocket.OPEN && socket.authenticated) {
socket.close();
const {lobbies} = await apiRequest('/lobby/public');
byId('public-lobbies').replaceChildren();
if (!lobbies.length) {byId('public-lobbies').textContent = 'No public lobbies found'; return;}
for (const lobby of lobbies) {
const row = document.createElement('div'); row.className = 'public-lobby';
const info = document.createElement('span'); info.textContent = `${lobby.host}: ${lobby.players}/10 players`;
const button = document.createElement('button'); button.textContent = 'Join'; button.type = 'button';
button.addEventListener('click', () => send({type: 'lobby:join', lobbyId: lobby.lobbyId}));
row.append(info, button); byId('public-lobbies').append(row);
}
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);
}
} catch (problem) {error(problem.message);}
}
await loadLeaderboard();
byId('join').addEventListener('click', () => {byId('join-form').classList.toggle('hidden'); byId('host-form').classList.add('hidden'); byId('join-code').focus(); loadLobbies();});
byId('refresh-lobbies').addEventListener('click', loadLobbies);
byId('submit-join').addEventListener('click', () => send({type: 'lobby:join', lobbyId: byId('join-code').value.trim().toLowerCase()}));
byId('leave-button').addEventListener('click', () => send({type: 'lobby:leave', lobbyId}));
byId('start-game').addEventListener('click', () => send({type: 'poker:start', lobbyId}));
byId('logout').addEventListener('click', async () => {
try {await apiRequest('/logout', {method: 'DELETE'}); client.close(); localStorage.removeItem('activeLobbyId'); location.assign('/login');}
catch (problem) {error(`Logout failed: ${problem.message}`);}
});
try {username = (await apiRequest('/verify', {method: 'POST'})).user.username; await client.connect(); await refreshBalance();}
catch (problem) {error(problem.message);}
});
public/frontend_login.js
+17 -106
View File
@@ -1,109 +1,20 @@
document.addEventListener("DOMContentLoaded", () => {
const form = document.querySelector("form");
const registerButton = document.getElementById("register-button");
const loginButton = document.getElementById("login-button");
const authError = document.getElementById("auth-error");
form.addEventListener("submit", async (event) => {
event.preventDefault();
await authenticate("/login", "Login successful. Loading Lobby...");
});
registerButton.addEventListener("click", async () => {
await authenticate("/register", "Register successful. Loading Lobby...");
});
async function authenticate(endpoint, successMessage) {
clearAuthError();
setButtonsDisabled(true);
const credentials = {
username: form.username.value,
password: form.password.value
};
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
const error = document.getElementById('auth-error');
let pending = false;
async function authenticate(endpoint) {
if (pending || !form.reportValidity()) return;
pending = true; error.textContent = ''; error.classList.add('hidden');
for (const button of form.querySelectorAll('button')) button.disabled = true;
try {
const response = await fetch(endpoint, {
method: "POST",
headers: {"Content-Type": "application/json"},
credentials: "same-origin",
body: JSON.stringify(credentials)
});
const data = await readJsonResponse(response);
if (!response.ok) {
showAuthError(data.error || "Authentication failed.");
return;
}
const verified = await verifySession();
if (!verified) {
showAuthError("Login succeeded, but the browser did not send the session cookie back to the server.");
return;
}
showLoadingScreen(successMessage);
} catch (error) {
console.error("Authentication request failed:", error);
showAuthError("Server unreachable.");
} finally {
setButtonsDisabled(false);
}
}
async function verifySession() {
const response = await fetch("/verify", {
method: "POST",
credentials: "same-origin"
});
if (!response.ok) return false;
const data = await readJsonResponse(response);
return Boolean(data.valid && data.user?.username);
}
async function readJsonResponse(response) {
try {
return await response.json();
} catch {
return {};
}
}
function showAuthError(message) {
authError.textContent = message;
authError.classList.remove("hidden");
}
function clearAuthError() {
authError.textContent = "";
authError.classList.add("hidden");
}
function setButtonsDisabled(disabled) {
loginButton.disabled = disabled;
registerButton.disabled = disabled;
}
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);
const response = await fetch(endpoint, {method: 'POST', credentials: 'same-origin', headers: {'Content-Type': 'application/json'},
body: JSON.stringify({username: form.username.value, password: form.password.value})});
const data = await response.json();
if (!response.ok) throw new Error(data.error || 'Authentication failed');
location.assign('/');
} catch (problem) {error.textContent = problem.message; error.classList.remove('hidden');}
finally {pending = false; for (const button of form.querySelectorAll('button')) button.disabled = false;}
}
form.addEventListener('submit', event => {event.preventDefault(); authenticate('/login');});
document.getElementById('register-button').addEventListener('click', () => authenticate('/register'));
});
public/frontend_poker.js
+50 -57
View File
@@ -26,8 +26,11 @@ document.addEventListener("DOMContentLoaded", () => {
const actionButtons = document.querySelectorAll(".actions button");
const params = new URLSearchParams(window.location.search);
const lobbyId = params.get("lobbyId") || localStorage.getItem("activeLobbyId");
let socket = null;
let socketReady = null;
const client = new RealtimeClient();
let minimumRaise = 10;
let raisesAllowed = true;
let actionPending = false;
let previousFocus = null;
let isYourTurn = false;
let isSpectator = false;
let currentStackValue = 0;
@@ -120,13 +123,20 @@ document.addEventListener("DOMContentLoaded", () => {
};
const sendSocketMessage = async (message) => {
const ws = await connectSocket();
ws.send(JSON.stringify(message));
message = {...message, lobbyId};
if (message.payload?.amount !== undefined) message.payload = {amount: message.payload.amount};
else delete message.payload;
actionPending = true; updateActionButtons();
try { await client.send(message); }
finally { actionPending = false; updateActionButtons(); }
};
const closeModal = () => {
betModal.classList.add("hidden");
previousFocus?.focus();
};
const updateActionButtons = () => {
actionButtons.forEach((button) => {
button.disabled = !isYourTurn || isSpectator;
button.disabled = !client.ready || actionPending || !isYourTurn || isSpectator;
if (button.dataset.action === "hit") {
button.textContent = callAmount > 0 ? "Call" : "Check";
button.title = callAmount > 0
@@ -134,9 +144,9 @@ document.addEventListener("DOMContentLoaded", () => {
: actionTooltips.hit;
}
});
confirmBet.disabled = !isYourTurn || isSpectator;
leaveTable.disabled = false;
leaveTable.title = "Leave table. Chips already in the pot are lost.";
confirmBet.disabled = !client.ready || actionPending || !isYourTurn || isSpectator;
leaveTable.disabled = !client.ready || actionPending;
leaveTable.title = "Leave and fold. Your committed chips stay in this hand until settlement.";
};
const stopCountdown = () => {
@@ -177,35 +187,13 @@ document.addEventListener("DOMContentLoaded", () => {
countdownTimer = setInterval(updateCountdown, 1000);
};
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("message", (event) => {
const message = JSON.parse(event.data);
if (message.type === "auth:success") {
socket.authenticated = true;
resolve(socket);
} else {
reject(new Error(message.message || "Authentication failed"));
}
}, {once: true});
socket.addEventListener("close", () => reject(new Error("Connection closed")), {once: true});
socket.addEventListener("error", () => reject(new Error("WebSocket connection failed")), {once: true});
});
socket.addEventListener("message", (event) => {
const message = JSON.parse(event.data);
client.addEventListener('status', event => {
if (event.detail) showError(event.detail);
if (!client.ready) {isYourTurn = false; stopCountdown(); closeModal();}
updateActionButtons();
});
client.addEventListener('message', event => {
const message = event.detail;
if (message.type === "poker:state") {
hideError();
isYourTurn = Boolean(message.isYourTurn);
@@ -213,6 +201,10 @@ document.addEventListener("DOMContentLoaded", () => {
currentStackValue = Number(message.yourStack ?? 0);
minimumStake = Number(message.minimumStake || 10);
callAmount = Number(message.callAmount || 0);
minimumRaise = message.minimumRaise || minimumStake;
raisesAllowed = message.canRaise !== false;
if (!isYourTurn || isSpectator) closeModal();
else if (!betModal.classList.contains("hidden")) updateBetRange();
roundDisplay.textContent = message.round;
potDisplay.textContent = message.pot;
currentBet.textContent = message.currentBet ?? message.bet;
@@ -257,19 +249,7 @@ document.addEventListener("DOMContentLoaded", () => {
if (message.type === "auth:error" || message.type === "poker:error" || message.type === "error") {
showError(message.message || "Poker connection failed");
}
});
socket.addEventListener("close", () => {
isYourTurn = false;
stopCountdown();
updateActionButtons();
showError("Connection lost. Reload to reconnect to the table.");
socket = null;
socketReady = null;
});
return socketReady;
};
});
const setBetValue = (value) => {
const nextValue = Math.max(Number(betRange.min), Math.min(Number(betRange.max), Number(value)));
@@ -278,12 +258,14 @@ document.addEventListener("DOMContentLoaded", () => {
};
const updateBetRange = () => {
const maxBet = Math.max(0, currentStackValue);
const requiredBet = Math.max(minimumStake, callAmount);
const maxBet = Math.max(0, raisesAllowed ? currentStackValue : Math.min(currentStackValue, callAmount));
const requiredBet = raisesAllowed ? callAmount + minimumRaise : callAmount;
const minBet = maxBet > 0 ? Math.min(requiredBet, maxBet) : 0;
betRange.min = String(minBet);
betRange.max = String(maxBet);
betRange.step = "1";
document.getElementById("range-min").textContent = `$${minBet}`;
document.getElementById("range-max").textContent = `$${maxBet}`;
setBetValue(Math.max(minBet, Number(betRange.value) || minBet));
};
@@ -296,8 +278,8 @@ document.addEventListener("DOMContentLoaded", () => {
updateActionButtons();
connectSocket()
.then(() => sendSocketMessage({type: "poker:join", lobbyId}))
client.connect()
.then(() => client.send({type: "poker:join", lobbyId}))
.catch(() => showError("Could not connect to poker table."));
actionButtons.forEach((button) => {
@@ -313,7 +295,9 @@ document.addEventListener("DOMContentLoaded", () => {
}
if (action === "bet") {
updateBetRange();
previousFocus = document.activeElement;
betModal.classList.remove("hidden");
betRange.focus();
return;
}
@@ -329,7 +313,16 @@ document.addEventListener("DOMContentLoaded", () => {
});
});
closeBet.addEventListener("click", () => betModal.classList.add("hidden"));
closeBet.addEventListener("click", closeModal);
betModal.addEventListener("keydown", event => {
if (event.key === "Escape") {event.preventDefault(); closeModal();}
if (event.key === "Tab") {
const items = [...betModal.querySelectorAll("button:not(:disabled), input:not(:disabled)")];
const first = items[0], last = items[items.length - 1];
if (event.shiftKey && document.activeElement === first) {event.preventDefault(); last.focus();}
else if (!event.shiftKey && document.activeElement === last) {event.preventDefault(); first.focus();}
}
});
betRange.addEventListener("input", () => setBetValue(betRange.value));
decreaseBet.addEventListener("click", () => setBetValue(Number(betRange.value) - 10));
increaseBet.addEventListener("click", () => setBetValue(Number(betRange.value) + 10));
@@ -349,6 +342,6 @@ document.addEventListener("DOMContentLoaded", () => {
action: "bet",
payload: {amount: Number(betRange.value), lobbyId}
}).catch(() => showError("Could not place bet."));
betModal.classList.add("hidden");
closeModal();
});
});
public/home.html
+5 -1
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="shared.css">
<link rel="stylesheet" href="styles_home.css">
<link rel="icon" href="gambling.png" type="image/x-icon">
</head>
@@ -41,6 +42,7 @@
</div>
<div id="join-form" class="join-browser hidden">
<div class="join-code-row">
<label class="sr-only" for="join-code">Lobby code</label>
<input type="text" id="join-code" placeholder="Enter Lobby ID"/>
<button id="submit-join">Join</button>
</div>
@@ -52,7 +54,7 @@
<p>No public lobbies found</p>
</div>
</div>
<div id="join-error" class="error-message hidden"></div>
<div id="join-error" role="alert" aria-live="polite" class="error-message hidden"></div>
<div id="lobby-room" class="lobby-room hidden">
<div class="lobby-header">
<button id="leave-button" class="leave-button">Leave Lobby</button>
@@ -64,6 +66,8 @@
<button id="start-game" class="start-game hidden" disabled>Start Game</button>
</div>
</body>
<script src="protocol.js"></script>
<script src="client.js"></script>
<script src="frontend_home.js" defer></script>
<script src="matrix.js"></script>
</html>
public/login.html
+7 -9
View File
@@ -4,26 +4,24 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="shared.css">
<link rel="stylesheet" href="styles_login.css">
<link rel="icon" href="gambling.png" type="image/x-icon">
</head>
<body>
<h1>Login / Register</h1>
<form method="post" action="/login">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<label for="username">Username</label>
<input id="username" type="text" name="username" placeholder="Username" autocomplete="username" maxlength="40" required>
<label for="password">Password</label>
<input id="password" type="password" name="password" placeholder="Password" autocomplete="current-password" required aria-describedby="password-hint">
<small id="password-hint">Passwords support up to 72 UTF-8 bytes.</small>
<div class="auth-actions">
<button type="submit" id="login-button">Login</button>
<button type="button" id="register-button">Register</button>
</div>
<p id="auth-error" class="auth-error hidden"></p>
<p id="auth-error" role="alert" aria-live="polite" class="auth-error hidden"></p>
</form>
<div id="loading-screen" class="hidden">
<div class="loading-text" id="loading-text">Loading...</div>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
</div>
</body>
<script src="frontend_login.js"></script>
</html>
public/matrix.js
+12 -2
View File
@@ -5,6 +5,8 @@ const fontSize = 16;
const frameInterval = 65;
let drops = [];
let lastFrameTime = 0;
let animationFrame = null;
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
function resizeCanvas() {
const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
@@ -41,9 +43,17 @@ function animate(timestamp) {
drawMatrix();
lastFrameTime = timestamp;
}
requestAnimationFrame(animate);
animationFrame = requestAnimationFrame(animate);
}
function updateAnimation() {
cancelAnimationFrame(animationFrame);
animationFrame = null;
if (!document.hidden && !reducedMotion.matches) animationFrame = requestAnimationFrame(animate);
else ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
}
resizeCanvas();
requestAnimationFrame(animate);
updateAnimation();
document.addEventListener("visibilitychange", updateAnimation);
reducedMotion.addEventListener("change", updateAnimation);
window.addEventListener("resize", resizeCanvas);
public/poker.html
+7 -3
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poker Table</title>
<link rel="stylesheet" href="shared.css">
<link rel="stylesheet" href="styles_poker.css">
<link rel="icon" href="gambling.png" type="image/x-icon">
</head>
@@ -57,17 +58,18 @@
</section>
<section id="showdown-panel" class="showdown-panel hidden" aria-label="Showdown"></section>
<div id="error-message" class="error-message hidden"></div>
<div id="error-message" role="alert" aria-live="polite" class="error-message hidden"></div>
</main>
<div id="bet-modal" class="bet-modal hidden" role="dialog" aria-modal="true" aria-labelledby="bet-title">
<div class="bet-panel">
<button id="close-bet" class="close-bet" aria-label="Close bet dialog">x</button>
<h2 id="bet-title">Choose amount to bet</h2>
<label class="sr-only" for="bet-range">Chips to add to the pot</label>
<input id="bet-range" type="range" min="0" max="400" step="10" value="50">
<div class="range-labels">
<span>$0</span>
<span>$400</span>
<span id="range-min">$0</span>
<span id="range-max">$0</span>
</div>
<div class="bet-amount">
<button id="decrease-bet">-</button>
@@ -78,6 +80,8 @@
</div>
</div>
<script src="protocol.js"></script>
<script src="client.js"></script>
<script src="frontend_poker.js" defer></script>
<script src="matrix.js"></script>
</body>
public/styles_home.css
+13 -20
View File
@@ -3,7 +3,7 @@
color: #0f0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
height: 100vh;
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
@@ -89,17 +89,6 @@ button.logout {
vertical-align: middle;
}
.lobby-room {
background: rgba(0, 0, 0, 0.7);
border: 2px solid #0f0;
border-radius: 12px;
padding: 30px;
margin-top: 40px;
width: 400px;
text-align: center;
box-shadow: 0 0 10px #0f0;
}
.lobby-room h2 {
color: #0f0;
font-size: 20px;
@@ -111,10 +100,6 @@ button.logout {
color: #fff;
}
.hidden {
display: none;
}
.join-browser {
margin-top: 20px;
width: min(520px, calc(100vw - 32px));
@@ -231,10 +216,6 @@ button.logout {
text-shadow: 0 0 3px red;
}
.hidden {
display: none;
}
#matrix-canvas {
position: fixed;
top: 0;
@@ -341,3 +322,15 @@ button.logout {
box-shadow: 0 0 5px #0f0 inset;
transform: none;
}
.lobby-room { width: min(460px, calc(100vw - 32px)); overflow-wrap: anywhere; }
body { padding: 72px 16px 24px; gap: 8px; }
@media (max-width: 1000px) {
body { justify-content: flex-start; }
.leaderboard { position: static; width: min(460px, 100%); order: 10; margin-top: 24px; }
body::before { text-align: center; font-size: 20px; margin-bottom: 12px; }
.join-code-row { flex-wrap: wrap; }
#join-form input { width: 100%; min-width: 0; }
.lobby-visibility { flex-wrap: wrap; justify-content: center; }
.lobby-header { position: static; text-align: right; }
}
public/styles_login.css
+3 -40
View File
@@ -6,7 +6,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
min-height: 100vh;
margin: 0;
}
@@ -82,43 +82,6 @@ button:disabled {
text-align: center;
}
.hidden {
display: none !important;
}
#loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
color: #0f0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loading-text {
font-size: 24px;
margin-bottom: 20px;
text-shadow: 0 0 10px #0f0;
}
.progress-bar {
width: 80%;
height: 20px;
border: 2px solid #0f0;
border-radius: 10px;
background: #111;
}
.progress {
height: 100%;
width: 0;
background-color: #0f0;
border-radius: 10px;
transition: width 0.3s ease;
}
form { width: min(364px, calc(100vw - 32px)); }
body { padding: 24px 0; }
public/styles_poker.css
+16 -5
View File
@@ -4,7 +4,7 @@ body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
min-height: 100vh;
overflow: hidden;
overflow-x: clip;
}
button {
@@ -348,10 +348,6 @@ button:disabled:hover {
padding: 8px 22px;
}
.hidden {
display: none;
}
@media (max-width: 700px) {
.poker-table {
padding: 14px;
@@ -386,3 +382,18 @@ button:disabled:hover {
justify-content: center;
}
}
.poker-table { gap: 24px; }
.turn-panel { min-width: 0; width: min(460px, 100%); }
.community-area, .player-area { max-width: 100%; min-width: 0; }
.card-row { flex-wrap: wrap; justify-content: center; }
.bet-modal { z-index: 10; padding: 24px; }
.bet-panel { max-width: 100%; }
.player-status, .round-panel { overflow-wrap: anywhere; }
@media (max-width: 700px) {
.card-row { gap: 6px; }
.card-row .card { width: 48px; height: 74px; }
.showdown-panel { position: static; width: 100%; max-height: none; }
.round-panel { padding: 12px 8px; font-size: 14px; }
.divider { margin: 0 4px; }
}