mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 09:31:20 -04:00
mobile controls fixes hopefully
This commit is contained in:
legop3
@@ -194,8 +194,11 @@ export default function DriveDockAction({
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
// The drive/dock card appears inside the mobile controls and can be held or
|
||||
// tapped repeatedly; attach mobile touch suppression directly to the card so
|
||||
// Safari does not select labels or open callouts during those interactions.
|
||||
const baseCardClasses =
|
||||
'flex w-full flex-col gap-0.5 overflow-hidden rounded-xl border-2 px-0.75 py-0.75 text-slate-100 shadow-md transition hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60 select-none no-touch-select';
|
||||
'mobile-touch-control flex w-full flex-col gap-0.5 overflow-hidden rounded-xl border-2 px-0.75 py-0.75 text-slate-100 shadow-md transition hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60 select-none no-touch-select';
|
||||
const ctaText = 'text-center';
|
||||
const ctaLayout = 'items-center justify-between';
|
||||
const compactLayout = 'items-center justify-center';
|
||||
|
||||
@@ -48,8 +48,10 @@ export default function HornControl({
|
||||
const isActive = Boolean(active);
|
||||
const clampedHeat = Math.max(0, Math.min(1, Number(heat) || 0));
|
||||
const buttonClasses = useMemo(() => {
|
||||
// The horn can be held for continuous input, which makes it especially prone
|
||||
// to long-press selection/callout behavior on mobile browsers.
|
||||
const base =
|
||||
'group relative flex w-full flex-col gap-0.5 overflow-hidden rounded-xl border-2 px-1 py-1.5 text-xs font-semibold select-none no-touch-select';
|
||||
'mobile-touch-control group relative flex w-full flex-col gap-0.5 overflow-hidden rounded-xl border-2 px-1 py-1.5 text-xs font-semibold select-none no-touch-select';
|
||||
const active = 'border-fuchsia-300/70 bg-fuchsia-700 text-fuchsia-50';
|
||||
const inactive = 'border-cyan-300/70 bg-cyan-900 text-cyan-50 hover:bg-cyan-800';
|
||||
return [base, isActive ? active : inactive, 'disabled:opacity-50', className]
|
||||
@@ -147,7 +149,9 @@ export default function HornControl({
|
||||
event.preventDefault();
|
||||
setShowSettings((prev) => !prev);
|
||||
}}
|
||||
className="rounded bg-black/40 px-1 py-0.5 text-[0.6rem] font-semibold text-white/90 hover:text-white"
|
||||
// The settings toggle is a nested press target, so it gets the same touch
|
||||
// suppression as the larger horn surface instead of relying on inheritance.
|
||||
className="mobile-touch-control rounded bg-black/40 px-1 py-0.5 text-[0.6rem] font-semibold text-white/90 hover:text-white"
|
||||
>
|
||||
{showSettings ? 'Hide' : 'Settings'}
|
||||
</button>
|
||||
|
||||
@@ -56,12 +56,18 @@ function HudChatInput({ compact = false }) {
|
||||
const containerClass = compact
|
||||
? 'pointer-events-auto absolute bottom-0.5 right-0.5 flex w-[9rem] max-w-[70vw] items-center gap-0.5 rounded bg-black/70 px-0.4 py-0.2'
|
||||
: 'pointer-events-auto absolute bottom-1 right-1 flex w-[12rem] max-w-[70vw] items-center gap-0.5 rounded bg-black/70 px-0.5 py-0.25';
|
||||
// Safari zooms focused inputs below 16px. The dedicated mobile-text-entry
|
||||
// utility preserves normal text editing while keeping focus from changing the
|
||||
// page zoom when the compact chat field is used over the camera feed.
|
||||
const inputClass = compact
|
||||
? 'min-w-0 flex-1 bg-transparent text-[0.55rem] text-slate-100 placeholder:text-slate-400 focus:outline-none'
|
||||
: 'min-w-0 flex-1 bg-transparent text-[0.7rem] text-slate-100 placeholder:text-slate-400 focus:outline-none';
|
||||
? 'mobile-text-entry min-w-0 flex-1 bg-transparent text-slate-100 placeholder:text-slate-400 focus:outline-none'
|
||||
: 'mobile-text-entry min-w-0 flex-1 bg-transparent text-slate-100 placeholder:text-slate-400 focus:outline-none';
|
||||
// The submit button is still a touch target even though the adjacent input must
|
||||
// remain editable, so it gets press suppression without inheriting input text
|
||||
// selection behavior.
|
||||
const buttonClass = compact
|
||||
? 'rounded bg-cyan-500/80 px-0.35 py-0.2 text-[0.55rem] font-semibold text-black disabled:opacity-50'
|
||||
: 'rounded bg-cyan-500/80 px-0.5 py-0.25 text-[0.7rem] font-semibold text-black disabled:opacity-50';
|
||||
? 'mobile-touch-control rounded bg-cyan-500/80 px-0.35 py-0.2 text-[0.55rem] font-semibold text-black disabled:opacity-50'
|
||||
: 'mobile-touch-control rounded bg-cyan-500/80 px-0.5 py-0.25 text-[0.7rem] font-semibold text-black disabled:opacity-50';
|
||||
|
||||
async function handleSend(event) {
|
||||
event.preventDefault();
|
||||
@@ -109,7 +115,7 @@ function HudChatInput({ compact = false }) {
|
||||
}
|
||||
}}
|
||||
ref={(el) => registerInputRef(el, { target: 'hud' })}
|
||||
placeholder={canChat ? 'Chat (TTS)' : 'Spectator'}
|
||||
placeholder={canChat ? 'Chat (tts)' : 'Spectator'}
|
||||
disabled={!canChat}
|
||||
/>
|
||||
<button type="submit" disabled={!canChat || sending} className={buttonClass}>
|
||||
|
||||
@@ -119,7 +119,7 @@ function FloatingPadOverlay({ center, size, activeCellId }) {
|
||||
);
|
||||
}
|
||||
|
||||
export default function FloatingJoystick({ disabled, onCellChange, onStop }) {
|
||||
export default function FloatingJoystick({ activeInputLabel = 'stop', disabled, onCellChange, onStop }) {
|
||||
const containerRef = useRef(null);
|
||||
const pointerIdRef = useRef(null);
|
||||
const activePadRef = useRef(null);
|
||||
@@ -209,7 +209,9 @@ export default function FloatingJoystick({ disabled, onCellChange, onStop }) {
|
||||
<div
|
||||
ref={containerRef}
|
||||
role="presentation"
|
||||
className="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 min-h-[10rem] w-full select-none items-center justify-center overflow-hidden text-slate-100"
|
||||
// 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' }}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
@@ -220,12 +222,17 @@ export default function FloatingJoystick({ disabled, onCellChange, onStop }) {
|
||||
}}
|
||||
onContextMenu={(event) => event.preventDefault()}
|
||||
>
|
||||
<div className="pointer-events-none flex flex-col items-center gap-0.5 text-center">
|
||||
<span className="text-sm font-semibold text-slate-100">drive pad</span>
|
||||
<span className="px-2 text-xs leading-tight text-slate-300">
|
||||
hold and drag for keyboard-style driving
|
||||
<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>
|
||||
</div>
|
||||
{activePad ? (
|
||||
<FloatingPadOverlay
|
||||
|
||||
@@ -14,7 +14,9 @@ export default function MobileAuxButton({ id, label, values, color, disabled, on
|
||||
onPointerLeave={() => onRelease(id)}
|
||||
onPointerCancel={() => onRelease(id)}
|
||||
onContextMenu={(event) => event.preventDefault()}
|
||||
className={`flex h-full w-full items-center justify-center rounded-xl border-2 px-1 py-0.75 text-center text-sm font-semibold text-white transition select-none no-touch-select ${color} hover:brightness-110 active:brightness-125 active:scale-[0.99] disabled:opacity-30`}
|
||||
// The mobile-touch-control class is applied directly to this button because
|
||||
// long-press callouts and text selection are triggered at the pressed node.
|
||||
className={`mobile-touch-control flex h-full w-full items-center justify-center rounded-xl border-2 px-1 py-0.75 text-center text-sm font-semibold text-white transition select-none no-touch-select ${color} hover:brightness-110 active:brightness-125 active:scale-[0.99] disabled:opacity-30`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
|
||||
@@ -48,6 +48,7 @@ function MobileJoystickPanel({ layout }) {
|
||||
const expandAction = dockedNotDriving || driveDockState.dockingInProgress;
|
||||
const disabled = !roverId;
|
||||
const [speedMode, setSpeedMode] = useState('normal');
|
||||
const [activeInputLabel, setActiveInputLabel] = useState('stop');
|
||||
const speedModeRef = useRef('normal');
|
||||
const activeCellRef = useRef(null);
|
||||
const repeatTimerRef = useRef(null);
|
||||
@@ -112,6 +113,7 @@ function MobileJoystickPanel({ layout }) {
|
||||
(lastEvent = 'stop') => {
|
||||
clearRepeatTimer();
|
||||
activeCellRef.current = null;
|
||||
setActiveInputLabel('stop');
|
||||
sendDriveCell({ id: 'stop', actions: [] }, lastEvent, 'normal');
|
||||
},
|
||||
[clearRepeatTimer, sendDriveCell],
|
||||
@@ -129,6 +131,7 @@ function MobileJoystickPanel({ layout }) {
|
||||
(cell) => {
|
||||
if (disabled) return;
|
||||
activeCellRef.current = cell;
|
||||
setActiveInputLabel(cell?.label || 'stop');
|
||||
sendDriveCell(cell, 'move');
|
||||
startRepeatTimer();
|
||||
},
|
||||
@@ -155,8 +158,11 @@ function MobileJoystickPanel({ layout }) {
|
||||
stopDrivePad('disabled');
|
||||
}, [disabled, stopDrivePad]);
|
||||
|
||||
// The mobile control column itself also blocks selection because Safari can
|
||||
// otherwise start selecting text from a child label before the child's pointer
|
||||
// handler gets enough movement to claim the gesture.
|
||||
const fillClass = dockedNotDriving ? 'max-h-screen self-start' : '';
|
||||
const containerClass = `flex h-full flex-col gap-0.5 text-slate-100 ${fillClass}`;
|
||||
const containerClass = `mobile-touch-control flex h-full flex-col gap-0.5 text-slate-100 ${fillClass}`;
|
||||
|
||||
return (
|
||||
<div className={containerClass} data-mobile-layout={layout}>
|
||||
@@ -167,8 +173,10 @@ function MobileJoystickPanel({ layout }) {
|
||||
compactHeightClass="min-h-[5rem]"
|
||||
/>
|
||||
{!expandAction ? (
|
||||
<div className="flex flex-1 min-h-0 flex-col overflow-hidden rounded-xl border-2 border-slate-700 bg-slate-900/70 text-slate-100 shadow-md">
|
||||
<div className="grid grid-cols-3 gap-0.5 border-b border-slate-700 bg-slate-950/80 p-0.5">
|
||||
// Keep the drive launcher card fully opaque so camera video or page
|
||||
// backgrounds never show through the target the driver is trying to hold.
|
||||
<div className="mobile-touch-control flex flex-1 min-h-0 flex-col overflow-hidden rounded-xl border-2 border-slate-700 bg-slate-900 text-slate-100 shadow-md">
|
||||
<div className="mobile-touch-control grid grid-cols-3 gap-0.5 border-b border-slate-700 bg-slate-950 p-0.5">
|
||||
{DRIVE_PAD_SPEED_MODES.map((mode) => {
|
||||
const active = speedMode === mode.id;
|
||||
const speedValue =
|
||||
@@ -181,7 +189,7 @@ function MobileJoystickPanel({ layout }) {
|
||||
<button
|
||||
key={mode.id}
|
||||
type="button"
|
||||
className={`min-h-9 rounded-md px-1 text-xs font-semibold ${
|
||||
className={`mobile-touch-control min-h-9 rounded-md px-1 text-xs font-semibold ${
|
||||
active
|
||||
? 'bg-cyan-300 text-slate-950'
|
||||
: 'bg-slate-800 text-slate-200'
|
||||
@@ -195,8 +203,9 @@ function MobileJoystickPanel({ layout }) {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="min-h-0 flex-1">
|
||||
<div className="mobile-touch-control min-h-0 flex-1">
|
||||
<FloatingJoystick
|
||||
activeInputLabel={activeInputLabel}
|
||||
disabled={disabled}
|
||||
onCellChange={handleCellChange}
|
||||
onStop={() => stopDrivePad('stop')}
|
||||
@@ -262,8 +271,8 @@ function MobileActionsColumnContent() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid h-full min-h-0 w-full grid-rows-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)] gap-0.5 text-slate-100">
|
||||
<div className="grid min-h-0 grid-rows-2 gap-0.5">
|
||||
<div className="mobile-touch-control grid h-full min-h-0 w-full grid-rows-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)] gap-0.5 text-slate-100">
|
||||
<div className="mobile-touch-control grid min-h-0 grid-rows-2 gap-0.5">
|
||||
<MobileAuxButton
|
||||
id="aux-vac-forward"
|
||||
label="Vacuum Forward"
|
||||
@@ -283,9 +292,11 @@ function MobileActionsColumnContent() {
|
||||
onRelease={handleAuxRelease}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex min-h-0 items-stretch gap-0.5">
|
||||
<div className="mobile-touch-control flex min-h-0 items-stretch gap-0.5">
|
||||
{cameraEnabled ? (
|
||||
<div className="flex-1 min-h-0 rounded bg-zinc-950 p-0.25">
|
||||
// Match the desktop camera tilt card's emerald styling so the vertical
|
||||
// mobile control reads as the same feature in a phone-sized layout.
|
||||
<div className="mobile-touch-control flex-1 min-h-0 rounded-xl border-2 border-emerald-300/70 bg-emerald-900 px-1 py-1 text-emerald-50">
|
||||
<CameraTiltControl
|
||||
value={cameraValue}
|
||||
min={cameraMin}
|
||||
@@ -294,13 +305,13 @@ function MobileActionsColumnContent() {
|
||||
disabled={cameraDisabled}
|
||||
onChange={setServoAngle}
|
||||
orientation="vertical"
|
||||
label="Camera Tilt"
|
||||
labelClass="text-sm font-semibold text-white [writing-mode:vertical-rl] rotate-180"
|
||||
labelRowClass="text-[0.7rem] text-slate-300"
|
||||
valueClass="font-mono text-slate-200"
|
||||
label="Camera tilt"
|
||||
labelClass="mobile-touch-control text-sm font-semibold text-emerald-50 [writing-mode:vertical-rl] rotate-180"
|
||||
labelRowClass="mobile-touch-control text-[0.7rem] text-emerald-100"
|
||||
valueClass="font-mono text-slate-100"
|
||||
className="h-full gap-0"
|
||||
sliderClass="h-full w-7"
|
||||
accentClass="accent-cyan-400"
|
||||
sliderClass="mobile-touch-control mobile-drag-control h-full w-7"
|
||||
accentClass="accent-emerald-400"
|
||||
showEndpoints={false}
|
||||
showValue={false}
|
||||
/>
|
||||
@@ -315,7 +326,7 @@ function MobileActionsColumnContent() {
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="min-h-0">
|
||||
<div className="mobile-touch-control min-h-0">
|
||||
{hornAvailable ? (
|
||||
<HornControl
|
||||
disabled={disabled || hornBlocked}
|
||||
@@ -336,7 +347,7 @@ function MobileActionsColumnContent() {
|
||||
|
||||
export function MobileActionsColumn({ layout, className = '' }) {
|
||||
return (
|
||||
<div className={`flex flex-col gap-0.5 ${className}`.trim()} data-mobile-layout={layout}>
|
||||
<div className={`mobile-touch-control flex flex-col gap-0.5 ${className}`.trim()} data-mobile-layout={layout}>
|
||||
<MobileActionsColumnContent />
|
||||
</div>
|
||||
);
|
||||
@@ -344,7 +355,7 @@ export function MobileActionsColumn({ layout, className = '' }) {
|
||||
|
||||
export function MobileDriveColumn({ layout, className = '' }) {
|
||||
return (
|
||||
<div className={`flex flex-col gap-0.5 ${className}`.trim()} data-mobile-layout={layout}>
|
||||
<div className={`mobile-touch-control flex flex-col gap-0.5 ${className}`.trim()} data-mobile-layout={layout}>
|
||||
<MobileJoystickPanel layout={layout === 'landscape' ? 'landscape' : 'portrait'} />
|
||||
</div>
|
||||
);
|
||||
@@ -359,8 +370,10 @@ export default function MobilePortraitControls({ swapColumns = false }) {
|
||||
? <MobileActionsColumn layout="portrait" className={columnHeight} />
|
||||
: <MobileDriveColumn layout="portrait" className={columnHeight} />;
|
||||
return (
|
||||
<section className="panel">
|
||||
<div className="grid grid-cols-2 gap-0.5 items-stretch">
|
||||
// Portrait controls need layout grouping but no painted panel behind them;
|
||||
// each child control owns its own visible surface.
|
||||
<section className="mobile-touch-control text-white">
|
||||
<div className="mobile-touch-control grid grid-cols-2 gap-0.5 items-stretch">
|
||||
{firstColumn}
|
||||
{secondColumn}
|
||||
</div>
|
||||
|
||||
@@ -40,8 +40,11 @@ export default function NightVisionControl({
|
||||
};
|
||||
|
||||
const buttonClasses = useMemo(() => {
|
||||
// Night vision is used as a direct mobile press target, so selection and
|
||||
// Safari callout suppression live on the button itself rather than only on
|
||||
// the surrounding mobile column.
|
||||
const base =
|
||||
'group flex w-full flex-col items-center justify-center gap-0.35 rounded-xl border-2 px-1 py-0.75 text-center select-none no-touch-select';
|
||||
'mobile-touch-control group flex w-full flex-col items-center justify-center gap-0.35 rounded-xl border-2 px-1 py-0.75 text-center select-none no-touch-select';
|
||||
const active = 'border-emerald-300/70 bg-emerald-800 text-emerald-50 hover:bg-emerald-700';
|
||||
const inactive = 'border-amber-300/70 bg-amber-900 text-amber-50 hover:bg-amber-800';
|
||||
return [base, displayOn ? active : inactive, 'disabled:opacity-50', heightClass, className]
|
||||
|
||||
Reference in New Issue
Block a user