added server tracking plus server metrics

static/script.js

@@ -1067,13 +1067,87 @@ function updateTotalRaresDisplay(data) {
   }
 }
 
+async function pollServerHealth() {
+  try {
+    const response = await fetch(`${API_BASE}/server-health`);
+    const data = await response.json();
+    updateServerStatusDisplay(data);
+  } catch (e) {
+    console.error('Server health fetch failed:', e);
+    updateServerStatusDisplay({ status: 'error' });
+  }
+}
+
+function updateServerStatusDisplay(data) {
+  const statusDot = document.getElementById('statusDot');
+  const statusText = document.getElementById('statusText');
+  const playerCount = document.getElementById('playerCount');
+  const latencyMs = document.getElementById('latencyMs');
+  const uptime = document.getElementById('uptime');
+  const lastRestart = document.getElementById('lastRestart');
+  
+  if (!statusDot || !statusText) return;
+  
+  // Update status indicator
+  const status = data.status || 'unknown';
+  statusDot.className = `status-dot status-${status}`;
+  statusText.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+  
+  // Update player count
+  if (playerCount) {
+    playerCount.textContent = data.player_count !== null && data.player_count !== undefined ? data.player_count : '-';
+  }
+  
+  // Update latency
+  if (latencyMs) {
+    latencyMs.textContent = data.latency_ms ? Math.round(data.latency_ms) : '-';
+  }
+  
+  // Update uptime
+  if (uptime) {
+    uptime.textContent = data.uptime || '-';
+  }
+  
+  // Update last restart with Stockholm timezone (24h format, no year)
+  if (lastRestart) {
+    if (data.last_restart) {
+      const restartDate = new Date(data.last_restart);
+      const formattedDate = restartDate.toLocaleString('sv-SE', {
+        timeZone: 'Europe/Stockholm',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+      });
+      lastRestart.textContent = formattedDate;
+    } else {
+      lastRestart.textContent = 'Unknown';
+    }
+  }
+}
+
+function handleServerStatusUpdate(msg) {
+  // Handle real-time server status updates via WebSocket
+  if (msg.status === 'up' && msg.message) {
+    // Show notification for server coming back online
+    console.log(`Server Status: ${msg.message}`);
+  }
+  
+  // Trigger an immediate server health poll to refresh the display
+  pollServerHealth();
+}
+
 function startPolling() {
   if (pollID !== null) return;
   pollLive();
   pollTotalRares(); // Initial fetch
+  pollServerHealth(); // Initial server health check
   pollID = setInterval(pollLive, POLL_MS);
   // Poll total rares every 5 minutes (300,000 ms)
   setInterval(pollTotalRares, 300000);
+  // Poll server health every 30 seconds (30,000 ms)
+  setInterval(pollServerHealth, 30000);
 }
 
 img.onload = () => {
@@ -1091,6 +1165,12 @@ img.onload = () => {
   initHeatMap();
 };
 
+// Ensure server health polling starts regardless of image loading
+document.addEventListener('DOMContentLoaded', () => {
+  // Start server health polling immediately on DOM ready
+  pollServerHealth();
+});
+
 /* ---------- rendering sorted list & dots ------------------------ */
 /**
  * Filter and sort the currentPlayers, then render them.
@@ -1293,6 +1373,8 @@ function initWebSocket() {
       updateVitalsDisplay(msg);
     } else if (msg.type === 'rare') {
       triggerEpicRareNotification(msg.character_name, msg.name);
+    } else if (msg.type === 'server_status') {
+      handleServerStatusUpdate(msg);
     }
   });
   socket.addEventListener('close', () => setTimeout(initWebSocket, 2000));