try to fix this spaghetti of a code
This commit is contained in:
+50
-57
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user