drive

2026-09-16 01:21:20 -04:00 · 2025-11-15 13:15:30 -05:00
parent c9d5b4e0f3
commit 0de8fb9633
7 changed files with 231 additions and 14 deletions
@@ -0,0 +1,63 @@
+import { useDriveControls } from '../hooks/useDriveControls.js';
+
+function SpeedMeter({ left, right }) {
+  return (
+    <div className="grid grid-cols-2 gap-4 rounded-2xl border border-slate-800/60 bg-slate-950/40 p-4 text-sm">
+      <div>
+        <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Left</p>
+        <p className="text-2xl font-semibold text-white">{left}</p>
+      </div>
+      <div>
+        <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Right</p>
+        <p className="text-2xl font-semibold text-white">{right}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function DrivePanel() {
+  const { roverId, speeds, sensorEnabled, toggleSensorStream, stopMotors } = useDriveControls();
+
+  return (
+    <section className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
+      <header className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Drive Controls</p>
+          <h2 className="text-2xl font-semibold text-white">
+            {roverId ? `Driving rover ${roverId}` : 'No rover assigned'}
+          </h2>
+        </div>
+        <div className="flex flex-wrap items-center gap-2 text-xs text-slate-400">
+          <span>W/A/S/D: move</span>
+          <span>Shift: boost</span>
+          <span>Space: browser handles scroll</span>
+        </div>
+      </header>
+
+      <SpeedMeter left={speeds.left} right={speeds.right} />
+
+      <div className="mt-4 flex flex-wrap gap-3">
+        <button
+          type="button"
+          onClick={stopMotors}
+          className="rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
+          disabled={!roverId}
+        >
+          Stop Motors
+        </button>
+        <button
+          type="button"
+          onClick={toggleSensorStream}
+          className="rounded-lg border border-slate-700 px-4 py-2 text-sm font-semibold text-slate-200 disabled:opacity-50"
+          disabled={!roverId}
+        >
+          {sensorEnabled ? 'Disable Sensor Stream' : 'Enable Sensor Stream'}
+        </button>
+      </div>
+
+      <p className="mt-4 text-xs text-slate-500">
+        Keep this tab focused to drive. Keyboard input is ignored while typing in form fields.
+      </p>
+    </section>
+  );
+}