modularize code, add dummy version of roverd

server/public/src/services/roverUI.js

@@ -0,0 +1,68 @@
+registerModule('services/roverUI', (require, exports) => {
+  const { socket } = require('globals/socket');
+  const { formatHex } = require('helpers/formatters');
+  const state = require('services/state');
+
+  const statusEl = document.getElementById('status');
+  const roverSelect = document.getElementById('roverSelect');
+  const sensorOutput = document.getElementById('sensorOutput');
+  const requestBtn = document.getElementById('requestControl');
+  const lockBtn = document.getElementById('lockToggle');
+
+  let roster = [];
+
+  socket.on('rovers', (list) => {
+    roster = list;
+    roverSelect.innerHTML = '';
+    list.forEach((rover) => {
+      const option = document.createElement('option');
+      option.value = rover.id;
+      option.textContent = `${rover.name}${rover.locked ? ' (locked)' : ''}`;
+      roverSelect.appendChild(option);
+    });
+    if (!state.getSelected() && list.length) {
+      state.setSelected(list[0].id);
+      roverSelect.value = list[0].id;
+    }
+  });
+
+  roverSelect.addEventListener('change', () => {
+    state.setSelected(roverSelect.value);
+  });
+
+  socket.on('controlGranted', ({ roverId }) => {
+    state.setSelected(roverId);
+    roverSelect.value = roverId;
+    statusEl.textContent = `Driving ${roverId}`;
+  });
+
+  socket.on('sensorFrame', ({ roverId, frame, sensors }) => {
+    if (roverId !== state.getSelected()) return;
+    const lines = [];
+    if (sensors) {
+      Object.entries(sensors).forEach(([key, value]) => {
+        lines.push(`${key}: ${typeof value === 'object' ? JSON.stringify(value) : value}`);
+      });
+    }
+    lines.push('', 'raw:', formatHex(frame?.data));
+    sensorOutput.textContent = lines.join('\n');
+  });
+
+  requestBtn?.addEventListener('click', () => {
+    socket.emit('requestControl', { roverId: state.getSelected() });
+  });
+
+  lockBtn?.addEventListener('click', () => {
+    const roverId = state.getSelected();
+    const rover = roster.find((r) => r.id === roverId);
+    if (!rover) return;
+    socket.emit('lockRover', { roverId, locked: !rover.locked });
+  });
+
+  socket.on('connect', () => {
+    statusEl.textContent = 'Connected';
+  });
+  socket.on('disconnect', () => {
+    statusEl.textContent = 'Disconnected';
+  });
+});