+ return
;
}
\ No newline at end of file
diff --git a/src/mainview/components/NotFound.tsx b/src/mainview/components/NotFound.tsx
index 0172729..6985609 100644
--- a/src/mainview/components/NotFound.tsx
+++ b/src/mainview/components/NotFound.tsx
@@ -1,10 +1,10 @@
import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
import { Home, TriangleAlert } from "lucide-react";
import { GamePadButtonCode, useShortcutContext, useShortcuts } from "../scripts/shortcuts";
-import Shortcuts from "./Shortcuts";
import { Button } from "./options/Button";
import { useEffect } from "react";
import { useRouter } from "@tanstack/react-router";
+import { FloatingShortcuts } from "./Shortcuts";
export default function NotFound ()
{
@@ -12,7 +12,6 @@ export default function NotFound ()
const router = useRouter();
const handleReturn = () => router.navigate({ to: '/', viewTransition: { types: ['zoom-in'] } });
useShortcuts(focusKey, () => [{ label: "Return Home", button: GamePadButtonCode.B, action: handleReturn }]);
- const { shortcuts } = useShortcutContext();
useEffect(() => { focusSelf({ instant: true }); }, []);
@@ -27,7 +26,7 @@ export default function NotFound ()
-
+
- {data.shortcuts?.filter(s => !!s.label).map((s, i) => s.action?.(new GamepadButtonEvent('gamepadbuttondown', { button: s.button, isClick: true }))}
- icon={showKeyboard ? undefined : iconMap[s.button]}
- label={showKeyboard ? `${keyboardMap[s.button]} | ${s.label}` : s.label} />
- )}
-
+ <>
+
+ {shortcuts?.filter(s => !!s.label && s.side === 'left').map((s, i) => s.action?.(new GamepadButtonEvent('gamepadbuttondown', { button: s.button, isClick: true }))}
+ icon={showKeyboard ? undefined : iconMap[s.button]}
+ label={showKeyboard ? `${keyboardMap[s.button]} | ${s.label}` : s.label} />
+ )}
+
+ {data.centerElement}
+
+ {shortcuts?.filter(s => !!s.label && s.side !== 'left').map((s, i) => s.action?.(new GamepadButtonEvent('gamepadbuttondown', { button: s.button, isClick: true }))}
+ icon={showKeyboard ? undefined : iconMap[s.button]}
+ label={showKeyboard ? `${keyboardMap[s.button]} | ${s.label}` : s.label} />
+ )}
+
+
);
}
diff --git a/src/mainview/components/game/MainActions.tsx b/src/mainview/components/game/MainActions.tsx
index 2ee89c6..d4067ee 100644
--- a/src/mainview/components/game/MainActions.tsx
+++ b/src/mainview/components/game/MainActions.tsx
@@ -21,7 +21,7 @@ export default function MainActions (data: { game?: FrontEndGameTypeDetailed, so
},
onSuccess (data, { source, id }, onMutateResult, context)
{
- router.navigate({ to: '/launcher/$source/$id', params: { source: source, id: id }, replace: true });
+ router.navigate({ to: '/launcher/$source/$id', params: { source: source, id: id } });
},
});
const ws = useRef<{ send: (data: string) => void; }>(undefined);
@@ -108,7 +108,7 @@ export default function MainActions (data: { game?: FrontEndGameTypeDetailed, so
if (cmd.emulator === 'EMULATORJS')
{
const params = new URLSearchParams(cmd.command);
- router.navigate({ to: '/embedded/$source/$id', params: { source: data.source, id: data.id }, search: Object.fromEntries(params.entries()), replace: true });
+ router.navigate({ to: '/embedded/$source/$id', params: { source: data.source, id: data.id }, search: Object.fromEntries(params.entries()) });
} else
{
playMut.mutate({ source: data.source, id: data.id, command_id: cmd.id });
diff --git a/src/mainview/components/options/LocalOption.tsx b/src/mainview/components/options/LocalOption.tsx
index 7e55506..8636bf1 100644
--- a/src/mainview/components/options/LocalOption.tsx
+++ b/src/mainview/components/options/LocalOption.tsx
@@ -9,13 +9,18 @@ export function LocalOption (data: {
label: string;
id: keyof LocalSettingsType;
type: HTMLInputTypeAttribute | 'dropdown';
+ min?: number;
+ max?: number;
+ step?: number;
placeholder?: string;
values?: string[];
icon?: JSX.Element;
children?: any;
})
{
- const [localValue, setLocalValue] = useLocalStorage(data.id, LocalSettingsSchema.shape[data.id].parse(undefined), { deserializer: (v) => LocalSettingsSchema.shape[data.id].parse(JSON.parse(v)) });
+ const [localValue, setLocalValue] = useLocalStorage(data.id, LocalSettingsSchema.shape[data.id].parse(undefined), {
+ deserializer: (v) => LocalSettingsSchema.shape[data.id].parse(JSON.parse(v))
+ });
return (
@@ -25,30 +30,21 @@ export function LocalOption (data: {
defaultValue={localValue}
onChange={(v) =>
{
- if (data.type === 'checkbox')
- {
- setLocalValue(v);
- } else
- {
- setLocalValue(v);
- }
+ setLocalValue(v);
}}
value={localValue} />}
{data.type !== 'dropdown' &&
{
- if (data.type === 'checkbox')
- {
- setLocalValue(v);
- } else
- {
- setLocalValue(v);
- }
+ setLocalValue(v);
}}
value={localValue}
/>}
diff --git a/src/mainview/components/options/OptionInput.tsx b/src/mainview/components/options/OptionInput.tsx
index 2181b93..31c1d27 100644
--- a/src/mainview/components/options/OptionInput.tsx
+++ b/src/mainview/components/options/OptionInput.tsx
@@ -1,10 +1,11 @@
-import { FocusEventHandler, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, JSX, useRef } from "react";
+import { FocusEventHandler, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, JSX, useEffect, useRef, useState } from "react";
import { twMerge } from "tailwind-merge";
import { useOptionContext } from "./OptionSpace";
import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
import { systemApi } from "../../scripts/clientApi";
import { CheckIcon, X } from "lucide-react";
import { oneShot } from "@/mainview/scripts/audio/audio";
+import { GamePadButtonCode, Shortcut, useShortcuts } from "@/mainview/scripts/shortcuts";
export function OptionInput (data: {
name: string;
@@ -12,11 +13,14 @@ export function OptionInput (data: {
className?: string;
placeholder?: string;
icon?: JSX.Element;
- value?: string | boolean;
- defaultValue?: string | boolean;
+ value?: string | boolean | number;
+ min?: number;
+ max?: number;
+ step?: number;
+ defaultValue?: string | boolean | number;
autocomplete?: HTMLInputAutoCompleteAttribute;
onBlur?: FocusEventHandler;
- onChange?: (value: any) => void;
+ onChange?: (value: string | number | boolean) => void;
})
{
const handlePress = () =>
@@ -30,16 +34,74 @@ export function OptionInput (data: {
}
oneShot('click');
};
- const { ref } = useFocusable({
- focusKey: data.name, onEnterPress: handlePress
- });
+ const [inputFocused, setInputFocused] = useState(false);
const inputRef = useRef(null);
+ const { ref, focusKey } = useFocusable({
+ focusKey: data.name,
+ onEnterPress: handlePress,
+ onBlur: () => inputRef.current?.blur()
+ });
+
const option = useOptionContext({
onOptionEnterPress: handlePress,
});
- const handleFocus = () =>
+
+ useEffect(() =>
+ {
+ if (data.type === 'range')
+ {
+ option.setFocusBoundary(inputFocused);
+ option.setFocusBoundaryDirections(['left', 'right']);
+ }
+ }, [inputFocused, option, data.type]);
+
+ useShortcuts(focusKey, () =>
+ {
+
+ const shortcuts: Shortcut[] = [];
+ if (inputFocused && data.type === 'range')
+ {
+ shortcuts.push(
+ {
+ label: "Decrease",
+ button: GamePadButtonCode.Left,
+ action ()
+ {
+ if (!inputRef.current) return;
+ inputRef.current?.stepDown();
+ data.onChange?.(inputRef.current.valueAsNumber);
+ }
+ },
+ {
+ label: "Increase",
+ button: GamePadButtonCode.Right,
+ action (e)
+ {
+ if (!inputRef.current) return;
+ inputRef.current?.stepUp();
+ data.onChange?.(inputRef.current.valueAsNumber);
+ }
+ }
+ );
+ }
+ if (inputFocused)
+ {
+ shortcuts.push({
+ label: "Unfocus",
+ button: GamePadButtonCode.B,
+ action (e)
+ {
+ inputRef.current?.blur();
+ }
+ });
+ }
+ return shortcuts;
+ }, [inputFocused, data.type]);
+
+ const handleInputFocus = () =>
{
option.focus();
+ setInputFocused(true);
if (inputRef.current)
{
var rect = inputRef.current?.getBoundingClientRect();
@@ -52,25 +114,47 @@ export function OptionInput (data: {
}
};
+ const handleInputBlur = (e: any) =>
+ {
+ data.onBlur?.(e);
+ setInputFocused(false);
+ };
+
return (