legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 17:40:46 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

awaw

Browse Source
This commit is contained in:
legop3
2026-07-11 13:51:55 -04:00
parent 71706fb1b9
commit 27dbb068be
9 changed files with 55 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/MobileControls/FloatingJoystick.jsx
+25 -13
View File
@@ -119,7 +119,13 @@ function FloatingPadOverlay({ center, size, activeCellId }) {
);
}
export default function FloatingJoystick({ activeInputLabel = 'stop', disabled, onCellChange, onStop }) {
export default function FloatingJoystick({
activeInputLabel = 'stop',
compact = false,
disabled,
onCellChange,
onStop,
}) {
const containerRef = useRef(null);
const pointerIdRef = useRef(null);
const activePadRef = useRef(null);
@@ -209,7 +215,7 @@ export default function FloatingJoystick({ activeInputLabel = 'stop', disabled,
<div
ref={containerRef}
role="presentation"
className="mobile-touch-control mobile-drag-control relative flex h-full min-h-[10rem] w-full select-none items-center justify-center overflow-hidden text-slate-100"
className={`mobile-touch-control mobile-drag-control relative flex h-full w-full select-none items-center justify-center overflow-hidden text-slate-100 ${compact ? 'min-h-[7rem]' : 'min-h-[10rem]'}`}
// Pointer drags are the whole control model here, so this inline value
// reinforces the utility class even if future class churn changes it.
style={{ touchAction: 'none' }}
@@ -222,17 +228,23 @@ export default function FloatingJoystick({ activeInputLabel = 'stop', disabled,
}}
onContextMenu={(event) => event.preventDefault()}
>
<div className="pointer-events-none absolute inset-x-0 top-0 border-b border-slate-700 bg-slate-950 px-1.5 py-0.5 text-center">
{/* The readout lives inside the pointer target instead of above it, so the
visual indicator does not consume any non-drivable space on small phones. */}
<span className="font-mono text-xs font-semibold text-cyan-200">
{activeInputLabel}
</span>
</div>
<div className="pointer-events-none flex flex-col items-center gap-0.5 px-2 pt-5 text-center">
<span className="text-sm font-semibold text-slate-100">drive pad</span>
<span className="text-xs leading-tight text-slate-300">hold and drag</span>
</div>
{!compact ? (
<div className="pointer-events-none absolute inset-x-0 top-0 border-b border-slate-700 bg-slate-950 px-1.5 py-0.5 text-center">
{/* The readout lives inside the pointer target instead of above it, so the
visual indicator does not consume any non-drivable space on small phones. */}
<span className="font-mono text-xs font-semibold text-cyan-200">
{activeInputLabel}
</span>
</div>
) : null}
{!compact ? (
<div className="pointer-events-none flex flex-col items-center gap-0.5 px-2 pt-5 text-center">
<span className="text-sm font-semibold text-slate-100">drive pad</span>
<span className="text-xs leading-tight text-slate-300">hold and drag</span>
</div>
) : (
<div className="pointer-events-none h-8 w-8 rounded-full border border-cyan-300/60 bg-cyan-300/20" />
)}
</div>
{activePad ? (
<FloatingPadOverlay