No WebSocket reconnection feedback — overlay freezes silently

[FlorentPoinsaut]

Description

When the WebSocket connection is lost, the overlay displays stale data with no visual indication. Viewers see a frozen panel and may assume the bot has crashed or the game ended.

Location

overlay/static/index.html — WebSocket reconnection logic

// Current:
ws.onclose = () => setTimeout(connect, 3000);
ws.onerror = () => ws.close();
// No visual feedback at all

Fix

Add a reconnecting banner that appears on disconnect and hides on reconnect:

#reconnect-banner {
  display: none;
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #f0c040;
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:.4} 50%{opacity:1} }

ws.onclose = () => {
  document.getElementById('reconnect-banner').style.display = 'flex';
  setTimeout(connect, 3000);
};
ws.onopen = () => {
  document.getElementById('reconnect-banner').style.display = 'none';
};

Severity

🔴 Critical UX — Identified by [Tech] UX Designer