From ad710007778dd939b7afa1a20106ee7567922452 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Wed, 22 Jul 2026 23:21:04 +0200
Subject: [PATCH] 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.
---
 app/static/index.html | 52 +++++++++++++++++++++++++++++++------------
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/app/static/index.html b/app/static/index.html
index e10a91c..827eeae 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -143,7 +143,7 @@
 
     <div class="draw-state" id="draw-state">
       <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 class="hidden" id="draw-result"></div>
@@ -307,10 +307,32 @@ const ROUND_STATUS_LABELS = {
 
 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 = {
   waiting: 'In attesa del prossimo round',
   open: 'Round aperto',
+  closing: 'Round chiuso — attesa conferma puntate',
   drawing: 'Estrazione in corso',
+  paying_out: 'Pagamento in corso',
 };
 
 function updateChainStatusBar(data) {
@@ -318,13 +340,18 @@ function updateChainStatusBar(data) {
   const label = document.getElementById('chain-status-label');
   const block = document.getElementById('chain-block');
 
-  let statusKey;
-  if (!data.round_id) statusKey = 'waiting';
-  else if (DRAWING_STATUSES.includes(data.status)) statusKey = 'drawing';
-  else statusKey = 'open';
+  // 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';
 
-  dot.className = 'status-dot status-' + statusKey;
-  label.textContent = CHAIN_STATUS_LABELS[statusKey];
+  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);
@@ -417,11 +444,12 @@ function updateRoundTimer() {
   }
 }
 
-function showDrawingState() {
+function showDrawingState(label) {
   document.getElementById('round-normal-row').classList.add('hidden');
   document.getElementById('round-stats-row').classList.add('hidden');
   document.getElementById('draw-state').classList.add('active');
   document.getElementById('draw-result').classList.add('hidden');
+  if (label) document.getElementById('draw-label').textContent = label;
 }
 
 function showResultState(html, cls) {
@@ -485,7 +513,7 @@ async function refreshRound() {
           showResultState('Non hai vinto questa volta.', 'lose');
         }
       } else if (!revealedRounds.has(data.round_id)) {
-        showDrawingState();
+        showDrawingState(drawingLabelFor(data));
       }
     } else if (data.round_id && data.round_id !== activeResultRoundId) {
       // 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
     // "Nessun round attivo".
 
-    // The countdown reaching zero doesn't mean the server has actually closed the
-    // 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);
+    scheduleNextRoundPoll(isDrawing);
   } catch (e) {
     noteFetchOutcome(false);
     scheduleNextRoundPoll(false);