simeonradivoev/gameflow-deck
simeonradivoev/gameflow-deck
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Fixed issues on windows

Browse source 
feat: Implemented mouse and gamepad automatic switching
fix: Made touch screen work better on the steam deck
This commit is contained in:
Simeon Radivoev 2026-02-24 18:58:48 +02:00
parent e4df8fb9fb
commit b4a89385d0
Signed by: simeonradivoev
GPG key ID: 7611A451D2A5D37A
24 changed files with 334 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/bun/api/drives.ts
View file

@ -32,7 +32,7 @@ export async function getDevices (): Promise<Drive[]>
{
const blockDevicesRaw = await si.blockDevices();
const layout = await si.diskLayout();
const blockDevices = blockDevicesRaw.filter(l => l.device && l.type === 'part' && l.mount);
const blockDevices = blockDevicesRaw.filter(l => l.device && (l.type === 'part' || l.type === 'disk') && l.mount);
const fsSizes = await si.fsSize();
const sizes = new Map(fsSizes.map(s => [s.mount, s]));
const layoutMap = new Map(layout.map(l => [l.device, l]));
@ -65,26 +65,29 @@ export async function getDevicesCurated (): Promise<Drive[]>
const devices = await getDevices();
drives.push(...devices.filter(d => d.hasWriteAccess));
const homeDir = os.homedir();
const homeDirDevice = devices.filter(d => d.mountPoint).reverse()
.find(d => homeDir.startsWith(d.mountPoint!));
if (homeDirDevice)
if (process.platform !== 'win32')
{
const [hasReadAccess, hasWriteAccess] = await getAccess(homeDir);
const homeDir = os.homedir();
const homeDirDevice = devices.filter(d => d.mountPoint).reverse()
.find(d => homeDir.startsWith(d.mountPoint!));
if (homeDirDevice)
{
const [hasReadAccess, hasWriteAccess] = await getAccess(homeDir);
drives.push({
parent: homeDirDevice.parent,
device: homeDirDevice.device,
size: homeDirDevice.size,
used: homeDirDevice.used,
isRemovable: homeDirDevice.isRemovable,
mountPoint: homeDir,
type: homeDirDevice.type,
label: 'Home',
interfaceType: homeDirDevice.interfaceType,
hasReadAccess,
hasWriteAccess
});
drives.push({
parent: homeDirDevice.parent,
device: homeDirDevice.device,
size: homeDirDevice.size,
used: homeDirDevice.used,
isRemovable: homeDirDevice.isRemovable,
mountPoint: homeDir,
type: homeDirDevice.type,
label: 'Home',
interfaceType: homeDirDevice.interfaceType,
hasReadAccess,
hasWriteAccess
});
}
}
return drives;

21
src/bun/api/system.ts
View file

@ -12,7 +12,6 @@ import { getDevices, getDevicesCurated } from "./drives";
import getFolderSize from "get-folder-size";
import si from 'systeminformation';
// steam://open/keyboard?XPosition=%i&YPosition=%i&Width=%i&Height=%i&Mode=%d
export const system = new Elysia({ prefix: '/api/system' })
.post('/show_keyboard', async ({ body: { XPosition, YPosition, Width, Height } }) =>
{
@ -67,12 +66,23 @@ export const system = new Elysia({ prefix: '/api/system' })
.get('/drives', async () =>
{
const drives = await getDevices();
if (process.platform === 'win32')
return drives.map(d =>
{
d.mountPoint += '/';
return d;
});
return drives;
})
// Drives that are vaiable for downloads
.get('/drives/download', async () =>
{
const drives = await getDevicesCurated();
const downloadsPath = config.get('downloadPath');
let downloadsPath = config.get('downloadPath');
if (!path.isAbsolute(downloadsPath))
{
downloadsPath = path.resolve(process.cwd(), downloadsPath);
}
const currentDownloadsSize = await getFolderSize(downloadsPath);
let used = false;
const drivesDownload: DownloadsDrive[] = drives
@ -115,6 +125,7 @@ export const system = new Elysia({ prefix: '/api/system' })
drives: drivesDownload,
};
})
// Create Folder
.put('/dirs', async ({ body: { dirname, name } }) =>
{
await fs.mkdir(path.join(dirname, name));
@ -123,7 +134,11 @@ export const system = new Elysia({ prefix: '/api/system' })
})
.get('/dirs', async ({ query: { path: startingPath } }) =>
{
const currentPath = startingPath ?? dirname(Bun.main);
let currentPath = startingPath ?? dirname(process.cwd());
if (!path.isAbsolute(currentPath))
{
currentPath = path.resolve(process.cwd(), currentPath);
}
const paths = await fs.readdir(currentPath, { withFileTypes: true });
return {
name: path.basename(currentPath),

4
src/mainview/components/AnimatedBackground.tsx
View file

@ -48,7 +48,7 @@ export function AnimatedBackground (data: {
let backgroundElements: JSX.Element | undefined = undefined;
if (true)
{
backgroundElements = <div id="container">
backgroundElements = <div id="container" className='md:visible sm:invisible'>
<div id="container-inside">
<div className={bgColor} id="circle-small"></div>
<div className={bgColor} id="circle-medium"></div>
@ -66,7 +66,7 @@ export function AnimatedBackground (data: {
>
{!!lastBackgroundUrl && <div className='absolute w-full h-full' style={{ background: backgroundStyle(lastBackgroundUrl), zIndex: -4 }}></div>}
{!!backgroundUrl && <div key={backgroundUrl} className='absolute w-full h-full animate__animated animate__fadeIn' style={{ background: backgroundStyle(backgroundUrl), zIndex: -3 }}></div>}
{blurBackground && <div className={"absolute w-full h-full backdrop-blur-3xl"} style={{ zIndex: -2 }}></div>}
{blurBackground && <div className={"absolute w-full h-full backdrop-blur-3xl md:visible sm:invisible"} style={{ zIndex: -2 }}></div>}
{data.animated && animateBackground && <div className="absolute overflow-hidden w-full h-full" style={{ zIndex: -1 }}>
{backgroundElements}
</div>}

13
src/mainview/components/CardList.tsx
View file

@ -1,10 +1,11 @@
import
{
FocusContext,
FocusDetails,
useFocusable,
} from "@noriginmedia/norigin-spatial-navigation";
import { GameMeta } from "../../shared/constants";
import GameCard, { GameCardParams } from "./GameCard";
import GameCard, { GameCardFocusHandler, GameCardParams } from "./GameCard";
import { JSX } from "react";
import { twMerge } from "tailwind-merge";
import { GamePadButtonCode, useShortcuts } from "../scripts/shortcuts";
@ -22,7 +23,7 @@ export function CardList (data: {
games: GameMetaExtra[];
grid?: boolean;
onSelectGame?: (id: string) => void;
onGameFocus?: (id: string, node: HTMLElement) => void;
onGameFocus?: GameCardFocusHandler;
className?: string;
})
{
@ -54,10 +55,10 @@ export function CardList (data: {
data-index={i}
title={g.title}
subtitle={g.subtitle ?? ""}
onFocus={(id, node) =>
onFocus={(id, node, details) =>
{
g.onFocus?.();
data.onGameFocus?.(id, node);
g.onFocus?.(details);
data.onGameFocus?.(id, node, details);
}}
onAction={handleAction}
preview={preview}
@ -74,7 +75,7 @@ export function CardList (data: {
ref={ref}
save-child-focus="session"
className={twMerge("my-6 items-center justify-center-safe h-(--game-card-height) ",
data.grid ? "card-grid h-fit gap-5" : 'card-list gap-6',
data.grid ? "card-grid h-fit gap-5" : 'card-list md:gap-6 sm:gap-2',
data.className
)}
onKeyDown={(e) =>

7
src/mainview/components/CollectionList.tsx
View file

@ -4,12 +4,13 @@ import { useSuspenseQuery } from "@tanstack/react-query";
import { useNavigate } from "@tanstack/react-router";
import { CardList, GameMetaExtra } from "./CardList";
import { SaveSource } from "../scripts/spatialNavigation";
import { GameCardFocusHandler } from "./GameCard";
export default function CollectionList (data: {
id: string,
setBackground: (url: string) => void;
className?: string;
onFocus?: (node: HTMLElement) => void;
onFocus?: GameCardFocusHandler;
})
{
const navigate = useNavigate();
@ -42,12 +43,12 @@ export default function CollectionList (data: {
SaveSource('game-list');
navigate({ to: `/collection/${id}`, viewTransition: { types: ['zoom-in'] } });
}}
onGameFocus={(id, node) =>
onGameFocus={(id, node, details) =>
{
data.setBackground(
`https://picsum.photos/id/${10 + (id ?? 0)}/1920/1080.webp`,
);
data.onFocus?.(node);
data.onFocus?.(id, node, details);
}}
/>
);

11
src/mainview/components/CollectionsDetail.tsx
View file

@ -10,6 +10,7 @@ import { GamePadButtonCode, useShortcutContext, useShortcuts } from '../scripts/
import { Router } from '..';
import { PopSource } from '../scripts/spatialNavigation';
import { GameListFilterType } from '@/shared/constants';
import { GameCardFocusHandler } from './GameCard';
export interface CollectionsDetailParams
{
@ -42,6 +43,14 @@ export function CollectionsDetail (data: CollectionsDetailParams)
useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
const { shortcuts } = useShortcutContext();
const handleScroll: GameCardFocusHandler = (id, node, details) =>
{
if (!(details.nativeEvent instanceof MouseEvent))
{
node.scrollIntoView({ block: 'center', behavior: 'smooth' });
}
};
return (
<FocusContext value={focusKey}>
<AnimatedBackground animated ref={ref} backgroundKey="home-background" className='flex'>
@ -56,7 +65,7 @@ export function CollectionsDetail (data: CollectionsDetailParams)
grid
setBackground={data.setBackground}
filters={data.filters}
onFocus={(node) => node.scrollIntoView({ block: 'center', behavior: 'smooth' })}
onFocus={handleScroll}
id={`${focusKey}-list`}>
</GameList>

2
src/mainview/components/ContextDialog.tsx
View file

@ -30,7 +30,7 @@ export function OptionElement (data: DialogEntry & { onFocus?: () => void; class
const handleAction = data.action ? () => data.action?.({ close: context.close, focus: focusSelf }) : undefined;
const { ref, focused, focusSelf, focusKey, hasFocusedChild } = useFocusable({
focusKey: `${context.id}-list-option-${data.id}`,
onEnterPress: handleAction,
onEnterPress: data.shortcuts ? handleAction : undefined,
onFocus: handleFocus,
trackChildren: typeof data.content !== 'string'
});

15
src/mainview/components/FilePicker.tsx
View file

@ -36,7 +36,7 @@ function List (data: {
const { setCurrentPath, startingPath, allowNewFolderCreation, currentPath, isDirectoryPicker } = useContext(FilePickerContext);
const { ref, focusKey } = useFocusable({ focusKey: data.id, preferredChildFocusKey: `${data.id}...` });
const handleReturn = () => setCurrentPath(data.parentPath);
useShortcuts(focusKey, () => [{ label: "Directoy Up", button: GamePadButtonCode.L1, action: handleReturn }], [handleReturn]);
useShortcuts(focusKey, () => [{ label: "Directory Up", button: GamePadButtonCode.L1, action: handleReturn }], [handleReturn]);
return <div ref={ref}>
<FocusContext value={focusKey}>
<ContextList showCloseButton={false}
@ -62,21 +62,25 @@ function List (data: {
icon = <></>;
}
const shortcuts: Shortcut[] = [];
let action: () => void;
if (f.isDirectory)
{
shortcuts.push({ label: "Enter", button: GamePadButtonCode.A, action: () => setCurrentPath(fullPath) });
action = () => setCurrentPath(fullPath);
if (isDirectoryPicker)
shortcuts.push({ label: "Select", button: GamePadButtonCode.X, action: () => data.select(fullPath) });
} else
{
shortcuts.push({ label: "Select", button: GamePadButtonCode.A, action: () => data.select(fullPath) });
action = () => data.select(fullPath);
}
const entry: DialogEntry = {
content: f.name,
id: `${data.id}-${f.name}`,
type: 'primary',
icon,
shortcuts
shortcuts,
action
};
return entry;
}), ...(allowNewFolderCreation && currentPath ? [{
@ -157,7 +161,7 @@ function DriveElement (data: { id: string, isActive: boolean, label: string; onS
{
const { ref, focused } = useFocusable({ focusKey: data.id, onEnterPress: data.onSelect });
return <li ref={ref} onClick={data.onSelect} className={twMerge(
"flex bg-base-200 text-base-content rounded-full gap-2 items-center p-2 overflow-hidden max-w-xs",
"flex bg-base-200 text-base-content rounded-full gap-2 items-center p-2 px-4 overflow-hidden max-w-xs cursor-pointer text-nowrap hover:bg-primary/40",
classNames({
"bg-primary text-primary-content": data.isActive,
"ring-7 ring-base-content": focused
@ -238,8 +242,8 @@ export default function FilePicker (data: {
{
const [currentPath, setCurrentPath] = useState<string | undefined>(data.startingPath);
const { data: files, refetch: refetchFiles } = useQuery(filesQuery(currentPath, data.id));
const { data: drives } = useQuery(drivesQuery);
const { data: files, refetch: refetchFiles, isLoading: filesLoading } = useQuery(filesQuery(currentPath, data.id));
const { data: drives, isLoading: drivesLoading } = useQuery(drivesQuery);
const fullPath = files ? path.join(files.parentPath, files.name) : '';
const activeDrive = drives?.filter(d => !!d.mountPoint).sort((a, b) => b.mountPoint!.length - a.mountPoint!.length).filter(d => fullPath.startsWith(d.mountPoint!))[0];
@ -268,6 +272,7 @@ export default function FilePicker (data: {
}>{p}</a>
</li>)}
</ul>
{(filesLoading || drivesLoading) && <span className="loading loading-spinner loading-lg"></span>}
</div>}
<ListWithDrives

20
src/mainview/components/Filters.tsx
View file

@ -7,6 +7,7 @@ import SvgIcon from "./SvgIcon";
import classNames from "classnames";
import { useSearch } from "@tanstack/react-router";
import { useEffect } from "react";
import useActiveControl from "../scripts/gamepads";
function FilterCat (
data: {
@ -33,16 +34,19 @@ function FilterCat (
}
}, [filter]);
const { isMouse } = useActiveControl();
return (
<li
ref={ref}
onClick={focusSelf}
className={classNames(
"flex px-4 h-12 items-center justify-center rounded-full transition-all",
"flex md:px-4 items-center justify-center rounded-full transition-all md:text-lg",
"sm:text-xs sm:px-2",
{
"bg-base-content px-3 text-base-300 drop-shadow cursor-default":
focused || data.active,
"ring-primary ring-7": focused,
"ring-primary ring-7": focused && !isMouse,
"hover:bg-base-content/40 cursor-pointer": !focused,
},
)}
@ -70,13 +74,13 @@ export function FilterUI (data: {
return (
<div
ref={ref}
className="flex items-center justify-center gap-2"
className="flex items-center sm:justify-start md:justify-center sm:ml-[15%] md:ml-0 gap-2"
save-child-focus="session"
>
<FocusContext.Provider value={focusKey}>
<ul className="flex flex-row bg-base-100 rounded-full p-1 drop-shadow-sm">
<li className=" flex px-4 h-12 items-center justify-center rounded-full">
<SvgIcon className="size-8" icon="steamdeck_button_l1_outline" />
<ul className="flex flex-row bg-base-100 rounded-full p-1 drop-shadow-sm md:h-14 sm:h-8">
<li className=" flex px-4 items-center justify-center rounded-full">
<SvgIcon className="sm:size-4 md:size-8" icon="steamdeck_button_l1_outline" />
</li>
{Object.entries(data.options)?.map(([id, option]) => (
<FilterCat
@ -88,8 +92,8 @@ export function FilterUI (data: {
{...option}
/>
))}
<li className=" flex px-4 h-12 items-center justify-center rounded-full">
<SvgIcon className="size-8" icon="steamdeck_button_r1_outline" />
<li className="flex px-4 items-center justify-center rounded-full">
<SvgIcon className="sm:size-4 md:size-8" icon="steamdeck_button_r1_outline" />
</li>
</ul>
</FocusContext.Provider>

40
src/mainview/components/GameCard.tsx
View file

@ -1,7 +1,8 @@
import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
import { FocusDetails, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
import classNames from "classnames";
import { JSX, useEffect } from "react";
import { JSX } from "react";
import { twMerge } from "tailwind-merge";
import useActiveControl from "../scripts/gamepads";
export function GameCardSkeleton ()
{
@ -16,6 +17,8 @@ export function GameCardSkeleton ()
);
}
export type GameCardFocusHandler = (id: string, node: HTMLElement, details: FocusDetails) => void;
export interface GameCardParams
{
title: string;
@ -27,7 +30,7 @@ export interface GameCardParams
id: string;
badges?: JSX.Element[];
className?: string;
onFocus?: (id: string, node: HTMLElement) => void;
onFocus?: GameCardFocusHandler;
onBlur?: (id: string) => void;
onAction?: () => void;
clickFocuses?: boolean;
@ -37,10 +40,11 @@ export default function GameCard (data: GameCardParams)
{
const { ref, focused, focusSelf } = useFocusable({
focusKey: data.focusKey,
onFocus: () => data.onFocus?.(data.id, ref.current as any),
onFocus: (l, p, detals) => data.onFocus?.(data.id, ref.current as any, detals),
onEnterPress: () => data.onAction?.(),
onBlur: () => data.onBlur?.(data.id)
});
const { isPointer } = useActiveControl();
return (
<li
@ -60,21 +64,24 @@ export default function GameCard (data: GameCardParams)
data.onAction?.();
}}
className={twMerge(
`game-card game-card-height flex flex-col justify-end z-5`,
`game-card bg-base-300 game-card-height flex flex-col justify-end z-5 ring-primary`,
'max-h-(--game-card-height) min-w-(--game-card-width) w-(--game-card-width)',
"overflow-hidden transition-all duration-200 drop-shadow-lg cursor-pointer",
focused ?
`focused animate-wiggle ring-7 bg-base-content text-base-300 ring-primary drop-shadow-xl drop-shadow-black/30 scale-102 z-10` :
"bg-base-300 hover:bg-base-100 hover:scale-102 text-base-content",
classNames({
"focused animate-wiggle ring-7 bg-base-content text-base-300 drop-shadow-xl drop-shadow-black/30 scale-102 z-10": focused && !isPointer,
"group hover:focused hover:animate-wiggle hover:ring-7 hover:bg-base-content hover:text-base-300 hover:drop-shadow-xl hover:drop-shadow-black/30 hover:scale-102 hover:z-10": isPointer,
"h-(--game-card-height)": typeof data.preview === "string"
}),
data.className
)}
>
<div className={twMerge("overflow-hidden bg-base-400 h-full rounded-t-xl rounded-b-md transition-all", focused ? "mt-2 mx-2" : "mt-2 mx-2")}>
<div className={twMerge(
"overflow-hidden bg-base-400 h-full rounded-t-xl rounded-b-md transition-all",
focused ? "md:mt-2 md:mx-2" : "md:mt-2 md:mx-2",
focused ? "sm:mt-1 sm:mx-1" : "sm:mt-1 sm:mx-1",
)}>
{typeof data.preview === "string" ? (
<img className={classNames({ "animate-rotate-small": focused })} src={data.preview} ></img>
<img className={classNames({ "animate-rotate-small": focused && !isPointer })} src={data.preview} ></img>
) : (
typeof data.preview === 'function' ? data.preview({ focused }) : data.preview
)}</div>
@ -83,18 +90,21 @@ export default function GameCard (data: GameCardParams)
{data.badges?.map((b, i) =>
<div key={i}
className={
twMerge("bg-base-100 text-base-content drop-shadow-lg overflow-hidden rounded-full p-1 last:mr-4 transition-colors",
classNames({ "bg-primary text-primary-content": focused }))}
twMerge("bg-base-100 text-base-content drop-shadow-lg overflow-hidden rounded-full p-1 md:last:mr-4 transition-colors",
classNames({
"bg-primary text-primary-content": focused && !isPointer,
"group-hover:bg-primary group-hover:text-primary-content": isPointer
}))}
>
{b}
</div>)
}
</div>
<div className="flex flex-col p-4">
<div className="text-xl font-bold text-nowrap text-ellipsis overflow-hidden">
<div className="flex flex-col md:p-4 sm:p-2">
<div className="md:text-xl sm:text-sm font-bold text-nowrap text-ellipsis overflow-hidden">
{data.title}
</div>
<div className="text-s">{data.subtitle}</div>
<div className="sm:text-xs md:text-sm text-nowrap">{data.subtitle}</div>
</div>
</li >
);

7
src/mainview/components/GameList.tsx
View file

@ -6,6 +6,7 @@ import { SaveSource } from "../scripts/spatialNavigation";
import { rommApi } from "../scripts/clientApi";
import { HardDrive } from "lucide-react";
import { JSX } from "react";
import { GameCardFocusHandler } from "./GameCard";
export interface GameListParams
{
@ -14,7 +15,7 @@ export interface GameListParams
grid?: boolean,
setBackground?: (url: string) => void;
onGameSelect?: (id: FrontEndId) => void;
onFocus?: (node: HTMLElement) => void;
onFocus?: GameCardFocusHandler;
className?: string;
}
@ -52,7 +53,7 @@ export function GameList (data: GameListParams)
type="game"
grid={data.grid}
className={data.className}
onGameFocus={(id, node) => data.onFocus?.(node)}
onGameFocus={data.onFocus}
games={games.data?.games
.map(
(g) =>
@ -69,7 +70,7 @@ export function GameList (data: GameListParams)
title: g.name ?? "",
subtitle: (
<div className="flex gap-1 items-center">
{!!g.path_platform_cover && <img className="size-4" src={`${RPC_URL(__HOST__)}${g.path_platform_cover}`} />}
{!!g.path_platform_cover && <img className="sm:hidden md:inline size-4" src={`${RPC_URL(__HOST__)}${g.path_platform_cover}`} />}
<p className="opacity-80">{g.platform_display_name}</p>
</div>
),

27
src/mainview/components/Header.tsx
View file

@ -14,10 +14,6 @@ import
Bell,
Bluetooth,
Clock,
Lock,
Power,
ShieldAlert,
Sun,
User,
Wifi,
WifiHigh,
@ -29,9 +25,10 @@ import { useQuery } from "@tanstack/react-query";
import { getCurrentUserApiUsersMeGetOptions, statsApiStatsGetOptions } from "../../clients/romm/@tanstack/react-query.gen";
import { RPC_URL } from "../../shared/constants";
import { JSX, useEffect, useRef } from "react";
import { useLocation, useNavigate } from "@tanstack/react-router";
import { useNavigate } from "@tanstack/react-router";
import { SaveSource } from "../scripts/spatialNavigation";
import { systemApi } from "../scripts/clientApi";
import { twMerge } from "tailwind-merge";
function HeaderAvatar (data: {
id: string;
@ -116,7 +113,7 @@ function NotificationStatus ()
{
const hasUnread = false;
return <div className={classNames("p-2 rounded-full", { "bg-warning text-warning-content": hasUnread })}>
<Bell className="w-6 h-6" />
<Bell className="md:size-6 sm:size-4" />
</div>;
}
@ -170,13 +167,13 @@ function BluetoothStatus ()
function WiFiStatus ()
{
const { data: wifi } = useQuery({
const { data: wifi, isLoading } = useQuery({
queryKey: ['wifi'],
queryFn: () => systemApi.api.system.info.wifi.get().then(d => d.data),
refetchInterval: 3000
});
return <div>
return (!!wifi && wifi.length > 0) || isLoading ? <div>
{wifi?.map(w =>
{
const className = "w-6 h-6";
@ -195,7 +192,7 @@ function WiFiStatus ()
</div>;
})}
</div>;
</div> : undefined;
}
function BatteryStatus ()
@ -224,7 +221,7 @@ function BatteryStatus ()
batteryIcon = <BatteryMedium className={batteryClassName} />;
}
}
return <div className="flex gap-2 items-center">
return !!battery && battery.hasBattery && <div className="flex gap-2 items-center">
{batteryIcon}
<span className="font-semibold">{battery?.percent} %</span>
</div>;
@ -271,7 +268,9 @@ export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAcc
<FocusContext.Provider value={focusKey}>
<header
ref={ref}
className="h-14 mt-2 flex items-center justify-between text-white"
className={twMerge("md:relative md:h-14 md:mt-2 flex items-center justify-between text-white",
"sm:absolute sm:top-0 sm:right-0 sm:left-0"
)}
>
<div className="flex items-center gap-2 drop-shadow-sm">
{accounts?.map(a => <HeaderAvatar
@ -285,8 +284,8 @@ export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAcc
/>)}
{data.title}
</div>
<div className="flex items-center gap-2 text drop-shadow-sm">
<div className="flex gap-5 items-center">
<div className="flex items-center md:gap-2 sm:gap-1 text drop-shadow-sm">
<div className="flex md:gap-5 sm:gap-2 items-center">
<ClockStatus />
<WiFiStatus />
<BluetoothStatus />
@ -297,7 +296,7 @@ export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAcc
<div className="flex gap-2">
{data.buttonElements ?? data.buttons?.map(b => <RoundButton
key={b.id}
className="header-icon size-16"
className="header-icon md:size-16 sm:size-10"
id={b.id}
icon={b.icon}
external={b.external}

5
src/mainview/components/PlatformsList.tsx
View file

@ -7,8 +7,9 @@ import { rommApi } from "../scripts/clientApi";
import { SaveSource } from "../scripts/spatialNavigation";
import { JSX } from "react";
import { HardDrive } from "lucide-react";
import { GameCardFocusHandler } from "./GameCard";
export function PlatformsList (data: { id: string, setBackground: (url: string) => void; className?: string; onFocus?: (node: HTMLElement) => void; })
export function PlatformsList (data: { id: string, setBackground: (url: string) => void; className?: string; onFocus?: GameCardFocusHandler; })
{
const navigate = useNavigate();
const { data: platforms } = useSuspenseQuery(
@ -29,7 +30,7 @@ export function PlatformsList (data: { id: string, setBackground: (url: string)
type="platform"
id={data.id}
className={data.className}
onGameFocus={(id, node) => data.onFocus?.(node)}
onGameFocus={data.onFocus}
games={platforms.sort((a, b) => a.updated_at.getTime() - b.updated_at.getTime())
.map((g) =>
{

9
src/mainview/components/ShortcutPrompt.tsx
View file

@ -1,11 +1,11 @@
import React, { MouseEventHandler } from "react";
import { MouseEventHandler } from "react";
import SvgIcon, { IconType } from "./SvgIcon";
import classNames from "classnames";
import { twMerge } from "tailwind-merge";
export default function ShortcutPrompt (data: {
id: string;
icon: IconType;
icon?: IconType;
label?: string;
className?: string;
onClick?: MouseEventHandler;
@ -17,14 +17,15 @@ export default function ShortcutPrompt (data: {
style={{ viewTransitionName: data.id }}
className={twMerge(
"flex md:gap-2 bg-base-100 text-base-content neutral-content md:pl-2 md:pr-3 md:py-1.5 rounded-full items-center md:text-lg drop-shadow-sm ring-[1px] ring-base-content/10 drop-shadow-black/30",
"sm:text-sm",
"sm:text-sm sm:p-1",
"xs:text-xs sm:p-1",
data.className,
classNames({
"hover:bg-base-300 cursor-pointer": !!data.onClick,
})
)}
>
<SvgIcon className="md:size-8 sm:size-6" icon={data.icon} />
{data.icon && <SvgIcon className="md:size-8 sm:size-6 xs:size-2" icon={data.icon} />}
{data.label}
</div>
);

28
src/mainview/components/Shortcuts.tsx
View file

@ -1,4 +1,4 @@
import { GamepadButtonEvent } from '../scripts/gamepads';
import useActiveControl, { GamepadButtonEvent } from '../scripts/gamepads';
import { GamePadButtonCode, Shortcut } from '../scripts/shortcuts';
import ShortcutPrompt from './ShortcutPrompt';
import { IconType } from './SvgIcon';
@ -23,16 +23,38 @@ const iconMap: Record<GamePadButtonCode, IconType> = {
[GamePadButtonCode.Steam]: 'steamdeck_button_quickaccess'
};
const keyboardMap: Record<GamePadButtonCode, string> = {
[GamePadButtonCode.A]: 'ENTER',
[GamePadButtonCode.B]: 'ESC',
[GamePadButtonCode.X]: 'BACKSPACE',
[GamePadButtonCode.Y]: 'SPACE',
[GamePadButtonCode.L1]: 'Q',
[GamePadButtonCode.R1]: 'E',
[GamePadButtonCode.L2]: '',
[GamePadButtonCode.R2]: '',
[GamePadButtonCode.Select]: '',
[GamePadButtonCode.Start]: '',
[GamePadButtonCode.LJoy]: '',
[GamePadButtonCode.RJoy]: '',
[GamePadButtonCode.Up]: '',
[GamePadButtonCode.Down]: '',
[GamePadButtonCode.Left]: '',
[GamePadButtonCode.Right]: '',
[GamePadButtonCode.Steam]: ''
};
export default function Shortcuts (data: { shortcuts?: Shortcut[]; })
{
const { control } = useActiveControl();
const showKeyboard = control === 'keyboard' || control === 'mouse';
return (
<div className="flex gap-2 z-1000">
{data.shortcuts?.filter(s => !!s.label).map((s, i) => <ShortcutPrompt
key={s.button}
id={`shortcut-${s.button}`}
onClick={e => s.action?.(new GamepadButtonEvent('gamepadbuttondown', { button: s.button, isClick: true }))}
icon={iconMap[s.button]}
label={s.label} />
icon={showKeyboard ? undefined : iconMap[s.button]}
label={showKeyboard ? `${keyboardMap[s.button]} | ${s.label}` : s.label} />
)}
</div>
);

2
src/mainview/components/options/Button.tsx
View file

@ -12,7 +12,7 @@ export function Button (data: {
children?: any,
className?: string,
disabled?: boolean,
type: "reset" | "button" | "submit" | undefined;
type?: "reset" | "button" | "submit";
shortcutLabel?: string;
focusClassName?: string;
} & InteractParams & FocusParams)

1
src/mainview/components/options/DownloadDirectoryOption.tsx
View file

@ -22,6 +22,7 @@ export default function DownloadDirectoryOption (data: PathSettingsOptionParams)
type={data.type}
save={setSettingMutation.mutate}
allowNewFolderCreation={data.allowNewFolderCreation}
requireConfirmation={data.requireConfirmation}
isDirectoryPicker={true}
localValue={localValue}
setLocalValue={(v) =>

26
src/mainview/index.css
View file

@ -3,8 +3,7 @@
@plugin "daisyui";
@theme {
--game-card-height: calc(var(--spacing) * 100);
--game-card-width: calc(var(--spacing) * 64);
--breakpoint-xs: 20rem;
--animate-wiggle: wiggle 0.3s ease-in-out 1;
--animate-rotate: rotate 0.3s ease-in-out 1 0.2s;
@ -107,6 +106,24 @@
}
}
@layer base {
@variant sm {
:root {
--game-card-height: calc(var(--spacing) * 55);
--game-card-width: calc(var(--spacing) * 35.2);
}
}
}
@layer base {
@variant md {
:root {
--game-card-height: calc(var(--spacing) * 100);
--game-card-width: calc(var(--spacing) * 64);
}
}
}
symbol path {
fill: var(--color-base-content) !important;
}
@ -135,7 +152,7 @@ html {
}
.menu-icon svg {
@apply sm:size-7 md:size-9 transition-all;
@apply sm:size-6 md:size-9 transition-all;
}
.menu-icon.focus svg {
@ -143,7 +160,8 @@ html {
}
.header-icon svg {
@apply w-8 h-8 min-w-8 min-h-8;
@apply md:w-8 md:h-8 md:min-w-8 md:min-h-8;
@apply sm:w-5 sm:h-5 sm:min-w-5 sm:min-h-5;
}
.header-icon-small svg {

30
src/mainview/routes/index.tsx
View file

@ -9,6 +9,7 @@ import
Search,
Power,
OctagonAlert,
Maximize,
} from "lucide-react";
import
{
@ -19,6 +20,7 @@ import { useMutation } from "@tanstack/react-query";
import
{
FocusContext,
FocusDetails,
useFocusable,
} from "@noriginmedia/norigin-spatial-navigation";
import classNames from "classnames";
@ -79,9 +81,14 @@ function HomeList (data: {
preferredChildFocusKey: `${data.selectedFilter}-list`
});
const handleNodeFocus = (node: HTMLElement) =>
const handleNodeFocus = (id: string, node: HTMLElement, details: FocusDetails) =>
{
node.scrollIntoView({ inline: 'center', behavior: initFocus ? 'smooth' : 'instant' });
const isMounseEvent = details.nativeEvent instanceof MouseEvent;
if (!isMounseEvent)
{
node?.scrollIntoView({ inline: 'center', behavior: initFocus ? 'smooth' : 'instant' });
}
setInitFocus(true);
};
@ -101,7 +108,7 @@ function HomeList (data: {
(ref.current as HTMLElement)?.scrollBy({
top: 0,
left: deltaY,
behavior: 'auto'
behavior: 'instant'
});
} else
@ -109,7 +116,7 @@ function HomeList (data: {
(ref.current as HTMLElement)?.scrollBy({
top: 0,
left: deltaY,
behavior: 'auto'
behavior: 'instant'
});
}
});
@ -145,7 +152,9 @@ function MainMenu (data: {})
<ul
ref={ref}
save-child-focus="session"
className="flex items-center justify-center gap-3"
className={twMerge("md:relative flex items-center justify-center md:gap-3",
"sm:gap-1 sm:absolute sm:bottom-2 sm:left-0 sm:right-0"
)}
>
<FocusContext.Provider value={focusKey}>
<CircleIcon
@ -199,7 +208,7 @@ function CircleIcon (data: {
onClick={data.action}
className={twMerge(
`menu-icon text-base-300 md:w-20 md:h-20 rounded-full flex items-center justify-center drop-shadow-lg cursor-pointer transition-all`,
'sm:w-14 sm:h-14',
'sm:w-14 sm:h-10',
typeClasses[data.type ?? "none"], classNames(
{
"focus ring-7 ring-primary drop-shadow-2xl animate-scale": focused,
@ -263,18 +272,19 @@ export default function ConsoleHomeUI ()
<FocusContext.Provider value={focusKey}>
<div className="px-3 w-full pt-2">
<HeaderUI buttons={[
{ id: "fullscreen", icon: <Maximize />, action: () => document.documentElement.requestFullscreen() },
{ id: "search", icon: <Search /> },
{ id: "power-button", icon: <Power />, external: true, action: () => closeMutation.mutate() }
]} />
</div>
<div className="flex w-full flex-col grow justify-evenly">
<div className="flex w-full flex-col grow justify-evenly md:pt-0">
<FilterUI
id="home"
options={filters}
selected={filter ? filter : 'games'}
setSelected={setFilter}
/>
<div className="-mb-1">
<div className="md:-mb-1">
<HomeList
selectedFilter={filter}
/>
@ -283,7 +293,9 @@ export default function ConsoleHomeUI ()
<MainMenu />
</div>
</div>
<footer className="px-2 pb-2 flex items-center justify-between h-12">
<footer className={twMerge("md:relative px-2 md:pb-2 flex items-center justify-between h-12",
"sm:absolute bottom-0 left-0 right-0"
)}>
<div className="flex gap-2 text-sm">
</div>
<Shortcuts shortcuts={shortcuts} />

62
src/mainview/routes/settings/directories.tsx
View file

@ -1,5 +1,5 @@
import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { Block, createFileRoute, useBlocker } from '@tanstack/react-router';
import { Block, createFileRoute } from '@tanstack/react-router';
import DownloadDirectoryOption from '@/mainview/components/options/DownloadDirectoryOption';
import { useIsMutating, useMutation, useQuery } from '@tanstack/react-query';
import { changeDownloadsMutation, downloadDrivesQuery } from '@/mainview/scripts/queries';
@ -7,12 +7,12 @@ import { DownloadsDrive } from '@/shared/constants';
import prettyBytes from 'pretty-bytes';
import classNames from 'classnames';
import { GamePadButtonCode, Shortcut, useShortcuts } from '@/mainview/scripts/shortcuts';
import { Download, FolderOpen, HardDrive, Usb } from 'lucide-react';
import { Download, FolderOpen, HardDrive, Save, Usb } from 'lucide-react';
import { twMerge } from 'tailwind-merge';
import { OptionSpace } from '@/mainview/components/options/OptionSpace';
import data from '@emulators';
import { Button } from '@/mainview/components/options/Button';
import { systemApi } from '@/mainview/scripts/clientApi';
import useActiveControl from '@/mainview/scripts/gamepads';
export const Route = createFileRoute('/settings/directories')({
component: RouteComponent,
@ -20,46 +20,54 @@ export const Route = createFileRoute('/settings/directories')({
function DriveComponent (data: { drive: DownloadsDrive; downloadsSize: number; refetchDrives: () => void; })
{
const { ref, focused, focusKey } = useFocusable({ focusKey: data.drive.device });
const { ref, focused, focusKey } = useFocusable({
focusKey: data.drive.device,
onFocus: () => (ref.current as HTMLElement)?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
});
const isMoving = useIsMutating(changeDownloadsMutation);
const usedWithoutDownlods = data.drive.used - (data.drive.isCurrentlyUsed ? data.downloadsSize : 0);
const usedPercent = usedWithoutDownlods / data.drive.size;
const usedPercentRaw = data.drive.used / data.drive.size;
const changeDownloads = useMutation({ ...changeDownloadsMutation, onSuccess: data.refetchDrives }); data.drive.unusableReason;
const shortcuts: Shortcut[] = [];
if (!data.drive.unusableReason && isMoving <= 0)
const valid = !data.drive.unusableReason && isMoving <= 0;
const handleAction = () => changeDownloads.mutate(data.drive.mountPoint);
if (valid)
{
shortcuts.push({ label: "Move Downloads", button: GamePadButtonCode.A, action: () => changeDownloads.mutate(data.drive.mountPoint) });
shortcuts.push({ label: "Move Downloads", button: GamePadButtonCode.A, action: handleAction });
}
useShortcuts(focusKey, () => shortcuts, [shortcuts]);
const { isMouse } = useActiveControl();
return <li ref={ref} className={twMerge('flex flex-col p-4 bg-base-300 rounded-2xl gap-1',
return <li ref={ref} className={twMerge('flex flex-row p-4 bg-base-300 rounded-2xl gap-1 items-end',
classNames({
"ring-7": focused,
"border-dashed border-primary border-7": data.drive.isCurrentlyUsed,
"border-dashed border-primary border-4": data.drive.isCurrentlyUsed,
"border-solid": data.drive.unusableReason === 'already_used',
"ring-error": data.drive.unusableReason === 'not_enough_space',
}))}>
<div className='flex gap-2 font-semibold'>{data.drive.isRemovable ? <Usb /> : <HardDrive />}{data.drive.label}</div>
<small className='opacity-60'>{data.drive.mountPoint}</small>
<div className='flex gap-2'>
{prettyBytes(data.drive.size - data.drive.used)} Free
{data.drive.unusableReason === 'not_enough_space' && <p className='text-error'>(Not Enough Space)</p>}
{data.drive.unusableReason === 'already_used' && <p>(Currently Used)</p>}
{data.drive.unusableReason !== 'already_used' && data.drive.isCurrentlyUsed && <p className='opacity-60'>(Custom Path)</p>}
</div>
<div className='flex flex-col grow gap-1'>
<div className='flex gap-2 font-semibold'>{data.drive.isRemovable ? <Usb /> : <HardDrive />}{data.drive.label}</div>
<small className='opacity-60'>{data.drive.mountPoint}</small>
<div className='flex gap-2'>
{prettyBytes(data.drive.size - data.drive.used)} Free
{data.drive.unusableReason === 'not_enough_space' && <p className='text-error'>(Not Enough Space)</p>}
{data.drive.unusableReason === 'already_used' && <p>(Currently Used)</p>}
{data.drive.unusableReason !== 'already_used' && data.drive.isCurrentlyUsed && <p className='opacity-60'>(Custom Path)</p>}
</div>
<div className={twMerge("progress", classNames({
"progress-warning": usedPercent > 0.8,
"progress-error": data.drive.unusableReason === 'not_enough_space',
}))}>
<div className={twMerge('h-full bg-primary', classNames({
"bg-warning": usedPercent > 0.8,
"bg-error": data.drive.unusableReason === 'not_enough_space',
}))} style={{ width: usedPercent.toLocaleString('en-US', { style: 'percent' }) }}></div>
{!!data.drive.isCurrentlyUsed && <div className="h-full bg-base-content" style={{ width: usedPercentRaw.toLocaleString('en-US', { style: 'percent' }) }}></div>}
<div className={twMerge("progress", classNames({
"progress-warning": usedPercent > 0.8,
"progress-error": data.drive.unusableReason === 'not_enough_space',
}))}>
<div className={twMerge('h-full bg-primary', classNames({
"bg-warning": usedPercent > 0.8,
"bg-error": data.drive.unusableReason === 'not_enough_space',
}))} style={{ width: usedPercent.toLocaleString('en-US', { style: 'percent' }) }}></div>
{!!data.drive.isCurrentlyUsed && <div className="h-full bg-base-content" style={{ width: usedPercentRaw.toLocaleString('en-US', { style: 'percent' }) }}></div>}
</div>
</div>
{valid && isMouse && <Button type="button" className='btn-circle' onAction={handleAction} id={`${data.drive.mountPoint}-select`}><Save /></Button>}
</li>;
}
@ -77,7 +85,7 @@ function RouteComponent ()
<Block shouldBlockFn={() => isMoving} withResolver={false} />
<ul ref={ref} className="list rounded-box gap-2">
<div className="divider text-2xl mt-0 md:mt-4">
<Download className='size-16' /> Downloads ({drives?.downloadsSize ? prettyBytes(drives?.downloadsSize) : '?'})
<Download className='size-16' /> Downloads ({drives?.downloadsSize ? prettyBytes(drives?.downloadsSize) : <span className="loading loading-spinner loading-lg size-6"></span>})
</div>
<ul className='p-2 grid grid-cols-2 gap-3'>
{drives?.drives.filter(d => d.mountPoint).map(d => <DriveComponent refetchDrives={refetch} downloadsSize={drives.downloadsSize} drive={d} />)}

6
src/mainview/routes/settings/route.tsx
View file

@ -29,6 +29,7 @@ import { PopSource } from "../../scripts/spatialNavigation";
import { Router } from "../..";
import { GamePadButtonCode, useShortcutContext, useShortcuts } from "@/mainview/scripts/shortcuts";
import Shortcuts from "@/mainview/components/Shortcuts";
import useActiveControl from "@/mainview/scripts/gamepads";
export const Route = createFileRoute("/settings")({
component: SettingsUI,
@ -68,6 +69,7 @@ function MenuItem (data: {
? handleNonFocusSelect
: undefined,
});
const { isMouse } = useActiveControl();
return (
<li
ref={ref}
@ -81,13 +83,13 @@ function MenuItem (data: {
"group rounded-full p-3 pl-5 text-base-content/80",
classNames({
"bg-primary text-primary-content": acitve,
"font-semibold ring-7 ring-primary-content": focused,
"font-semibold ring-7 ring-primary-content": focused && !isMouse,
"bg-secondary text-secondary-content ring-primary": data.return && focused,
}),
data.linkClassName,
)}
>
<div className={twMerge("flex gap-2 items-center transition-all group-hover:scale-110", classNames({
<div className={twMerge("flex gap-2 items-center transition-all", classNames({
"scale-110": focused || acitve
}))}>
{data.icon}

89
src/mainview/scripts/gamepads.ts
View file

@ -1,7 +1,13 @@
import { getCurrentFocusKey, navigateByDirection, SpatialNavigation } from "@noriginmedia/norigin-spatial-navigation";
import { dispatchFocusedEvent, GetFocusedElement } from "./spatialNavigation";
import { getCurrentFocusKey, navigateByDirection } from "@noriginmedia/norigin-spatial-navigation";
import { GetFocusedElement } from "./spatialNavigation";
import { useEffect, useState } from "react";
let loopStarted = false;
let isTouching = false;
type ActiveControlType = 'keyboard' | 'gamepad' | 'mouse' | 'touch' | undefined;
let activeControls: ActiveControlType = undefined;
let mouseUpdateTimeout: any | undefined = undefined;
let touchStopTimeout: any | undefined = undefined;
const handleLoop = () =>
{
@ -11,8 +17,70 @@ const handleLoop = () =>
loopStarted = true;
}
};
// Mouse needs to be delayed so that touch events can cancel it.
// This is to prevent both touch and mouse events triggering as they do on the steam deck.
const handleMouseMove = (e: MouseEvent) =>
{
if (!mouseUpdateTimeout && !isTouching)
{
mouseUpdateTimeout = setTimeout(() =>
{
focusControl('mouse');
mouseUpdateTimeout = undefined;
}, 300);
}
};
function clearMouseUpdate ()
{
if (mouseUpdateTimeout)
clearTimeout(mouseUpdateTimeout);
mouseUpdateTimeout = undefined;
};
const handleKeyDown = () =>
{
focusControl('keyboard');
};
const handleTouchStart = (e: TouchEvent) =>
{
isTouching = true;
focusControl('touch');
clearMouseUpdate();
};
const handleTouchEnd = (e: TouchEvent) =>
{
setTimeout(() => isTouching = false, 10);
};
window.addEventListener('touchstart', handleTouchStart);
window.addEventListener('touchend', handleTouchEnd);
window.addEventListener('touchcancel', handleTouchEnd);
window.addEventListener("gamepadconnected", handleLoop);
import.meta.hot.dispose(() => window.addEventListener('gamepaddisconnected', handleLoop));
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('keydown', handleKeyDown);
import.meta.hot.dispose(() => window.removeEventListener('gamepaddisconnected', handleLoop));
import.meta.hot.dispose(() => window.removeEventListener('mousemove', handleMouseMove));
import.meta.hot.dispose(() => window.removeEventListener('keydown', handleKeyDown));
import.meta.hot.dispose(() => window.removeEventListener('touchstart', handleTouchStart));
import.meta.hot.dispose(() => window.removeEventListener('touchend', handleTouchEnd));
import.meta.hot.dispose(() => window.removeEventListener('touchcancel', handleTouchEnd));
export default function useActiveControl ()
{
const [c, setC] = useState<typeof activeControls>(activeControls);
useEffect(() =>
{
const handler = (e: Event) => setC((e as CustomEvent).detail);
window.addEventListener('activecontrolschange', handler);
return () => window.removeEventListener('activecontrolschange', handler);
});
return { isMouse: c === 'mouse', isPointer: c === 'mouse' || c === 'touch', control: c };
}
const throttleMap = new Map<string, number>();
const throttleAcceleration = new Map<string, number>();
@ -32,6 +100,19 @@ function throttleNav (key: string, dir: string, event: Event)
}
}
function focusControl (control: typeof activeControls)
{
if (activeControls != control)
{
activeControls = control;
window.dispatchEvent(new CustomEvent('activecontrolschange', { detail: control }));
if (control !== 'mouse')
{
clearMouseUpdate();
}
}
}
/*window.addEventListener('keydown', e =>
{
if (e.key === 'Escape')
@ -74,6 +155,7 @@ function updateStatus ()
if (!throttleMap.has(key))
{
window.dispatchEvent(new GamepadButtonEvent('gamepadbuttondown', { button: i, gamepad: gamepad }));
focusControl('gamepad');
throttleMap.set(key, 0);
}
} else
@ -81,6 +163,7 @@ function updateStatus ()
if (throttleMap.delete(key))
{
window.dispatchEvent(new GamepadButtonEvent('gamepadbuttonup', { button: i, gamepad: gamepad }));
focusControl('gamepad');
}
}
}

3
src/shared/constants.ts
View file

@ -1,4 +1,5 @@
import { FocusDetails } from '@noriginmedia/norigin-spatial-navigation';
import { JSX } from 'react';
import * as z from 'zod';
@ -14,7 +15,7 @@ export interface GameMeta
{
id: string,
onSelect?: () => void,
onFocus?: () => void,
onFocus?: (details: FocusDetails) => void,
title: string,
subtitle: string | JSX.Element,
previewUrl?: string;

2
vite.config.ts
View file

@ -7,7 +7,7 @@ import path from "node:path";
import staticAssetsPlugin from 'vite-static-assets-plugin';
import os from 'node:os';
import tsconfigPaths from 'vite-tsconfig-paths';
import { host } from "@/bun/utils/host";
import { host } from "./src/bun/utils/host";
export default defineConfig(() =>
{