modularize code, add dummy version of roverd

server/public/app.js

@@ -1,193 +0,0 @@
-const socket = io();
-const statusEl = document.getElementById('status');
-const roverSelect = document.getElementById('roverSelect');
-const sensorToggleBtn = document.getElementById('sensorToggle');
-const motorsStopBtn = document.getElementById('motorsStop');
-const sensorOutput = document.getElementById('sensorOutput');
-const alertsEl = document.getElementById('alerts');
-const mediaRestartBtn = document.getElementById('mediaRestart');
-let selectedRover = null;
-let sensorEnabled = false;
-let lastDrive = { left: 0, right: 0 };
-
-const OI_COMMANDS = {
-  start: [128],
-  safe: [131],
-  full: [132],
-  passive: [128],
-  dock: [143],
-};
-
-socket.on('connect', () => {
-  statusEl.textContent = 'Connected';
-});
-
-socket.on('disconnect', () => {
-  statusEl.textContent = 'Disconnected';
-});
-
-socket.on('rovers', (list) => {
-  roverSelect.innerHTML = '';
-  list.forEach((rover) => {
-    const option = document.createElement('option');
-    option.value = rover.id;
-    option.textContent = `${rover.name} (${rover.id})`;
-    roverSelect.appendChild(option);
-  });
-  if (list.length && !selectedRover) {
-    roverSelect.selectedIndex = 0;
-    selectedRover = list[0].id;
-  }
-});
-
-socket.on('sensorFrame', ({ roverId, frame, sensors }) => {
-  if (roverId !== selectedRover) return;
-  sensorOutput.textContent = renderSensors(sensors, frame?.data);
-});
-
-socket.on('commandAck', ({ roverId, status, error }) => {
-  if (roverId !== selectedRover) return;
-  if (status === 'ok') {
-    statusEl.textContent = 'Command applied';
-  } else {
-    statusEl.textContent = `Command failed: ${error}`;
-  }
-});
-
-socket.on('roverEvent', ({ roverId, event, ts, data }) => {
-  if (!alertsEl) return;
-  const div = document.createElement('div');
-  div.className = 'alert';
-  const when = ts ? new Date(ts).toLocaleTimeString() : new Date().toLocaleTimeString();
-  const details = data && data.error ? ` (${data.error})` : '';
-  div.textContent = `[${when}] ${roverId}: ${event}${details}`;
-  alertsEl.prepend(div);
-  while (alertsEl.children.length > 5) {
-    alertsEl.removeChild(alertsEl.lastChild);
-  }
-  setTimeout(() => {
-    if (div.parentElement === alertsEl) {
-      alertsEl.removeChild(div);
-    }
-  }, 15000);
-});
-
-roverSelect.addEventListener('change', (e) => {
-  selectedRover = e.target.value;
-});
-
-sensorToggleBtn.addEventListener('click', () => {
-  if (!selectedRover) return;
-  sensorEnabled = !sensorEnabled;
-  sensorToggleBtn.textContent = sensorEnabled ? 'Disable Sensor Stream' : 'Enable Sensor Stream';
-  sendCommand('sensorStream', { enable: sensorEnabled });
-});
-
-motorsStopBtn.addEventListener('click', () => {
-  sendCommand('motors', { main: 0, side: 0, vacuum: 0 });
-});
-
-mediaRestartBtn.addEventListener('click', () => {
-  sendCommand('media', { action: 'restart' });
-});
-
-document.querySelectorAll('[data-mode]').forEach((btn) => {
-  btn.addEventListener('click', () => {
-    const mode = btn.dataset.mode;
-    if (!OI_COMMANDS[mode]) return;
-    sendCommand('raw', { bytes: OI_COMMANDS[mode] });
-  });
-});
-
-const keys = new Set();
-const driveInterval = 50;
-
-window.addEventListener('keydown', (event) => {
-  keys.add(event.key.toLowerCase());
-});
-
-window.addEventListener('keyup', (event) => {
-  keys.delete(event.key.toLowerCase());
-});
-
-setInterval(() => {
-  if (!selectedRover) return;
-  const speeds = computeDrive();
-  if (speeds.left === lastDrive.left && speeds.right === lastDrive.right) {
-    return;
-  }
-  lastDrive = speeds;
-  sendCommand('drive', speeds);
-}, driveInterval);
-
-function computeDrive() {
-  const forward = keys.has('w');
-  const backward = keys.has('s');
-  const left = keys.has('a');
-  const right = keys.has('d');
-  const fast = keys.has('shift');
-  const base = fast ? 300 : 150;
-  let leftSpeed = 0;
-  let rightSpeed = 0;
-
-  if (forward && !backward) {
-    leftSpeed += base;
-    rightSpeed += base;
-  } else if (backward && !forward) {
-    leftSpeed -= base;
-    rightSpeed -= base;
-  }
-
-  if (left && !right) {
-    leftSpeed -= base;
-    rightSpeed += base;
-  } else if (right && !left) {
-    leftSpeed += base;
-    rightSpeed -= base;
-  }
-
-  if (!forward && !backward && (left || right)) {
-    leftSpeed = left ? -base : base;
-    rightSpeed = left ? base : -base;
-  }
-
-  return {
-    left: clamp(leftSpeed, -500, 500),
-    right: clamp(rightSpeed, -500, 500),
-  };
-}
-
-function sendCommand(type, data = {}) {
-  if (!selectedRover) return;
-  socket.emit('command', { roverId: selectedRover, type, data });
-}
-
-function formatSensorFrame(base64) {
-  const buffer = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
-  return Array.from(buffer)
-    .map((b) => b.toString(16).padStart(2, '0'))
-    .join(' ');
-}
-
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(max, value));
-}
-
-function renderSensors(sensors = {}, rawBase64) {
-  const lines = [];
-  if (sensors && Object.keys(sensors).length) {
-    for (const [key, value] of Object.entries(sensors)) {
-      if (value && typeof value === 'object' && !Array.isArray(value)) {
-        lines.push(`${key}: ${JSON.stringify(value)}`);
-      } else {
-        lines.push(`${key}: ${value}`);
-      }
-    }
-  } else {
-    lines.push('No decoded sensor data yet.');
-  }
-  if (rawBase64) {
-    lines.push('', 'raw:', formatSensorFrame(rawBase64));
-  }
-  return lines.join('\n');
-}

server/public/index.html

@@ -22,18 +22,21 @@
         <label for="roverSelect">Rovers</label>
         <select id="roverSelect" size="10" style="width: 100%"></select>
         <div class="row">
-          <button data-mode="start">Start OI</button>
-          <button data-mode="safe">Safe</button>
-          <button data-mode="full">Full</button>
-          <button data-mode="passive">Passive</button>
-          <button data-mode="dock">Dock</button>
+          <button id="requestControl">Request Control</button>
+          <button id="lockToggle">Lock/Unlock</button>
+        </div>
+        <div class="row">
+          <button data-oi="start">Start OI</button>
+          <button data-oi="safe">Safe</button>
+          <button data-oi="full">Full</button>
+          <button data-oi="passive">Passive</button>
+          <button data-oi="dock">Dock</button>
         </div>
         <div class="row">
           <button id="sensorToggle">Enable Sensor Stream</button>
         </div>
         <div class="row">
           <button id="motorsStop">Stop Motors</button>
-          <button id="mediaRestart">Restart Camera</button>
         </div>
       </div>
       <div style="flex: 1">
@@ -44,6 +47,13 @@
       </div>
     </div>
     <script src="/socket.io/socket.io.js"></script>
-    <script src="app.js" type="module"></script>
+    <script src="loader.js"></script>
+    <script src="src/globals/socket.js"></script>
+    <script src="src/helpers/formatters.js"></script>
+    <script src="src/services/state.js"></script>
+    <script src="src/services/alertFeed.js"></script>
+    <script src="src/services/roverUI.js"></script>
+    <script src="src/services/driveControls.js"></script>
+    <script src="src/main.js"></script>
   </body>
 </html>

server/public/loader.js

@@ -0,0 +1,22 @@
+(function () {
+  const modules = {};
+  const cache = {};
+
+  window.registerModule = function (name, factory) {
+    modules[name] = factory;
+  };
+
+  window.requireModule = function (name) {
+    if (cache[name]) {
+      return cache[name];
+    }
+    const factory = modules[name];
+    if (!factory) {
+      throw new Error(`Module ${name} not found`);
+    }
+    const exports = {};
+    cache[name] = exports;
+    factory(requireModule, exports);
+    return exports;
+  };
+})();

server/public/src/globals/socket.js

@@ -0,0 +1,4 @@
+registerModule('globals/socket', (require, exports) => {
+  const socket = io();
+  exports.socket = socket;
+});

server/public/src/helpers/formatters.js

@@ -0,0 +1,11 @@
+registerModule('helpers/formatters', (require, exports) => {
+  function formatHex(base64) {
+    if (!base64) return '';
+    const buffer = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+    return Array.from(buffer)
+      .map((b) => b.toString(16).padStart(2, '0'))
+      .join(' ');
+  }
+
+  exports.formatHex = formatHex;
+});

server/public/src/main.js

@@ -0,0 +1,6 @@
+requireModule('globals/socket');
+requireModule('helpers/formatters');
+requireModule('services/state');
+requireModule('services/alertFeed');
+requireModule('services/roverUI');
+requireModule('services/driveControls');

server/public/src/services/alertFeed.js

@@ -0,0 +1,25 @@
+registerModule('services/alertFeed', (require, exports) => {
+  const { socket } = require('globals/socket');
+
+  const container = document.getElementById('alerts');
+  if (!container) return;
+
+  function pushAlert({ color = '#2196f3', title, message, ts }) {
+    const div = document.createElement('div');
+    div.className = 'alert';
+    div.style.borderColor = color;
+    div.style.background = color + '22';
+    div.innerHTML = `<strong>${title || 'Notice'}</strong> - ${message || ''}`;
+    container.prepend(div);
+    while (container.children.length > 5) {
+      container.removeChild(container.lastChild);
+    }
+    setTimeout(() => {
+      if (div.parentElement === container) {
+        container.removeChild(div);
+      }
+    }, 15000);
+  }
+
+  socket.on('alert', pushAlert);
+});

server/public/src/services/driveControls.js

@@ -0,0 +1,122 @@
+registerModule('services/driveControls', (require, exports) => {
+  const { socket } = require('globals/socket');
+  const state = require('services/state');
+
+  const motorsStopBtn = document.getElementById('motorsStop');
+  const sensorToggleBtn = document.getElementById('sensorToggle');
+  const modeButtons = document.querySelectorAll('[data-oi]');
+
+  let sensorEnabled = false;
+  let lastDrive = { left: 0, right: 0 };
+  const keys = new Set();
+  const driveInterval = 120;
+
+  window.addEventListener('keydown', (event) => {
+    keys.add(event.key.toLowerCase());
+  });
+
+  window.addEventListener('keyup', (event) => {
+    keys.delete(event.key.toLowerCase());
+  });
+
+  setInterval(() => {
+    const roverId = state.getSelected();
+    if (!roverId) return;
+    const speeds = computeDrive();
+    if (speeds.left === lastDrive.left && speeds.right === lastDrive.right) return;
+    lastDrive = speeds;
+    socket.emit('command', {
+      roverId,
+      type: 'drive',
+      data: { driveDirect: speeds },
+    });
+  }, driveInterval);
+
+  function computeDrive() {
+    const forward = keys.has('w');
+    const backward = keys.has('s');
+    const left = keys.has('a');
+    const right = keys.has('d');
+    const fast = keys.has('shift');
+    const base = fast ? 300 : 150;
+    let leftSpeed = 0;
+    let rightSpeed = 0;
+
+    if (forward && !backward) {
+      leftSpeed += base;
+      rightSpeed += base;
+    } else if (backward && !forward) {
+      leftSpeed -= base;
+      rightSpeed -= base;
+    }
+
+    if (left && !right) {
+      leftSpeed -= base;
+      rightSpeed += base;
+    } else if (right && !left) {
+      leftSpeed += base;
+      rightSpeed -= base;
+    }
+
+    if (!forward && !backward && (left || right)) {
+      leftSpeed = left ? -base : base;
+      rightSpeed = left ? base : -base;
+    }
+
+    return {
+      left: clamp(leftSpeed, -500, 500),
+      right: clamp(rightSpeed, -500, 500),
+    };
+  }
+
+  function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+  }
+
+  motorsStopBtn?.addEventListener('click', () => {
+    const roverId = state.getSelected();
+    if (!roverId) return;
+    socket.emit('command', {
+      roverId,
+      type: 'motors',
+      data: { motorPwm: { main: 0, side: 0, vacuum: 0 } },
+    });
+  });
+
+  sensorToggleBtn?.addEventListener('click', () => {
+    sensorEnabled = !sensorEnabled;
+    sensorToggleBtn.textContent = sensorEnabled ? 'Disable Sensor Stream' : 'Enable Sensor Stream';
+    const roverId = state.getSelected();
+    socket.emit('command', {
+      roverId,
+      type: 'sensorStream',
+      data: { sensorStream: { enable: sensorEnabled } },
+    });
+  });
+
+  const OI_COMMANDS = {
+    start: [128],
+    safe: [131],
+    full: [132],
+    passive: [128],
+    dock: [143],
+  };
+
+  modeButtons.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const cmd = btn.dataset.oi;
+      const bytes = OI_COMMANDS[cmd];
+      if (!bytes) return;
+      const roverId = state.getSelected();
+      socket.emit('command', {
+        roverId,
+        type: 'raw',
+        data: { raw: bytesToBase64(bytes) },
+      });
+    });
+  });
+
+  function bytesToBase64(bytes) {
+    return btoa(String.fromCharCode(...bytes));
+  }
+});

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';
+  });
+});

server/public/src/services/state.js

@@ -0,0 +1,14 @@
+registerModule('services/state', (require, exports) => {
+  let selectedRover = null;
+
+  function setSelected(roverId) {
+    selectedRover = roverId;
+  }
+
+  function getSelected() {
+    return selectedRover;
+  }
+
+  exports.setSelected = setSelected;
+  exports.getSelected = getSelected;
+});