auuuhm

2026-09-17 18:10:47 -04:00 · 2025-11-13 22:17:29 -05:00
parent d601e9aa82
commit 8c79c70520
26 changed files with 386 additions and 62 deletions
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Rover Spectator</title>
+    <style>
+      body { font-family: sans-serif; margin: 16px; }
+      #status { margin-bottom: 12px; }
+      #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+      .rover-card { border: 1px solid #ccc; padding: 12px; border-radius: 6px; background: #fdfdfd; }
+      .rover-card h3 { margin: 0 0 8px 0; }
+      .sensor { font-family: monospace; white-space: pre-wrap; word-break: break-word; }
+      .meta { font-size: 0.9rem; color: #555; margin-bottom: 8px; }
+    </style>
+  </head>
+  <body>
+    <h1>Rover Spectator</h1>
+    <div id="status">Connecting…</div>
+    <div id="grid"></div>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+      window.__desiredRole = 'spectator';
+    </script>
+    <script src="../loader.js"></script>
+    <script src="../src/globals/socket.js"></script>
+    <script src="spectator.js"></script>
+  </body>
+</html>
@@ -0,0 +1,63 @@
+registerModule('spectator/main', (require, exports) => {
+  const { socket } = require('globals/socket');
+
+  const statusEl = document.getElementById('status');
+  const grid = document.getElementById('grid');
+  const cards = new Map();
+
+  socket.on('connect', () => {
+    statusEl.textContent = 'Connected';
+  });
+
+  socket.on('disconnect', () => {
+    statusEl.textContent = 'Disconnected';
+  });
+
+  socket.on('lockdown', ({ message }) => {
+    statusEl.textContent = message || 'Spectator mode disabled';
+  });
+
+  socket.on('rovers', (list) => {
+    const seen = new Set();
+    list.forEach((rover) => {
+      const card = ensureCard(rover.id);
+      card.querySelector('.meta').textContent = `Locked: ${rover.locked ? 'yes' : 'no'} | Last seen: ${new Date(rover.lastSeen).toLocaleTimeString()}`;
+    });
+    cards.forEach((_, id) => {
+      if (!list.find((r) => r.id === id)) {
+        removeCard(id);
+      }
+    });
+  });
+
+  socket.on('sensorFrame', ({ roverId, sensors }) => {
+    const card = ensureCard(roverId);
+    card.querySelector('.sensor').textContent = sensors ? JSON.stringify(sensors, null, 2) : 'No data';
+  });
+
+  function ensureCard(roverId) {
+    if (cards.has(roverId)) {
+      return cards.get(roverId);
+    }
+    const card = document.createElement('div');
+    card.className = 'rover-card';
+    card.innerHTML = `
+      <h3>${roverId}</h3>
+      <div class="meta"></div>
+      <pre class="sensor">Waiting for data...</pre>
+    `;
+    grid.appendChild(card);
+    cards.set(roverId, card);
+    return card;
+  }
+
+  function removeCard(roverId) {
+    const card = cards.get(roverId);
+    if (card) {
+      card.remove();
+      cards.delete(roverId);
+    }
+  }
+});
+
+requireModule('spectator/main');