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

fix: Fixed romm login, now uses token

Browse source 
feat: Moved romm to internal plugin
fix: Made focusing and navigation more reliable
fix: Loading errors on first time launch
This commit is contained in:
Simeon Radivoev 2026-03-28 17:32:51 +02:00
parent 7c10f4e4c2
commit 816d50ae4d
Signed by: simeonradivoev
GPG key ID: 7611A451D2A5D37A
81 changed files with 1659 additions and 1097 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/mainview/routes/__root.tsx
View file

@ -4,7 +4,10 @@ import Notifications from "../components/Notifications";
import { Toaster } from "react-hot-toast";
import { mobileCheck, useLocalSetting } from "../scripts/utils";
import useActiveControl from "../scripts/gamepads";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { SystemInfoContext } from "../scripts/contexts";
import { SystemInfoType } from "@/shared/constants";
import { systemApi } from "../scripts/clientApi";
export const Route = createRootRouteWithContext<RouterContext>()({
component: RootComponent,
@ -31,11 +34,25 @@ function RootComponent ()
}, [theme]);
const [systemInfo, setSystemInfo] = useState<SystemInfoType | undefined>();
useEffect(() =>
{
const sub = systemApi.api.system.info.system.subscribe();
sub.subscribe(({ data }) =>
{
setSystemInfo(data);
});
document.documentElement.dataset.loaded = "true";
}, []);
return (
<div data-device={isMobile ? 'mobile' : ''} data-active-control={control} className="w-screen h-screen overflow-hidden">
<Outlet />
<SystemInfoContext value={systemInfo}>
<Outlet />
</SystemInfoContext>
<Notifications />
<Toaster containerStyle={{ viewTimelineName: 'toasters' }} />
<Toaster containerStyle={{ viewTimelineName: 'toasters', viewTransitionName: 'notifications' }} />
{/*import.meta.env.DEV && !isMobile &&
<>
<TanStackRouterDevtools position="top-left" />

27
src/mainview/routes/collection.$id.tsx
View file

@ -1,27 +0,0 @@
import { createFileRoute } from '@tanstack/react-router';
import { CollectionsDetail } from '../components/CollectionsDetail';
import { getRomsApiRomsGetOptions } from '@clients/romm/@tanstack/react-query.gen';
import { DefaultRommStaleTime } from '@shared/constants';
import { useQuery } from '@tanstack/react-query';
import { useContext } from 'react';
import { AnimatedBackgroundContext } from '../scripts/contexts';
import { getCollectionQuery } from '@queries/romm';
export const Route = createFileRoute('/collection/$id')({
component: RouteComponent,
loader: ({ params, context }) => context.queryClient.fetchQuery({
...getRomsApiRomsGetOptions({ query: { collection_id: Number(params.id) } }),
staleTime: DefaultRommStaleTime,
})
});
function RouteComponent ()
{
const { id } = Route.useParams();
const { data: collection } = useQuery(getCollectionQuery(Number(id)));
const animatedBgContext = useContext(AnimatedBackgroundContext);
return (
<CollectionsDetail setBackground={animatedBgContext.setBackground} title={<div className="divider font-semibold text-2xl">{collection?.name}</div>} filters={{ collection_id: Number(id) }} />
);
}

25
src/mainview/routes/collection.$source.$id.tsx Normal file
View file

@ -0,0 +1,25 @@
import { createFileRoute } from '@tanstack/react-router';
import { CollectionsDetail } from '../components/CollectionsDetail';
import { useQuery } from '@tanstack/react-query';
import { useContext } from 'react';
import { AnimatedBackgroundContext } from '../scripts/contexts';
import { getCollectionQuery } from '@queries/romm';
import { zodValidator } from '@tanstack/zod-adapter';
import z from 'zod';
export const Route = createFileRoute('/collection/$source/$id')({
component: RouteComponent,
validateSearch: zodValidator(z.object({ countHint: z.number().optional() }))
});
function RouteComponent ()
{
const { source, id } = Route.useParams();
const { countHint } = Route.useSearch();
const { data: collection } = useQuery(getCollectionQuery(source, id));
const animatedBgContext = useContext(AnimatedBackgroundContext);
return (
<CollectionsDetail countHit={countHint} setBackground={animatedBgContext.setBackground} title={<div className="divider font-semibold text-2xl">{collection?.name}</div>} filters={{ collection_id: Number(id), collection_source: source }} />
);
}

94
src/mainview/routes/game/$source.$id.tsx
View file

@ -22,6 +22,7 @@ import { GameDetailsContext } from "@/mainview/scripts/contexts";
import { gameQuery, gamesRecommendedBasedOnGameQuery } from "@queries/romm";
import { GamesSection } from "@/mainview/components/store/GamesSection";
import Details, { DetailElement } from "@/mainview/components/game/Details";
import { AutoFocus } from "@/mainview/components/AutoFocus";
export const Route = createFileRoute("/game/$source/$id")({
loader: async ({ params, context }) =>
@ -29,7 +30,6 @@ export const Route = createFileRoute("/game/$source/$id")({
context.queryClient.prefetchQuery(gameQuery(params.source, params.id));
},
component: RouteComponent,
pendingComponent: GameDetailsUIPending,
errorComponent: Error,
validateSearch: zodValidator(z.object({ focus: z.string().optional() }))
});
@ -71,81 +71,6 @@ function Error (data: ErrorComponentProps)
</AnimatedBackground>;
}
function MainDetailsPending ()
{
const { ref } = useFocusable({ focusKey: "main-details" });
return <main ref={ref} className="flex p-3 flex-col flex-1 min-h-0">
<section className="flex portrait:flex-col my-4 sm:p-0 md:px-12 md:pb-8 pt-4 sm:gap-8 md:gap-12 portrait:w-full h-full min-h-0 rounded-4xl flex-1 z-0 sm:text-sm md:text-base">
<div className="flex gap-6 overflow-hidden bg-base-100 justify-end portrait:w-full rounded-3xl aspect-3/4 portrait:h-24 p-4">
<div className="skeleton w-full h-full"></div>
</div>
<div className="flex-2 flex flex-col sm:gap-1 md:gap-6 sm:pt-2 md:pt-16 min-h-0">
<div className="flex flex-wrap sm:gap-4 md:gap-6 shrink-0">
<DetailElement icon={<Clock />} ></DetailElement>
<DetailElement icon={<div className="skeleton size-6" />} ><div className="skeleton h-4 w-32"></div></DetailElement>
<DetailElement icon={
<Store />
} >
</DetailElement>
</div>
<div className="md:hidden divider divider-vertical m-0"></div>
<div className="text-base-content/80 flex-1 min-h-0 leading-relaxed grow text-wrap whitespace-break-spaces text-ellipsis overflow-hidden text-lg">
<div className="flex flex-col gap-4 w-full">
<div className="skeleton h-4 w-[30%]"></div>
<div className="skeleton h-4 w-[80%]"></div>
<div className="skeleton h-4 w-full"></div>
<div className="skeleton h-4 w-[60%]"></div>
<div className="skeleton h-4 w-full"></div>
<div className="skeleton h-4 w-[80%]"></div>
</div>
</div>
</div>
</section>
</main>;
}
function GameDetailsUIPending ()
{
const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details-error", preferredChildFocusKey: "main-details" });
useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
const { shortcuts } = useShortcutContext();
useEffect(() =>
{
focusSelf();
}, []);
return <AnimatedBackground ref={ref} backgroundKey="game-details">
<div className="z-10">
<FocusContext value={focusKey}>
<div className="h-0" />
<div className="sticky group top-0 bg-base-100/40 group p-2 z-15 transition-colors data-stuck:backdrop-blur-3xl">
<HeaderUI />
</div>
<div className="flex flex-col h-[80vh] overflow-hidden bg-linear-to-t from-base-100 to-base-100/40">
<MainDetailsPending />
</div>
<div className="bg-base-200">
<div className="divider m-0 pb-12"><div className="flex items-center gap-3 opacity-60"><Image className="sm:size-4 md:size-6" />Screenshots</div></div>
<div className="flex flex-col w-full z-0 min-h-0">
<div
className="flex gap-6 px-16 py-2 sm:overflow-scroll md:overflow-hidden no-scrollbar justify-center-safe"
>
{Array.from({ length: 5 }).map((s, i) => <div key={i} className="skeleton h-64 w-lg"></div>)}
</div>
</div>
<footer className="fixed left-0 right-0 bottom-0 w-full p-4 flex items-center justify-end z-10">
<Shortcuts shortcuts={shortcuts} />
</footer>
</div>
</FocusContext>
</div>
</AnimatedBackground>;
}
function MoreDetails (data: { game: FrontEndGameTypeDetailed | undefined; })
{
const [details] = useDetailsSection();
@ -219,7 +144,7 @@ function RouteComponent ()
const { data } = useQuery(gameQuery(source, id));
const { focus } = Route.useSearch();
const [, setUpdate] = useState(0);
const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details", preferredChildFocusKey: "main-details" });
const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details", preferredChildFocusKey: "main-details", forceFocus: true });
const headerRef = useRef(null);
const sentinelRef = useRef(null);
const backgroundImage = data ? new URL(`${RPC_URL(__HOST__)}${data.path_cover}`) : undefined;
@ -228,20 +153,8 @@ function RouteComponent ()
useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
const { shortcuts } = useShortcutContext();
useEffect(() =>
{
if (focus)
{
setFocus(focus, { instant: true });
} else
{
focusSelf();
}
}, []);
useStickyDataAttr(headerRef, sentinelRef, ref);
const recommendedEmulators = data?.emulators?.filter(e => e.validSource);
const recommendedEmulators = data?.emulators?.filter(e => e.validSources.some(em => em.exists));
const { ref: intersct } = useIntersectionObserver({
onChange: (isIntersecting, entry) =>
@ -252,6 +165,7 @@ function RouteComponent ()
return (
<AnimatedBackground ref={ref} backgroundKey="game-details" backgroundUrl={backgroundImage} scrolling>
<AutoFocus focus={focusSelf} />
<GameDetailsContext value={{
update: () => setUpdate(v => v + 1)
}} >

7
src/mainview/routes/games.tsx
View file

@ -12,10 +12,5 @@ function RouteComponent ()
{
const { focus } = Route.useSearch();
return (
<div className="w-full h-full">
<CollectionsDetail focus={focus} id='all-games'
/>
</div>
);
return <CollectionsDetail focus={focus} id='all-games' />;
}

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

@ -15,7 +15,7 @@ import
{
createFileRoute,
} from "@tanstack/react-router";
import { useMutation } from "@tanstack/react-query";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import
{
FocusContext,
@ -44,6 +44,7 @@ import { mobileCheck, useDragScroll } from "../scripts/utils";
import { AnimatedBackgroundContext } from "../scripts/contexts";
import Carousel from "../components/Carousel";
import { closeMutation } from "@queries/system";
import { gameQuery } from "../scripts/queries/romm";
export const Route = createFileRoute("/")({
component: ConsoleHomeUI,
@ -101,6 +102,7 @@ function HomeList (data: {
selectedFilter: string;
})
{
const queryClient = useQueryClient();
const [initFocus, setInitFocus] = useState(false);
const bg = useContext(AnimatedBackgroundContext);
const { } = Route.useSearch;
@ -125,28 +127,20 @@ function HomeList (data: {
Router.navigate({ to: '/game/$source/$id', params: { id: String(sourceId ?? id.id), source: source ?? id.source } });
};
const handleCollectionSelect = (id: string) =>
{
Router.navigate({ to: `/collection/${id}` });
};
const handlePlatformSelect = (source: string, id: string) =>
{
Router.navigate({ to: `/platform/${source}/${id}` });
};
let activeList: JSX.Element;
switch (data.selectedFilter)
{
case 'consoles':
activeList = <>
<PlatformsList saveChildFocus="session" onSelect={handlePlatformSelect} onFocus={handleNodeFocus} className="animate-slide-up" key="consoles-list" id="consoles-list" setBackground={bg.setBackground} />
<AutoFocus parentKey={focusKey} focus={focusSelf} delay={10} />
<Suspense key={data.selectedFilter} fallback={<LoadingCardList id={`card-list-${data.selectedFilter}`} className="*:aspect-8/10! md:py-12" placeholderCount={8} />}>
<PlatformsList saveChildFocus="session" onFocus={handleNodeFocus} className="animate-slide-up" key="consoles-list" id="consoles-list" setBackground={bg.setBackground} />
<AutoFocus parentKey={focusKey} focus={focusSelf} delay={10} />
</Suspense>
</>;
break;
case 'collections':
activeList = <>
<CollectionList saveChildFocus="session" onSelect={handleCollectionSelect} onFocus={handleNodeFocus} className="animate-slide-up" key="collections-list" id="collections-list" setBackground={bg.setBackground} />
<CollectionList saveChildFocus="session" onFocus={handleNodeFocus} className="animate-slide-up" key="collections-list" id="collections-list" setBackground={bg.setBackground} />
<AutoFocus parentKey={focusKey} focus={focusSelf} delay={10} />
</>;
break;
@ -155,12 +149,17 @@ function HomeList (data: {
<GameList
onGameSelect={handleGameSelect}
saveChildFocus="session"
onFocus={handleNodeFocus}
onFocus={(l, n, d) =>
{
const [source, id] = l.split('@');
queryClient.prefetchQuery(gameQuery(source, id));
handleNodeFocus(l, n, d);
}}
className="animate-slide-up"
key="games-list"
id="games-list"
setBackground={bg.setBackground}
filters={{ limit: 12 }}
filters={{ limit: 12, orderBy: 'activity' }}
finalElement={<ShowAllGamesCard />}
/>
<AutoFocus parentKey={focusKey} focus={focusSelf} delay={10} />
@ -201,7 +200,7 @@ function HomeList (data: {
}}>
<div className="landscape:flex landscape:px-16 portrait:min-h-fit portrait:h-fit portrait:pb-32 portrait:w-full landscape:h-full landscape:items-center">
<ErrorBoundary fallback={<HomeListError focused={focused} />}>
<Suspense key={data.selectedFilter} fallback={<LoadingCardList placeholderCount={8} />}>
<Suspense key={data.selectedFilter} fallback={<LoadingCardList id={`card-list-${data.selectedFilter}`} placeholderCount={8} />}>
{activeList}
<SaveScroll id={`card-list-${data.selectedFilter}`} ref={ref} />
</Suspense>
@ -223,6 +222,7 @@ function MainMenu ()
ref={ref}
save-child-focus="session"
className="flex items-center gap-y-1 sm:portrait:bg-base-100 sm:portrait:p-2 sm:portrait:rounded-full sm:gap-1 md:gap-3"
style={{ viewTransitionName: "main-menu" }}
>
<FocusContext.Provider value={focusKey}>
<CircleIcon

25
src/mainview/routes/platform.$source.$id.tsx
View file

@ -3,18 +3,24 @@ import { CollectionsDetail } from "../components/CollectionsDetail";
import { useQuery } from "@tanstack/react-query";
import { RPC_URL } from "../../shared/constants";
import { platformQuery } from "@queries/romm";
import { zodValidator } from "@tanstack/zod-adapter";
import z from "zod";
export const Route = createFileRoute("/platform/$source/$id")({
component: RouteComponent
component: RouteComponent,
validateSearch: zodValidator(z.object({ countHint: z.number().optional() }))
});
function PlatformTitle (data: { pathCover: string | null, platformName?: string; })
function PlatformTitle (data: {})
{
const { source, id } = Route.useParams();
const { data: platform } = useQuery(platformQuery(source, id));
return <div className="sm:landscape:hidden flex flex-col gap-2 pl-2 text-2xl font-semibold text-base-content justify-center drop-shadow">
<div className="divider mb-6 mt-0">
{!!data.pathCover && <img className="size-14 rounded-full p-2" src={`${RPC_URL(__HOST__)}${data.pathCover}`} ></img>}
{data.platformName}
{!!platform && <img className="size-14 rounded-full p-2" src={`${RPC_URL(__HOST__)}${platform.path_cover}`} ></img>}
{platform?.name}
</div>
</div>;
}
@ -22,14 +28,15 @@ function PlatformTitle (data: { pathCover: string | null, platformName?: string;
function RouteComponent ()
{
const { source, id } = Route.useParams();
const { data: platform } = useQuery(platformQuery(source, id));
const { countHint } = Route.useSearch();
return (
<div className="w-full h-full">
{!!platform && <CollectionsDetail
title={<PlatformTitle pathCover={platform.path_cover} platformName={platform.name} />}
filters={{ platform_id: Number(id), platform_slug: platform.slug, platform_source: source }}
/>}
<CollectionsDetail
countHit={countHint}
title={<PlatformTitle />}
filters={{ platform_id: Number(id), platform_source: source }}
/>
</div>
);
}

26
src/mainview/routes/settings/accounts.tsx
View file

@ -7,7 +7,7 @@ import
import { useIsMutating, useMutation, useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import classNames from "classnames";
import { Key, Link, Lock, LogOut, Save, ScanQrCode, Trash, User, X } from "lucide-react";
import { Key, Link, Lock, LogIn, LogOut, Save, ScanQrCode, Trash, User, X } from "lucide-react";
import
{
useEffect,
@ -24,7 +24,8 @@ import { useJobStatus } from "@/mainview/scripts/utils";
import { useInterval } from "usehooks-ts";
import { TwitchIcon } from "@/mainview/scripts/brandIcons";
import { twitchLoginMutation, twitchLoginVerificationQuery, twitchLogoutMutation } from "@queries/settings";
import { rommGetOptionsQuery, rommHasPasswordQuery, rommHostnameQuery, rommLoginMutation, rommLogoutMutation, rommQrLoginMutation, rommUsernameQuery, rommUserQuery } from "@queries/romm";
import { rommGetOptionsQuery, rommLoggedInQuery, rommHostnameQuery, rommLoginMutation, rommLogoutMutation, rommQrLoginMutation, rommUsernameQuery, rommUserQuery } from "@queries/romm";
import { systemApi } from "@/mainview/scripts/clientApi";
export const Route = createFileRoute("/settings/accounts")({
component: RouteComponent,
@ -47,7 +48,10 @@ function LoginQR (data: { id: string, isOpen: boolean, cancel: () => void, url:
<QRCode value={data.url} />
<progress ref={progressRef} className="progress w-56" max="100"></progress>
{!!data.code && <p> Code: {data.code} </p>}
<Button id="qr-login-cancel" focusClassName="btn-warning" type="button" onAction={() => data.cancel()}><X /> Cancel</Button>
<div className="flex gap-2">
<Button id="qr-login-open-url" focusClassName="btn-primary" type="button" onAction={() => systemApi.api.system.open.post({ url: data.url })}><Link /> Open</Button>
<Button id="qr-login-cancel" focusClassName="btn-warning" type="button" onAction={() => data.cancel()}><X /> Cancel</Button>
</div>
</ContextDialog>;
}
@ -83,11 +87,12 @@ function TwitchLogin ()
</div>;
}
function LoginControls (data: { hasPassword: boolean; })
function LoginControls (data: {})
{
const user = useQuery(rommUserQuery());
const user = useQuery(rommUserQuery);
const loginMutation = useMutation(rommQrLoginMutation);
const { data: statusValue, wsRef } = useJobStatus('login-job');
const { data: loginStatusData } = useQuery(rommLoggedInQuery);
const context = useSettingsFormContext({});
const isMutatingRomm = useIsMutating({ mutationKey: ["romm", "auth"] }) > 0;
const logoutMutation = useMutation({
@ -107,15 +112,15 @@ function LoginControls (data: { hasPassword: boolean; })
}
<Button id="qr-login" type="button" disabled={loginMutation.isPending} onAction={() => loginMutation.mutate()}><ScanQrCode /> </Button>
<Button id="can-submit" disabled={!context.state.canSubmit || !context.state.isDirty} type="submit" onAction={() => context.handleSubmit()} >
<Save /> Save
<LogIn /> Login
</Button>
{data.hasPassword &&
{loginStatusData?.hasLogin &&
<Button id="forget" onAction={() =>
{
toast("Logout", { id: 'romm-logout-noti' });
logoutMutation.mutate();
}} disabled={isMutatingRomm} type="button" >
<Trash /> Forget
<LogOut /> Logout
</Button>
}
<Button id="cancel" disabled={context.state.isDefaultValue} type="reset" onAction={() => context.reset()}>
@ -137,7 +142,6 @@ function RouteComponent ()
preferredChildFocusKey: focus
});
const { data: hasPassword } = useQuery(rommHasPasswordQuery);
const { data: hostname } = useQuery(rommHostnameQuery);
const { data: username } = useQuery(rommUsernameQuery);
@ -217,10 +221,10 @@ function RouteComponent ()
<loginForm.AppField name="username" children={(field) =>
<field.FormOption label={"Romm Username"} icon={<User />} type="text" />} />
<loginForm.AppField name="password" children={(field) =>
<field.FormOption label={"Romm Password"} icon={<Key />} type="password" placeholder={hasPassword ? '*****' : "Password"} />} />
<field.FormOption label={"Romm Password"} icon={<Key />} type="password" placeholder="Password" />} />
<loginForm.Subscribe children={(form) =>
<OptionSpace id="login-controls-space" className="justify-end border-0">
<LoginControls hasPassword={hasPassword === true} />
<LoginControls />
</OptionSpace>} />
</form>
</loginForm.AppForm>

114
src/mainview/routes/settings/emulators.tsx
View file

@ -2,16 +2,16 @@ import { createFileRoute } from '@tanstack/react-router';
import { OptionSpace } from '../../components/options/OptionSpace';
import { OptionInput } from '../../components/options/OptionInput';
import { useMutation, useQuery } from '@tanstack/react-query';
import { useCallback, useEffect, useState } from 'react';
import { JSX, useCallback, useEffect, useState } from 'react';
import { Button } from '../../components/options/Button';
import { Check, ChevronDown, FolderSearch, SearchAlert, Trash, TriangleAlert } from 'lucide-react';
import { Check, ChevronDown, FileQuestion, FolderSearch, Plug, SearchAlert, Store, Trash, TriangleAlert } from 'lucide-react';
import { ContextDialog, ContextList, DialogEntry, OptionElement } from '../../components/ContextDialog';
import classNames from 'classnames';
import { twMerge } from 'tailwind-merge';
import { RPC_URL } from '../../../shared/constants';
import emulators from '@emulators';
import { FocusContext, setFocus, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { GamePadButtonCode, useShortcuts } from '@/mainview/scripts/shortcuts';
import { GamePadButtonCode, Shortcut, useShortcuts } from '@/mainview/scripts/shortcuts';
import FilePicker from '@/mainview/components/FilePicker';
import { dirname } from 'pathe';
import { autoEmulatorsQuery, customEmulatorAddMutation, customEmulatorDeleteMutation, customEmulatorRemoveValueQuery, customEmulatorsQuery, setCustomEmulatorMutation } from '@queries/settings';
@ -19,6 +19,7 @@ import Carousel from '@/mainview/components/Carousel';
import { FOCUS_KEYS } from '@/mainview/scripts/types';
import { scrollIntoNearestParent, scrollIntoViewHandler, useDragScroll } from '@/mainview/scripts/utils';
import { SettingsOption } from '@/mainview/components/options/SettingsOption';
import { Router } from '@/mainview';
export const Route = createFileRoute('/settings/emulators')({
component: RouteComponent,
@ -54,7 +55,7 @@ function EmulatorListType (data: { category: string, action: (e: string) => void
const { ref, focusKey } = useFocusable({ focusKey: 'list-section' });
return <div ref={ref} className='grow'>
<FocusContext value={focusKey}>
<ContextList className='sm:h-[80vh] md:h-[60vh] overflow-auto' options={Object.keys(emulators).filter(e => e.startsWith(data.category)).map(e => ({
<ContextList className='sm:h-[80vh] md:h-[60vh] p-2 overflow-auto' options={Object.keys(emulators).filter(e => e.startsWith(data.category)).map(e => ({
id: e,
action: (ctx) =>
{
@ -185,43 +186,88 @@ function EmulatorPath (data: { id: string; })
}
function EmulatorBadge (data: {
path?: string,
exists: boolean,
emulator: string;
isCritical: boolean;
pathCover?: string;
emulator: FrontEndEmulator & {
isCritical: boolean;
},
addOverride: (emulator: string) => void;
} & FocusParams)
{
const { focusKey, ref, focused } = useFocusable({
focusKey: FOCUS_KEYS.EMULATOR_CARD(data.emulator),
focusKey: FOCUS_KEYS.EMULATOR_CARD(data.emulator.name),
onFocus (l, p, details) { data.onFocus?.(focusKey, ref.current, details); }
});
useShortcuts(focusKey, () => [{
label: 'Add Override',
button: GamePadButtonCode.A,
action: () =>
data.addOverride(data.emulator)
}], [data.addOverride]);
useShortcuts(focusKey, () =>
{
const shortcuts: Shortcut[] = [{
label: 'Add Override',
button: GamePadButtonCode.A,
action: () =>
data.addOverride(data.emulator.name)
}];
if (data.emulator.validSources.some(s => s.type === 'store'))
{
shortcuts.push({
button: GamePadButtonCode.Y,
label: "Visit Store",
action ()
{
Router.navigate({ to: '/store/details/emulator/$id', params: { id: data.emulator.name } });
},
});
}
return shortcuts;
}, [data.addOverride]);
return <div ref={ref} className={classNames("tooltip tooltip-primary tooltip-right", { "tooltip-open": focused })} data-tip={`${emulators[data.emulator]}`}>
<div className={
twMerge('flex flex-col rounded-3xl bg-base-300 justify-center items-center p-4 overflow-hidden h-full',
classNames({
"bg-base-200": !data.path,
"border-dashed border-base-content/40 border-2": !data.path && data.isCritical && !focused,
"border-dashed border-accent border-4": focused
}))
}>
<p className='flex gap-2 font-semibold'>
{data.path ? data.exists ? <Check /> : <TriangleAlert className='text-error' /> : <SearchAlert className={data.isCritical ? 'text-warning' : 'text-base-content/40'} />}
{!!data.pathCover && <img className='size-6 drop-shadow drop-shadow-black/20' src={`${RPC_URL(__HOST__)}${data.pathCover}`}></img>}
{data.emulator}
</p>
{data.path ? <small className={classNames('opacity-60 max-w-full overflow-clip text-nowrap text-ellipsis', { 'text-error': !data.exists })}>{data.path}</small> : ""}
let statusIcon = <SearchAlert className={data.emulator.isCritical ? 'text-warning' : 'text-base-content/40'} />;
if (data.emulator.validSources.some(s => s.exists))
{
statusIcon = <Check />;
}
return <div ref={ref} className={
twMerge('grid grid-rows-3 grid-cols-1 flex-col rounded-3xl bg-base-300 items-center p-4 overflow-hidden h-full select-none focusable focusable-accent',
classNames({
"bg-base-200": !data.emulator.validSources.some(v => v.exists),
"border-dashed border-base-content/40 border-2": !data.emulator.validSources.some(v => v.exists) && data.emulator.isCritical && !focused,
}))
}>
<div className='flex flex-col items-center gap-1'>
<div className='flex gap-2 font-semibold'>
{statusIcon}
{!!data.emulator.logo && <img className='size-6 drop-shadow drop-shadow-black/20' src={`${RPC_URL(__HOST__)}${data.emulator.logo}`}></img>}
{data.emulator.name}
</div>
<div className='text-base-content/40 max-w-full overflow-hidden text-nowrap text-ellipsis'>
{data.emulator.description ?? emulators[data.emulator.name]}
</div>
</div>
{data.emulator.validSources.length > 0 && <div className="divider">
<div className='flex p-2 gap-1'>{data.emulator.validSources.map(s =>
{
let icon = <FileQuestion />;
let action: (() => void) | undefined = undefined;
let className = "bg-warning text-warning-content";
switch (s.type)
{
case 'store':
icon = <Store />;
className = "hover:bg-base-content hover:text-base-100 cursor-pointer bg-accent text-accent-content";
action = () => { Router.navigate({ to: '/store/details/emulator/$id', params: { id: data.emulator.name } }); };
break;
case 'embedded':
icon = <Plug />;
className = "bg-info text-info-content";
break;
}
return <div onClick={action} className={twMerge('drop-shadow-md rounded-full p-1', className)}>{icon}</div>;
})}</div>
</div>}
<ul className='list'>
{data.emulator.validSources.slice(0, 3).filter(s => s.exists).map(s => <li className={classNames('list-item opacity-60 max-w-full overflow-clip text-nowrap text-ellipsis', { 'text-error': !s.exists })}>{s.binPath}</li>)}
</ul>
</div>;
}
@ -233,7 +279,7 @@ function EmulatorBadges (data: { path?: string; addOverride: (emulator: string)
{
return data.toSorted((a, b) =>
{
const sourceCompare = (b.validSource ? 1 : 0) - (a.validSource ? 1 : 0);
const sourceCompare = (b.validSources.some(s => s.exists) ? 1 : 0) - (a.validSources.some(s => s.exists) ? 1 : 0);
if (sourceCompare !== 0)
{
return sourceCompare;
@ -250,10 +296,10 @@ function EmulatorBadges (data: { path?: string; addOverride: (emulator: string)
onFocus (l, p, details) { data.onFocus?.(focusKey, ref.current, details); }
});
useDragScroll(ref);
return <Carousel scrollRef={ref} className='grid grid-flow-col overflow-x-scroll auto-cols-[16rem] grid-rows-[repeat(3,4rem)] gap-2 justify-center-safe py-4 no-scrollbar'>
return <Carousel scrollRef={ref} className='grid grid-flow-col overflow-x-scroll auto-cols-[16rem] grid-rows-[repeat(1,12rem)] gap-2 justify-center-safe py-4 no-scrollbar px-12'>
<FocusContext value={focusKey}>
{autoEmulators?.map(e => <EmulatorBadge onFocus={(k, n, d) => scrollIntoNearestParent(n)} key={e.name} isCritical={e.isCritical} addOverride={data.addOverride} pathCover={e.logo} path={e.validSource?.binPath} exists={!!e.validSource} emulator={e.name} />)}
{autoEmulators?.map(e => <EmulatorBadge onFocus={(k, n, d) => scrollIntoNearestParent(n)} key={e.name} addOverride={data.addOverride} emulator={e} />)}
</FocusContext>
</Carousel>;

4
src/mainview/routes/settings/plugins.tsx
View file

@ -48,7 +48,9 @@ function RouteComponent ()
{
return <>
<div className="divider">{source === 'builtin' ? "Built In" : "Store"}</div>
{plugins.map(p => <Plugin key={p.name} plugin={p} setEnabled={(v) => pluginMutation.mutate({ id: p.name, enabled: v })} />)}
<div className='flex flex-col gap-2'>
{plugins.map(p => <Plugin key={p.name} plugin={p} setEnabled={(v) => pluginMutation.mutate({ id: p.name, enabled: v })} />)}
</div>
</>;
})}
</>;

23
src/mainview/routes/store/details.emulator.$id.tsx
View file

@ -11,7 +11,7 @@ import Shortcuts from "@/mainview/components/Shortcuts";
import { AnimatedBackground } from "@/mainview/components/AnimatedBackground";
import { systemApi } from "@/mainview/scripts/clientApi";
import { Button } from "@/mainview/components/options/Button";
import { ChevronDown, Cpu, Download, Gamepad2, Info, Settings, Trash2, TriangleAlert, WandSparkles } from "lucide-react";
import { ChevronDown, Cpu, Download, Gamepad2, Info, Puzzle, Settings, Trash2, TriangleAlert, WandSparkles } from "lucide-react";
import { ContextList, DialogEntry, useContextDialog } from "@/mainview/components/ContextDialog";
import { RPC_URL } from "@/shared/constants";
import Screenshots from "@/mainview/components/Screenshots";
@ -33,7 +33,7 @@ export const Route = createFileRoute('/store/details/emulator/$id')({
async loader (ctx)
{
ctx.context.queryClient.prefetchQuery(storeEmulatorDetailsQuery(ctx.params.id));
ctx.context.queryClient.prefetchQuery(storeEmulatorsRecommendedQuery);
ctx.context.queryClient.prefetchQuery(storeEmulatorsRecommendedQuery(ctx.params.id));
ctx.context.queryClient.prefetchQuery(gamesRecommendedBasedOnEmulatorQuery(ctx.params.id));
}
});
@ -208,7 +208,7 @@ function TitleArea (data: {
}
};
installButtonContent = <><span className="loading loading-spinner loading-lg"></span>{installState ? status.install[installState] : biosDownloadState ? status.bios[biosDownloadState] : undefined}</>;
} else if (data.emulator.validSource)
} else if (data.emulator.validSources.some(s => s.exists))
{
installButtonContent = <><Settings /> Options</>;
} else if (data.emulator.downloads.length > 0)
@ -235,10 +235,10 @@ function TitleArea (data: {
<div className="flex flex-col grow gap-1 sm:portrait:items-center md:items-start">
<h1 className="text-4xl font-semibold text-shadow-md">{data.emulator?.name ?? <div className="skeleton h-10 w-84" />}</h1>
<div className="flex gap-2">
{data.emulator?.systems.map(({ id, name, icon }) =>
{data.emulator?.systems.map(({ id, name, iconUrl }) =>
{
return <div key={id} className="flex gap-1 items-center text-base-content/35 mt-0.5">
{!!icon && <img className="size-6 p-1 bg-base-200 rounded-full" src={`${RPC_URL(__HOST__)}${icon}`} />}
{!!iconUrl && <img className="size-6 p-1 bg-base-200 rounded-full" src={`${RPC_URL(__HOST__)}${iconUrl}`} />}
<p className="text-nowrap text-ellipsis overflow-hidden dark:text-shadow-lg">{name}</p>
</div>;
}) ?? <><div className="skeleton h-4 w-48" /><div className="skeleton h-4 w-32" /></>}
@ -249,7 +249,7 @@ function TitleArea (data: {
{!!data.emulator?.bios?.[0] && <div className="tooltip" data-tip="Has BIOS">
<div className="flex items-center justify-center bg-base-200 p-2 rounded-full"><Cpu className="size-5" /></div>
</div>}
{data.emulator && !!data.emulator.integration && data.emulator.validSource?.type === 'store' && <div className="tooltip" data-tip="Has Integration">
{data.emulator && !!data.emulator.integration && data.emulator.validSources.some(s => s.type === 'store') && <div className="tooltip" data-tip="Has Integration">
<div className="bg-base-200 rounded-full p-2"><WandSparkles className="size-5" /></div>
</div>}
</div>
@ -296,7 +296,7 @@ export function RouteComponent ()
});
const { data: emulator, isPending: isEmulatorPending } = useQuery(storeEmulatorDetailsQuery(id));
const { data: recommendedEmulators } = useQuery(storeEmulatorsRecommendedQuery);
const { data: recommendedEmulators } = useQuery(storeEmulatorsRecommendedQuery(id));
const { data: recommendedGames } = useQuery(gamesRecommendedBasedOnEmulatorQuery(id));
useShortcuts(focusKey, () => [{
@ -323,14 +323,19 @@ export function RouteComponent ()
if (emulator.keywords)
stats.push({ label: "Tags", content: emulator.keywords });
stats.push({ label: "Systems", content: emulator.systems.map(s => s.name) });
stats.push(...emulator.sources.flatMap(s => [{ label: "Source", content: s.type, icon: emulatorStatusIcons[s.type] }, { label: "Location", content: s.binPath }]));
stats.push(...emulator.sources.flatMap(s => [{
label: "Source", content: <div className="flex flex-wrap gap-1 p-1">
<div className="flex gap-1 flex-1">{emulatorStatusIcons[s.type]}{s.type}:</div>
<div className="grow text-base-content/40">{s.binPath}</div>
</div>
}]));
if (emulator.bios)
stats.push({
label: "Bios", content: emulator.bios && emulator.bios.length > 0 ? emulator.bios : <div className="text-warning font-semibold">Missing</div>
});
if (emulator.integration)
{
stats.push({ label: "Integration", content: `${emulator.integration.name} (${emulator.integration.version})` });
stats.push({ label: "Integration", icon: <Puzzle />, content: `${emulator.integration.name} (${emulator.integration.version})` });
}
}

6
src/mainview/routes/store/tab/emulators.tsx
View file

@ -49,7 +49,11 @@ function RouteComponent ()
id={data.name}
key={data.name}
emulator={data}
onFocus={({ node, details }) => { node.scrollIntoView({ behavior: details.instant ? 'instant' : 'smooth', block: 'center' }); }}
onFocus={({ id, node, details }) =>
{
node.scrollIntoView({ behavior: details.instant ? 'instant' : 'smooth', block: 'center' });
storeContext.prefetchDetails('emulator', 'store', id);
}}
onSelect={(id, focus) => storeContext.showDetails('emulator', 'store', id, focus)}
/>
)) ?? Array.from({ length: 10 }).map((_, i) => <div key={i} className="skeleton rounded-3xl" />)}

10
src/mainview/routes/store/tab/games.tsx
View file

@ -1,12 +1,13 @@
import { FocusContext, getCurrentFocusKey, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { createFileRoute, useSearch } from '@tanstack/react-router';
import { Gamepad2 } from 'lucide-react';
import { useEffect } from 'react';
import { useContext, useEffect } from 'react';
import { useInfiniteQuery } from '@tanstack/react-query';
import FrontEndGameCard from '@/mainview/components/FrontEndGameCard';
import { GetFocusedElement } from '@/mainview/scripts/spatialNavigation';
import LoadMoreButton from '@/mainview/components/LoadMoreButton';
import { storeGamesInfiniteQuery } from '@queries/store';
import { StoreContext } from '@/mainview/scripts/contexts';
export const Route = createFileRoute('/store/tab/games')({
component: RouteComponent
@ -18,6 +19,7 @@ function RouteComponent ()
const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "main-area", preferredChildFocusKey: focus });
const { data, fetchNextPage, isFetchingNextPage, isFetching } = useInfiniteQuery(storeGamesInfiniteQuery);
const storeContext = useContext(StoreContext);
useEffect(() =>
{
@ -45,7 +47,11 @@ function RouteComponent ()
</div>
<div className="grid grid-cols-[repeat(auto-fill,18rem)] auto-rows-[21rem] py-2 md:px-4 gap-4 justify-center-safe">
{data?.pages.flatMap((page) => (
page.data.map((g, i) => <FrontEndGameCard onFocus={handleFocus} key={g.id.id} game={g} index={i} />))
page.data.map((g, i) => <FrontEndGameCard onFocus={(k, n, d) =>
{
storeContext.prefetchDetails('game', g.id.source, g.id.id);
handleFocus(k, n, d);
}} key={g.id.id} game={g} index={i} />))
) ?? Array.from({ length: 20 }).map((_, i) => <div key={i} className="flex flex-col gap-4">
<div className="skeleton grow w-full"></div>
<div className="skeleton h-4 w-[80%]"></div>

4
src/mainview/routes/store/tab/index.tsx
View file

@ -107,9 +107,9 @@ function Main (data: { games?: FrontEndGameTypeDetailed[]; })
export function RouteComponent ()
{
const { focus } = useSearch({ from: '/store/tab' });
const { data: crucialEmulators, isSuccess } = useQuery({ ...autoEmulatorsQuery, select: (data) => data.filter(e => !e.validSource && e.isCritical) });
const { data: crucialEmulators, isSuccess } = useQuery({ ...autoEmulatorsQuery, select: (data) => data.filter(e => !e.validSources.some(s => s.exists) && e.isCritical) });
const { data: featuredGames } = useQuery(storeFeaturedGamesQuery);
const { data: recommendedEmulators } = useQuery(storeEmulatorsRecommendedQuery);
const { data: recommendedEmulators } = useQuery(storeEmulatorsRecommendedQuery());
const { focusKey, ref, focusSelf } = useFocusable({ focusKey: 'main-area', preferredChildFocusKey: focus ?? "recommended-emulators" });
const storeContext = useContext(StoreContext);

18
src/mainview/routes/store/tab/route.tsx
View file

@ -3,9 +3,12 @@ import { FilterUI } from '@/mainview/components/Filters';
import { HeaderUI } from '@/mainview/components/Header';
import Shortcuts from '@/mainview/components/Shortcuts';
import { StoreContext } from '@/mainview/scripts/contexts';
import { gameQuery } from '@/mainview/scripts/queries/romm';
import { storeEmulatorDetailsQuery } from '@/mainview/scripts/queries/store';
import { GamePadButtonCode, useShortcutContext, useShortcuts } from '@/mainview/scripts/shortcuts';
import { mobileCheck, useStickyDataAttr } from '@/mainview/scripts/utils';
import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { useQueryClient } from '@tanstack/react-query';
import { useMatchRoute } from '@tanstack/react-router';
import { createFileRoute, Outlet } from '@tanstack/react-router';
import { zodValidator } from '@tanstack/zod-adapter';
@ -78,6 +81,7 @@ function RouteComponent ()
preferredChildFocusKey: 'top-area',
forceFocus: true
});
const queryClient = useQueryClient();
const headerRef = useRef(null);
const sentinelRef = useRef(null);
const filters: Record<string, FilterOption> = {
@ -110,11 +114,23 @@ function RouteComponent ()
};
const handlePrefetch = (type: string, source: string, id: string) =>
{
if (type === 'emulator')
{
queryClient.prefetchQuery(storeEmulatorDetailsQuery(id));
}
else if (type === 'game')
{
queryClient.prefetchQuery(gameQuery(source, id));
}
};
const isMobile = mobileCheck();
useStickyDataAttr(headerRef, sentinelRef, ref);
return <div ref={ref} className='overflow-y-scroll w-screen h-screen' >
<StoreContext value={{ showDetails: handleDetails }} >
<StoreContext value={{ showDetails: handleDetails, prefetchDetails: handlePrefetch }} >
<FocusContext.Provider value={focusKey}>
<div className="relative flex flex-col min-h-screen text-base-content z-10" >
<div ref={sentinelRef} className="h-0" />