Show a distinct message per round phase instead of one generic spinner
The draw-state panel and the top chain-status bar previously showed the same "Estrazione in corso" text for closing/drawing/paying_out alike. Now each phase gets its own copy (closing: waiting for last bet confirmation; drawing: waiting for the draw block; paying_out: winner drawn from block #N, payout in flight), using the round data already returned by the API. Also drops the now-redundant pastDeadline fast-poll branch: status flips to "closing" the instant the timer expires (see the scheduler change), so isDrawing alone already covers that window.
This commit is contained in:
+38
-14
@@ -143,7 +143,7 @@
|
|||||||
|
|
||||||
<div class="draw-state" id="draw-state">
|
<div class="draw-state" id="draw-state">
|
||||||
<div class="draw-spinner"></div>
|
<div class="draw-spinner"></div>
|
||||||
<div class="draw-label">Estrazione del vincitore in corso…</div>
|
<div class="draw-label" id="draw-label">Estrazione del vincitore in corso…</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hidden" id="draw-result"></div>
|
<div class="hidden" id="draw-result"></div>
|
||||||
@@ -307,10 +307,32 @@ const ROUND_STATUS_LABELS = {
|
|||||||
|
|
||||||
const DRAWING_STATUSES = ['closing', 'drawing', 'paying_out'];
|
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 in corso…';
|
||||||
|
}
|
||||||
|
return 'Vincitore estratto — pagamento 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 = {
|
const CHAIN_STATUS_LABELS = {
|
||||||
waiting: 'In attesa del prossimo round',
|
waiting: 'In attesa del prossimo round',
|
||||||
open: 'Round aperto',
|
open: 'Round aperto',
|
||||||
|
closing: 'Round chiuso — attesa conferma puntate',
|
||||||
drawing: 'Estrazione in corso',
|
drawing: 'Estrazione in corso',
|
||||||
|
paying_out: 'Pagamento in corso',
|
||||||
};
|
};
|
||||||
|
|
||||||
function updateChainStatusBar(data) {
|
function updateChainStatusBar(data) {
|
||||||
@@ -318,13 +340,18 @@ function updateChainStatusBar(data) {
|
|||||||
const label = document.getElementById('chain-status-label');
|
const label = document.getElementById('chain-status-label');
|
||||||
const block = document.getElementById('chain-block');
|
const block = document.getElementById('chain-block');
|
||||||
|
|
||||||
let statusKey;
|
// The dot's color/pulse only distinguishes waiting/open/drawing (that's all
|
||||||
if (!data.round_id) statusKey = 'waiting';
|
// the CSS defines) — closing and paying_out both pulse like drawing, they
|
||||||
else if (DRAWING_STATUSES.includes(data.status)) statusKey = 'drawing';
|
// just get their own text label below.
|
||||||
else statusKey = 'open';
|
let dotKey;
|
||||||
|
if (!data.round_id) dotKey = 'waiting';
|
||||||
|
else if (DRAWING_STATUSES.includes(data.status)) dotKey = 'drawing';
|
||||||
|
else dotKey = 'open';
|
||||||
|
|
||||||
dot.className = 'status-dot status-' + statusKey;
|
const labelKey = data.round_id && data.status in CHAIN_STATUS_LABELS ? data.status : 'waiting';
|
||||||
label.textContent = CHAIN_STATUS_LABELS[statusKey];
|
|
||||||
|
dot.className = 'status-dot status-' + dotKey;
|
||||||
|
label.textContent = CHAIN_STATUS_LABELS[labelKey];
|
||||||
block.textContent = 'Blocco ' + (data.chain_tip_height != null ? '#' + data.chain_tip_height : '—');
|
block.textContent = 'Blocco ' + (data.chain_tip_height != null ? '#' + data.chain_tip_height : '—');
|
||||||
|
|
||||||
document.getElementById('maintenance-banner').classList.toggle('hidden', !data.lottery_paused);
|
document.getElementById('maintenance-banner').classList.toggle('hidden', !data.lottery_paused);
|
||||||
@@ -417,11 +444,12 @@ function updateRoundTimer() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showDrawingState() {
|
function showDrawingState(label) {
|
||||||
document.getElementById('round-normal-row').classList.add('hidden');
|
document.getElementById('round-normal-row').classList.add('hidden');
|
||||||
document.getElementById('round-stats-row').classList.add('hidden');
|
document.getElementById('round-stats-row').classList.add('hidden');
|
||||||
document.getElementById('draw-state').classList.add('active');
|
document.getElementById('draw-state').classList.add('active');
|
||||||
document.getElementById('draw-result').classList.add('hidden');
|
document.getElementById('draw-result').classList.add('hidden');
|
||||||
|
if (label) document.getElementById('draw-label').textContent = label;
|
||||||
}
|
}
|
||||||
|
|
||||||
function showResultState(html, cls) {
|
function showResultState(html, cls) {
|
||||||
@@ -485,7 +513,7 @@ async function refreshRound() {
|
|||||||
showResultState('Non hai vinto questa volta.', 'lose');
|
showResultState('Non hai vinto questa volta.', 'lose');
|
||||||
}
|
}
|
||||||
} else if (!revealedRounds.has(data.round_id)) {
|
} else if (!revealedRounds.has(data.round_id)) {
|
||||||
showDrawingState();
|
showDrawingState(drawingLabelFor(data));
|
||||||
}
|
}
|
||||||
} else if (data.round_id && data.round_id !== activeResultRoundId) {
|
} else if (data.round_id && data.round_id !== activeResultRoundId) {
|
||||||
// a genuinely new round is open — clear any previous result and go back to normal
|
// a genuinely new round is open — clear any previous result and go back to normal
|
||||||
@@ -506,11 +534,7 @@ async function refreshRound() {
|
|||||||
// one — keep it on screen through the cooldown gap instead of flashing back to
|
// one — keep it on screen through the cooldown gap instead of flashing back to
|
||||||
// "Nessun round attivo".
|
// "Nessun round attivo".
|
||||||
|
|
||||||
// The countdown reaching zero doesn't mean the server has actually closed the
|
scheduleNextRoundPoll(isDrawing);
|
||||||
// round yet (it still waits for in-flight bets to confirm) — poll faster
|
|
||||||
// through that gap too, not just once status flips to closing/drawing/paying_out.
|
|
||||||
const pastDeadline = data.status === 'open' && roundCloseAt !== null && roundCloseAt - serverNow() <= 0;
|
|
||||||
scheduleNextRoundPoll(isDrawing || pastDeadline);
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
noteFetchOutcome(false);
|
noteFetchOutcome(false);
|
||||||
scheduleNextRoundPoll(false);
|
scheduleNextRoundPoll(false);
|
||||||
|
|||||||
Reference in New Issue
Block a user