mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 01:21:20 -04:00
763 lines
32 KiB
React
763 lines
32 KiB
React
// Gamepad Mapping Settings Content
|
|
// Purpose: Defines the Gamepad Mapping Settings Content module and the local helpers/components used in this file.
|
|
// Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { useSettingsNamespace } from '../../settings/index.js';
|
|
import { GAMEPAD_PROFILE_DEFAULT, GAMEPAD_SETTINGS_DEFAULTS } from '../../settings/namespaces.js';
|
|
import {
|
|
computeGamepadOutputs,
|
|
createProfileForPad,
|
|
resolveGamepadProfile,
|
|
} from '../../controls/inputs/gamepadBindings.js';
|
|
import { useGamepadHubState } from '../../controls/inputs/gamepadHub.js';
|
|
import { acquireControllerControlLock } from '../../controls/inputs/controllerRuntime.js';
|
|
import { describeController, formatControllerBinding } from '../../controls/inputs/controllerLabels.js';
|
|
import CardFrame from '../CardFrame/index.jsx';
|
|
import SliderField from './SliderField.jsx';
|
|
import { ACTIONS, NUMBER_FORMAT } from './constants.js';
|
|
import {
|
|
groupActions,
|
|
pickActivePad,
|
|
snapshotBaseline,
|
|
buildDescriptorFromCapture,
|
|
} from './helpers.js';
|
|
|
|
function SettingsGroupLabel({ children }) {
|
|
// Section labels stay visually modest so this panel matches the rest of the app, while white
|
|
// text keeps them readable without uppercase or oversized type.
|
|
return <p className="mx-auto w-full max-w-lg text-sm font-semibold text-white">{children}</p>;
|
|
}
|
|
|
|
function physicalInputKey(source) {
|
|
/* Inversion and activation thresholds describe how an input is interpreted, not which physical
|
|
control it is. Ignoring those fields ensures Axis 3 cannot silently own both a tank track and
|
|
camera tilt merely because one binding happens to be inverted. */
|
|
if (source?.kind === 'axis' || source?.kind === 'axisButton') return `axis:${source.index}`;
|
|
if (source?.kind === 'button' || source?.kind === 'buttonAxis') return `button:${source.index}`;
|
|
return JSON.stringify(source);
|
|
}
|
|
|
|
function sourcesUseSamePhysicalInput(left, right) {
|
|
if (!left || !right) return false;
|
|
return physicalInputKey(left) === physicalInputKey(right);
|
|
}
|
|
|
|
function actionDriveMode(actionId) {
|
|
return ACTIONS.find((action) => action.id === actionId)?.driveMode ?? null;
|
|
}
|
|
|
|
function CurveField({ label, value, onChange }) {
|
|
return (
|
|
<label className="mx-auto block w-full max-w-lg rounded bg-neutral-800/80 px-1.5 py-1">
|
|
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 text-sm text-white">
|
|
<span className="font-semibold">{label}</span>
|
|
<select
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
className="rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 text-sm text-white"
|
|
>
|
|
<option value="linear">Linear</option>
|
|
<option value="expo">Fine center control</option>
|
|
</select>
|
|
</div>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function MappingRow({
|
|
action,
|
|
source,
|
|
sourceLabel,
|
|
liveValue,
|
|
isCapturing,
|
|
onClear,
|
|
onCapture,
|
|
onInvert,
|
|
disabled,
|
|
}) {
|
|
// Mapping rows are constrained to a readable width so the source text and buttons remain
|
|
// visually connected. Buttons wrap on very narrow panes instead of forcing tiny text.
|
|
return (
|
|
<div className="mx-auto grid w-full max-w-lg grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 rounded bg-neutral-800/80 px-1.5 py-1 text-sm max-[520px]:grid-cols-1">
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-1">
|
|
<p className="font-semibold leading-snug text-white">{action.label}</p>
|
|
<span className={`h-1.5 w-1.5 rounded-full ${liveValue ? 'bg-emerald-400' : 'bg-neutral-600'}`} aria-hidden="true" />
|
|
</div>
|
|
<p className="mt-0.5 text-xs leading-snug text-white">{sourceLabel}</p>
|
|
</div>
|
|
<div className="flex flex-wrap items-center justify-end gap-1 max-[520px]:justify-start">
|
|
{/* Axis-pair controls expose independent inversion because stick X/Y directions often
|
|
differ between browser mappings. Keeping those buttons beside the source avoids
|
|
making users hunt across a wide row while testing a binding. */}
|
|
{action.kind === 'axisPair' && (
|
|
<>
|
|
<button
|
|
type="button"
|
|
disabled={disabled || !source}
|
|
onClick={() => onInvert(action, 'invertX')}
|
|
className="button-dark px-1 py-0.5 text-xs font-medium disabled:opacity-50"
|
|
>
|
|
Invert X
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={disabled || !source}
|
|
onClick={() => onInvert(action, 'invertY')}
|
|
className="button-dark px-1 py-0.5 text-xs font-medium disabled:opacity-50"
|
|
>
|
|
Invert Y
|
|
</button>
|
|
</>
|
|
)}
|
|
{/* Single-axis mappings only have one inversion flag, so they render the smaller control
|
|
set and keep button clutter down for trigger-like bindings. */}
|
|
{action.kind === 'axis' && (
|
|
<button
|
|
type="button"
|
|
disabled={disabled || !source}
|
|
onClick={() => onInvert(action)}
|
|
className="button-dark px-1 py-0.5 text-xs font-medium disabled:opacity-50"
|
|
>
|
|
Invert
|
|
</button>
|
|
)}
|
|
{/* Clear and Capture are always present because they are the primary row actions. They
|
|
wrap with the inversion controls on narrow panes instead of shrinking text. */}
|
|
<button type="button" disabled={disabled} onClick={() => onClear(action)} className="button-dark px-1 py-0.5 text-xs disabled:opacity-50">
|
|
Clear
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
onClick={() => onCapture(action)}
|
|
className={`${
|
|
isCapturing
|
|
? 'rounded-md bg-emerald-500 px-1 py-0.5 text-emerald-950 hover:bg-emerald-400'
|
|
: 'button-dark px-1 py-0.5'
|
|
} text-xs font-medium disabled:opacity-50`}
|
|
>
|
|
{isCapturing ? 'Waiting...' : 'Capture'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function GamepadMappingSettings() {
|
|
const hubState = useGamepadHubState();
|
|
const { value: gamepadSettings, save: saveGamepadSettings } = useSettingsNamespace(
|
|
'gamepad',
|
|
GAMEPAD_SETTINGS_DEFAULTS,
|
|
);
|
|
const [captureAction, setCaptureAction] = useState(null);
|
|
const [actionFilter, setActionFilter] = useState('');
|
|
const baselineRef = useRef(null);
|
|
const captureCandidateRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
/* The settings panel remains a live control surface so operators can tune calibration while
|
|
driving and immediately feel the result. Only capture owns the controller lock: without
|
|
that narrow guard, pressing the input being assigned could also drive a wheel, start a
|
|
motor, or toggle rover hardware before the new binding is saved. */
|
|
if (!captureAction) return undefined;
|
|
return acquireControllerControlLock('controller-binding-capture');
|
|
}, [captureAction]);
|
|
|
|
const activePad = useMemo(
|
|
() => pickActivePad(hubState.pads, gamepadSettings.activeInstanceKey),
|
|
[hubState.pads, gamepadSettings.activeInstanceKey],
|
|
);
|
|
|
|
const activeSignature = activePad?.signature ?? null;
|
|
const activeProfile = useMemo(() => {
|
|
const storedProfile = !activeSignature
|
|
? gamepadSettings?.defaults?.profile ?? GAMEPAD_PROFILE_DEFAULT
|
|
: (
|
|
gamepadSettings?.profiles?.[activeSignature] ??
|
|
gamepadSettings?.defaults?.profile ??
|
|
GAMEPAD_PROFILE_DEFAULT
|
|
);
|
|
return resolveGamepadProfile(storedProfile, GAMEPAD_PROFILE_DEFAULT);
|
|
}, [activeSignature, gamepadSettings?.defaults?.profile, gamepadSettings?.profiles]);
|
|
const driveMode = activeProfile.calibration?.driveMode === 'tank' ? 'tank' : 'single';
|
|
const grouped = useMemo(() => {
|
|
const query = actionFilter.trim().toLowerCase();
|
|
/* Only the active steering scheme is shown. Keeping inactive track/stick bindings out of the
|
|
mapping list prevents operators from tuning controls that currently have no runtime effect. */
|
|
const modeActions = ACTIONS.filter(
|
|
(action) => !action.driveMode || action.driveMode === driveMode,
|
|
);
|
|
const visibleActions = query
|
|
? modeActions.filter((action) => `${action.label} ${action.section}`.toLowerCase().includes(query))
|
|
: modeActions;
|
|
return groupActions(visibleActions);
|
|
}, [actionFilter, driveMode]);
|
|
|
|
useEffect(() => {
|
|
if (!activePad || !activeSignature) return;
|
|
if (gamepadSettings?.profiles?.[activeSignature]) return;
|
|
saveGamepadSettings((prev) => {
|
|
const current = prev ?? GAMEPAD_SETTINGS_DEFAULTS;
|
|
if (current.profiles?.[activeSignature]) return current;
|
|
const base = resolveGamepadProfile(current?.defaults?.profile, GAMEPAD_PROFILE_DEFAULT);
|
|
const nextProfile = createProfileForPad(activePad, base);
|
|
return {
|
|
...current,
|
|
profiles: {
|
|
...(current.profiles ?? {}),
|
|
[activeSignature]: nextProfile,
|
|
},
|
|
};
|
|
});
|
|
}, [activePad, activeSignature, gamepadSettings?.profiles, saveGamepadSettings]);
|
|
|
|
useEffect(() => {
|
|
baselineRef.current = null;
|
|
captureCandidateRef.current = null;
|
|
}, [captureAction, activeSignature]);
|
|
|
|
useEffect(() => {
|
|
if (!captureAction || !activePad) return;
|
|
if (!baselineRef.current) {
|
|
baselineRef.current = snapshotBaseline(activePad);
|
|
return;
|
|
}
|
|
let descriptor = buildDescriptorFromCapture(activePad, baselineRef.current, captureAction);
|
|
if (captureAction.kind === 'button' && descriptor?.kind !== 'chord') {
|
|
const now = typeof performance !== 'undefined' ? performance.now() : Date.now();
|
|
if (descriptor && !captureCandidateRef.current) {
|
|
/* Give the user a short window to add a modifier after the first button. Immediate capture
|
|
makes chords physically impossible because browser frames never report both presses at
|
|
precisely the same instant. */
|
|
captureCandidateRef.current = { descriptor, startedAt: now };
|
|
return;
|
|
}
|
|
if (!captureCandidateRef.current) return;
|
|
if (now - captureCandidateRef.current.startedAt < 220) return;
|
|
/* A quick tap may already be released when the chord window expires. Preserve the original
|
|
candidate so capture completes normally instead of waiting for an unrelated later press. */
|
|
descriptor = captureCandidateRef.current.descriptor;
|
|
}
|
|
if (!descriptor) return;
|
|
saveGamepadSettings((prev) => {
|
|
const current = prev ?? GAMEPAD_SETTINGS_DEFAULTS;
|
|
const baseProfile = resolveGamepadProfile(
|
|
current.profiles?.[activeSignature] ?? current?.defaults?.profile,
|
|
GAMEPAD_PROFILE_DEFAULT,
|
|
);
|
|
const bindingsWithoutConflict = Object.fromEntries(
|
|
Object.entries(baseProfile.bindings ?? {}).map(([actionId, binding]) => {
|
|
if (actionId === captureAction.id) return [actionId, binding];
|
|
const otherMode = actionDriveMode(actionId);
|
|
const captureMode = actionDriveMode(captureAction.id);
|
|
/* Opposing mode-only actions may intentionally reuse a physical input because runtime
|
|
never activates them together. Common actions still conflict with both modes. */
|
|
if (captureMode && otherMode && captureMode !== otherMode) return [actionId, binding];
|
|
const sources = (binding?.sources ?? []).filter(
|
|
(source) => !sourcesUseSamePhysicalInput(source, descriptor),
|
|
);
|
|
return [actionId, { ...binding, sources }];
|
|
}),
|
|
);
|
|
const nextProfile = {
|
|
...baseProfile,
|
|
bindings: {
|
|
/* A physical input has one owner by default. Removing an exact duplicate avoids two
|
|
toggles firing from one press while still allowing deliberate multi-button chords. */
|
|
...bindingsWithoutConflict,
|
|
[captureAction.id]: {
|
|
...(baseProfile.bindings?.[captureAction.id] ?? {}),
|
|
kind: captureAction.kind,
|
|
sources: [descriptor],
|
|
},
|
|
},
|
|
};
|
|
return {
|
|
...current,
|
|
profiles: {
|
|
...(current.profiles ?? {}),
|
|
[activeSignature]: nextProfile,
|
|
},
|
|
};
|
|
});
|
|
/* Hub snapshots drive this effect, but capture state is React-owned UI state. Deferring its
|
|
reset to a microtask avoids a synchronous state cascade inside the effect while the id
|
|
guard prevents an older completion from cancelling a newer capture request. */
|
|
const completedActionId = captureAction.id;
|
|
queueMicrotask(() => {
|
|
setCaptureAction((current) => current?.id === completedActionId ? null : current);
|
|
});
|
|
}, [activePad, activeSignature, captureAction, saveGamepadSettings]);
|
|
|
|
const setActiveInstanceKey = useCallback(
|
|
(instanceKey) => {
|
|
saveGamepadSettings((prev) => ({
|
|
...(prev ?? GAMEPAD_SETTINGS_DEFAULTS),
|
|
activeInstanceKey: instanceKey || null,
|
|
}));
|
|
},
|
|
[saveGamepadSettings],
|
|
);
|
|
|
|
const updateCalibration = useCallback(
|
|
(patch) => {
|
|
saveGamepadSettings((prev) => {
|
|
const current = prev ?? GAMEPAD_SETTINGS_DEFAULTS;
|
|
const storedProfile =
|
|
(activeSignature && current.profiles?.[activeSignature]) ??
|
|
current?.defaults?.profile;
|
|
const baseProfile = resolveGamepadProfile(storedProfile, GAMEPAD_PROFILE_DEFAULT);
|
|
const nextProfile = {
|
|
...baseProfile,
|
|
calibration: {
|
|
...(baseProfile.calibration ?? {}),
|
|
...patch,
|
|
},
|
|
};
|
|
if (!activeSignature) {
|
|
return {
|
|
...current,
|
|
defaults: {
|
|
...(current.defaults ?? {}),
|
|
profile: nextProfile,
|
|
},
|
|
};
|
|
}
|
|
return {
|
|
...current,
|
|
profiles: {
|
|
...(current.profiles ?? {}),
|
|
[activeSignature]: nextProfile,
|
|
},
|
|
};
|
|
});
|
|
},
|
|
[activeSignature, saveGamepadSettings],
|
|
);
|
|
|
|
const updateProfile = useCallback(
|
|
(patch) => {
|
|
saveGamepadSettings((prev) => {
|
|
const current = prev ?? GAMEPAD_SETTINGS_DEFAULTS;
|
|
const storedProfile =
|
|
(activeSignature && current.profiles?.[activeSignature]) ??
|
|
current?.defaults?.profile;
|
|
const nextProfile = {
|
|
...resolveGamepadProfile(storedProfile, GAMEPAD_PROFILE_DEFAULT),
|
|
...patch,
|
|
};
|
|
if (!activeSignature) {
|
|
return {
|
|
...current,
|
|
defaults: { ...(current.defaults ?? {}), profile: nextProfile },
|
|
};
|
|
}
|
|
return {
|
|
...current,
|
|
profiles: { ...(current.profiles ?? {}), [activeSignature]: nextProfile },
|
|
};
|
|
});
|
|
},
|
|
[activeSignature, saveGamepadSettings],
|
|
);
|
|
|
|
const resetActiveProfile = useCallback(() => {
|
|
/* Resetting only the selected hardware avoids erasing carefully tuned profiles for other
|
|
controllers. Device metadata is rebuilt so the profile remains recognizable offline. */
|
|
const nextProfile = createProfileForPad(activePad, GAMEPAD_PROFILE_DEFAULT);
|
|
updateProfile(nextProfile);
|
|
setCaptureAction(null);
|
|
}, [activePad, updateProfile]);
|
|
|
|
const updateBinding = useCallback(
|
|
(actionId, updater) => {
|
|
saveGamepadSettings((prev) => {
|
|
const current = prev ?? GAMEPAD_SETTINGS_DEFAULTS;
|
|
const storedProfile =
|
|
(activeSignature && current.profiles?.[activeSignature]) ??
|
|
current?.defaults?.profile;
|
|
const baseProfile = resolveGamepadProfile(storedProfile, GAMEPAD_PROFILE_DEFAULT);
|
|
const nextBinding = updater(baseProfile.bindings?.[actionId] ?? {});
|
|
const nextProfile = {
|
|
...baseProfile,
|
|
bindings: {
|
|
...(baseProfile.bindings ?? {}),
|
|
[actionId]: nextBinding,
|
|
},
|
|
};
|
|
if (!activeSignature) {
|
|
return {
|
|
...current,
|
|
defaults: {
|
|
...(current.defaults ?? {}),
|
|
profile: nextProfile,
|
|
},
|
|
};
|
|
}
|
|
return {
|
|
...current,
|
|
profiles: {
|
|
...(current.profiles ?? {}),
|
|
[activeSignature]: nextProfile,
|
|
},
|
|
};
|
|
});
|
|
},
|
|
[activeSignature, saveGamepadSettings],
|
|
);
|
|
|
|
const handleClear = useCallback(
|
|
(action) => {
|
|
updateBinding(action.id, (binding) => ({
|
|
...binding,
|
|
sources: [],
|
|
}));
|
|
},
|
|
[updateBinding],
|
|
);
|
|
|
|
const handleInvert = useCallback(
|
|
(action, axisKey) => {
|
|
updateBinding(action.id, (binding) => {
|
|
const sources = Array.isArray(binding.sources) ? [...binding.sources] : [];
|
|
if (!sources[0]) return binding;
|
|
const next = { ...sources[0] };
|
|
if (axisKey === 'invertX') {
|
|
next.invertX = !next.invertX;
|
|
} else if (axisKey === 'invertY') {
|
|
next.invertY = !next.invertY;
|
|
} else {
|
|
next.invert = !next.invert;
|
|
}
|
|
sources[0] = next;
|
|
return { ...binding, sources };
|
|
});
|
|
},
|
|
[updateBinding],
|
|
);
|
|
|
|
const diagnostics = useMemo(() => {
|
|
if (!activePad) return null;
|
|
const outputs = computeGamepadOutputs(activePad, activeProfile);
|
|
return { outputs };
|
|
}, [activePad, activeProfile]);
|
|
const controllerDescription = useMemo(() => describeController(activePad), [activePad]);
|
|
|
|
const liveValueForAction = useCallback((actionId) => {
|
|
const outputs = diagnostics?.outputs;
|
|
if (!outputs) return false;
|
|
if (actionId === 'drive') return Math.hypot(outputs.driveVector.x, outputs.driveVector.y) > 0.01;
|
|
if (actionId === 'tankLeft') return Math.abs(outputs.tankTracks?.left ?? 0) > 0.01;
|
|
if (actionId === 'tankRight') return Math.abs(outputs.tankTracks?.right ?? 0) > 0.01;
|
|
if (actionId === 'tankCameraUp' || actionId === 'tankCameraDown') {
|
|
return Boolean(outputs.buttons[actionId]);
|
|
}
|
|
if (actionId === 'cameraTilt') return Math.abs(outputs.cameraAxis) > 0.01;
|
|
if (actionId === 'mainBrush') return Math.abs(outputs.auxAxis.main) > 0.01;
|
|
if (actionId === 'sideBrush') return Math.abs(outputs.auxAxis.side) > 0.01;
|
|
return Boolean(outputs.buttons[actionId]);
|
|
}, [diagnostics]);
|
|
|
|
return (
|
|
<CardFrame
|
|
title="Controller"
|
|
meta={activePad ? 'Move sticks or press buttons to bind' : 'Connect a controller to configure.'}
|
|
actions={
|
|
<button type="button" disabled={!activePad} onClick={resetActiveProfile} className="button-dark px-1 py-0.5 text-xs disabled:opacity-50">
|
|
Reset profile
|
|
</button>
|
|
}
|
|
bodyClassName="space-y-2 p-1 text-sm"
|
|
>
|
|
{captureAction && (
|
|
<div className="mx-auto flex w-full max-w-lg items-center justify-between gap-1 rounded bg-emerald-950/50 px-1.5 py-1 text-sm text-white">
|
|
<span>Release controls, then move or press the input for {captureAction.label}.</span>
|
|
<button type="button" onClick={() => setCaptureAction(null)} className="button-dark px-1 py-0.5 text-xs">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-1">
|
|
<SettingsGroupLabel>Connected controller</SettingsGroupLabel>
|
|
{hubState.error ? (
|
|
<p className="mx-auto w-full max-w-lg rounded border border-red-500/60 bg-red-950/40 px-1.5 py-1 text-sm text-white">
|
|
Controller access failed: {hubState.error}
|
|
</p>
|
|
) : hubState.pads.length === 0 ? (
|
|
<p className="mx-auto w-full max-w-lg text-sm text-white">
|
|
{hubState.supported === false
|
|
? 'This browser does not support controllers.'
|
|
: 'No controller detected. Connect it, focus this page, then press a button.'}
|
|
</p>
|
|
) : (
|
|
<div className="mx-auto grid w-full max-w-lg grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 rounded bg-neutral-800/80 px-1.5 py-1 text-sm max-[420px]:grid-cols-1">
|
|
<select
|
|
value={activePad?.instanceKey ?? ''}
|
|
onChange={(event) => setActiveInstanceKey(event.target.value)}
|
|
className="min-w-0 rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 text-sm text-white"
|
|
>
|
|
{hubState.pads.map((pad) => (
|
|
<option key={pad.instanceKey} value={pad.instanceKey}>
|
|
{pad.id || 'Unknown controller'} (slot {pad.index + 1})
|
|
</option>
|
|
))}
|
|
</select>
|
|
<span className="rounded bg-neutral-900 px-1 py-0.5 text-xs text-white">
|
|
{activePad?.mapping ?? 'unknown'}
|
|
</span>
|
|
<p className="col-span-full truncate text-xs text-slate-300" title={activePad?.id}>
|
|
{controllerDescription.description ?? activePad?.id}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<SettingsGroupLabel>Calibration</SettingsGroupLabel>
|
|
{/* Calibration controls stay in one stacked column because range inputs become harder to
|
|
tune when squeezed into multiple narrow columns. */}
|
|
<div className="grid gap-1">
|
|
<label className="mx-auto block w-full max-w-lg rounded bg-neutral-800/80 px-1.5 py-1">
|
|
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 text-sm text-white">
|
|
<span className="font-semibold">Button prompts</span>
|
|
<select
|
|
value={activeProfile.promptStyle ?? 'auto'}
|
|
onChange={(event) => updateProfile({ promptStyle: event.target.value })}
|
|
className="rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 text-sm text-white"
|
|
>
|
|
<option value="auto">Automatic</option>
|
|
<option value="xbox">Xbox</option>
|
|
<option value="playstation">PlayStation</option>
|
|
<option value="switch">Nintendo</option>
|
|
<option value="standard">Generic</option>
|
|
</select>
|
|
</div>
|
|
<p className="mt-0.5 text-xs leading-snug text-white">Override this only when the browser reports the controller incorrectly.</p>
|
|
</label>
|
|
<label className="mx-auto block w-full max-w-lg rounded bg-neutral-800/80 px-1.5 py-1">
|
|
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1.5 text-sm text-white">
|
|
<span className="min-w-0 font-semibold text-white">Steering mode</span>
|
|
<select
|
|
value={driveMode}
|
|
onChange={(event) => {
|
|
updateCalibration({ driveMode: event.target.value });
|
|
setCaptureAction(null);
|
|
}}
|
|
className="rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 text-sm text-white"
|
|
>
|
|
<option value="single">Single stick</option>
|
|
<option value="tank">Tank sticks</option>
|
|
</select>
|
|
</div>
|
|
<p className="mt-0.5 text-xs leading-snug text-white">
|
|
Tank mode controls the left and right wheels with separate stick axes.
|
|
</p>
|
|
</label>
|
|
<SliderField
|
|
label="Drive deadzone"
|
|
description="Ignore small drive stick drift"
|
|
min={0}
|
|
max={0.6}
|
|
step={0.01}
|
|
value={activeProfile.calibration?.driveDeadzone ?? 0.18}
|
|
onChange={(value) => updateCalibration({ driveDeadzone: value })}
|
|
/>
|
|
<CurveField
|
|
label="Drive response"
|
|
value={activeProfile.calibration?.driveCurve ?? 'linear'}
|
|
onChange={(value) => updateCalibration({ driveCurve: value })}
|
|
/>
|
|
<SliderField
|
|
label="Full-stick speed"
|
|
description="Maximum wheel output at full stick"
|
|
min={50}
|
|
max={500}
|
|
step={10}
|
|
value={activeProfile.calibration?.baseSpeed ?? 500}
|
|
onChange={(value) => updateCalibration({ baseSpeed: value })}
|
|
/>
|
|
<SliderField
|
|
label="Turbo drive speed"
|
|
description="Maximum output while holding the turbo modifier"
|
|
min={50}
|
|
max={500}
|
|
step={10}
|
|
value={activeProfile.calibration?.turboSpeed ?? 500}
|
|
onChange={(value) => updateCalibration({ turboSpeed: value })}
|
|
/>
|
|
{driveMode === 'single' && (
|
|
<>
|
|
{/* Analog-only settings are hidden in tank mode because its two D-pad camera
|
|
directions are digital velocity inputs. The values remain saved for when the
|
|
operator returns to single-stick steering. */}
|
|
<SliderField
|
|
label="Velocity camera deadzone"
|
|
description="Absolute mode always uses a 0.01 deadzone"
|
|
min={0}
|
|
max={0.4}
|
|
step={0.01}
|
|
value={activeProfile.calibration?.cameraDeadzone ?? 0.08}
|
|
onChange={(value) => updateCalibration({ cameraDeadzone: value })}
|
|
/>
|
|
<CurveField
|
|
label="Camera response"
|
|
value={activeProfile.calibration?.cameraCurve ?? 'linear'}
|
|
onChange={(value) => updateCalibration({ cameraCurve: value })}
|
|
/>
|
|
</>
|
|
)}
|
|
<SliderField
|
|
label="Aux deadzone"
|
|
description="Ignore small trigger noise"
|
|
min={0}
|
|
max={0.4}
|
|
step={0.01}
|
|
value={activeProfile.calibration?.auxDeadzone ?? 0.05}
|
|
onChange={(value) => updateCalibration({ auxDeadzone: value })}
|
|
/>
|
|
<CurveField
|
|
label="Brush response"
|
|
value={activeProfile.calibration?.auxCurve ?? 'linear'}
|
|
onChange={(value) => updateCalibration({ auxCurve: value })}
|
|
/>
|
|
<SliderField
|
|
label="Side brush scale"
|
|
description="Scale side brush output"
|
|
min={0.3}
|
|
max={1}
|
|
step={0.05}
|
|
value={activeProfile.calibration?.auxSideScale ?? 0.55}
|
|
onChange={(value) => updateCalibration({ auxSideScale: value })}
|
|
/>
|
|
<SliderField
|
|
label="Precision speed"
|
|
description="Maximum drive speed while holding the precision modifier"
|
|
min={20}
|
|
max={250}
|
|
step={5}
|
|
value={activeProfile.calibration?.precisionSpeed ?? 100}
|
|
onChange={(value) => updateCalibration({ precisionSpeed: value })}
|
|
/>
|
|
{driveMode === 'single' && (
|
|
<label className="mx-auto block w-full max-w-lg rounded bg-neutral-800/80 px-1.5 py-1">
|
|
{/* Camera mode is styled like the sliders so calibration controls read as one group
|
|
even though this specific setting is a select instead of a range input. */}
|
|
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1.5 text-sm text-white">
|
|
<span className="min-w-0 font-semibold text-white">Camera mode</span>
|
|
<select
|
|
value={activeProfile.calibration?.cameraMode ?? 'velocity'}
|
|
onChange={(event) => updateCalibration({ cameraMode: event.target.value })}
|
|
className="rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 text-sm text-white"
|
|
>
|
|
<option value="absolute">Absolute</option>
|
|
<option value="velocity">Velocity</option>
|
|
</select>
|
|
</div>
|
|
<p className="mt-0.5 text-xs leading-snug text-white">Absolute maps stick to angle; velocity moves over time.</p>
|
|
</label>
|
|
)}
|
|
<SliderField
|
|
label="Camera sensitivity"
|
|
description="Velocity mode degrees per second"
|
|
min={10}
|
|
max={180}
|
|
step={5}
|
|
value={activeProfile.calibration?.cameraSensitivity ?? 60}
|
|
onChange={(value) => updateCalibration({ cameraSensitivity: value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="mx-auto block w-full max-w-lg">
|
|
<span className="sr-only">Filter controller actions</span>
|
|
<input
|
|
type="search"
|
|
value={actionFilter}
|
|
onChange={(event) => setActionFilter(event.target.value)}
|
|
placeholder="Find a controller action"
|
|
className="field-input w-full px-1.5 py-1 text-sm"
|
|
/>
|
|
</label>
|
|
{Object.entries(grouped).map(([section, actions]) => (
|
|
<div key={section} className="space-y-1">
|
|
<SettingsGroupLabel>{section}</SettingsGroupLabel>
|
|
<div className="grid gap-1">
|
|
{actions.map((action) => {
|
|
const binding = activeProfile.bindings?.[action.id];
|
|
const source = binding?.sources?.[0] ?? null;
|
|
// The binding data is unchanged; MappingRow only changes presentation so the
|
|
// existing capture, clear, and invert handlers continue to own behavior.
|
|
return (
|
|
<MappingRow
|
|
key={action.id}
|
|
action={action}
|
|
source={source}
|
|
sourceLabel={formatControllerBinding(activeProfile, action.id, activePad)}
|
|
liveValue={liveValueForAction(action.id)}
|
|
isCapturing={captureAction?.id === action.id}
|
|
onClear={handleClear}
|
|
onCapture={setCaptureAction}
|
|
onInvert={handleInvert}
|
|
disabled={!activePad}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
{!activePad ? (
|
|
null
|
|
) : (
|
|
<details className="mx-auto w-full max-w-lg rounded bg-neutral-900/70 px-1.5 py-1 text-xs text-white">
|
|
<summary className="cursor-pointer text-sm font-semibold text-white">Advanced diagnostics</summary>
|
|
<div className="mt-1 space-y-1">
|
|
<p className="text-white">Raw axes</p>
|
|
<div className="grid grid-cols-2 gap-1">
|
|
{activePad.axes.map((value, index) => (
|
|
<span key={`axis-${index}`} className="font-mono text-white">
|
|
A{index}: {NUMBER_FORMAT.format(value)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<p className="text-white">Raw buttons</p>
|
|
<div className="grid grid-cols-2 gap-1">
|
|
{activePad.buttons.map((btn, index) => (
|
|
<span key={`btn-${index}`} className="font-mono text-white">
|
|
B{index}: {NUMBER_FORMAT.format(btn.value)} {btn.pressed ? '●' : ''}
|
|
</span>
|
|
))}
|
|
</div>
|
|
{diagnostics?.outputs && (
|
|
<>
|
|
<p className="text-white">Mapped outputs</p>
|
|
<div className="grid grid-cols-2 gap-1">
|
|
<span className="font-mono text-white">
|
|
Drive: {NUMBER_FORMAT.format(diagnostics.outputs.driveVector.x)},{' '}
|
|
{NUMBER_FORMAT.format(diagnostics.outputs.driveVector.y)}
|
|
</span>
|
|
<span className="font-mono text-white">
|
|
Camera: {NUMBER_FORMAT.format(diagnostics.outputs.cameraAxis)}
|
|
</span>
|
|
<span className="font-mono text-white">
|
|
Main: {NUMBER_FORMAT.format(diagnostics.outputs.auxAxis.main)}
|
|
</span>
|
|
<span className="font-mono text-white">
|
|
Side: {NUMBER_FORMAT.format(diagnostics.outputs.auxAxis.side)}
|
|
</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</details>
|
|
)}
|
|
</div>
|
|
</CardFrame>
|
|
);
|
|
}
|