grover gaming

2026-09-16 01:21:20 -04:00 · 2026-05-13 20:10:47 -04:00
parent 36a6ee012c
commit 3c9400f488
7 changed files with 189 additions and 125 deletions
@@ -0,0 +1,52 @@
+export default function SpectatorTelemetryOverlay({ sensors, mobileHud = false }) {
+  const statusPadClass = mobileHud ? 'px-0.25 py-0.25' : 'px-1 py-0.5';
+  const telemetryPosClass = mobileHud ? 'left-0.5 top-1/2' : 'left-1 top-1/2';
+  const telemetryTextClass = mobileHud ? 'text-[0.45rem]' : 'text-[0.65rem]';
+  const telemetryEntries = [
+    ['Voltage', sensors?.voltageMv != null ? `${(sensors.voltageMv / 1000).toFixed(2)} V` : '--'],
+    ['Current', sensors?.currentMa != null ? `${sensors.currentMa} mA` : '--'],
+    ['Charge', sensors?.batteryChargeMah != null ? `${sensors.batteryChargeMah}` : '--'],
+    ['OI', sensors?.oiMode?.label || '--'],
+  ];
+  const docked = Boolean(sensors?.chargingSources?.homeBase);
+  const chargingLabel = sensors?.chargingState?.label || '';
+  const charging = Boolean(chargingLabel && chargingLabel.toLowerCase() !== 'not charging');
+  const oiLabel = sensors?.oiMode?.label || 'Unknown';
+  const oiNormalized = oiLabel.toLowerCase();
+  const oiTone =
+    oiNormalized === 'full'
+      ? 'bg-emerald-500/80 text-emerald-50'
+      : oiNormalized === 'safe'
+      ? 'bg-amber-400/80 text-amber-950'
+      : oiNormalized === 'passive'
+      ? 'bg-slate-700/80 text-slate-100'
+      : 'bg-slate-700/60 text-slate-200';
+  const dockTone = docked ? 'bg-emerald-500/80 text-emerald-50' : 'bg-slate-700/70 text-slate-200';
+  const chargingTone = charging
+    ? 'bg-emerald-500/80 text-emerald-50'
+    : docked
+    ? 'bg-amber-400/80 text-amber-950'
+    : 'bg-slate-700/70 text-slate-200';
+
+  return (
+    <div
+      className={`absolute ${telemetryPosClass} flex -translate-y-1/2 flex-col gap-0.5 bg-black/70 text-slate-100 ${telemetryTextClass} ${statusPadClass}`}
+    >
+      <div className="space-y-0.5 leading-tight">
+        <div className="flex flex-col gap-0.5 text-[0.75rem] font-semibold uppercase tracking-wide">
+          <span className={`rounded px-1.5 py-0.5 ${dockTone}`}>{docked ? 'Docked' : 'Undocked'}</span>
+          <span className={`rounded px-1.5 py-0.5 ${chargingTone}`}>
+            {charging ? 'Charging' : docked ? 'Not charging' : 'Not charging'}
+          </span>
+          <span className={`rounded px-1.5 py-0.5 ${oiTone}`}>OI: {oiLabel}</span>
+        </div>
+        {telemetryEntries.map(([labelText, value]) => (
+          <span key={labelText} className="flex items-center justify-between gap-0.5">
+            <span className="text-slate-400">{labelText}</span>
+            <span className="font-semibold text-white">{value}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}