diff --git a/app/static/admin.html b/app/static/admin.html index 7b9721a..fd20a0a 100644 --- a/app/static/admin.html +++ b/app/static/admin.html @@ -158,398 +158,7 @@
- + diff --git a/app/static/admin.js b/app/static/admin.js new file mode 100644 index 0000000..1fb2e9a --- /dev/null +++ b/app/static/admin.js @@ -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 `${escapeHtml(status)}`; +} + +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) => ` + + ${u.id} + ${escapeHtml(u.username)} + ${escapeHtml(u.address)} + ${u.balance_sats / SATS_PER_PLM} + ${fmtDate(u.created_at)} + + + + + + + + + + `).join('') || 'Nessun utente registrato.'; + } 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) => ` + + ${r.id} + ${badge(r.status)} + ${fmtDate(r.opened_at)} + ${r.winner_username ? escapeHtml(r.winner_username) : '—'} + ${r.pool_amount_sats != null ? r.pool_amount_sats / SATS_PER_PLM : '—'} + ${r.winner_amount_sats != null ? r.winner_amount_sats / SATS_PER_PLM : '—'} + ${r.fee_amount_sats != null ? r.fee_amount_sats / SATS_PER_PLM : '—'} + ${r.payout_txid ? escapeHtml(r.payout_txid) : '—'} + + `).join('') || 'Nessun round ancora.'; + } 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) => ` + + ${p.id} + ${escapeHtml(p.kind)} + ${badge(p.status)} + ${escapeHtml(p.current_txid)} + ${p.fee_rate_sat_vb} sat/vB + ${p.attempt_count} + ${fmtDate(p.broadcast_at)} + + `).join('') || 'Nessuna transazione pendente.'; + } 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) => ` + + ${e.id} + ${escapeHtml(e.event_type)} + 
${escapeHtml(JSON.stringify(e.payload))}
+ ${e.user_id ?? '—'} + ${e.round_id ?? '—'} + ${fmtDate(e.created_at)} + + `).join('') || 'Nessun evento registrato.'; + } 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(); diff --git a/app/static/app.js b/app/static/app.js new file mode 100644 index 0000000..5a24263 --- /dev/null +++ b/app/static/app.js @@ -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(); diff --git a/app/static/index.html b/app/static/index.html index c204974..87e9dde 100644 --- a/app/static/index.html +++ b/app/static/index.html @@ -235,718 +235,7 @@
- +