File size: 2,068 Bytes
f81592e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
const api = (path, opts) =>
fetch(path, {
headers: {'Content-Type':'application/json'},
...opts
}).then(r => r.json());
let lobbyId = "", playerName = "";
document.getElementById("btnCreate").onclick = async () => {
const max_players = +document.getElementById("maxPlayers").value;
const starting_amount = +document.getElementById("startAmt").value;
const passkey = document.getElementById("passkey").value;
const res = await api("/create_lobby", {
method: "POST",
body: JSON.stringify({ max_players, starting_amount, passkey })
});
lobbyId = res.lobby_id;
showGameArea();
};
document.getElementById("btnJoin").onclick = async () => {
lobbyId = document.getElementById("joinLobbyId").value.trim();
playerName = document.getElementById("joinName").value.trim();
const passkey = document.getElementById("joinPass").value.trim();
await api("/join_lobby", {
method: "POST",
body: JSON.stringify({ lobby_id: lobbyId, player_name: playerName, passkey })
});
showGameArea();
};
function showGameArea() {
document.getElementById("lobby-setup").classList.add("hidden");
document.getElementById("game-area").classList.remove("hidden");
document.getElementById("lobbyIdDisplay").textContent = lobbyId;
pollState();
}
async function pollState() {
try {
const st = await api(`/lobby/${lobbyId}/state`);
renderState(st);
} catch (e) {
console.error(e);
} finally {
setTimeout(pollState, 1500);
}
}
function renderState({ state, players, community, pot }) {
const ph = document.getElementById("players");
ph.innerHTML = players.map(p =>
`<div class="player">
<strong>${p.name}</strong><br/>
Chips: ${p.amount}<br/>
${p.cards.map(c=>`<span class="card-slot">${c}</span>`).join('')}
</div>`).join('');
document.getElementById("community").innerHTML =
community.map(c=>`<span class="card-slot">${c}</span>`).join('');
document.getElementById("pot").textContent = pot;
document.getElementById("actions").innerHTML = `<p>Game state: ${state}</p>`;
} |