Frederik Spirgi
69 lines
4.9 KiB
JavaScript
69 lines
4.9 KiB
JavaScript
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 = () => {
|
|
lobbyId = null; localStorage.removeItem('activeLobbyId'); byId('lobby-room').classList.add('hidden');
|
|
byId('host').disabled = false; byId('join').disabled = false;
|
|
};
|
|
async function refreshBalance() {
|
|
try {
|
|
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);}
|
|
}
|
|
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);
|
|
});
|
|
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 {
|
|
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);
|
|
}
|
|
} catch (problem) {error(problem.message);}
|
|
}
|
|
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);}
|
|
});
|