Extract inline JS from index.html/admin.html into app.js/admin.js
Mirrors the earlier CSS extraction (style.css/admin.css) — app/static/ is now split cleanly by file type (markup, styles, script) instead of mixing JS inline in the HTML. No behavior change: the script content moved verbatim, referenced via <script src>. FastAPI's existing StaticFiles mount serves the new files automatically, same as the CSS files already do. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
+1
-392
@@ -158,398 +158,7 @@
|
||||
|
||||
<div id="toast-container" aria-live="polite"></div>
|
||||
|
||||
<script>
|
||||
const SATS_PER_PLM = 100000000;
|
||||
let adminToken = sessionStorage.getItem('plm_admin_token');
|
||||
|
||||
function toast(message, type) {
|
||||
const container = document.getElementById('toast-container');
|
||||
const el = document.createElement('div');
|
||||
el.className = 'toast ' + type;
|
||||
el.textContent = message;
|
||||
container.appendChild(el);
|
||||
setTimeout(() => el.remove(), 4000);
|
||||
}
|
||||
|
||||
async function withLoading(button, label, fn) {
|
||||
const original = button.textContent;
|
||||
button.disabled = true;
|
||||
button.textContent = label;
|
||||
try {
|
||||
await fn();
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.textContent = original;
|
||||
}
|
||||
}
|
||||
|
||||
async function callAdmin(method, path, body) {
|
||||
const headers = { 'Content-Type': 'application/json', 'X-Admin-Token': adminToken };
|
||||
const res = await fetch(path, { method, headers, body: body ? JSON.stringify(body) : undefined });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.detail || res.statusText);
|
||||
return data;
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
||||
}
|
||||
|
||||
function badge(status) {
|
||||
return `<span class="badge status-${escapeHtml(status)}">${escapeHtml(status)}</span>`;
|
||||
}
|
||||
|
||||
function fmtDate(iso) {
|
||||
if (!iso) return '—';
|
||||
return new Date(iso).toLocaleString('it-IT');
|
||||
}
|
||||
|
||||
const DRAWING_STATUSES = ['closing', 'drawing', 'paying_out'];
|
||||
const CHAIN_STATUS_LABELS = {
|
||||
waiting: 'In attesa del prossimo round',
|
||||
open: 'Round aperto',
|
||||
drawing: 'Estrazione in corso',
|
||||
};
|
||||
let chainStatusInterval = null;
|
||||
|
||||
async function refreshChainStatus() {
|
||||
try {
|
||||
const res = await fetch('/rounds/current');
|
||||
const data = await res.json();
|
||||
let statusKey;
|
||||
if (!data.round_id) statusKey = 'waiting';
|
||||
else if (DRAWING_STATUSES.includes(data.status)) statusKey = 'drawing';
|
||||
else statusKey = 'open';
|
||||
document.getElementById('chain-status-dot').className = 'status-dot status-' + statusKey;
|
||||
document.getElementById('chain-status-label').textContent = CHAIN_STATUS_LABELS[statusKey];
|
||||
document.getElementById('chain-block').textContent =
|
||||
'Blocco ' + (data.chain_tip_height != null ? '#' + data.chain_tip_height : '—');
|
||||
} catch (e) {
|
||||
// leave the last-known status on screen rather than blanking it out
|
||||
}
|
||||
}
|
||||
|
||||
function startChainStatusPolling() {
|
||||
refreshChainStatus();
|
||||
clearInterval(chainStatusInterval);
|
||||
chainStatusInterval = setInterval(refreshChainStatus, 15000);
|
||||
}
|
||||
|
||||
function stopChainStatusPolling() {
|
||||
clearInterval(chainStatusInterval);
|
||||
chainStatusInterval = null;
|
||||
}
|
||||
|
||||
const VIEWS = ['parametri', 'utenti', 'round', 'pending', 'audit'];
|
||||
const VIEW_LOADERS = { utenti: loadUsers, round: loadRounds, pending: loadPending, audit: loadAuditLog };
|
||||
let currentAdminView = 'parametri';
|
||||
|
||||
function switchView(name) {
|
||||
currentAdminView = name;
|
||||
for (const key of VIEWS) {
|
||||
document.getElementById('nav-' + key).classList.toggle('active', key === name);
|
||||
document.getElementById('view-' + key).classList.toggle('active', key === name);
|
||||
}
|
||||
if (VIEW_LOADERS[name]) VIEW_LOADERS[name]();
|
||||
}
|
||||
|
||||
function showDashboard() {
|
||||
document.getElementById('login-section').classList.add('hidden');
|
||||
document.getElementById('dashboard-section').classList.remove('hidden');
|
||||
startChainStatusPolling();
|
||||
}
|
||||
|
||||
async function loadDashboard() {
|
||||
await Promise.all([adminLoadConfig(), loadUsers(), loadRounds(), loadPending(), loadAuditLog()]);
|
||||
}
|
||||
|
||||
async function adminLogin() {
|
||||
const btn = document.getElementById('login-btn');
|
||||
adminToken = document.getElementById('admin-token').value;
|
||||
await withLoading(btn, 'Verifica…', async () => {
|
||||
try {
|
||||
await callAdmin('GET', '/admin/config');
|
||||
sessionStorage.setItem('plm_admin_token', adminToken);
|
||||
showDashboard();
|
||||
await loadDashboard();
|
||||
} catch (e) {
|
||||
adminToken = null;
|
||||
toast('Token non valido.', 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function adminLogout() {
|
||||
stopChainStatusPolling();
|
||||
sessionStorage.removeItem('plm_admin_token');
|
||||
adminToken = null;
|
||||
document.getElementById('admin-token').value = '';
|
||||
document.getElementById('dashboard-section').classList.add('hidden');
|
||||
document.getElementById('login-section').classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function adminLoadConfig() {
|
||||
try {
|
||||
const data = await callAdmin('GET', '/admin/config');
|
||||
document.getElementById('admin-fee-address').value = data.fee_address;
|
||||
document.getElementById('admin-bet-amount').value = data.bet_amount_sats / SATS_PER_PLM;
|
||||
document.getElementById('admin-round-duration').value = data.round_duration_seconds;
|
||||
document.getElementById('admin-round-cooldown').value = data.round_cooldown_seconds;
|
||||
document.getElementById('admin-draw-animation').value = data.draw_animation_seconds;
|
||||
document.getElementById('admin-fee-rate').value = data.fee_rate_sat_vb;
|
||||
document.getElementById('admin-rbf-timeout').value = data.rbf_timeout_seconds;
|
||||
renderMaintenanceState(data.paused);
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento configurazione: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function renderMaintenanceState(paused) {
|
||||
const dot = document.getElementById('maintenance-dot');
|
||||
const label = document.getElementById('maintenance-status-label');
|
||||
const btn = document.getElementById('maintenance-btn');
|
||||
btn.dataset.paused = paused ? '1' : '0';
|
||||
if (paused) {
|
||||
dot.className = 'status-dot status-paused';
|
||||
label.textContent = 'In pausa: nessun nuovo round verrà aperto';
|
||||
btn.textContent = 'Riprendi lotteria';
|
||||
btn.classList.remove('btn-stop');
|
||||
} else {
|
||||
dot.className = 'status-dot status-open';
|
||||
label.textContent = 'Attiva: i round si susseguono normalmente';
|
||||
btn.textContent = 'Interrompi dopo questo round';
|
||||
btn.classList.add('btn-stop');
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleMaintenance() {
|
||||
const btn = document.getElementById('maintenance-btn');
|
||||
const isPaused = btn.dataset.paused === '1';
|
||||
const path = isPaused ? '/admin/resume' : '/admin/pause';
|
||||
if (!isPaused && !window.confirm(
|
||||
"Nessun nuovo round verrà aperto dopo quello in corso, fino a quando non riprendi la lotteria. " +
|
||||
"Il round attuale (se presente) verrà comunque completato e il vincitore pagato. Continuare?"
|
||||
)) {
|
||||
return;
|
||||
}
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const data = await callAdmin('POST', path, {});
|
||||
renderMaintenanceState(data.paused);
|
||||
toast(data.paused ? 'Lotteria in pausa.' : 'Lotteria ripresa.', 'success');
|
||||
refreshChainStatus();
|
||||
} catch (e) {
|
||||
toast('Errore: ' + e.message, 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function adminSave() {
|
||||
const btn = document.getElementById('save-btn');
|
||||
const feeAddress = document.getElementById('admin-fee-address').value;
|
||||
const betAmountPlm = parseFloat(document.getElementById('admin-bet-amount').value);
|
||||
const body = {
|
||||
fee_address: feeAddress,
|
||||
bet_amount_sats: Math.round(betAmountPlm * SATS_PER_PLM),
|
||||
round_duration_seconds: parseInt(document.getElementById('admin-round-duration').value, 10),
|
||||
round_cooldown_seconds: parseInt(document.getElementById('admin-round-cooldown').value, 10),
|
||||
draw_animation_seconds: parseInt(document.getElementById('admin-draw-animation').value, 10),
|
||||
fee_rate_sat_vb: parseInt(document.getElementById('admin-fee-rate').value, 10),
|
||||
rbf_timeout_seconds: parseInt(document.getElementById('admin-rbf-timeout').value, 10),
|
||||
};
|
||||
await withLoading(btn, 'Salvataggio…', async () => {
|
||||
try {
|
||||
await callAdmin('PUT', '/admin/config', body);
|
||||
toast('Configurazione salvata.', 'success');
|
||||
} catch (e) {
|
||||
toast('Errore nel salvataggio: ' + e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const users = await callAdmin('GET', '/admin/users');
|
||||
const tbody = document.getElementById('users-tbody');
|
||||
tbody.innerHTML = users.map((u) => `
|
||||
<tr>
|
||||
<td>${u.id}</td>
|
||||
<td>${escapeHtml(u.username)}</td>
|
||||
<td class="addr">${escapeHtml(u.address)}</td>
|
||||
<td>${u.balance_sats / SATS_PER_PLM}</td>
|
||||
<td>${fmtDate(u.created_at)}</td>
|
||||
<td>
|
||||
<button class="reveal" onclick="revealPrivkey(${u.id}, this)">Mostra</button>
|
||||
<div class="privkey-box hidden" id="privkey-${u.id}"></div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="secondary" style="width:auto;margin-top:0;min-height:30px;padding:4px 10px;font-size:0.78rem" onclick="resetUserPassword(${u.id}, this)">Reset</button>
|
||||
<div class="privkey-box hidden" id="newpass-${u.id}"></div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('') || '<tr><td colspan="7" class="hint">Nessun utente registrato.</td></tr>';
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento utenti: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function revealPrivkey(userId, button) {
|
||||
const box = document.getElementById('privkey-' + userId);
|
||||
if (!box.classList.contains('hidden')) {
|
||||
box.classList.add('hidden');
|
||||
box.textContent = '';
|
||||
button.textContent = 'Mostra';
|
||||
return;
|
||||
}
|
||||
if (!window.confirm('Stai per visualizzare la chiave privata di questo utente. L\'accesso verrà registrato nell\'audit log. Continuare?')) {
|
||||
return;
|
||||
}
|
||||
await withLoading(button, '…', async () => {
|
||||
try {
|
||||
const data = await callAdmin('GET', '/admin/users/' + userId + '/privkey');
|
||||
box.textContent = data.wif;
|
||||
box.classList.remove('hidden');
|
||||
button.textContent = 'Nascondi';
|
||||
} catch (e) {
|
||||
toast('Errore: ' + e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function resetUserPassword(userId, button) {
|
||||
if (!window.confirm(
|
||||
"Verrà generata una nuova password casuale per questo utente, che non potrà più accedere con quella vecchia. " +
|
||||
"L'azione viene registrata nell'audit log. Continuare?"
|
||||
)) {
|
||||
return;
|
||||
}
|
||||
const box = document.getElementById('newpass-' + userId);
|
||||
await withLoading(button, '…', async () => {
|
||||
try {
|
||||
const data = await callAdmin('POST', '/admin/users/' + userId + '/reset-password');
|
||||
box.textContent = 'Nuova password per ' + data.username + ': ' + data.new_password;
|
||||
box.classList.remove('hidden');
|
||||
toast('Password reimpostata.', 'success');
|
||||
} catch (e) {
|
||||
toast('Errore: ' + e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loadRounds() {
|
||||
try {
|
||||
const rounds = await callAdmin('GET', '/admin/rounds');
|
||||
const tbody = document.getElementById('rounds-tbody');
|
||||
tbody.innerHTML = rounds.map((r) => `
|
||||
<tr>
|
||||
<td>${r.id}</td>
|
||||
<td>${badge(r.status)}</td>
|
||||
<td>${fmtDate(r.opened_at)}</td>
|
||||
<td>${r.winner_username ? escapeHtml(r.winner_username) : '—'}</td>
|
||||
<td>${r.pool_amount_sats != null ? r.pool_amount_sats / SATS_PER_PLM : '—'}</td>
|
||||
<td>${r.winner_amount_sats != null ? r.winner_amount_sats / SATS_PER_PLM : '—'}</td>
|
||||
<td>${r.fee_amount_sats != null ? r.fee_amount_sats / SATS_PER_PLM : '—'}</td>
|
||||
<td class="txid">${r.payout_txid ? escapeHtml(r.payout_txid) : '—'}</td>
|
||||
</tr>
|
||||
`).join('') || '<tr><td colspan="8" class="hint">Nessun round ancora.</td></tr>';
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento round: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPending() {
|
||||
try {
|
||||
const items = await callAdmin('GET', '/admin/pending-transactions');
|
||||
const tbody = document.getElementById('pending-tbody');
|
||||
tbody.innerHTML = items.map((p) => `
|
||||
<tr>
|
||||
<td>${p.id}</td>
|
||||
<td>${escapeHtml(p.kind)}</td>
|
||||
<td>${badge(p.status)}</td>
|
||||
<td class="txid">${escapeHtml(p.current_txid)}</td>
|
||||
<td>${p.fee_rate_sat_vb} sat/vB</td>
|
||||
<td>${p.attempt_count}</td>
|
||||
<td>${fmtDate(p.broadcast_at)}</td>
|
||||
</tr>
|
||||
`).join('') || '<tr><td colspan="7" class="hint">Nessuna transazione pendente.</td></tr>';
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento transazioni pendenti: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAuditLog() {
|
||||
try {
|
||||
const entries = await callAdmin('GET', '/admin/audit-log');
|
||||
const tbody = document.getElementById('audit-tbody');
|
||||
tbody.innerHTML = entries.map((e) => `
|
||||
<tr>
|
||||
<td>${e.id}</td>
|
||||
<td>${escapeHtml(e.event_type)}</td>
|
||||
<td><pre class="payload">${escapeHtml(JSON.stringify(e.payload))}</pre></td>
|
||||
<td>${e.user_id ?? '—'}</td>
|
||||
<td>${e.round_id ?? '—'}</td>
|
||||
<td>${fmtDate(e.created_at)}</td>
|
||||
</tr>
|
||||
`).join('') || '<tr><td colspan="6" class="hint">Nessun evento registrato.</td></tr>';
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento audit log: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('admin-token').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') adminLogin();
|
||||
});
|
||||
|
||||
function initAuthState() {
|
||||
adminToken = sessionStorage.getItem('plm_admin_token');
|
||||
if (!adminToken) {
|
||||
document.getElementById('dashboard-section').classList.add('hidden');
|
||||
document.getElementById('login-section').classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
callAdmin('GET', '/admin/config')
|
||||
.then(() => { showDashboard(); return loadDashboard(); })
|
||||
.catch(() => adminLogout());
|
||||
}
|
||||
|
||||
// Bfcache can restore a frozen snapshot of this page (DOM/JS state as it was
|
||||
// before navigating away) without re-running any of this script — so a stale
|
||||
// view could survive across back/forward navigation, e.g. showing a dashboard
|
||||
// for a token that's since been rotated or explicitly logged out of. Cache-
|
||||
// Control: no-store on this response should already prevent that, but
|
||||
// re-validate here too as a safety net for browsers that ignore it.
|
||||
window.addEventListener('pageshow', (event) => {
|
||||
if (event.persisted) initAuthState();
|
||||
});
|
||||
|
||||
// Same server-push channel as app/static/index.html (see app/rounds/events.py):
|
||||
// a content-free "something changed" ping. Here it refreshes the chain-status
|
||||
// bar immediately, and reloads whichever admin section is currently open
|
||||
// (Utenti/Round/Transazioni pendenti/Audit log) so it doesn't need a manual
|
||||
// switch-away-and-back to pick up a new row. Polling stays in place as a
|
||||
// fallback if this connection is ever blocked or drops.
|
||||
let adminEventSource = null;
|
||||
|
||||
function onAdminServerEvent() {
|
||||
if (!adminToken) return;
|
||||
refreshChainStatus();
|
||||
if (VIEW_LOADERS[currentAdminView]) VIEW_LOADERS[currentAdminView]();
|
||||
}
|
||||
|
||||
function connectAdminEvents() {
|
||||
if (adminEventSource) return;
|
||||
adminEventSource = new EventSource('/rounds/stream');
|
||||
adminEventSource.addEventListener('update', onAdminServerEvent);
|
||||
// Fires on the initial connection AND every successful auto-reconnect —
|
||||
// re-syncs immediately instead of waiting for the next event or poll tick
|
||||
// to notice whatever changed while this connection was down.
|
||||
adminEventSource.addEventListener('open', onAdminServerEvent);
|
||||
}
|
||||
|
||||
connectAdminEvents();
|
||||
initAuthState();
|
||||
</script>
|
||||
<script src="/admin.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,390 @@
|
||||
const SATS_PER_PLM = 100000000;
|
||||
let adminToken = sessionStorage.getItem('plm_admin_token');
|
||||
|
||||
function toast(message, type) {
|
||||
const container = document.getElementById('toast-container');
|
||||
const el = document.createElement('div');
|
||||
el.className = 'toast ' + type;
|
||||
el.textContent = message;
|
||||
container.appendChild(el);
|
||||
setTimeout(() => el.remove(), 4000);
|
||||
}
|
||||
|
||||
async function withLoading(button, label, fn) {
|
||||
const original = button.textContent;
|
||||
button.disabled = true;
|
||||
button.textContent = label;
|
||||
try {
|
||||
await fn();
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.textContent = original;
|
||||
}
|
||||
}
|
||||
|
||||
async function callAdmin(method, path, body) {
|
||||
const headers = { 'Content-Type': 'application/json', 'X-Admin-Token': adminToken };
|
||||
const res = await fetch(path, { method, headers, body: body ? JSON.stringify(body) : undefined });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.detail || res.statusText);
|
||||
return data;
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
||||
}
|
||||
|
||||
function badge(status) {
|
||||
return `<span class="badge status-${escapeHtml(status)}">${escapeHtml(status)}</span>`;
|
||||
}
|
||||
|
||||
function fmtDate(iso) {
|
||||
if (!iso) return '—';
|
||||
return new Date(iso).toLocaleString('it-IT');
|
||||
}
|
||||
|
||||
const DRAWING_STATUSES = ['closing', 'drawing', 'paying_out'];
|
||||
const CHAIN_STATUS_LABELS = {
|
||||
waiting: 'In attesa del prossimo round',
|
||||
open: 'Round aperto',
|
||||
drawing: 'Estrazione in corso',
|
||||
};
|
||||
let chainStatusInterval = null;
|
||||
|
||||
async function refreshChainStatus() {
|
||||
try {
|
||||
const res = await fetch('/rounds/current');
|
||||
const data = await res.json();
|
||||
let statusKey;
|
||||
if (!data.round_id) statusKey = 'waiting';
|
||||
else if (DRAWING_STATUSES.includes(data.status)) statusKey = 'drawing';
|
||||
else statusKey = 'open';
|
||||
document.getElementById('chain-status-dot').className = 'status-dot status-' + statusKey;
|
||||
document.getElementById('chain-status-label').textContent = CHAIN_STATUS_LABELS[statusKey];
|
||||
document.getElementById('chain-block').textContent =
|
||||
'Blocco ' + (data.chain_tip_height != null ? '#' + data.chain_tip_height : '—');
|
||||
} catch (e) {
|
||||
// leave the last-known status on screen rather than blanking it out
|
||||
}
|
||||
}
|
||||
|
||||
function startChainStatusPolling() {
|
||||
refreshChainStatus();
|
||||
clearInterval(chainStatusInterval);
|
||||
chainStatusInterval = setInterval(refreshChainStatus, 15000);
|
||||
}
|
||||
|
||||
function stopChainStatusPolling() {
|
||||
clearInterval(chainStatusInterval);
|
||||
chainStatusInterval = null;
|
||||
}
|
||||
|
||||
const VIEWS = ['parametri', 'utenti', 'round', 'pending', 'audit'];
|
||||
const VIEW_LOADERS = { utenti: loadUsers, round: loadRounds, pending: loadPending, audit: loadAuditLog };
|
||||
let currentAdminView = 'parametri';
|
||||
|
||||
function switchView(name) {
|
||||
currentAdminView = name;
|
||||
for (const key of VIEWS) {
|
||||
document.getElementById('nav-' + key).classList.toggle('active', key === name);
|
||||
document.getElementById('view-' + key).classList.toggle('active', key === name);
|
||||
}
|
||||
if (VIEW_LOADERS[name]) VIEW_LOADERS[name]();
|
||||
}
|
||||
|
||||
function showDashboard() {
|
||||
document.getElementById('login-section').classList.add('hidden');
|
||||
document.getElementById('dashboard-section').classList.remove('hidden');
|
||||
startChainStatusPolling();
|
||||
}
|
||||
|
||||
async function loadDashboard() {
|
||||
await Promise.all([adminLoadConfig(), loadUsers(), loadRounds(), loadPending(), loadAuditLog()]);
|
||||
}
|
||||
|
||||
async function adminLogin() {
|
||||
const btn = document.getElementById('login-btn');
|
||||
adminToken = document.getElementById('admin-token').value;
|
||||
await withLoading(btn, 'Verifica…', async () => {
|
||||
try {
|
||||
await callAdmin('GET', '/admin/config');
|
||||
sessionStorage.setItem('plm_admin_token', adminToken);
|
||||
showDashboard();
|
||||
await loadDashboard();
|
||||
} catch (e) {
|
||||
adminToken = null;
|
||||
toast('Token non valido.', 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function adminLogout() {
|
||||
stopChainStatusPolling();
|
||||
sessionStorage.removeItem('plm_admin_token');
|
||||
adminToken = null;
|
||||
document.getElementById('admin-token').value = '';
|
||||
document.getElementById('dashboard-section').classList.add('hidden');
|
||||
document.getElementById('login-section').classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function adminLoadConfig() {
|
||||
try {
|
||||
const data = await callAdmin('GET', '/admin/config');
|
||||
document.getElementById('admin-fee-address').value = data.fee_address;
|
||||
document.getElementById('admin-bet-amount').value = data.bet_amount_sats / SATS_PER_PLM;
|
||||
document.getElementById('admin-round-duration').value = data.round_duration_seconds;
|
||||
document.getElementById('admin-round-cooldown').value = data.round_cooldown_seconds;
|
||||
document.getElementById('admin-draw-animation').value = data.draw_animation_seconds;
|
||||
document.getElementById('admin-fee-rate').value = data.fee_rate_sat_vb;
|
||||
document.getElementById('admin-rbf-timeout').value = data.rbf_timeout_seconds;
|
||||
renderMaintenanceState(data.paused);
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento configurazione: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function renderMaintenanceState(paused) {
|
||||
const dot = document.getElementById('maintenance-dot');
|
||||
const label = document.getElementById('maintenance-status-label');
|
||||
const btn = document.getElementById('maintenance-btn');
|
||||
btn.dataset.paused = paused ? '1' : '0';
|
||||
if (paused) {
|
||||
dot.className = 'status-dot status-paused';
|
||||
label.textContent = 'In pausa: nessun nuovo round verrà aperto';
|
||||
btn.textContent = 'Riprendi lotteria';
|
||||
btn.classList.remove('btn-stop');
|
||||
} else {
|
||||
dot.className = 'status-dot status-open';
|
||||
label.textContent = 'Attiva: i round si susseguono normalmente';
|
||||
btn.textContent = 'Interrompi dopo questo round';
|
||||
btn.classList.add('btn-stop');
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleMaintenance() {
|
||||
const btn = document.getElementById('maintenance-btn');
|
||||
const isPaused = btn.dataset.paused === '1';
|
||||
const path = isPaused ? '/admin/resume' : '/admin/pause';
|
||||
if (!isPaused && !window.confirm(
|
||||
"Nessun nuovo round verrà aperto dopo quello in corso, fino a quando non riprendi la lotteria. " +
|
||||
"Il round attuale (se presente) verrà comunque completato e il vincitore pagato. Continuare?"
|
||||
)) {
|
||||
return;
|
||||
}
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const data = await callAdmin('POST', path, {});
|
||||
renderMaintenanceState(data.paused);
|
||||
toast(data.paused ? 'Lotteria in pausa.' : 'Lotteria ripresa.', 'success');
|
||||
refreshChainStatus();
|
||||
} catch (e) {
|
||||
toast('Errore: ' + e.message, 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function adminSave() {
|
||||
const btn = document.getElementById('save-btn');
|
||||
const feeAddress = document.getElementById('admin-fee-address').value;
|
||||
const betAmountPlm = parseFloat(document.getElementById('admin-bet-amount').value);
|
||||
const body = {
|
||||
fee_address: feeAddress,
|
||||
bet_amount_sats: Math.round(betAmountPlm * SATS_PER_PLM),
|
||||
round_duration_seconds: parseInt(document.getElementById('admin-round-duration').value, 10),
|
||||
round_cooldown_seconds: parseInt(document.getElementById('admin-round-cooldown').value, 10),
|
||||
draw_animation_seconds: parseInt(document.getElementById('admin-draw-animation').value, 10),
|
||||
fee_rate_sat_vb: parseInt(document.getElementById('admin-fee-rate').value, 10),
|
||||
rbf_timeout_seconds: parseInt(document.getElementById('admin-rbf-timeout').value, 10),
|
||||
};
|
||||
await withLoading(btn, 'Salvataggio…', async () => {
|
||||
try {
|
||||
await callAdmin('PUT', '/admin/config', body);
|
||||
toast('Configurazione salvata.', 'success');
|
||||
} catch (e) {
|
||||
toast('Errore nel salvataggio: ' + e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const users = await callAdmin('GET', '/admin/users');
|
||||
const tbody = document.getElementById('users-tbody');
|
||||
tbody.innerHTML = users.map((u) => `
|
||||
<tr>
|
||||
<td>${u.id}</td>
|
||||
<td>${escapeHtml(u.username)}</td>
|
||||
<td class="addr">${escapeHtml(u.address)}</td>
|
||||
<td>${u.balance_sats / SATS_PER_PLM}</td>
|
||||
<td>${fmtDate(u.created_at)}</td>
|
||||
<td>
|
||||
<button class="reveal" onclick="revealPrivkey(${u.id}, this)">Mostra</button>
|
||||
<div class="privkey-box hidden" id="privkey-${u.id}"></div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="secondary" style="width:auto;margin-top:0;min-height:30px;padding:4px 10px;font-size:0.78rem" onclick="resetUserPassword(${u.id}, this)">Reset</button>
|
||||
<div class="privkey-box hidden" id="newpass-${u.id}"></div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('') || '<tr><td colspan="7" class="hint">Nessun utente registrato.</td></tr>';
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento utenti: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function revealPrivkey(userId, button) {
|
||||
const box = document.getElementById('privkey-' + userId);
|
||||
if (!box.classList.contains('hidden')) {
|
||||
box.classList.add('hidden');
|
||||
box.textContent = '';
|
||||
button.textContent = 'Mostra';
|
||||
return;
|
||||
}
|
||||
if (!window.confirm('Stai per visualizzare la chiave privata di questo utente. L\'accesso verrà registrato nell\'audit log. Continuare?')) {
|
||||
return;
|
||||
}
|
||||
await withLoading(button, '…', async () => {
|
||||
try {
|
||||
const data = await callAdmin('GET', '/admin/users/' + userId + '/privkey');
|
||||
box.textContent = data.wif;
|
||||
box.classList.remove('hidden');
|
||||
button.textContent = 'Nascondi';
|
||||
} catch (e) {
|
||||
toast('Errore: ' + e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function resetUserPassword(userId, button) {
|
||||
if (!window.confirm(
|
||||
"Verrà generata una nuova password casuale per questo utente, che non potrà più accedere con quella vecchia. " +
|
||||
"L'azione viene registrata nell'audit log. Continuare?"
|
||||
)) {
|
||||
return;
|
||||
}
|
||||
const box = document.getElementById('newpass-' + userId);
|
||||
await withLoading(button, '…', async () => {
|
||||
try {
|
||||
const data = await callAdmin('POST', '/admin/users/' + userId + '/reset-password');
|
||||
box.textContent = 'Nuova password per ' + data.username + ': ' + data.new_password;
|
||||
box.classList.remove('hidden');
|
||||
toast('Password reimpostata.', 'success');
|
||||
} catch (e) {
|
||||
toast('Errore: ' + e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loadRounds() {
|
||||
try {
|
||||
const rounds = await callAdmin('GET', '/admin/rounds');
|
||||
const tbody = document.getElementById('rounds-tbody');
|
||||
tbody.innerHTML = rounds.map((r) => `
|
||||
<tr>
|
||||
<td>${r.id}</td>
|
||||
<td>${badge(r.status)}</td>
|
||||
<td>${fmtDate(r.opened_at)}</td>
|
||||
<td>${r.winner_username ? escapeHtml(r.winner_username) : '—'}</td>
|
||||
<td>${r.pool_amount_sats != null ? r.pool_amount_sats / SATS_PER_PLM : '—'}</td>
|
||||
<td>${r.winner_amount_sats != null ? r.winner_amount_sats / SATS_PER_PLM : '—'}</td>
|
||||
<td>${r.fee_amount_sats != null ? r.fee_amount_sats / SATS_PER_PLM : '—'}</td>
|
||||
<td class="txid">${r.payout_txid ? escapeHtml(r.payout_txid) : '—'}</td>
|
||||
</tr>
|
||||
`).join('') || '<tr><td colspan="8" class="hint">Nessun round ancora.</td></tr>';
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento round: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPending() {
|
||||
try {
|
||||
const items = await callAdmin('GET', '/admin/pending-transactions');
|
||||
const tbody = document.getElementById('pending-tbody');
|
||||
tbody.innerHTML = items.map((p) => `
|
||||
<tr>
|
||||
<td>${p.id}</td>
|
||||
<td>${escapeHtml(p.kind)}</td>
|
||||
<td>${badge(p.status)}</td>
|
||||
<td class="txid">${escapeHtml(p.current_txid)}</td>
|
||||
<td>${p.fee_rate_sat_vb} sat/vB</td>
|
||||
<td>${p.attempt_count}</td>
|
||||
<td>${fmtDate(p.broadcast_at)}</td>
|
||||
</tr>
|
||||
`).join('') || '<tr><td colspan="7" class="hint">Nessuna transazione pendente.</td></tr>';
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento transazioni pendenti: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAuditLog() {
|
||||
try {
|
||||
const entries = await callAdmin('GET', '/admin/audit-log');
|
||||
const tbody = document.getElementById('audit-tbody');
|
||||
tbody.innerHTML = entries.map((e) => `
|
||||
<tr>
|
||||
<td>${e.id}</td>
|
||||
<td>${escapeHtml(e.event_type)}</td>
|
||||
<td><pre class="payload">${escapeHtml(JSON.stringify(e.payload))}</pre></td>
|
||||
<td>${e.user_id ?? '—'}</td>
|
||||
<td>${e.round_id ?? '—'}</td>
|
||||
<td>${fmtDate(e.created_at)}</td>
|
||||
</tr>
|
||||
`).join('') || '<tr><td colspan="6" class="hint">Nessun evento registrato.</td></tr>';
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento audit log: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('admin-token').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') adminLogin();
|
||||
});
|
||||
|
||||
function initAuthState() {
|
||||
adminToken = sessionStorage.getItem('plm_admin_token');
|
||||
if (!adminToken) {
|
||||
document.getElementById('dashboard-section').classList.add('hidden');
|
||||
document.getElementById('login-section').classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
callAdmin('GET', '/admin/config')
|
||||
.then(() => { showDashboard(); return loadDashboard(); })
|
||||
.catch(() => adminLogout());
|
||||
}
|
||||
|
||||
// Bfcache can restore a frozen snapshot of this page (DOM/JS state as it was
|
||||
// before navigating away) without re-running any of this script — so a stale
|
||||
// view could survive across back/forward navigation, e.g. showing a dashboard
|
||||
// for a token that's since been rotated or explicitly logged out of. Cache-
|
||||
// Control: no-store on this response should already prevent that, but
|
||||
// re-validate here too as a safety net for browsers that ignore it.
|
||||
window.addEventListener('pageshow', (event) => {
|
||||
if (event.persisted) initAuthState();
|
||||
});
|
||||
|
||||
// Same server-push channel as app/static/index.html (see app/rounds/events.py):
|
||||
// a content-free "something changed" ping. Here it refreshes the chain-status
|
||||
// bar immediately, and reloads whichever admin section is currently open
|
||||
// (Utenti/Round/Transazioni pendenti/Audit log) so it doesn't need a manual
|
||||
// switch-away-and-back to pick up a new row. Polling stays in place as a
|
||||
// fallback if this connection is ever blocked or drops.
|
||||
let adminEventSource = null;
|
||||
|
||||
function onAdminServerEvent() {
|
||||
if (!adminToken) return;
|
||||
refreshChainStatus();
|
||||
if (VIEW_LOADERS[currentAdminView]) VIEW_LOADERS[currentAdminView]();
|
||||
}
|
||||
|
||||
function connectAdminEvents() {
|
||||
if (adminEventSource) return;
|
||||
adminEventSource = new EventSource('/rounds/stream');
|
||||
adminEventSource.addEventListener('update', onAdminServerEvent);
|
||||
// Fires on the initial connection AND every successful auto-reconnect —
|
||||
// re-syncs immediately instead of waiting for the next event or poll tick
|
||||
// to notice whatever changed while this connection was down.
|
||||
adminEventSource.addEventListener('open', onAdminServerEvent);
|
||||
}
|
||||
|
||||
connectAdminEvents();
|
||||
initAuthState();
|
||||
@@ -0,0 +1,710 @@
|
||||
const SATS_PER_PLM = 100000000;
|
||||
|
||||
let token = localStorage.getItem('plm_token');
|
||||
let username = localStorage.getItem('plm_username');
|
||||
let address = localStorage.getItem('plm_address');
|
||||
|
||||
function toast(message, type) {
|
||||
const container = document.getElementById('toast-container');
|
||||
const el = document.createElement('div');
|
||||
el.className = 'toast ' + type;
|
||||
el.textContent = message;
|
||||
container.appendChild(el);
|
||||
setTimeout(() => el.remove(), 4000);
|
||||
}
|
||||
|
||||
async function withLoading(button, label, fn) {
|
||||
const original = button.textContent;
|
||||
button.disabled = true;
|
||||
button.textContent = label;
|
||||
try {
|
||||
await fn();
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.textContent = original;
|
||||
}
|
||||
}
|
||||
|
||||
const REQUEST_TIMEOUT_MS = 15000;
|
||||
|
||||
// Without a timeout, a single request that never resolves (server-side hang —
|
||||
// stuck DB session, unresponsive Electrum connection...) would stall the whole
|
||||
// sequential polling chain forever: the UI just freezes on whatever was last
|
||||
// rendered, with no error and no "connessione persa" (that only fires on a
|
||||
// rejected fetch, never on one that's merely stuck).
|
||||
async function call(method, path, body) {
|
||||
const headers = { 'Content-Type': 'application/json' };
|
||||
if (token) headers['Authorization'] = 'Bearer ' + token;
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
|
||||
let res;
|
||||
try {
|
||||
res = await fetch(path, { method, headers, body: body ? JSON.stringify(body) : undefined, signal: controller.signal });
|
||||
} catch (e) {
|
||||
throw new Error(e.name === 'AbortError' ? 'Richiesta al server scaduta.' : e.message);
|
||||
} finally {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.detail || res.statusText);
|
||||
return data;
|
||||
}
|
||||
|
||||
function switchTab(name) {
|
||||
document.getElementById('tab-login').classList.toggle('active', name === 'login');
|
||||
document.getElementById('tab-register').classList.toggle('active', name === 'register');
|
||||
document.getElementById('panel-login').classList.toggle('active', name === 'login');
|
||||
document.getElementById('panel-register').classList.toggle('active', name === 'register');
|
||||
}
|
||||
|
||||
function switchPanel(name) {
|
||||
for (const key of ['deposit', 'bet', 'withdraw', 'profile']) {
|
||||
document.getElementById('nav-' + key).classList.toggle('active', key === name);
|
||||
document.getElementById('panel-' + key).classList.toggle('active', key === name);
|
||||
}
|
||||
}
|
||||
|
||||
// Bumped on every logout/login so an in-flight refreshRound() started under a
|
||||
// previous session can detect it's now stale — a fetch can still be awaiting
|
||||
// its response after logout() clears the timeout-based poll chain, and without
|
||||
// this guard it would re-arm scheduleNextRoundPoll() and resurrect a "zombie"
|
||||
// dashboard poll running in parallel with the logged-out chain-only poll.
|
||||
let sessionEpoch = 0;
|
||||
let roundCloseAt = null;
|
||||
let serverTimeOffsetMs = 0; // serverNow - clientNow, so every client's countdown agrees regardless of local clock skew
|
||||
function serverNow() { return new Date(Date.now() + serverTimeOffsetMs); }
|
||||
// refreshRound() is triggered from several independent sources (poll timer, timer-hits-zero,
|
||||
// visibilitychange, placeBet, showDashboard) whose requests can resolve out of order over the
|
||||
// network. Track the latest applied response so a slow, stale one can never revert the UI to an
|
||||
// older round's state after a newer response has already moved it forward.
|
||||
let roundRequestSeq = 0;
|
||||
let roundAppliedSeq = 0;
|
||||
let roundTimerInterval = null;
|
||||
let roundPollTimeout = null;
|
||||
let lastResultInterval = null;
|
||||
|
||||
const ROUND_STATUS_LABELS = {
|
||||
open: 'aperto',
|
||||
closing: 'in chiusura',
|
||||
drawing: 'estrazione in corso',
|
||||
paying_out: 'pagamento al vincitore in corso',
|
||||
};
|
||||
|
||||
const DRAWING_STATUSES = ['closing', 'drawing', 'paying_out'];
|
||||
|
||||
// One distinct message per DRAW sub-phase (see CLAUDE.md's "three separate
|
||||
// on-chain confirmations" note) instead of a single generic spinner label —
|
||||
// takes the round data so the drawing phase can surface the draw block once known.
|
||||
function drawingLabelFor(data) {
|
||||
if (data.status === 'closing') {
|
||||
return 'Round chiuso — in attesa di conferma dell\'ultima giocata prima di estrarre il vincitore…';
|
||||
}
|
||||
if (data.status === 'drawing') {
|
||||
return 'In attesa del prossimo blocco per estrarre il vincitore…';
|
||||
}
|
||||
// paying_out
|
||||
if (data.draw_block_height != null) {
|
||||
return 'Vincitore estratto dal blocco #' + data.draw_block_height + ' — pagamento al vincitore in corso…';
|
||||
}
|
||||
return 'Vincitore estratto — pagamento al vincitore in corso…';
|
||||
}
|
||||
|
||||
// One label per real round status, not just the coarse open/drawing/waiting
|
||||
// grouping — the status bar should show the same phase distinction as the
|
||||
// draw-state panel (drawingLabelFor above), just condensed to a short phrase.
|
||||
const CHAIN_STATUS_LABELS = {
|
||||
waiting: 'In attesa del prossimo round',
|
||||
open: 'Round aperto',
|
||||
closing: 'Round chiuso — attesa conferma puntate',
|
||||
drawing: 'Estrazione in corso',
|
||||
paying_out: 'Pagamento al vincitore in corso',
|
||||
};
|
||||
|
||||
function updateChainStatusBar(data) {
|
||||
const dot = document.getElementById('chain-status-dot');
|
||||
const label = document.getElementById('chain-status-label');
|
||||
const block = document.getElementById('chain-block');
|
||||
|
||||
// The dot's color/pulse only distinguishes waiting/open/drawing (that's all
|
||||
// the CSS defines) — closing and paying_out both pulse like drawing, they
|
||||
// just get their own text label below.
|
||||
let dotKey;
|
||||
if (!data.round_id) dotKey = 'waiting';
|
||||
else if (DRAWING_STATUSES.includes(data.status)) dotKey = 'drawing';
|
||||
else dotKey = 'open';
|
||||
|
||||
const labelKey = data.round_id && data.status in CHAIN_STATUS_LABELS ? data.status : 'waiting';
|
||||
|
||||
dot.className = 'status-dot status-' + dotKey;
|
||||
label.textContent = CHAIN_STATUS_LABELS[labelKey];
|
||||
block.textContent = 'Blocco ' + (data.chain_tip_height != null ? '#' + data.chain_tip_height : '—');
|
||||
|
||||
document.getElementById('maintenance-banner').classList.toggle('hidden', !data.lottery_paused);
|
||||
}
|
||||
|
||||
// After a couple of consecutive failed polls (network blip, server restart,
|
||||
// tab suspended too long...), say so explicitly instead of silently leaving
|
||||
// whatever status happened to be on screen — a frozen "Round aperto" that's
|
||||
// actually minutes stale is worse than an honest "connessione persa".
|
||||
const STALE_AFTER_FAILURES = 2;
|
||||
let consecutiveFetchFailures = 0;
|
||||
|
||||
function showConnectionLost() {
|
||||
document.getElementById('chain-status-dot').className = 'status-dot status-offline';
|
||||
document.getElementById('chain-status-label').textContent = 'Connessione al server persa — riprovo…';
|
||||
}
|
||||
|
||||
function noteFetchOutcome(ok) {
|
||||
if (ok) {
|
||||
consecutiveFetchFailures = 0;
|
||||
return;
|
||||
}
|
||||
consecutiveFetchFailures++;
|
||||
if (consecutiveFetchFailures >= STALE_AFTER_FAILURES) showConnectionLost();
|
||||
}
|
||||
|
||||
let chainOnlyInterval = null;
|
||||
|
||||
async function refreshChainStatusOnly() {
|
||||
try {
|
||||
const data = await call('GET', '/rounds/current');
|
||||
updateChainStatusBar(data);
|
||||
noteFetchOutcome(true);
|
||||
} catch (e) {
|
||||
noteFetchOutcome(false);
|
||||
}
|
||||
}
|
||||
|
||||
function startChainOnlyPolling() {
|
||||
refreshChainStatusOnly();
|
||||
clearInterval(chainOnlyInterval);
|
||||
chainOnlyInterval = setInterval(refreshChainStatusOnly, 15000);
|
||||
}
|
||||
|
||||
function stopChainOnlyPolling() {
|
||||
clearInterval(chainOnlyInterval);
|
||||
chainOnlyInterval = null;
|
||||
}
|
||||
|
||||
// Background tabs get their timers throttled hard by the browser (sometimes to
|
||||
// once a minute or less) — waiting for the next lazy tick after the user comes
|
||||
// back could show a stale round state for a while. Refresh immediately instead
|
||||
// as soon as the tab becomes visible again.
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState !== 'visible') return;
|
||||
if (chainOnlyInterval !== null) {
|
||||
refreshChainStatusOnly();
|
||||
} else if (token) {
|
||||
refreshRound();
|
||||
checkLastRoundResult();
|
||||
}
|
||||
});
|
||||
|
||||
// The win/lose box's content lives in localStorage, not just in-memory state —
|
||||
// a page reload (or a completely fresh tab) must be able to redraw it exactly
|
||||
// as it was, without waiting for a new poll or re-running the reveal
|
||||
// animation. This is the single source of truth for "what result box (if any)
|
||||
// is currently shown"; refreshRound() and checkLastRoundResult() below both
|
||||
// read/write it instead of keeping their own separate notion of "revealed".
|
||||
const PERSISTED_RESULT_KEY = 'plm_persisted_result';
|
||||
|
||||
function getPersistedResult() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(PERSISTED_RESULT_KEY));
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function persistResult(roundId, won, amountSats) {
|
||||
localStorage.setItem(PERSISTED_RESULT_KEY, JSON.stringify({ round_id: roundId, won, amount_sats: amountSats }));
|
||||
}
|
||||
|
||||
function clearPersistedResult() {
|
||||
localStorage.removeItem(PERSISTED_RESULT_KEY);
|
||||
}
|
||||
|
||||
function renderPersistedResult(result) {
|
||||
setRoundInfoVisible(false);
|
||||
setResultBoxVisible(
|
||||
true,
|
||||
result.won ? '🎉 Hai vinto! +' + (result.amount_sats / SATS_PER_PLM) + ' PLM' : 'Non hai vinto questa volta.',
|
||||
result.won ? 'win' : 'lose'
|
||||
);
|
||||
}
|
||||
|
||||
// The most recent round_id refreshRound() actually saw from the server (null
|
||||
// meaning "confirmed no active round"; undefined meaning "haven't polled yet").
|
||||
// Lets checkLastRoundResult() below avoid clobbering a round that's already
|
||||
// known to be open/in-progress by the time its own (slower, DB-backed) request
|
||||
// resolves.
|
||||
let currentRoundIdSeen;
|
||||
|
||||
// Backstop for the live reveal in refreshRound(): that one only works if a poll
|
||||
// happens to land while the round is still "paying_out" (winner_user_id is
|
||||
// dropped from /rounds/current the instant the round flips to "closed" — see
|
||||
// rounds/service.get_active_round). A backgrounded tab, a missed poll, or a
|
||||
// late page load can miss that window entirely, in which case the live path
|
||||
// never fires and the player would otherwise never learn the outcome. This
|
||||
// reads GET /users/me/last-round-result, which reports the durable DB record
|
||||
// instead of an ephemeral snapshot, so it always catches up eventually.
|
||||
async function checkLastRoundResult() {
|
||||
if (!token) return;
|
||||
let data;
|
||||
try {
|
||||
data = await call('GET', '/users/me/last-round-result');
|
||||
} catch (e) {
|
||||
return; // silent — this is a backstop, refreshRound()'s own error handling already covers the primary path
|
||||
}
|
||||
if (data.round_id == null) return;
|
||||
const persisted = getPersistedResult();
|
||||
if (persisted && persisted.round_id === data.round_id) return; // already showing/known
|
||||
if (currentRoundIdSeen != null && currentRoundIdSeen !== data.round_id) return; // a newer round is already in progress on screen
|
||||
|
||||
persistResult(data.round_id, data.won, data.amount_sats);
|
||||
renderPersistedResult({ won: data.won, amount_sats: data.amount_sats });
|
||||
if (data.won) {
|
||||
const won = data.amount_sats / SATS_PER_PLM;
|
||||
toast('Hai vinto il round #' + data.round_id + '! +' + won + ' PLM', 'success');
|
||||
refreshMe();
|
||||
}
|
||||
}
|
||||
|
||||
let lastJackpotValue = null;
|
||||
|
||||
let timerHitZero = false;
|
||||
|
||||
function updateRoundTimer() {
|
||||
const el = document.getElementById('round-timer');
|
||||
if (!roundCloseAt) { el.textContent = '--:--'; timerHitZero = false; return; }
|
||||
const rawSec = Math.floor((roundCloseAt - serverNow()) / 1000);
|
||||
const totalSec = Math.max(0, rawSec);
|
||||
const mm = String(Math.floor(totalSec / 60)).padStart(2, '0');
|
||||
const ss = String(totalSec % 60).padStart(2, '0');
|
||||
el.textContent = mm + ':' + ss;
|
||||
|
||||
// The countdown alone can't know the round actually closed server-side — poll
|
||||
// right away instead of waiting up to 15s for the next scheduled tick, so the
|
||||
// card doesn't sit on "00:00 · aperto" longer than necessary.
|
||||
if (rawSec <= 0 && !timerHitZero) {
|
||||
timerHitZero = true;
|
||||
refreshRound();
|
||||
} else if (rawSec > 0) {
|
||||
timerHitZero = false;
|
||||
}
|
||||
}
|
||||
|
||||
// The round's normal info (title/timer/players/jackpot) vs. the drawing-phase
|
||||
// spinner box vs. the personalized win/lose box are three independently
|
||||
// toggled pieces, not three mutually-exclusive "screens" — during closing/
|
||||
// drawing/paying_out, EVERY viewer sees the drawing box (generic phase
|
||||
// progress), and a player who bet in that round ALSO sees the win/lose box at
|
||||
// the same time once revealed, instead of the two fighting over one slot.
|
||||
function setRoundInfoVisible(show) {
|
||||
document.getElementById('round-normal-row').classList.toggle('hidden', !show);
|
||||
document.getElementById('round-stats-row').classList.toggle('hidden', !show);
|
||||
}
|
||||
|
||||
function setDrawingBoxVisible(show, label) {
|
||||
document.getElementById('draw-state').classList.toggle('active', show);
|
||||
if (show && label) document.getElementById('draw-label').textContent = label;
|
||||
}
|
||||
|
||||
function setResultBoxVisible(show, html, cls) {
|
||||
const el = document.getElementById('draw-result');
|
||||
if (show) {
|
||||
el.className = 'draw-result ' + cls;
|
||||
el.innerHTML = html;
|
||||
}
|
||||
el.classList.toggle('hidden', !show);
|
||||
}
|
||||
|
||||
function showNormalState() {
|
||||
setRoundInfoVisible(true);
|
||||
setDrawingBoxVisible(false);
|
||||
setResultBoxVisible(false);
|
||||
}
|
||||
|
||||
async function refreshRound() {
|
||||
const seq = ++roundRequestSeq;
|
||||
const epoch = sessionEpoch;
|
||||
try {
|
||||
const data = await call('GET', '/rounds/current');
|
||||
if (epoch !== sessionEpoch) return; // session ended (or a new one started) while this was in flight
|
||||
if (seq < roundAppliedSeq) return; // a newer refreshRound() call already applied its result
|
||||
roundAppliedSeq = seq;
|
||||
noteFetchOutcome(true);
|
||||
updateChainStatusBar(data);
|
||||
document.getElementById('round-title').textContent = data.round_id
|
||||
? 'Round #' + data.round_id + ' — ' + (ROUND_STATUS_LABELS[data.status] || data.status)
|
||||
: 'Nessun round attivo';
|
||||
document.getElementById('round-players').textContent = data.participant_count;
|
||||
const jackpotEl = document.getElementById('round-jackpot');
|
||||
const jackpotValue = data.jackpot_sats / SATS_PER_PLM;
|
||||
jackpotEl.textContent = jackpotValue;
|
||||
if (lastJackpotValue !== null && jackpotValue !== lastJackpotValue) {
|
||||
jackpotEl.classList.remove('jackpot-bump');
|
||||
void jackpotEl.offsetWidth; // restart the animation
|
||||
jackpotEl.classList.add('jackpot-bump');
|
||||
}
|
||||
lastJackpotValue = jackpotValue;
|
||||
if (data.server_time) serverTimeOffsetMs = new Date(data.server_time) - new Date();
|
||||
roundCloseAt = data.closes_at ? new Date(data.closes_at) : null;
|
||||
updateRoundTimer();
|
||||
|
||||
currentRoundIdSeen = data.round_id || null;
|
||||
|
||||
const isDrawing = data.round_id && DRAWING_STATUSES.includes(data.status);
|
||||
document.getElementById('round-card').classList.toggle('drawing-glow', !!isDrawing);
|
||||
const persisted = getPersistedResult();
|
||||
|
||||
if (isDrawing) {
|
||||
setRoundInfoVisible(false);
|
||||
// The drawing-phase box (spinner + phase label) is generic status info —
|
||||
// every viewer sees it for the whole closing/drawing/paying_out phase,
|
||||
// regardless of whether they played in this round.
|
||||
setDrawingBoxVisible(true, drawingLabelFor(data));
|
||||
|
||||
// The cosmetic reveal delay is anchored to the server's closes_at, not to
|
||||
// any client-side "when did I first see this" timestamp — a page reload
|
||||
// (or repeated reloads) can never reset it, since it's derived purely
|
||||
// from server-provided values that don't change for this round.
|
||||
const elapsedMs = serverNow() - new Date(data.closes_at);
|
||||
const minMs = data.draw_animation_seconds * 1000;
|
||||
const alreadyKnown = persisted && persisted.round_id === data.round_id;
|
||||
// myUserId may not be loaded yet on the very first tick after a reload
|
||||
// (refreshMe() and refreshRound() run concurrently) — fall back to the
|
||||
// persisted result rather than risk showing nothing or the wrong side.
|
||||
const canReveal =
|
||||
data.user_played && data.winner_user_id != null && (alreadyKnown || elapsedMs >= minMs) && myUserId != null;
|
||||
|
||||
if (canReveal) {
|
||||
const won = data.winner_user_id === myUserId;
|
||||
if (!alreadyKnown) {
|
||||
persistResult(data.round_id, won, data.winner_amount_sats);
|
||||
if (won) {
|
||||
const wonAmount = (data.winner_amount_sats / SATS_PER_PLM);
|
||||
toast('Hai vinto il round #' + data.round_id + '! +' + wonAmount + ' PLM', 'success');
|
||||
refreshMe(); // the win toast is useless if the balance card still shows the pre-payout amount
|
||||
}
|
||||
}
|
||||
renderPersistedResult({ won, amount_sats: data.winner_amount_sats });
|
||||
} else if (alreadyKnown) {
|
||||
renderPersistedResult(persisted);
|
||||
} else {
|
||||
setResultBoxVisible(false);
|
||||
}
|
||||
} else {
|
||||
setDrawingBoxVisible(false);
|
||||
if (data.round_id && (!persisted || data.round_id !== persisted.round_id)) {
|
||||
// a genuinely new round is open — clear any previous result and go back to normal
|
||||
clearPersistedResult();
|
||||
showNormalState();
|
||||
} else if (!data.round_id && !persisted) {
|
||||
// nothing has ever been revealed and there's no active round — plain empty state
|
||||
showNormalState();
|
||||
} else if (persisted) {
|
||||
// no active round right now (cooldown, or a page reload after the round
|
||||
// fully closed) — keep the persisted result on screen regardless, until
|
||||
// a genuinely new round replaces it above.
|
||||
renderPersistedResult(persisted);
|
||||
}
|
||||
}
|
||||
|
||||
scheduleNextRoundPoll(isDrawing);
|
||||
} catch (e) {
|
||||
if (epoch !== sessionEpoch) return; // session ended (or a new one started) while this was in flight
|
||||
noteFetchOutcome(false);
|
||||
scheduleNextRoundPoll(false);
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleNextRoundPoll(fast) {
|
||||
clearTimeout(roundPollTimeout);
|
||||
roundPollTimeout = setTimeout(refreshRound, fast ? 3000 : 15000);
|
||||
}
|
||||
|
||||
async function showDashboard() {
|
||||
sessionEpoch++; // invalidate any dashboard poll chain left over from a previous login
|
||||
stopChainOnlyPolling();
|
||||
document.getElementById('landing-hero').classList.add('hidden');
|
||||
document.getElementById('auth-section').classList.add('hidden');
|
||||
document.getElementById('app-navbar').classList.remove('hidden');
|
||||
document.getElementById('dashboard-section').classList.remove('hidden');
|
||||
document.getElementById('dash-username').textContent = username;
|
||||
document.getElementById('dash-address').textContent = address;
|
||||
document.getElementById('dash-qr').src = '/qr/' + encodeURIComponent(address);
|
||||
// Render instantly from localStorage, before the network round-trip below —
|
||||
// otherwise a reload right after a win/lose flashes an empty round card for
|
||||
// a moment. refreshRound()'s own response reconciles this shortly after
|
||||
// (e.g. hides it again if a new round has since opened).
|
||||
const persisted = getPersistedResult();
|
||||
if (persisted) renderPersistedResult(persisted);
|
||||
// Awaited so myUserId is populated before refreshRound() decides whether
|
||||
// data.winner_user_id === myUserId — otherwise that comparison could race
|
||||
// against an unset myUserId right after a reload.
|
||||
await refreshMe();
|
||||
// Awaited too, and before refreshRound(): on a brand-new browser/device that
|
||||
// never saw this round live (nothing in localStorage), this is the only
|
||||
// thing that knows the outcome once the round has fully closed. Resolving
|
||||
// it first means refreshRound() finds the answer already in place instead
|
||||
// of momentarily rendering "no result" and then flipping to the win/lose
|
||||
// box a moment later once this backstop catches up.
|
||||
await checkLastRoundResult();
|
||||
refreshRound();
|
||||
clearInterval(lastResultInterval);
|
||||
lastResultInterval = setInterval(checkLastRoundResult, 20000);
|
||||
clearInterval(roundTimerInterval);
|
||||
roundTimerInterval = setInterval(updateRoundTimer, 1000);
|
||||
}
|
||||
|
||||
function persistSession(data, u) {
|
||||
token = data.access_token; username = u; address = data.address;
|
||||
localStorage.setItem('plm_token', token);
|
||||
localStorage.setItem('plm_username', username);
|
||||
localStorage.setItem('plm_address', address);
|
||||
}
|
||||
|
||||
async function register() {
|
||||
const btn = document.getElementById('register-btn');
|
||||
const u = document.getElementById('reg-username').value;
|
||||
const p = document.getElementById('reg-password').value;
|
||||
const pConfirm = document.getElementById('reg-password-confirm').value;
|
||||
if (p !== pConfirm) {
|
||||
toast('Le password non coincidono.', 'error');
|
||||
return;
|
||||
}
|
||||
await withLoading(btn, 'Creazione…', async () => {
|
||||
try {
|
||||
const data = await call('POST', '/auth/register', { username: u, password: p });
|
||||
persistSession(data, u);
|
||||
toast('Account creato.', 'success');
|
||||
showDashboard();
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function login() {
|
||||
const btn = document.getElementById('login-btn');
|
||||
const u = document.getElementById('login-username').value;
|
||||
const p = document.getElementById('login-password').value;
|
||||
await withLoading(btn, 'Accesso…', async () => {
|
||||
try {
|
||||
const data = await call('POST', '/auth/login', { username: u, password: p });
|
||||
persistSession(data, u);
|
||||
toast('Accesso riuscito.', 'success');
|
||||
showDashboard();
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function resetToLoggedOutUI() {
|
||||
sessionEpoch++; // invalidate any refreshRound() still in flight from the dashboard we're leaving
|
||||
token = username = address = null;
|
||||
myUserId = null;
|
||||
currentRoundIdSeen = undefined;
|
||||
clearInterval(roundTimerInterval);
|
||||
clearTimeout(roundPollTimeout);
|
||||
clearInterval(lastResultInterval);
|
||||
lastResultInterval = null;
|
||||
document.getElementById('app-navbar').classList.add('hidden');
|
||||
document.getElementById('dashboard-section').classList.add('hidden');
|
||||
document.getElementById('auth-section').classList.remove('hidden');
|
||||
document.getElementById('landing-hero').classList.remove('hidden');
|
||||
startChainOnlyPolling();
|
||||
}
|
||||
|
||||
function logout() {
|
||||
localStorage.clear();
|
||||
resetToLoggedOutUI();
|
||||
}
|
||||
|
||||
// Fires in every OTHER tab of this origin when one tab clears/changes plm_token
|
||||
// (e.g. via logout()) — keeps all open tabs in sync instead of leaving stale
|
||||
// ones showing a dashboard for a session that no longer exists anywhere else.
|
||||
window.addEventListener('storage', (event) => {
|
||||
if (event.key === 'plm_token' && !event.newValue) {
|
||||
resetToLoggedOutUI();
|
||||
}
|
||||
});
|
||||
|
||||
// Bfcache restores a frozen snapshot of the DOM/JS state from before the user
|
||||
// navigated away, without re-running this script — so a stale "logged in" (or
|
||||
// stale "logged out") view could persist across back/forward navigation. Cache-
|
||||
// Control: no-store on this response should already prevent that, but re-derive
|
||||
// the UI from storage here too as a safety net for browsers that ignore it.
|
||||
window.addEventListener('pageshow', (event) => {
|
||||
if (event.persisted) initAuthState();
|
||||
});
|
||||
|
||||
function initAuthState() {
|
||||
token = localStorage.getItem('plm_token');
|
||||
username = localStorage.getItem('plm_username');
|
||||
address = localStorage.getItem('plm_address');
|
||||
if (token) {
|
||||
showDashboard();
|
||||
} else {
|
||||
resetToLoggedOutUI();
|
||||
}
|
||||
}
|
||||
|
||||
async function copyAddress() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(address);
|
||||
toast('Indirizzo copiato.', 'success');
|
||||
} catch (e) {
|
||||
toast('Impossibile copiare automaticamente.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
let myUserId = null;
|
||||
let myBalanceSats = 0; // confirmed, spendable balance — what withdrawals/bets can actually draw from
|
||||
|
||||
// Shows the pending-inclusive balance (confirmed + own change still unconfirmed
|
||||
// in a broadcast bet/withdrawal — see compute_pending_balance in
|
||||
// app/wallet/balance.py) so the number doesn't drop by more than the amount
|
||||
// actually spent while a tx is in flight. Green once settled, amber while
|
||||
// has_pending is true so it's clear the figure isn't final yet.
|
||||
function setBalanceDisplay(elementId, pendingBalanceSats, hasPending) {
|
||||
const el = document.getElementById(elementId);
|
||||
el.textContent = pendingBalanceSats / SATS_PER_PLM;
|
||||
el.classList.toggle('balance-pending', hasPending);
|
||||
el.classList.toggle('balance-confirmed', !hasPending);
|
||||
}
|
||||
|
||||
async function refreshMe() {
|
||||
const btn = document.getElementById('refresh-btn');
|
||||
await withLoading(btn, '…', async () => {
|
||||
try {
|
||||
const data = await call('GET', '/users/me');
|
||||
myUserId = data.id;
|
||||
myBalanceSats = data.balance_sats;
|
||||
setBalanceDisplay('dash-balance', data.pending_balance_sats, data.has_pending);
|
||||
document.getElementById('navbar-balance').textContent = (data.pending_balance_sats / SATS_PER_PLM) + ' PLM';
|
||||
document.getElementById('navbar-balance').classList.toggle('balance-pending', data.has_pending);
|
||||
document.getElementById('navbar-balance').classList.toggle('balance-confirmed', !data.has_pending);
|
||||
document.getElementById('profile-username').textContent = data.username;
|
||||
document.getElementById('profile-address').textContent = data.address;
|
||||
setBalanceDisplay('profile-balance', data.pending_balance_sats, data.has_pending);
|
||||
document.getElementById('profile-created-at').textContent = new Date(data.created_at).toLocaleDateString('it-IT');
|
||||
document.getElementById('wd-full-amount-value').textContent = data.balance_sats / SATS_PER_PLM;
|
||||
if (document.getElementById('wd-full-amount').checked) {
|
||||
document.getElementById('wd-amount').value = data.balance_sats / SATS_PER_PLM;
|
||||
}
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleWithdrawFullAmount() {
|
||||
const checked = document.getElementById('wd-full-amount').checked;
|
||||
const amountInput = document.getElementById('wd-amount');
|
||||
amountInput.disabled = checked;
|
||||
if (checked) amountInput.value = myBalanceSats / SATS_PER_PLM;
|
||||
}
|
||||
|
||||
async function changePassword() {
|
||||
const btn = document.getElementById('change-password-btn');
|
||||
const currentPassword = document.getElementById('settings-current-password').value;
|
||||
const newPassword = document.getElementById('settings-new-password').value;
|
||||
const newPasswordConfirm = document.getElementById('settings-new-password-confirm').value;
|
||||
|
||||
if (newPassword !== newPasswordConfirm) {
|
||||
toast('Le nuove password non coincidono.', 'error');
|
||||
return;
|
||||
}
|
||||
if (newPassword.length < 8) {
|
||||
toast('La nuova password deve avere almeno 8 caratteri.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
await withLoading(btn, 'Aggiornamento…', async () => {
|
||||
try {
|
||||
await call('POST', '/users/me/change-password', {
|
||||
current_password: currentPassword,
|
||||
new_password: newPassword,
|
||||
});
|
||||
document.getElementById('settings-current-password').value = '';
|
||||
document.getElementById('settings-new-password').value = '';
|
||||
document.getElementById('settings-new-password-confirm').value = '';
|
||||
toast('Password aggiornata.', 'success');
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function placeBet() {
|
||||
const btn = document.getElementById('bet-btn');
|
||||
await withLoading(btn, 'Invio bet…', async () => {
|
||||
try {
|
||||
const data = await call('POST', '/bets', {});
|
||||
toast('Bet piazzata sul round #' + data.round_id + '.', 'success');
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
refreshMe();
|
||||
refreshRound();
|
||||
}
|
||||
|
||||
async function withdraw() {
|
||||
const btn = document.getElementById('withdraw-btn');
|
||||
const ext = document.getElementById('wd-address').value;
|
||||
const isFullAmount = document.getElementById('wd-full-amount').checked;
|
||||
const amtSats = isFullAmount
|
||||
? myBalanceSats
|
||||
: Math.round(parseFloat(document.getElementById('wd-amount').value) * SATS_PER_PLM);
|
||||
await withLoading(btn, 'Invio…', async () => {
|
||||
try {
|
||||
await call('POST', '/withdrawals', { external_address: ext, amount_sats: amtSats });
|
||||
toast('Withdrawal inviato.', 'success');
|
||||
document.getElementById('wd-full-amount').checked = false;
|
||||
toggleWithdrawFullAmount();
|
||||
document.getElementById('wd-amount').value = '';
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
refreshMe();
|
||||
}
|
||||
|
||||
// Server push: an SSE channel that notifies the instant round/bet/balance
|
||||
// state changes anywhere (see app/rounds/events.py), instead of everyone
|
||||
// waiting for their next poll tick. The message carries no payload — it just
|
||||
// means "something changed", so we react by immediately re-running the same
|
||||
// refreshes the polling loop would eventually do on its own. Polling is left
|
||||
// completely in place as a fallback: if this connection is blocked/dropped
|
||||
// (proxy, browser setting, flaky network), the page keeps working exactly as
|
||||
// before, just without the instant nudge.
|
||||
let roundEventSource = null;
|
||||
|
||||
function onRoundServerEvent() {
|
||||
if (token) {
|
||||
refreshRound();
|
||||
refreshMe();
|
||||
checkLastRoundResult();
|
||||
} else {
|
||||
refreshChainStatusOnly();
|
||||
}
|
||||
}
|
||||
|
||||
function connectRoundEvents() {
|
||||
if (roundEventSource) return;
|
||||
roundEventSource = new EventSource('/rounds/stream');
|
||||
roundEventSource.addEventListener('update', onRoundServerEvent);
|
||||
// Fires on the initial connection AND every successful auto-reconnect (the
|
||||
// browser retries this on its own after a drop) — re-syncs immediately
|
||||
// instead of leaving the page on whatever it last knew until the next event
|
||||
// or poll tick, which would otherwise widen the "missed while disconnected"
|
||||
// window to the full reconnect gap.
|
||||
roundEventSource.addEventListener('open', onRoundServerEvent);
|
||||
}
|
||||
|
||||
connectRoundEvents();
|
||||
initAuthState();
|
||||
+1
-712
@@ -235,718 +235,7 @@
|
||||
|
||||
<div id="toast-container" aria-live="polite"></div>
|
||||
|
||||
<script>
|
||||
const SATS_PER_PLM = 100000000;
|
||||
|
||||
let token = localStorage.getItem('plm_token');
|
||||
let username = localStorage.getItem('plm_username');
|
||||
let address = localStorage.getItem('plm_address');
|
||||
|
||||
function toast(message, type) {
|
||||
const container = document.getElementById('toast-container');
|
||||
const el = document.createElement('div');
|
||||
el.className = 'toast ' + type;
|
||||
el.textContent = message;
|
||||
container.appendChild(el);
|
||||
setTimeout(() => el.remove(), 4000);
|
||||
}
|
||||
|
||||
async function withLoading(button, label, fn) {
|
||||
const original = button.textContent;
|
||||
button.disabled = true;
|
||||
button.textContent = label;
|
||||
try {
|
||||
await fn();
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.textContent = original;
|
||||
}
|
||||
}
|
||||
|
||||
const REQUEST_TIMEOUT_MS = 15000;
|
||||
|
||||
// Without a timeout, a single request that never resolves (server-side hang —
|
||||
// stuck DB session, unresponsive Electrum connection...) would stall the whole
|
||||
// sequential polling chain forever: the UI just freezes on whatever was last
|
||||
// rendered, with no error and no "connessione persa" (that only fires on a
|
||||
// rejected fetch, never on one that's merely stuck).
|
||||
async function call(method, path, body) {
|
||||
const headers = { 'Content-Type': 'application/json' };
|
||||
if (token) headers['Authorization'] = 'Bearer ' + token;
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
|
||||
let res;
|
||||
try {
|
||||
res = await fetch(path, { method, headers, body: body ? JSON.stringify(body) : undefined, signal: controller.signal });
|
||||
} catch (e) {
|
||||
throw new Error(e.name === 'AbortError' ? 'Richiesta al server scaduta.' : e.message);
|
||||
} finally {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.detail || res.statusText);
|
||||
return data;
|
||||
}
|
||||
|
||||
function switchTab(name) {
|
||||
document.getElementById('tab-login').classList.toggle('active', name === 'login');
|
||||
document.getElementById('tab-register').classList.toggle('active', name === 'register');
|
||||
document.getElementById('panel-login').classList.toggle('active', name === 'login');
|
||||
document.getElementById('panel-register').classList.toggle('active', name === 'register');
|
||||
}
|
||||
|
||||
function switchPanel(name) {
|
||||
for (const key of ['deposit', 'bet', 'withdraw', 'profile']) {
|
||||
document.getElementById('nav-' + key).classList.toggle('active', key === name);
|
||||
document.getElementById('panel-' + key).classList.toggle('active', key === name);
|
||||
}
|
||||
}
|
||||
|
||||
// Bumped on every logout/login so an in-flight refreshRound() started under a
|
||||
// previous session can detect it's now stale — a fetch can still be awaiting
|
||||
// its response after logout() clears the timeout-based poll chain, and without
|
||||
// this guard it would re-arm scheduleNextRoundPoll() and resurrect a "zombie"
|
||||
// dashboard poll running in parallel with the logged-out chain-only poll.
|
||||
let sessionEpoch = 0;
|
||||
let roundCloseAt = null;
|
||||
let serverTimeOffsetMs = 0; // serverNow - clientNow, so every client's countdown agrees regardless of local clock skew
|
||||
function serverNow() { return new Date(Date.now() + serverTimeOffsetMs); }
|
||||
// refreshRound() is triggered from several independent sources (poll timer, timer-hits-zero,
|
||||
// visibilitychange, placeBet, showDashboard) whose requests can resolve out of order over the
|
||||
// network. Track the latest applied response so a slow, stale one can never revert the UI to an
|
||||
// older round's state after a newer response has already moved it forward.
|
||||
let roundRequestSeq = 0;
|
||||
let roundAppliedSeq = 0;
|
||||
let roundTimerInterval = null;
|
||||
let roundPollTimeout = null;
|
||||
let lastResultInterval = null;
|
||||
|
||||
const ROUND_STATUS_LABELS = {
|
||||
open: 'aperto',
|
||||
closing: 'in chiusura',
|
||||
drawing: 'estrazione in corso',
|
||||
paying_out: 'pagamento al vincitore in corso',
|
||||
};
|
||||
|
||||
const DRAWING_STATUSES = ['closing', 'drawing', 'paying_out'];
|
||||
|
||||
// One distinct message per DRAW sub-phase (see CLAUDE.md's "three separate
|
||||
// on-chain confirmations" note) instead of a single generic spinner label —
|
||||
// takes the round data so the drawing phase can surface the draw block once known.
|
||||
function drawingLabelFor(data) {
|
||||
if (data.status === 'closing') {
|
||||
return 'Round chiuso — in attesa di conferma dell\'ultima giocata prima di estrarre il vincitore…';
|
||||
}
|
||||
if (data.status === 'drawing') {
|
||||
return 'In attesa del prossimo blocco per estrarre il vincitore…';
|
||||
}
|
||||
// paying_out
|
||||
if (data.draw_block_height != null) {
|
||||
return 'Vincitore estratto dal blocco #' + data.draw_block_height + ' — pagamento al vincitore in corso…';
|
||||
}
|
||||
return 'Vincitore estratto — pagamento al vincitore in corso…';
|
||||
}
|
||||
|
||||
// One label per real round status, not just the coarse open/drawing/waiting
|
||||
// grouping — the status bar should show the same phase distinction as the
|
||||
// draw-state panel (drawingLabelFor above), just condensed to a short phrase.
|
||||
const CHAIN_STATUS_LABELS = {
|
||||
waiting: 'In attesa del prossimo round',
|
||||
open: 'Round aperto',
|
||||
closing: 'Round chiuso — attesa conferma puntate',
|
||||
drawing: 'Estrazione in corso',
|
||||
paying_out: 'Pagamento al vincitore in corso',
|
||||
};
|
||||
|
||||
function updateChainStatusBar(data) {
|
||||
const dot = document.getElementById('chain-status-dot');
|
||||
const label = document.getElementById('chain-status-label');
|
||||
const block = document.getElementById('chain-block');
|
||||
|
||||
// The dot's color/pulse only distinguishes waiting/open/drawing (that's all
|
||||
// the CSS defines) — closing and paying_out both pulse like drawing, they
|
||||
// just get their own text label below.
|
||||
let dotKey;
|
||||
if (!data.round_id) dotKey = 'waiting';
|
||||
else if (DRAWING_STATUSES.includes(data.status)) dotKey = 'drawing';
|
||||
else dotKey = 'open';
|
||||
|
||||
const labelKey = data.round_id && data.status in CHAIN_STATUS_LABELS ? data.status : 'waiting';
|
||||
|
||||
dot.className = 'status-dot status-' + dotKey;
|
||||
label.textContent = CHAIN_STATUS_LABELS[labelKey];
|
||||
block.textContent = 'Blocco ' + (data.chain_tip_height != null ? '#' + data.chain_tip_height : '—');
|
||||
|
||||
document.getElementById('maintenance-banner').classList.toggle('hidden', !data.lottery_paused);
|
||||
}
|
||||
|
||||
// After a couple of consecutive failed polls (network blip, server restart,
|
||||
// tab suspended too long...), say so explicitly instead of silently leaving
|
||||
// whatever status happened to be on screen — a frozen "Round aperto" that's
|
||||
// actually minutes stale is worse than an honest "connessione persa".
|
||||
const STALE_AFTER_FAILURES = 2;
|
||||
let consecutiveFetchFailures = 0;
|
||||
|
||||
function showConnectionLost() {
|
||||
document.getElementById('chain-status-dot').className = 'status-dot status-offline';
|
||||
document.getElementById('chain-status-label').textContent = 'Connessione al server persa — riprovo…';
|
||||
}
|
||||
|
||||
function noteFetchOutcome(ok) {
|
||||
if (ok) {
|
||||
consecutiveFetchFailures = 0;
|
||||
return;
|
||||
}
|
||||
consecutiveFetchFailures++;
|
||||
if (consecutiveFetchFailures >= STALE_AFTER_FAILURES) showConnectionLost();
|
||||
}
|
||||
|
||||
let chainOnlyInterval = null;
|
||||
|
||||
async function refreshChainStatusOnly() {
|
||||
try {
|
||||
const data = await call('GET', '/rounds/current');
|
||||
updateChainStatusBar(data);
|
||||
noteFetchOutcome(true);
|
||||
} catch (e) {
|
||||
noteFetchOutcome(false);
|
||||
}
|
||||
}
|
||||
|
||||
function startChainOnlyPolling() {
|
||||
refreshChainStatusOnly();
|
||||
clearInterval(chainOnlyInterval);
|
||||
chainOnlyInterval = setInterval(refreshChainStatusOnly, 15000);
|
||||
}
|
||||
|
||||
function stopChainOnlyPolling() {
|
||||
clearInterval(chainOnlyInterval);
|
||||
chainOnlyInterval = null;
|
||||
}
|
||||
|
||||
// Background tabs get their timers throttled hard by the browser (sometimes to
|
||||
// once a minute or less) — waiting for the next lazy tick after the user comes
|
||||
// back could show a stale round state for a while. Refresh immediately instead
|
||||
// as soon as the tab becomes visible again.
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState !== 'visible') return;
|
||||
if (chainOnlyInterval !== null) {
|
||||
refreshChainStatusOnly();
|
||||
} else if (token) {
|
||||
refreshRound();
|
||||
checkLastRoundResult();
|
||||
}
|
||||
});
|
||||
|
||||
// The win/lose box's content lives in localStorage, not just in-memory state —
|
||||
// a page reload (or a completely fresh tab) must be able to redraw it exactly
|
||||
// as it was, without waiting for a new poll or re-running the reveal
|
||||
// animation. This is the single source of truth for "what result box (if any)
|
||||
// is currently shown"; refreshRound() and checkLastRoundResult() below both
|
||||
// read/write it instead of keeping their own separate notion of "revealed".
|
||||
const PERSISTED_RESULT_KEY = 'plm_persisted_result';
|
||||
|
||||
function getPersistedResult() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(PERSISTED_RESULT_KEY));
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function persistResult(roundId, won, amountSats) {
|
||||
localStorage.setItem(PERSISTED_RESULT_KEY, JSON.stringify({ round_id: roundId, won, amount_sats: amountSats }));
|
||||
}
|
||||
|
||||
function clearPersistedResult() {
|
||||
localStorage.removeItem(PERSISTED_RESULT_KEY);
|
||||
}
|
||||
|
||||
function renderPersistedResult(result) {
|
||||
setRoundInfoVisible(false);
|
||||
setResultBoxVisible(
|
||||
true,
|
||||
result.won ? '🎉 Hai vinto! +' + (result.amount_sats / SATS_PER_PLM) + ' PLM' : 'Non hai vinto questa volta.',
|
||||
result.won ? 'win' : 'lose'
|
||||
);
|
||||
}
|
||||
|
||||
// The most recent round_id refreshRound() actually saw from the server (null
|
||||
// meaning "confirmed no active round"; undefined meaning "haven't polled yet").
|
||||
// Lets checkLastRoundResult() below avoid clobbering a round that's already
|
||||
// known to be open/in-progress by the time its own (slower, DB-backed) request
|
||||
// resolves.
|
||||
let currentRoundIdSeen;
|
||||
|
||||
// Backstop for the live reveal in refreshRound(): that one only works if a poll
|
||||
// happens to land while the round is still "paying_out" (winner_user_id is
|
||||
// dropped from /rounds/current the instant the round flips to "closed" — see
|
||||
// rounds/service.get_active_round). A backgrounded tab, a missed poll, or a
|
||||
// late page load can miss that window entirely, in which case the live path
|
||||
// never fires and the player would otherwise never learn the outcome. This
|
||||
// reads GET /users/me/last-round-result, which reports the durable DB record
|
||||
// instead of an ephemeral snapshot, so it always catches up eventually.
|
||||
async function checkLastRoundResult() {
|
||||
if (!token) return;
|
||||
let data;
|
||||
try {
|
||||
data = await call('GET', '/users/me/last-round-result');
|
||||
} catch (e) {
|
||||
return; // silent — this is a backstop, refreshRound()'s own error handling already covers the primary path
|
||||
}
|
||||
if (data.round_id == null) return;
|
||||
const persisted = getPersistedResult();
|
||||
if (persisted && persisted.round_id === data.round_id) return; // already showing/known
|
||||
if (currentRoundIdSeen != null && currentRoundIdSeen !== data.round_id) return; // a newer round is already in progress on screen
|
||||
|
||||
persistResult(data.round_id, data.won, data.amount_sats);
|
||||
renderPersistedResult({ won: data.won, amount_sats: data.amount_sats });
|
||||
if (data.won) {
|
||||
const won = data.amount_sats / SATS_PER_PLM;
|
||||
toast('Hai vinto il round #' + data.round_id + '! +' + won + ' PLM', 'success');
|
||||
refreshMe();
|
||||
}
|
||||
}
|
||||
|
||||
let lastJackpotValue = null;
|
||||
|
||||
let timerHitZero = false;
|
||||
|
||||
function updateRoundTimer() {
|
||||
const el = document.getElementById('round-timer');
|
||||
if (!roundCloseAt) { el.textContent = '--:--'; timerHitZero = false; return; }
|
||||
const rawSec = Math.floor((roundCloseAt - serverNow()) / 1000);
|
||||
const totalSec = Math.max(0, rawSec);
|
||||
const mm = String(Math.floor(totalSec / 60)).padStart(2, '0');
|
||||
const ss = String(totalSec % 60).padStart(2, '0');
|
||||
el.textContent = mm + ':' + ss;
|
||||
|
||||
// The countdown alone can't know the round actually closed server-side — poll
|
||||
// right away instead of waiting up to 15s for the next scheduled tick, so the
|
||||
// card doesn't sit on "00:00 · aperto" longer than necessary.
|
||||
if (rawSec <= 0 && !timerHitZero) {
|
||||
timerHitZero = true;
|
||||
refreshRound();
|
||||
} else if (rawSec > 0) {
|
||||
timerHitZero = false;
|
||||
}
|
||||
}
|
||||
|
||||
// The round's normal info (title/timer/players/jackpot) vs. the drawing-phase
|
||||
// spinner box vs. the personalized win/lose box are three independently
|
||||
// toggled pieces, not three mutually-exclusive "screens" — during closing/
|
||||
// drawing/paying_out, EVERY viewer sees the drawing box (generic phase
|
||||
// progress), and a player who bet in that round ALSO sees the win/lose box at
|
||||
// the same time once revealed, instead of the two fighting over one slot.
|
||||
function setRoundInfoVisible(show) {
|
||||
document.getElementById('round-normal-row').classList.toggle('hidden', !show);
|
||||
document.getElementById('round-stats-row').classList.toggle('hidden', !show);
|
||||
}
|
||||
|
||||
function setDrawingBoxVisible(show, label) {
|
||||
document.getElementById('draw-state').classList.toggle('active', show);
|
||||
if (show && label) document.getElementById('draw-label').textContent = label;
|
||||
}
|
||||
|
||||
function setResultBoxVisible(show, html, cls) {
|
||||
const el = document.getElementById('draw-result');
|
||||
if (show) {
|
||||
el.className = 'draw-result ' + cls;
|
||||
el.innerHTML = html;
|
||||
}
|
||||
el.classList.toggle('hidden', !show);
|
||||
}
|
||||
|
||||
function showNormalState() {
|
||||
setRoundInfoVisible(true);
|
||||
setDrawingBoxVisible(false);
|
||||
setResultBoxVisible(false);
|
||||
}
|
||||
|
||||
async function refreshRound() {
|
||||
const seq = ++roundRequestSeq;
|
||||
const epoch = sessionEpoch;
|
||||
try {
|
||||
const data = await call('GET', '/rounds/current');
|
||||
if (epoch !== sessionEpoch) return; // session ended (or a new one started) while this was in flight
|
||||
if (seq < roundAppliedSeq) return; // a newer refreshRound() call already applied its result
|
||||
roundAppliedSeq = seq;
|
||||
noteFetchOutcome(true);
|
||||
updateChainStatusBar(data);
|
||||
document.getElementById('round-title').textContent = data.round_id
|
||||
? 'Round #' + data.round_id + ' — ' + (ROUND_STATUS_LABELS[data.status] || data.status)
|
||||
: 'Nessun round attivo';
|
||||
document.getElementById('round-players').textContent = data.participant_count;
|
||||
const jackpotEl = document.getElementById('round-jackpot');
|
||||
const jackpotValue = data.jackpot_sats / SATS_PER_PLM;
|
||||
jackpotEl.textContent = jackpotValue;
|
||||
if (lastJackpotValue !== null && jackpotValue !== lastJackpotValue) {
|
||||
jackpotEl.classList.remove('jackpot-bump');
|
||||
void jackpotEl.offsetWidth; // restart the animation
|
||||
jackpotEl.classList.add('jackpot-bump');
|
||||
}
|
||||
lastJackpotValue = jackpotValue;
|
||||
if (data.server_time) serverTimeOffsetMs = new Date(data.server_time) - new Date();
|
||||
roundCloseAt = data.closes_at ? new Date(data.closes_at) : null;
|
||||
updateRoundTimer();
|
||||
|
||||
currentRoundIdSeen = data.round_id || null;
|
||||
|
||||
const isDrawing = data.round_id && DRAWING_STATUSES.includes(data.status);
|
||||
document.getElementById('round-card').classList.toggle('drawing-glow', !!isDrawing);
|
||||
const persisted = getPersistedResult();
|
||||
|
||||
if (isDrawing) {
|
||||
setRoundInfoVisible(false);
|
||||
// The drawing-phase box (spinner + phase label) is generic status info —
|
||||
// every viewer sees it for the whole closing/drawing/paying_out phase,
|
||||
// regardless of whether they played in this round.
|
||||
setDrawingBoxVisible(true, drawingLabelFor(data));
|
||||
|
||||
// The cosmetic reveal delay is anchored to the server's closes_at, not to
|
||||
// any client-side "when did I first see this" timestamp — a page reload
|
||||
// (or repeated reloads) can never reset it, since it's derived purely
|
||||
// from server-provided values that don't change for this round.
|
||||
const elapsedMs = serverNow() - new Date(data.closes_at);
|
||||
const minMs = data.draw_animation_seconds * 1000;
|
||||
const alreadyKnown = persisted && persisted.round_id === data.round_id;
|
||||
// myUserId may not be loaded yet on the very first tick after a reload
|
||||
// (refreshMe() and refreshRound() run concurrently) — fall back to the
|
||||
// persisted result rather than risk showing nothing or the wrong side.
|
||||
const canReveal =
|
||||
data.user_played && data.winner_user_id != null && (alreadyKnown || elapsedMs >= minMs) && myUserId != null;
|
||||
|
||||
if (canReveal) {
|
||||
const won = data.winner_user_id === myUserId;
|
||||
if (!alreadyKnown) {
|
||||
persistResult(data.round_id, won, data.winner_amount_sats);
|
||||
if (won) {
|
||||
const wonAmount = (data.winner_amount_sats / SATS_PER_PLM);
|
||||
toast('Hai vinto il round #' + data.round_id + '! +' + wonAmount + ' PLM', 'success');
|
||||
refreshMe(); // the win toast is useless if the balance card still shows the pre-payout amount
|
||||
}
|
||||
}
|
||||
renderPersistedResult({ won, amount_sats: data.winner_amount_sats });
|
||||
} else if (alreadyKnown) {
|
||||
renderPersistedResult(persisted);
|
||||
} else {
|
||||
setResultBoxVisible(false);
|
||||
}
|
||||
} else {
|
||||
setDrawingBoxVisible(false);
|
||||
if (data.round_id && (!persisted || data.round_id !== persisted.round_id)) {
|
||||
// a genuinely new round is open — clear any previous result and go back to normal
|
||||
clearPersistedResult();
|
||||
showNormalState();
|
||||
} else if (!data.round_id && !persisted) {
|
||||
// nothing has ever been revealed and there's no active round — plain empty state
|
||||
showNormalState();
|
||||
} else if (persisted) {
|
||||
// no active round right now (cooldown, or a page reload after the round
|
||||
// fully closed) — keep the persisted result on screen regardless, until
|
||||
// a genuinely new round replaces it above.
|
||||
renderPersistedResult(persisted);
|
||||
}
|
||||
}
|
||||
|
||||
scheduleNextRoundPoll(isDrawing);
|
||||
} catch (e) {
|
||||
if (epoch !== sessionEpoch) return; // session ended (or a new one started) while this was in flight
|
||||
noteFetchOutcome(false);
|
||||
scheduleNextRoundPoll(false);
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleNextRoundPoll(fast) {
|
||||
clearTimeout(roundPollTimeout);
|
||||
roundPollTimeout = setTimeout(refreshRound, fast ? 3000 : 15000);
|
||||
}
|
||||
|
||||
async function showDashboard() {
|
||||
sessionEpoch++; // invalidate any dashboard poll chain left over from a previous login
|
||||
stopChainOnlyPolling();
|
||||
document.getElementById('landing-hero').classList.add('hidden');
|
||||
document.getElementById('auth-section').classList.add('hidden');
|
||||
document.getElementById('app-navbar').classList.remove('hidden');
|
||||
document.getElementById('dashboard-section').classList.remove('hidden');
|
||||
document.getElementById('dash-username').textContent = username;
|
||||
document.getElementById('dash-address').textContent = address;
|
||||
document.getElementById('dash-qr').src = '/qr/' + encodeURIComponent(address);
|
||||
// Render instantly from localStorage, before the network round-trip below —
|
||||
// otherwise a reload right after a win/lose flashes an empty round card for
|
||||
// a moment. refreshRound()'s own response reconciles this shortly after
|
||||
// (e.g. hides it again if a new round has since opened).
|
||||
const persisted = getPersistedResult();
|
||||
if (persisted) renderPersistedResult(persisted);
|
||||
// Awaited so myUserId is populated before refreshRound() decides whether
|
||||
// data.winner_user_id === myUserId — otherwise that comparison could race
|
||||
// against an unset myUserId right after a reload.
|
||||
await refreshMe();
|
||||
// Awaited too, and before refreshRound(): on a brand-new browser/device that
|
||||
// never saw this round live (nothing in localStorage), this is the only
|
||||
// thing that knows the outcome once the round has fully closed. Resolving
|
||||
// it first means refreshRound() finds the answer already in place instead
|
||||
// of momentarily rendering "no result" and then flipping to the win/lose
|
||||
// box a moment later once this backstop catches up.
|
||||
await checkLastRoundResult();
|
||||
refreshRound();
|
||||
clearInterval(lastResultInterval);
|
||||
lastResultInterval = setInterval(checkLastRoundResult, 20000);
|
||||
clearInterval(roundTimerInterval);
|
||||
roundTimerInterval = setInterval(updateRoundTimer, 1000);
|
||||
}
|
||||
|
||||
function persistSession(data, u) {
|
||||
token = data.access_token; username = u; address = data.address;
|
||||
localStorage.setItem('plm_token', token);
|
||||
localStorage.setItem('plm_username', username);
|
||||
localStorage.setItem('plm_address', address);
|
||||
}
|
||||
|
||||
async function register() {
|
||||
const btn = document.getElementById('register-btn');
|
||||
const u = document.getElementById('reg-username').value;
|
||||
const p = document.getElementById('reg-password').value;
|
||||
const pConfirm = document.getElementById('reg-password-confirm').value;
|
||||
if (p !== pConfirm) {
|
||||
toast('Le password non coincidono.', 'error');
|
||||
return;
|
||||
}
|
||||
await withLoading(btn, 'Creazione…', async () => {
|
||||
try {
|
||||
const data = await call('POST', '/auth/register', { username: u, password: p });
|
||||
persistSession(data, u);
|
||||
toast('Account creato.', 'success');
|
||||
showDashboard();
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function login() {
|
||||
const btn = document.getElementById('login-btn');
|
||||
const u = document.getElementById('login-username').value;
|
||||
const p = document.getElementById('login-password').value;
|
||||
await withLoading(btn, 'Accesso…', async () => {
|
||||
try {
|
||||
const data = await call('POST', '/auth/login', { username: u, password: p });
|
||||
persistSession(data, u);
|
||||
toast('Accesso riuscito.', 'success');
|
||||
showDashboard();
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function resetToLoggedOutUI() {
|
||||
sessionEpoch++; // invalidate any refreshRound() still in flight from the dashboard we're leaving
|
||||
token = username = address = null;
|
||||
myUserId = null;
|
||||
currentRoundIdSeen = undefined;
|
||||
clearInterval(roundTimerInterval);
|
||||
clearTimeout(roundPollTimeout);
|
||||
clearInterval(lastResultInterval);
|
||||
lastResultInterval = null;
|
||||
document.getElementById('app-navbar').classList.add('hidden');
|
||||
document.getElementById('dashboard-section').classList.add('hidden');
|
||||
document.getElementById('auth-section').classList.remove('hidden');
|
||||
document.getElementById('landing-hero').classList.remove('hidden');
|
||||
startChainOnlyPolling();
|
||||
}
|
||||
|
||||
function logout() {
|
||||
localStorage.clear();
|
||||
resetToLoggedOutUI();
|
||||
}
|
||||
|
||||
// Fires in every OTHER tab of this origin when one tab clears/changes plm_token
|
||||
// (e.g. via logout()) — keeps all open tabs in sync instead of leaving stale
|
||||
// ones showing a dashboard for a session that no longer exists anywhere else.
|
||||
window.addEventListener('storage', (event) => {
|
||||
if (event.key === 'plm_token' && !event.newValue) {
|
||||
resetToLoggedOutUI();
|
||||
}
|
||||
});
|
||||
|
||||
// Bfcache restores a frozen snapshot of the DOM/JS state from before the user
|
||||
// navigated away, without re-running this script — so a stale "logged in" (or
|
||||
// stale "logged out") view could persist across back/forward navigation. Cache-
|
||||
// Control: no-store on this response should already prevent that, but re-derive
|
||||
// the UI from storage here too as a safety net for browsers that ignore it.
|
||||
window.addEventListener('pageshow', (event) => {
|
||||
if (event.persisted) initAuthState();
|
||||
});
|
||||
|
||||
function initAuthState() {
|
||||
token = localStorage.getItem('plm_token');
|
||||
username = localStorage.getItem('plm_username');
|
||||
address = localStorage.getItem('plm_address');
|
||||
if (token) {
|
||||
showDashboard();
|
||||
} else {
|
||||
resetToLoggedOutUI();
|
||||
}
|
||||
}
|
||||
|
||||
async function copyAddress() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(address);
|
||||
toast('Indirizzo copiato.', 'success');
|
||||
} catch (e) {
|
||||
toast('Impossibile copiare automaticamente.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
let myUserId = null;
|
||||
let myBalanceSats = 0; // confirmed, spendable balance — what withdrawals/bets can actually draw from
|
||||
|
||||
// Shows the pending-inclusive balance (confirmed + own change still unconfirmed
|
||||
// in a broadcast bet/withdrawal — see compute_pending_balance in
|
||||
// app/wallet/balance.py) so the number doesn't drop by more than the amount
|
||||
// actually spent while a tx is in flight. Green once settled, amber while
|
||||
// has_pending is true so it's clear the figure isn't final yet.
|
||||
function setBalanceDisplay(elementId, pendingBalanceSats, hasPending) {
|
||||
const el = document.getElementById(elementId);
|
||||
el.textContent = pendingBalanceSats / SATS_PER_PLM;
|
||||
el.classList.toggle('balance-pending', hasPending);
|
||||
el.classList.toggle('balance-confirmed', !hasPending);
|
||||
}
|
||||
|
||||
async function refreshMe() {
|
||||
const btn = document.getElementById('refresh-btn');
|
||||
await withLoading(btn, '…', async () => {
|
||||
try {
|
||||
const data = await call('GET', '/users/me');
|
||||
myUserId = data.id;
|
||||
myBalanceSats = data.balance_sats;
|
||||
setBalanceDisplay('dash-balance', data.pending_balance_sats, data.has_pending);
|
||||
document.getElementById('navbar-balance').textContent = (data.pending_balance_sats / SATS_PER_PLM) + ' PLM';
|
||||
document.getElementById('navbar-balance').classList.toggle('balance-pending', data.has_pending);
|
||||
document.getElementById('navbar-balance').classList.toggle('balance-confirmed', !data.has_pending);
|
||||
document.getElementById('profile-username').textContent = data.username;
|
||||
document.getElementById('profile-address').textContent = data.address;
|
||||
setBalanceDisplay('profile-balance', data.pending_balance_sats, data.has_pending);
|
||||
document.getElementById('profile-created-at').textContent = new Date(data.created_at).toLocaleDateString('it-IT');
|
||||
document.getElementById('wd-full-amount-value').textContent = data.balance_sats / SATS_PER_PLM;
|
||||
if (document.getElementById('wd-full-amount').checked) {
|
||||
document.getElementById('wd-amount').value = data.balance_sats / SATS_PER_PLM;
|
||||
}
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleWithdrawFullAmount() {
|
||||
const checked = document.getElementById('wd-full-amount').checked;
|
||||
const amountInput = document.getElementById('wd-amount');
|
||||
amountInput.disabled = checked;
|
||||
if (checked) amountInput.value = myBalanceSats / SATS_PER_PLM;
|
||||
}
|
||||
|
||||
async function changePassword() {
|
||||
const btn = document.getElementById('change-password-btn');
|
||||
const currentPassword = document.getElementById('settings-current-password').value;
|
||||
const newPassword = document.getElementById('settings-new-password').value;
|
||||
const newPasswordConfirm = document.getElementById('settings-new-password-confirm').value;
|
||||
|
||||
if (newPassword !== newPasswordConfirm) {
|
||||
toast('Le nuove password non coincidono.', 'error');
|
||||
return;
|
||||
}
|
||||
if (newPassword.length < 8) {
|
||||
toast('La nuova password deve avere almeno 8 caratteri.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
await withLoading(btn, 'Aggiornamento…', async () => {
|
||||
try {
|
||||
await call('POST', '/users/me/change-password', {
|
||||
current_password: currentPassword,
|
||||
new_password: newPassword,
|
||||
});
|
||||
document.getElementById('settings-current-password').value = '';
|
||||
document.getElementById('settings-new-password').value = '';
|
||||
document.getElementById('settings-new-password-confirm').value = '';
|
||||
toast('Password aggiornata.', 'success');
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function placeBet() {
|
||||
const btn = document.getElementById('bet-btn');
|
||||
await withLoading(btn, 'Invio bet…', async () => {
|
||||
try {
|
||||
const data = await call('POST', '/bets', {});
|
||||
toast('Bet piazzata sul round #' + data.round_id + '.', 'success');
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
refreshMe();
|
||||
refreshRound();
|
||||
}
|
||||
|
||||
async function withdraw() {
|
||||
const btn = document.getElementById('withdraw-btn');
|
||||
const ext = document.getElementById('wd-address').value;
|
||||
const isFullAmount = document.getElementById('wd-full-amount').checked;
|
||||
const amtSats = isFullAmount
|
||||
? myBalanceSats
|
||||
: Math.round(parseFloat(document.getElementById('wd-amount').value) * SATS_PER_PLM);
|
||||
await withLoading(btn, 'Invio…', async () => {
|
||||
try {
|
||||
await call('POST', '/withdrawals', { external_address: ext, amount_sats: amtSats });
|
||||
toast('Withdrawal inviato.', 'success');
|
||||
document.getElementById('wd-full-amount').checked = false;
|
||||
toggleWithdrawFullAmount();
|
||||
document.getElementById('wd-amount').value = '';
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
refreshMe();
|
||||
}
|
||||
|
||||
// Server push: an SSE channel that notifies the instant round/bet/balance
|
||||
// state changes anywhere (see app/rounds/events.py), instead of everyone
|
||||
// waiting for their next poll tick. The message carries no payload — it just
|
||||
// means "something changed", so we react by immediately re-running the same
|
||||
// refreshes the polling loop would eventually do on its own. Polling is left
|
||||
// completely in place as a fallback: if this connection is blocked/dropped
|
||||
// (proxy, browser setting, flaky network), the page keeps working exactly as
|
||||
// before, just without the instant nudge.
|
||||
let roundEventSource = null;
|
||||
|
||||
function onRoundServerEvent() {
|
||||
if (token) {
|
||||
refreshRound();
|
||||
refreshMe();
|
||||
checkLastRoundResult();
|
||||
} else {
|
||||
refreshChainStatusOnly();
|
||||
}
|
||||
}
|
||||
|
||||
function connectRoundEvents() {
|
||||
if (roundEventSource) return;
|
||||
roundEventSource = new EventSource('/rounds/stream');
|
||||
roundEventSource.addEventListener('update', onRoundServerEvent);
|
||||
// Fires on the initial connection AND every successful auto-reconnect (the
|
||||
// browser retries this on its own after a drop) — re-syncs immediately
|
||||
// instead of leaving the page on whatever it last knew until the next event
|
||||
// or poll tick, which would otherwise widen the "missed while disconnected"
|
||||
// window to the full reconnect gap.
|
||||
roundEventSource.addEventListener('open', onRoundServerEvent);
|
||||
}
|
||||
|
||||
connectRoundEvents();
|
||||
initAuthState();
|
||||
</script>
|
||||
<script src="/app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user