jarvis/monop-state
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Replace disconnected overlay with slim banner matching stale style

Browse source 
Same top-banner pattern as the stale indicator but with red accent
and 'Connection lost — retrying every 2s...' message. Page gets
subtle greyscale/dim instead of a blocking overlay.
This commit is contained in:
Jarvis 2026-02-21 11:15:18 +00:00
parent dd4787615d
commit 435b24bfb8
1 changed files with 17 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
site/index.html
View file

@ -124,21 +124,17 @@ h1 { color: #fff; font-size: 1.5em; text-align: center; }
.zero-state h2 { color: #fff; font-size: 2em; } .zero-state h2 { color: #fff; font-size: 2em; }
.zero-state p { color: #888; font-size: 1.1em; max-width: 400px; line-height: 1.5; } .zero-state p { color: #888; font-size: 1.1em; max-width: 400px; line-height: 1.5; }
/* ===== DISCONNECTED OVERLAY ===== */ /* ===== DISCONNECTED BANNER ===== */
.disconnected-overlay { .disconnected-banner {
position: fixed; inset: 0; background: rgba(0,0,0,0.7); position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center; background: rgba(40, 20, 20, 0.92); border-bottom: 1px solid #e74c3c;
z-index: 1000; backdrop-filter: blur(3px); padding: 8px 20px; text-align: center; font-size: 0.85em; color: #ccc;
display: none; backdrop-filter: blur(2px);
animation: stale-fade-in 0.3s ease-out;
} }
.disconnected-overlay .message { .disconnected-banner .icon { margin-right: 6px; }
background: #16213e; border: 2px solid #e74c3c; border-radius: 12px; .disconnected-banner .retry-text { color: #e74c3c; font-weight: 500; }
padding: 40px; text-align: center; max-width: 400px; body.greyed-out .container { filter: grayscale(60%) brightness(0.6); }
}
.disconnected-overlay .icon { font-size: 3em; margin-bottom: 15px; }
.disconnected-overlay h3 { color: #e74c3c; margin-bottom: 10px; }
.disconnected-overlay p { color: #888; font-size: 0.9em; }
.disconnected-overlay .retry { color: #555; font-size: 0.8em; margin-top: 15px; }
body.greyed-out .container { filter: grayscale(80%) brightness(0.5); pointer-events: none; }
/* ===== STALE STATE ===== */ /* ===== STALE STATE ===== */
.stale-banner { .stale-banner {
@ -226,14 +222,10 @@ body.game-over .container { padding-top: 100px; }
</div> </div>
</div> </div>
<!-- Disconnected overlay --> <!-- Disconnected banner -->
<div class="disconnected-overlay" id="disconnect-overlay" style="display:none"> <div class="disconnected-banner" id="disconnect-banner">
<div class="message"> <span class="icon">📡</span>
<div class="icon">📡</div> Connection lost — <span class="retry-text">retrying every 2s...</span>
<h3>Connection Lost</h3>
<p>Unable to reach the game server. The bridge may be down or the network is unreachable.</p>
<div class="retry" id="disconnect-retry">Retrying in <span id="retry-countdown">--</span>s...</div>
</div>
</div> </div>
<!-- Stale data banner --> <!-- Stale data banner -->
@ -283,8 +275,6 @@ let lastUpdate = '';
let currentView = 'loading'; // loading, zero, playing, gameover, disconnected let currentView = 'loading'; // loading, zero, playing, gameover, disconnected
let debugMode = null; // null = live, or a forced state name let debugMode = null; // null = live, or a forced state name
let consecutiveFailures = 0; let consecutiveFailures = 0;
let retryCountdown = 0;
let retryTimer = null;
let gameOverShown = false; // only trigger confetti once per game let gameOverShown = false; // only trigger confetti once per game
let confettiRunning = false; let confettiRunning = false;
let lastStateTimestamp = null; // ISO string from state.lastUpdated let lastStateTimestamp = null; // ISO string from state.lastUpdated
@ -294,7 +284,7 @@ function showView(view) {
currentView = view; currentView = view;
document.getElementById('zero-state').style.display = view === 'zero' ? 'flex' : 'none'; document.getElementById('zero-state').style.display = view === 'zero' ? 'flex' : 'none';
document.getElementById('game-container').style.display = (view === 'playing' || view === 'gameover') ? 'flex' : 'none'; document.getElementById('game-container').style.display = (view === 'playing' || view === 'gameover') ? 'flex' : 'none';
document.getElementById('disconnect-overlay').style.display = view === 'disconnected' ? 'flex' : 'none'; document.getElementById('disconnect-banner').style.display = view === 'disconnected' ? 'block' : 'none';
document.getElementById('game-over-banner').style.display = view === 'gameover' ? 'block' : 'none'; document.getElementById('game-over-banner').style.display = view === 'gameover' ? 'block' : 'none';
document.body.classList.toggle('greyed-out', view === 'disconnected'); document.body.classList.toggle('greyed-out', view === 'disconnected');
document.body.classList.toggle('game-over', view === 'gameover'); document.body.classList.toggle('game-over', view === 'gameover');
@ -608,28 +598,14 @@ function hideStale() {
// ===== CONNECTION MONITORING ===== // ===== CONNECTION MONITORING =====
function showDisconnected() { function showDisconnected() {
if (currentView === 'disconnected') return; document.getElementById('disconnect-banner').style.display = 'block';
// Show the overlay on top of whatever was showing
document.getElementById('disconnect-overlay').style.display = 'flex';
document.body.classList.add('greyed-out'); document.body.classList.add('greyed-out');
startRetryCountdown();
} }
function hideDisconnected() { function hideDisconnected() {
document.getElementById('disconnect-overlay').style.display = 'none'; document.getElementById('disconnect-banner').style.display = 'none';
document.body.classList.remove('greyed-out'); document.body.classList.remove('greyed-out');
consecutiveFailures = 0; consecutiveFailures = 0;
if (retryTimer) { clearInterval(retryTimer); retryTimer = null; }
}
function startRetryCountdown() {
retryCountdown = 5;
document.getElementById('retry-countdown').textContent = retryCountdown;
if (retryTimer) clearInterval(retryTimer);
retryTimer = setInterval(() => {
retryCountdown--;
document.getElementById('retry-countdown').textContent = Math.max(0, retryCountdown);
}, 1000);
} }
// ===== MAIN UPDATE LOOP ===== // ===== MAIN UPDATE LOOP =====