feat First implementation of plugins system
feat: Added PCSX2 integration feat: Revamped UI a bit made it look better on light mode
This commit is contained in:
parent
d85268fad7
commit
a78e75335f
GPG key ID:
7611A451D2A5D37A
95 changed files with 2639 additions and 1259 deletions
|
|
@ -4,6 +4,7 @@ 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";
|
||||
|
||||
export const Route = createRootRouteWithContext<RouterContext>()({
|
||||
component: RootComponent,
|
||||
|
|
@ -14,9 +15,24 @@ function RootComponent ()
|
|||
const isMobile = mobileCheck();
|
||||
const theme = useLocalSetting('theme');
|
||||
const { control } = useActiveControl();
|
||||
useEffect(() =>
|
||||
{
|
||||
if (theme === 'auto')
|
||||
{
|
||||
const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
|
||||
window.document.documentElement.dataset.theme = preferred;
|
||||
} else
|
||||
{
|
||||
window.document.documentElement.dataset.theme = theme;
|
||||
}
|
||||
|
||||
}, [theme]);
|
||||
|
||||
return (
|
||||
<div data-theme={theme === 'auto' ? undefined : theme} data-device={isMobile ? 'mobile' : ''} data-active-control={control} className="w-screen h-screen overflow-hidden">
|
||||
<div data-device={isMobile ? 'mobile' : ''} data-active-control={control} className="w-screen h-screen overflow-hidden">
|
||||
<Outlet />
|
||||
<Notifications />
|
||||
<Toaster containerStyle={{ viewTimelineName: 'toasters' }} />
|
||||
|
|
|
|||
|
|
@ -1,23 +1,16 @@
|
|||
import { createFileRoute, ErrorComponentProps } from "@tanstack/react-router";
|
||||
import { CommandEntry, RPC_URL } from "@shared/constants";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { JSX, RefObject, useEffect, useRef, useState } from "react";
|
||||
import { RPC_URL } from "@shared/constants";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { FocusContext, setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import classNames from "classnames";
|
||||
import { Calendar, Clock, CloudDownload, Download, EllipsisVertical, Folder, Gamepad2, HardDrive, Image, Info, PackageOpen, Play, Settings, Store, Trash, TriangleAlert, Trophy } from "lucide-react";
|
||||
import { Calendar, Clock, Folder, Gamepad2, Image, Info, Store, TriangleAlert, Trophy } from "lucide-react";
|
||||
import { HeaderUI } from "../../components/Header";
|
||||
import prettyBytes from 'pretty-bytes';
|
||||
import { useFocusEventListener } from "../../scripts/spatialNavigation";
|
||||
import { AnimatedBackground } from "../../components/AnimatedBackground";
|
||||
import toast from "react-hot-toast";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Router } from "../..";
|
||||
import { ContextDialog, ContextList, DialogEntry, useContextDialog } from "../../components/ContextDialog";
|
||||
import Shortcuts from "../../components/Shortcuts";
|
||||
import { GamePadButtonCode, useShortcutContext, useShortcuts } from "@/mainview/scripts/shortcuts";
|
||||
import Screenshots from "@/mainview/components/Screenshots";
|
||||
import { HandleGoBack, scrollIntoViewHandler, useStickyDataAttr } from "@/mainview/scripts/utils";
|
||||
import useActiveControl from "@/mainview/scripts/gamepads";
|
||||
import { FilterUI } from "@/mainview/components/Filters";
|
||||
import StatList, { StatEntry } from "@/mainview/components/StatList";
|
||||
import { useIntersectionObserver, useLocalStorage } from "usehooks-ts";
|
||||
|
|
@ -25,19 +18,17 @@ import { EmulatorsSection } from "@/mainview/components/store/EmulatorsSection";
|
|||
import { zodValidator } from "@tanstack/zod-adapter";
|
||||
import z from "zod";
|
||||
import Achievements from "@/mainview/components/game/Achievements";
|
||||
import { getErrorMessage } from "react-error-boundary";
|
||||
import { GameDetailsContext } from "@/mainview/scripts/contexts";
|
||||
import { rommApi } from "@/mainview/scripts/clientApi";
|
||||
import { deleteGameMutation, gameQuery, gamesRecommendedBasedOnGameQuery, installMutation, playMutation } from "@queries/romm";
|
||||
import { gameQuery, gamesRecommendedBasedOnGameQuery } from "@queries/romm";
|
||||
import { GamesSection } from "@/mainview/components/store/GamesSection";
|
||||
import Details, { DetailElement } from "@/mainview/components/game/Details";
|
||||
|
||||
export const Route = createFileRoute("/game/$source/$id")({
|
||||
loader: async ({ params, context }) =>
|
||||
{
|
||||
const data = await context.queryClient.fetchQuery(gameQuery(params.source, params.id));
|
||||
return { data };
|
||||
context.queryClient.prefetchQuery(gameQuery(params.source, params.id));
|
||||
},
|
||||
component: GameDetailsUI,
|
||||
component: RouteComponent,
|
||||
pendingComponent: GameDetailsUIPending,
|
||||
errorComponent: Error,
|
||||
validateSearch: zodValidator(z.object({ focus: z.string().optional() }))
|
||||
|
|
@ -92,13 +83,13 @@ function MainDetailsPending ()
|
|||
</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">
|
||||
<Detail icon={<Clock />} ></Detail>
|
||||
<Detail icon={<div className="skeleton size-6" />} ><div className="skeleton h-4 w-32"></div></Detail>
|
||||
<Detail icon={
|
||||
<DetailElement icon={<Clock />} ></DetailElement>
|
||||
<DetailElement icon={<div className="skeleton size-6" />} ><div className="skeleton h-4 w-32"></div></DetailElement>
|
||||
<DetailElement icon={
|
||||
<Store />
|
||||
} >
|
||||
|
||||
</Detail>
|
||||
</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">
|
||||
|
|
@ -155,9 +146,8 @@ function GameDetailsUIPending ()
|
|||
</AnimatedBackground>;
|
||||
}
|
||||
|
||||
function MoreDetails (data: {})
|
||||
function MoreDetails (data: { game: FrontEndGameTypeDetailed | undefined; })
|
||||
{
|
||||
const { data: game } = Route.useLoaderData();
|
||||
const [details] = useDetailsSection();
|
||||
const { ref, focusKey, hasFocusedChild } = useFocusable({
|
||||
focusKey: "game-more-details-section",
|
||||
|
|
@ -167,456 +157,41 @@ function MoreDetails (data: {})
|
|||
|
||||
return <div ref={ref} className="scroll-mt-[15vh]">
|
||||
<FocusContext value={focusKey}>
|
||||
<Divider rootFocusKey={focusKey} showShortcuts={hasFocusedChild} />
|
||||
<Divider game={data.game} rootFocusKey={focusKey} showShortcuts={hasFocusedChild} />
|
||||
<div className="bg-base-200 py-12 min-h-[80vh]">
|
||||
<div key={details} className="h-full animate-slide-up">
|
||||
{details === 'screenshots' && <div className="h-[60vh]"><Screenshots screenshots={game.paths_screenshots} /></div>}
|
||||
{details === 'stats' && <Stats />}
|
||||
{details === 'achievements' && <Achievements game={game} />}
|
||||
{details === 'screenshots' && !!data.game && <div className="h-[60vh]"><Screenshots screenshots={data.game.paths_screenshots} /></div>}
|
||||
{details === 'stats' && <Stats game={data.game} />}
|
||||
{details === 'achievements' && !!data.game && <Achievements game={data.game} />}
|
||||
</div>
|
||||
</div>
|
||||
</FocusContext>
|
||||
</div>;
|
||||
}
|
||||
|
||||
function Details (data: { mainAreaRef: RefObject<HTMLDivElement | null>; })
|
||||
function Stats (data: { game: FrontEndGameTypeDetailed | undefined; })
|
||||
{
|
||||
const { data: game } = Route.useLoaderData();
|
||||
const { ref, focusKey } = useFocusable({
|
||||
focusKey: 'main-details',
|
||||
onFocus: (l, p, d) => scrollIntoViewHandler({ block: 'end', behavior: 'smooth' })(focusKey, ref.current, d),
|
||||
preferredChildFocusKey: "play-btn",
|
||||
saveLastFocusedChild: false
|
||||
});
|
||||
|
||||
const platformCoverImg = new URL(`${RPC_URL(__HOST__)}${game?.path_platform_cover ?? ''}`);
|
||||
platformCoverImg.searchParams.set("width", "64");
|
||||
const gameCoverImg = game?.path_cover ? `${RPC_URL(__HOST__)}${game?.path_cover}` : undefined;
|
||||
|
||||
let fileSizeIcon: JSX.Element | undefined;
|
||||
if (!game)
|
||||
{
|
||||
fileSizeIcon = <span className="loading loading-spinner loading-lg"></span>;
|
||||
} else if (game.missing)
|
||||
{
|
||||
fileSizeIcon = <TriangleAlert />;
|
||||
} else if (game.local)
|
||||
{
|
||||
fileSizeIcon = <HardDrive />;
|
||||
} else
|
||||
{
|
||||
fileSizeIcon = <CloudDownload />;
|
||||
}
|
||||
|
||||
return <main ref={ref} className="flex p-3 flex-col flex-1 min-h-0">
|
||||
<FocusContext value={focusKey}>
|
||||
<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">
|
||||
{gameCoverImg ?
|
||||
<img className="drop-shadow-2xl drop-shadow-base-300/40 w-full object-cover rounded-2xl" src={gameCoverImg}></img> :
|
||||
<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">
|
||||
<Detail icon={<Clock />} >{game?.last_played ? new Date(game.last_played).toDateString() : "Never"}</Detail>
|
||||
{!!game && (game.fs_size_bytes !== null || game.missing) &&
|
||||
<div className={classNames({ "text-error": game.missing })}>
|
||||
<div className="tooltip" data-tip={game.path_fs}>
|
||||
<Detail icon={fileSizeIcon} >{game.missing ? 'Missing' : prettyBytes(game.fs_size_bytes!)}</Detail>
|
||||
</div>
|
||||
</div>}
|
||||
<Detail icon={<img className="size-6" src={platformCoverImg.href}></img>} >{game?.platform_display_name ?? <div className="skeleton h-4 w-32"></div>}</Detail>
|
||||
<Detail icon={
|
||||
<Store />
|
||||
} >
|
||||
{game?.source ?? game?.id.source}
|
||||
{game?.local && <small className="text-base-content/60 font-semibold">local</small>}</Detail>
|
||||
</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">
|
||||
{game?.summary ?? <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>
|
||||
{!!game && <ActionButtons key="actions" />}
|
||||
</div>
|
||||
</section>
|
||||
</FocusContext>
|
||||
</main>;
|
||||
}
|
||||
|
||||
function AchievementsInfo (data: InteractParams)
|
||||
{
|
||||
const { data: game } = Route.useLoaderData();
|
||||
if (!game.achievements)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
return <ActionButton key="achievements" square tooltip="Achievements" type="base" className="sm:rounded-2xl md:rounded-3xl" id="achievements" onAction={data.onAction} >
|
||||
<div className="flex flex-col sm:gap-0 md:gap-2 items-center sm:text-xl md:text-2xl sm:px-4 sm:py-2 md:p-0">
|
||||
<div className="flex flex-row items-center gap-1">
|
||||
<Trophy />
|
||||
{`${game.achievements.unlocked}/${game.achievements.total}`}
|
||||
</div>
|
||||
<progress className="progress progress-secondary w-full" value={game.achievements.unlocked / game.achievements.total} max="1"></progress>
|
||||
</div>
|
||||
</ActionButton>;
|
||||
}
|
||||
|
||||
function MainActions ()
|
||||
{
|
||||
const { data } = Route.useLoaderData();
|
||||
const { source, id } = Route.useParams();
|
||||
const installMut = useMutation(installMutation(source, id));
|
||||
const playMut = useMutation({
|
||||
...playMutation, onError (error)
|
||||
{
|
||||
toast.error(error.message);
|
||||
},
|
||||
});
|
||||
const ws = useRef<{ send: (data: string) => void; }>(undefined);
|
||||
const [progress, setProgress] = useState<number | undefined>(undefined);
|
||||
const [status, setStatus] = useState<string | undefined>(undefined);
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
const [details, setDetails] = useState<string | undefined>(undefined);
|
||||
const [commands, setCommands] = useState<CommandEntry[] | undefined>(undefined);
|
||||
const [preferredCommand, setPreferredCommand] = useLocalStorage<string | number | undefined>(`${data.source ?? data.id.source}-${data.source_id ?? data.id.id}-preferred-command`, undefined);
|
||||
const queryClient = useQueryClient();
|
||||
const validCommands = commands ? commands.filter(c => c.valid) : [];
|
||||
const validDefaultCommand = commands?.find(c =>
|
||||
{
|
||||
if (!c.valid) return false;
|
||||
if (preferredCommand && c.id !== preferredCommand) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const sub = rommApi.api.romm.status({ source: data.id.source })({ id: data.id.id }).subscribe();
|
||||
ws.current = sub.ws;
|
||||
|
||||
sub.subscribe((e) =>
|
||||
{
|
||||
setStatus(e.data.status);
|
||||
setProgress((e.data as any).progress);
|
||||
setDetails((e.data as any).details);
|
||||
setCommands((e.data as any).commands);
|
||||
|
||||
if (e.data.status === 'refresh')
|
||||
{
|
||||
queryClient.invalidateQueries({ queryKey: ['game', data.id] });
|
||||
Router.navigate({ to: '/game/$source/$id', params: { id, source }, replace: true });
|
||||
} else if (e.data.status === 'error')
|
||||
{
|
||||
const errorMessage = getErrorMessage(e.data.error);
|
||||
if (!errorMessage) return;
|
||||
toast.error(errorMessage);
|
||||
setError(errorMessage);
|
||||
}
|
||||
});
|
||||
|
||||
return () =>
|
||||
{
|
||||
sub.close();
|
||||
ws.current = undefined;
|
||||
};
|
||||
}, [data.id]);
|
||||
|
||||
let progressIcon: JSX.Element | undefined = undefined;
|
||||
switch (status)
|
||||
{
|
||||
case 'download':
|
||||
progressIcon = <Download />;
|
||||
break;
|
||||
case 'queued':
|
||||
progressIcon = <Clock />;
|
||||
break;
|
||||
case 'extract':
|
||||
progressIcon = <PackageOpen />;
|
||||
break;
|
||||
}
|
||||
|
||||
const showProgress = progress !== null && !!progressIcon;
|
||||
useEffect(() =>
|
||||
{
|
||||
if (showProgress) return;
|
||||
showInstallOptions(false);
|
||||
}, [showProgress]);
|
||||
|
||||
const handlePlay = (cmd?: CommandEntry) =>
|
||||
{
|
||||
if (!cmd) return;
|
||||
if (cmd.emulator === 'EMULATORJS')
|
||||
{
|
||||
const params = new URLSearchParams(cmd.command);
|
||||
Router.navigate({ to: '/embedded/$source/$id', params: { source, id }, search: Object.fromEntries(params.entries()), replace: true });
|
||||
} else
|
||||
{
|
||||
playMut.mutate({ source: data.id.source, id: data.id.id, command_id: cmd.id });
|
||||
Router.navigate({ to: '/launcher/$source/$id', params: { source, id }, replace: true });
|
||||
}
|
||||
};
|
||||
|
||||
let mainButton: any | undefined = undefined;
|
||||
if (status === 'installed')
|
||||
{
|
||||
mainButton = <div className="flex gap-2"><ActionButton onAction={() => handlePlay(validDefaultCommand)} tooltip={validDefaultCommand?.label ?? details}
|
||||
key="primary"
|
||||
type='primary'
|
||||
id="mainAction"
|
||||
>
|
||||
<Play />
|
||||
|
||||
</ActionButton>
|
||||
|
||||
{validCommands.length > 1 &&
|
||||
<ActionButton className="size-11! header-icon-small" tooltip={"All Commands"} type="base" id="allActionsBtn" onAction={() => showAllCommands(true, 'allActionsBtn')}>
|
||||
<EllipsisVertical />
|
||||
</ActionButton>}</div>;
|
||||
}
|
||||
else if (error)
|
||||
{
|
||||
mainButton = <ActionButton
|
||||
key="error"
|
||||
tooltip={error}
|
||||
tooltip_type="error"
|
||||
type='error'
|
||||
onAction={() =>
|
||||
{
|
||||
if (status === 'missing-emulator')
|
||||
{
|
||||
Router.navigate({ to: '/settings/directories' });
|
||||
}
|
||||
}}
|
||||
id="mainAction">
|
||||
<TriangleAlert />
|
||||
</ActionButton>;
|
||||
}
|
||||
else
|
||||
{
|
||||
mainButton = <ActionButton
|
||||
key={status ?? 'unknown'}
|
||||
disabled={installMut.isPending}
|
||||
onAction={() =>
|
||||
{
|
||||
if (status === 'install')
|
||||
{
|
||||
installMut.mutate();
|
||||
}
|
||||
}}
|
||||
tooltip={details ?? status}
|
||||
type='primary'
|
||||
id="mainAction">
|
||||
{status === 'install' ? <Download /> : <span className="loading loading-spinner loading-lg"></span>}
|
||||
</ActionButton>;
|
||||
}
|
||||
|
||||
const { dialog: allCommandDialog, setOpen: showAllCommands } = useContextDialog('all-commands-dialog', {
|
||||
content: <ContextList options={validCommands.map(c =>
|
||||
{
|
||||
const commands: DialogEntry = {
|
||||
id: String(c.id),
|
||||
content: c.label ?? "",
|
||||
type: 'primary',
|
||||
action (ctx)
|
||||
{
|
||||
setPreferredCommand(c.id);
|
||||
handlePlay(c);
|
||||
},
|
||||
};
|
||||
return commands;
|
||||
})} />,
|
||||
preferredChildFocusKey: String(preferredCommand)
|
||||
});
|
||||
|
||||
const { dialog: installOptionsDialog, setOpen: showInstallOptions } = useContextDialog('install-options-dialog', {
|
||||
content: <ContextList options={[{
|
||||
id: 'cancel',
|
||||
content: "Cancel",
|
||||
action (ctx)
|
||||
{
|
||||
ws.current?.send('cancel');
|
||||
ctx.close();
|
||||
},
|
||||
type: 'primary'
|
||||
}]} />
|
||||
});
|
||||
|
||||
return <div className="flex gap-2">
|
||||
{mainButton}
|
||||
<div className="divider divider-horizontal m-0"></div>
|
||||
{showProgress && <ActionButton onAction={() => showInstallOptions(true, "progress")} key="progress" square tooltip={details} type="base" id="progress" >
|
||||
<div key={`install-${status}`} data-tooltip={details ?? status} className="flex flex-col gap-2 w-16 items-center text-2xl">
|
||||
<div className="flex flex-row">
|
||||
{progressIcon}
|
||||
</div>
|
||||
<progress className="progress progress-secondary w-full" value={progress} max="100"></progress>
|
||||
</div>
|
||||
</ActionButton>}
|
||||
{installOptionsDialog}
|
||||
{allCommandDialog}
|
||||
</div>;
|
||||
}
|
||||
|
||||
function ActionButtons (data: {})
|
||||
{
|
||||
const [, setDetailsSection] = useDetailsSection();
|
||||
const { data: game } = Route.useLoaderData();
|
||||
const [hoverText, setHoverText] = useState<string | undefined>(undefined);
|
||||
const [hoverTextType, setHoverTextType] = useState<string>('accent');
|
||||
const { ref, focusKey } = useFocusable({ focusKey: 'actions', onBlur: () => setHoverText(undefined) });
|
||||
const [open, setOpen] = useState(false);
|
||||
const deleteMutation = useMutation({
|
||||
...deleteGameMutation(game.id),
|
||||
onSuccess: () =>
|
||||
{
|
||||
location.reload();
|
||||
console.log("Deleted");
|
||||
},
|
||||
onError (error)
|
||||
{
|
||||
toast.error(getErrorMessage(error) ?? "Error While Deleting");
|
||||
}
|
||||
});
|
||||
|
||||
const contextOptions: DialogEntry[] = [];
|
||||
if (game.local)
|
||||
{
|
||||
contextOptions.push({
|
||||
id: 'delete',
|
||||
action: () =>
|
||||
{
|
||||
deleteMutation.mutate();
|
||||
},
|
||||
icon: <Trash />,
|
||||
content: "Delete",
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
|
||||
const handleTooltipSet = (e: HTMLElement) =>
|
||||
{
|
||||
const dataTooltip = e.getAttribute('data-tooltip');
|
||||
setHoverText(dataTooltip ?? undefined);
|
||||
setHoverTextType(e.getAttribute('data-tooltip_type') ?? 'accent');
|
||||
};
|
||||
|
||||
useFocusEventListener('focuschanged', (e) =>
|
||||
{
|
||||
if (e.target instanceof HTMLElement)
|
||||
{
|
||||
handleTooltipSet(e.target);
|
||||
}
|
||||
|
||||
}, ref);
|
||||
|
||||
const { isPointer } = useActiveControl();
|
||||
|
||||
const tooltipStyles = {
|
||||
base: 'bg-base-100 text-base-content',
|
||||
accent: 'bg-accent text-accent-content',
|
||||
error: 'bg-error text-error-content'
|
||||
};
|
||||
|
||||
return <div ref={ref} className="flex sm:gap-2 md:gap-4 sm:h-16 md:h-32 overflow-hidden p-2 items-center shrink-0">
|
||||
<FocusContext value={focusKey}>
|
||||
<MainActions />
|
||||
<AchievementsInfo onAction={() =>
|
||||
{
|
||||
setDetailsSection("achievements");
|
||||
if (game.achievements?.entires[0])
|
||||
{
|
||||
setFocus(game.achievements.entires[0].id);
|
||||
}
|
||||
|
||||
}} />
|
||||
<ActionButton tooltip="Settings" onAction={() => setOpen(true)} type="base" id="settings" icon={<Settings />} >
|
||||
|
||||
</ActionButton >
|
||||
<ContextDialog sourceFocusKey="settings" id="settings-context" open={open} close={setOpen}>
|
||||
<ContextList options={contextOptions} />
|
||||
</ContextDialog>
|
||||
{!!hoverText && !isPointer && <p className={twMerge("flex sm:hidden md:inline py-1 md:py-2 md:px-4 rounded-4xl text-wrap wrap-anywhere text-base", (tooltipStyles as any)[hoverTextType])}>{hoverText}</p>}
|
||||
</FocusContext>
|
||||
</div>;
|
||||
}
|
||||
|
||||
function Detail (data: { icon: JSX.Element; children?: any | any[]; })
|
||||
{
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
{data.icon}
|
||||
{data.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionButton (data: {
|
||||
id: string,
|
||||
icon?: JSX.Element,
|
||||
children?: any | any[];
|
||||
className?: string;
|
||||
type: "primary" | 'base' | "accent" | 'error';
|
||||
square?: boolean,
|
||||
onFocus?: () => void;
|
||||
tooltip?: string,
|
||||
tooltip_type?: 'accent' | 'error';
|
||||
onAction?: () => void;
|
||||
disabled?: boolean;
|
||||
})
|
||||
{
|
||||
const { ref } = useFocusable({ focusKey: data.id, onFocus: data.onFocus, onEnterPress: data.onAction, focusable: data.disabled !== true });
|
||||
const styles = {
|
||||
primary: "bg-primary text-primary-content focused:bg-base-content focused:text-base-300 focusable focusable-primary",
|
||||
base: " text-base-content border-dashed border-base-content/20 border-2 focused:bg-base-content focused:text-base-300 focusable focusable-primary",
|
||||
accent: "bg-accent text-accent-content focusable focusable-primary focusable:bg-base-content focusable:text-base-300",
|
||||
error: "bg-error text-error-content focused:bg-error focused:text-error-content",
|
||||
};
|
||||
return (
|
||||
<div className="tooltip tooltip-accent tooltip-right" data-tip={data.tooltip}>
|
||||
<button
|
||||
disabled={data.disabled}
|
||||
ref={ref}
|
||||
onClick={data.onAction}
|
||||
data-tooltip={data.tooltip}
|
||||
data-tooltip_type={data.tooltip_type}
|
||||
className={twMerge("header-icon flex flex-col gap-2 md:px-5 md:py-4 rounded-3xl md:text-2xl justify-center items-center cursor-pointer disabled:opacity-30 active:bg-base-100 active:transition-none active:text-base-content",
|
||||
"hover:ring-7 hover:ring-primary", styles[data.type], classNames({ "rounded-full sm:size-14 md:size-21 hover:bg-base-content hover:text-base-300 hover:ring-7 hover:ring-primary": !data.square }), data.className)}>
|
||||
{data.icon}
|
||||
{data.children}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Stats ()
|
||||
{
|
||||
const { data } = Route.useLoaderData();
|
||||
const stats: StatEntry[] = [];
|
||||
if (data.path_fs)
|
||||
stats.push({ label: "Location", content: data.path_fs, icon: <Folder /> });
|
||||
if (data.companies)
|
||||
stats.push({ label: "Companies", content: data.companies });
|
||||
if (data.genres)
|
||||
stats.push({ label: 'Genres', content: data.genres });
|
||||
if (data.release_date)
|
||||
stats.push({ label: "Release Date", content: data.release_date.toLocaleDateString(), icon: <Calendar /> });
|
||||
if (data.emulators)
|
||||
stats.push({ label: "Emulators", content: data.emulators.map(e => e.name) });
|
||||
return <StatList elementClassName="bg-base-300" stats={stats} />;
|
||||
if (data.game)
|
||||
{
|
||||
if (data.game.path_fs)
|
||||
stats.push({ label: "Location", content: data.game.path_fs, icon: <Folder /> });
|
||||
if (data.game.companies)
|
||||
stats.push({ label: "Companies", content: data.game.companies });
|
||||
if (data.game.genres)
|
||||
stats.push({ label: 'Genres', content: data.game.genres });
|
||||
if (data.game.release_date)
|
||||
stats.push({ label: "Release Date", content: data.game.release_date.toLocaleDateString(), icon: <Calendar /> });
|
||||
if (data.game.emulators)
|
||||
stats.push({ label: "Emulators", content: data.game.emulators.map(e => e.name) });
|
||||
}
|
||||
|
||||
return <StatList elementClassName="bg-base-300" stats={stats} id="game-detail-stats" />;
|
||||
}
|
||||
|
||||
function Divider (data: { rootFocusKey: string; showShortcuts: boolean; })
|
||||
function Divider (data: { rootFocusKey: string; showShortcuts: boolean; game: FrontEndGameTypeDetailed | undefined; })
|
||||
{
|
||||
const [details, setDetails] = useDetailsSection();
|
||||
const { data: game } = Route.useLoaderData();
|
||||
const { ref, focusKey } = useFocusable({
|
||||
focusKey: "details-divider",
|
||||
onFocus: (l, p, d) => scrollIntoViewHandler({ block: 'nearest', behavior: 'smooth' })(focusKey, ref.current, d),
|
||||
|
|
@ -625,7 +200,7 @@ function Divider (data: { rootFocusKey: string; showShortcuts: boolean; })
|
|||
stats: { label: "Stats", selected: details === 'stats', icon: <Info /> },
|
||||
screenshots: { label: "Screenshots", selected: details === 'screenshots', icon: <Image /> },
|
||||
};
|
||||
if (game.achievements)
|
||||
if (data.game?.achievements)
|
||||
{
|
||||
detailFilter.achievements = { label: "Achievements", selected: details === 'achievements', icon: <Trophy /> };
|
||||
}
|
||||
|
|
@ -637,18 +212,18 @@ function Divider (data: { rootFocusKey: string; showShortcuts: boolean; })
|
|||
</div>;
|
||||
}
|
||||
|
||||
export default function GameDetailsUI ()
|
||||
function RouteComponent ()
|
||||
{
|
||||
const [recommendedGamesVisible, setRecommendedGamesVisible] = useState(false);
|
||||
const { data } = Route.useLoaderData();
|
||||
const { source, id } = Route.useParams();
|
||||
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 headerRef = useRef(null);
|
||||
const sentinelRef = useRef(null);
|
||||
const backgroundImage = data.path_cover ? new URL(`${RPC_URL(__HOST__)}${data?.path_cover}`) : undefined;
|
||||
const mainAreaRef = useRef<HTMLDivElement>(null);
|
||||
const { data: recommendedGames } = useQuery({ ...gamesRecommendedBasedOnGameQuery(data.id.source, data.id.id), enabled: recommendedGamesVisible });
|
||||
const backgroundImage = data ? new URL(`${RPC_URL(__HOST__)}${data.path_cover}`) : undefined;
|
||||
const { data: recommendedGames } = useQuery({ ...gamesRecommendedBasedOnGameQuery(data?.id.source ?? source, data?.id.id ?? id), enabled: !!data && recommendedGamesVisible });
|
||||
|
||||
useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
|
||||
const { shortcuts } = useShortcutContext();
|
||||
|
|
@ -666,7 +241,7 @@ export default function GameDetailsUI ()
|
|||
}, []);
|
||||
|
||||
useStickyDataAttr(headerRef, sentinelRef, ref);
|
||||
const recommendedEmulators = data.emulators?.filter(e => e.store_exists);
|
||||
const recommendedEmulators = data?.emulators?.filter(e => e.validSource);
|
||||
|
||||
const { ref: intersct } = useIntersectionObserver({
|
||||
onChange: (isIntersecting, entry) =>
|
||||
|
|
@ -686,13 +261,14 @@ export default function GameDetailsUI ()
|
|||
<div ref={headerRef} 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-[calc(100vh-12rem)] overflow-hidden bg-linear-to-t from-base-100 to-base-100/40" ref={mainAreaRef}>
|
||||
<Details mainAreaRef={mainAreaRef} />
|
||||
<div className="flex flex-col h-[calc(100vh-12rem)] overflow-hidden bg-linear-to-t from-base-100 to-base-100/40">
|
||||
<Details game={data} id={id} source={source} />
|
||||
</div>
|
||||
<MoreDetails />
|
||||
<div className="relative bg-base-300">
|
||||
<MoreDetails game={data} />
|
||||
<div className="relative">
|
||||
<div className="bg-dots"></div>
|
||||
{!!recommendedEmulators && recommendedEmulators.length > 0 && <EmulatorsSection
|
||||
id={`${data.id.id}-recommended`}
|
||||
id={`${data?.id.id}-recommended`}
|
||||
header={<><div className="w-2 h-5 rounded-full bg-info shadow-sm shadow-error/40" />
|
||||
<h2 className="font-bold uppercase tracking-widest">
|
||||
Related Emulators
|
||||
|
|
@ -703,6 +279,7 @@ export default function GameDetailsUI ()
|
|||
Router.navigate({ to: '/store/details/emulator/$id', params: { id } });
|
||||
}}
|
||||
emulators={recommendedEmulators} />}
|
||||
|
||||
</div>
|
||||
<div className="bg-base-100">
|
||||
<div className="px-6 py-3">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { JSX, Suspense, useContext, useEffect, useState } from "react";
|
||||
import { JSX, Suspense, useContext, useState } from "react";
|
||||
import
|
||||
{
|
||||
Gamepad2,
|
||||
|
|
@ -14,7 +14,6 @@ import
|
|||
import
|
||||
{
|
||||
createFileRoute,
|
||||
useNavigate,
|
||||
} from "@tanstack/react-router";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import
|
||||
|
|
@ -25,7 +24,7 @@ import
|
|||
} from "@noriginmedia/norigin-spatial-navigation";
|
||||
import classNames from "classnames";
|
||||
import { useEventListener } from "usehooks-ts";
|
||||
import { HeaderAccounts, HeaderStatusBar } from "../components/Header";
|
||||
import { HeaderAccounts, HeaderButton, HeaderStatusBar } from "../components/Header";
|
||||
import { FilterUI } from "../components/Filters";
|
||||
import { AnimatedBackground } from "../components/AnimatedBackground";
|
||||
import { GameList } from "../components/GameList";
|
||||
|
|
@ -43,7 +42,6 @@ import CollectionList from "../components/CollectionList";
|
|||
import { zodValidator } from '@tanstack/zod-adapter';
|
||||
import { mobileCheck, useDragScroll } from "../scripts/utils";
|
||||
import { AnimatedBackgroundContext } from "../scripts/contexts";
|
||||
import { FrontEndId } from "@/shared/constants";
|
||||
import Carousel from "../components/Carousel";
|
||||
import { closeMutation } from "@queries/system";
|
||||
|
||||
|
|
@ -301,10 +299,14 @@ export default function ConsoleHomeUI ()
|
|||
const setFilter = (filter: string) => Router.navigate({ to: '/', search: { filter }, viewTransition: false, replace: true });
|
||||
|
||||
const { shortcuts } = useShortcutContext();
|
||||
const headerButtons = [];
|
||||
const headerButtons: HeaderButton[] = [];
|
||||
if (mobileCheck())
|
||||
headerButtons.push({ id: "fullscreen", icon: <Maximize />, action: handleFullscreen });
|
||||
headerButtons.push({ id: "search", icon: <Search /> }, { id: "power-button", icon: <Power />, external: true, action: () => close.mutate() });
|
||||
headerButtons.push(
|
||||
{ id: "search-header-button", icon: <Search /> },
|
||||
{ id: "power-button", icon: <Power />, external: true, action: () => close.mutate() },
|
||||
{ id: "settings-header-button", icon: <Settings />, external: true, action: () => Router.navigate({ to: "/settings/accounts" }) }
|
||||
);
|
||||
|
||||
return (
|
||||
<AnimatedBackground animated ref={ref} backgroundKey="home-background" className="grid grid-cols-3 sm:landscape:grid-rows-[3rem_minmax(var(--game-card-height-safe),1fr)_4rem] md:landscape:grid-rows-[5rem_4rem_minmax(var(--game-card-height-safe),1fr)_6rem_6rem] gap-1 portrait:grid-rows-[3rem_4rem_minmax(var(--game-card-height-safe),1fr)] max-h-screen overflow-clip">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { AnimatedBackground } from '@/mainview/components/AnimatedBackground';
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { GameInstallProgress, RPC_URL } from '@/shared/constants';
|
||||
import DotsLoading from '../components/backgrounds/dots';
|
||||
import { Router } from '..';
|
||||
import { useEffect } from 'react';
|
||||
|
|
@ -9,6 +8,7 @@ import { GamePadButtonCode, useShortcutContext, useShortcuts } from '../scripts/
|
|||
import { useFocusable } from '@noriginmedia/norigin-spatial-navigation';
|
||||
import Shortcuts from '../components/Shortcuts';
|
||||
import { gameQuery } from '@queries/romm';
|
||||
import { rommApi } from '../scripts/clientApi';
|
||||
|
||||
export const Route = createFileRoute('/launcher/$source/$id')({
|
||||
component: RouteComponent,
|
||||
|
|
@ -30,30 +30,22 @@ function RouteComponent ()
|
|||
|
||||
useEffect(() =>
|
||||
{
|
||||
const es = new EventSource(`${RPC_URL(__HOST__)}/api/romm/status/${source}/${id}`);
|
||||
if (!data) return;
|
||||
const sub = rommApi.api.romm.status({ source: data.id.source })({ id: data.id.id }).subscribe();
|
||||
|
||||
es.onmessage = ({ data }) =>
|
||||
sub.subscribe((e) =>
|
||||
{
|
||||
const stats = JSON.parse(data) as GameInstallProgress;
|
||||
if (stats.status !== 'playing')
|
||||
if (e.data.status !== 'playing')
|
||||
{
|
||||
HandleGoBack();
|
||||
}
|
||||
};
|
||||
|
||||
es.addEventListener('refresh', () =>
|
||||
{
|
||||
HandleGoBack();
|
||||
});
|
||||
|
||||
es.onerror = () =>
|
||||
return () =>
|
||||
{
|
||||
HandleGoBack();
|
||||
sub.close();
|
||||
};
|
||||
|
||||
return () => es.close();
|
||||
}, []);
|
||||
|
||||
}, [data?.id]);
|
||||
|
||||
return <AnimatedBackground ref={ref} backgroundKey='game-details'>
|
||||
<div className='flex shadow-2xs shadow-black flex-col absolute w-screen h-screen overflow-hidden justify-center items-center gap-4'>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-naviga
|
|||
import { Block, createFileRoute } from '@tanstack/react-router';
|
||||
import DownloadDirectoryOption from '@/mainview/components/options/DownloadDirectoryOption';
|
||||
import { useIsMutating, useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { DownloadsDrive } from '@/shared/constants';
|
||||
import prettyBytes from 'pretty-bytes';
|
||||
import classNames from 'classnames';
|
||||
import { GamePadButtonCode, Shortcut, useShortcuts } from '@/mainview/scripts/shortcuts';
|
||||
|
|
@ -13,6 +12,7 @@ import { Button } from '@/mainview/components/options/Button';
|
|||
import { systemApi } from '@/mainview/scripts/clientApi';
|
||||
import useActiveControl from '@/mainview/scripts/gamepads';
|
||||
import { changeDownloadsMutation } from '@queries/settings';
|
||||
import { downloadDrivesQuery } from '@/mainview/scripts/queries/system';
|
||||
|
||||
export const Route = createFileRoute('/settings/directories')({
|
||||
component: RouteComponent,
|
||||
|
|
@ -79,8 +79,8 @@ function RouteComponent ()
|
|||
preferredChildFocusKey: focus
|
||||
});
|
||||
|
||||
const isMoving = useIsMutating(queries.settings.changeDownloadsMutation);
|
||||
const { data: drives, refetch } = useQuery({ ...queries.system.downloadDrivesQuery, refetchInterval: isMoving > 0 ? 1000 : undefined });
|
||||
const isMoving = useIsMutating(changeDownloadsMutation);
|
||||
const { data: drives, refetch } = useQuery({ ...downloadDrivesQuery, refetchInterval: isMoving > 0 ? 1000 : undefined });
|
||||
|
||||
return <FocusContext value={focusKey}>
|
||||
<Block shouldBlockFn={() => isMoving > 0} withResolver={false} />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ 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, useState } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Button } from '../../components/options/Button';
|
||||
import { Check, ChevronDown, FolderSearch, SearchAlert, Trash, TriangleAlert } from 'lucide-react';
|
||||
import { ContextDialog, ContextList, DialogEntry, OptionElement } from '../../components/ContextDialog';
|
||||
|
|
@ -15,6 +15,10 @@ import { GamePadButtonCode, 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';
|
||||
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';
|
||||
|
||||
export const Route = createFileRoute('/settings/emulators')({
|
||||
component: RouteComponent,
|
||||
|
|
@ -99,6 +103,7 @@ function EmulatorPath (data: { id: string; })
|
|||
const [dirty, setDirty] = useState(false);
|
||||
const [localValue, setLocalValue] = useState<string | undefined>();
|
||||
const { data: remoteValue } = useQuery(customEmulatorRemoveValueQuery(data.id));
|
||||
useEffect(() => { setLocalValue(remoteValue); }, [remoteValue]);
|
||||
const setSettingMutation = useMutation(setCustomEmulatorMutation(data.id, (v) =>
|
||||
{
|
||||
setLocalValue(v);
|
||||
|
|
@ -128,7 +133,7 @@ function EmulatorPath (data: { id: string; })
|
|||
};
|
||||
|
||||
return (
|
||||
<OptionSpace id={`${data.id}-space`} label={
|
||||
<OptionSpace id={FOCUS_KEYS.EMULATOR_CUSTOM_PATH(data.id)} label={
|
||||
focus => <>
|
||||
<p className='font-semibold'>{data.id}</p>
|
||||
<small className='opacity-40'>{emulators[data.id]}</small>
|
||||
|
|
@ -140,7 +145,6 @@ function EmulatorPath (data: { id: string; })
|
|||
type="text"
|
||||
onBlur={handleSave}
|
||||
autocomplete="off"
|
||||
defaultValue={remoteValue}
|
||||
onChange={(v) =>
|
||||
{
|
||||
setLocalValue(v);
|
||||
|
|
@ -187,22 +191,22 @@ function EmulatorBadge (data: {
|
|||
isCritical: boolean;
|
||||
pathCover?: string;
|
||||
addOverride: (emulator: string) => void;
|
||||
})
|
||||
} & FocusParams)
|
||||
{
|
||||
const { focusKey, ref, focused } = useFocusable({
|
||||
focusKey: `badge-${data.emulator}`, onFocus: () =>
|
||||
{
|
||||
(ref.current as HTMLElement).scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
}
|
||||
focusKey: FOCUS_KEYS.EMULATOR_CARD(data.emulator),
|
||||
onFocus (l, p, details) { data.onFocus?.(focusKey, ref.current, details); }
|
||||
});
|
||||
|
||||
useShortcuts(focusKey, () => [{
|
||||
label: 'Add Override', button: GamePadButtonCode.A, action: () =>
|
||||
label: 'Add Override',
|
||||
button: GamePadButtonCode.A,
|
||||
action: () =>
|
||||
data.addOverride(data.emulator)
|
||||
}], [data.addOverride]);
|
||||
|
||||
return <div className={classNames("tooltip tooltip-primary", { "tooltip-open": focused })} data-tip={`${emulators[data.emulator]}`}>
|
||||
<div ref={ref} className={
|
||||
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,
|
||||
|
|
@ -221,15 +225,38 @@ function EmulatorBadge (data: {
|
|||
</div>;
|
||||
}
|
||||
|
||||
function EmulatorBadges (data: { path?: string; addOverride: (emulator: string) => void; })
|
||||
function EmulatorBadges (data: { path?: string; addOverride: (emulator: string) => void; } & FocusParams)
|
||||
{
|
||||
const { data: autoEmulators } = useQuery(autoEmulatorsQuery);
|
||||
const { ref, focusKey } = useFocusable({ focusKey: `emulator-badges`, focusable: !!autoEmulators && autoEmulators.length > 0 });
|
||||
return <div ref={ref} className='grid grid-cols-[repeat(auto-fit,14rem)] auto-rows-[4rem] gap-2 justify-center-safe'>
|
||||
const { data: autoEmulators } = useQuery({
|
||||
...autoEmulatorsQuery,
|
||||
select (data)
|
||||
{
|
||||
return data.toSorted((a, b) =>
|
||||
{
|
||||
const sourceCompare = (b.validSource ? 1 : 0) - (a.validSource ? 1 : 0);
|
||||
if (sourceCompare !== 0)
|
||||
{
|
||||
return sourceCompare;
|
||||
} else
|
||||
{
|
||||
return b.name.localeCompare(b.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
const { ref, focusKey } = useFocusable({
|
||||
focusKey: `emulator-badges`,
|
||||
focusable: !!autoEmulators && autoEmulators.length > 0,
|
||||
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'>
|
||||
|
||||
<FocusContext value={focusKey}>
|
||||
{autoEmulators?.map(e => <EmulatorBadge 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} isCritical={e.isCritical} addOverride={data.addOverride} pathCover={e.logo} path={e.validSource?.binPath} exists={!!e.validSource} emulator={e.name} />)}
|
||||
|
||||
</FocusContext>
|
||||
</div>;
|
||||
</Carousel>;
|
||||
}
|
||||
|
||||
function RouteComponent ()
|
||||
|
|
@ -242,11 +269,19 @@ function RouteComponent ()
|
|||
|
||||
const { data: customEmulators } = useQuery(customEmulatorsQuery);
|
||||
|
||||
const addOverrideMutation = useMutation(customEmulatorAddMutation);
|
||||
const addOverrideMutation = useMutation({
|
||||
...customEmulatorAddMutation, async onSuccess (data, variables, onMutateResult, context)
|
||||
{
|
||||
await context.client.invalidateQueries({ queryKey: ['custom-emulators'] });
|
||||
setFocus(FOCUS_KEYS.EMULATOR_CUSTOM_PATH(variables));
|
||||
},
|
||||
});
|
||||
|
||||
return <FocusContext value={focusKey}>
|
||||
<ul ref={ref} className="list rounded-box gap-2">
|
||||
<EmulatorBadges addOverride={addOverrideMutation.mutate} />
|
||||
<EmulatorBadges addOverride={addOverrideMutation.mutate} onFocus={scrollIntoViewHandler({ block: 'center' })} />
|
||||
<div className="divider text-base-content/40">Preferences</div>
|
||||
<SettingsOption label="Launch In Fullscreen" id="launchInFullscreen" type="checkbox" />
|
||||
<div className="divider text-base-content/40">Overrides</div>
|
||||
<NewEmulatorPath isAddingOverride={addOverrideMutation.isPending} addOverride={addOverrideMutation.mutate} />
|
||||
{!!customEmulators && customEmulators.map((key) => <EmulatorPath key={key} id={key} />)}
|
||||
|
|
|
|||
55
src/mainview/routes/settings/plugins.tsx
Normal file
55
src/mainview/routes/settings/plugins.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import { Button } from '@/mainview/components/options/Button';
|
||||
import { OptionInput } from '@/mainview/components/options/OptionInput';
|
||||
import { OptionSpace } from '@/mainview/components/options/OptionSpace';
|
||||
import { enablePluginMutation, getAllPluginsQuery } from '@/mainview/scripts/queries/plugins';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { Puzzle, Search } from 'lucide-react';
|
||||
|
||||
export const Route = createFileRoute('/settings/plugins')({
|
||||
component: RouteComponent,
|
||||
loader (ctx)
|
||||
{
|
||||
ctx.context.queryClient.prefetchQuery(getAllPluginsQuery);
|
||||
},
|
||||
});
|
||||
|
||||
function Plugin (data: {
|
||||
plugin: FrontendPlugin,
|
||||
setEnabled: (enabled: boolean) => void;
|
||||
})
|
||||
{
|
||||
return <OptionSpace label={<div className='flex gap-4 items-center'>
|
||||
<div className='flex bg-accent text-accent-content rounded-full size-12 p-2 items-center justify-center'>
|
||||
{data.plugin.icon ? <img src={data.plugin.icon}></img> : <Puzzle />}
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<div>{data.plugin.displayName}</div>
|
||||
<div className='text-sm text-base-content/40'>{data.plugin.name} ({data.plugin.version})</div>
|
||||
</div>
|
||||
</div>} className='flex p-4 bg-base-200 rounded-3xl'>
|
||||
<OptionInput onChange={data.setEnabled} value={data.plugin.enabled} name={data.plugin.name} type="checkbox" />
|
||||
<Button id={`${data.plugin.name}-details`} ><Search /> Details</Button>
|
||||
</OptionSpace>;
|
||||
}
|
||||
|
||||
function RouteComponent ()
|
||||
{
|
||||
const { data: plugins, refetch: refetchPlugins } = useQuery(getAllPluginsQuery);
|
||||
const pluginMutation = useMutation({
|
||||
...enablePluginMutation, onSuccess (data, variables, onMutateResult, context)
|
||||
{
|
||||
refetchPlugins();
|
||||
},
|
||||
});
|
||||
|
||||
return <>
|
||||
{!!plugins && Object.entries(Object.groupBy(plugins, p => p.source)).map(([source, plugins]) =>
|
||||
{
|
||||
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 })} />)}
|
||||
</>;
|
||||
})}
|
||||
</>;
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@ import
|
|||
Info,
|
||||
Joystick,
|
||||
MonitorCog,
|
||||
Puzzle,
|
||||
} from "lucide-react";
|
||||
import { JSX, useEffect } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
|
@ -141,6 +142,12 @@ function SettingsMenu (data: {})
|
|||
label="Directories"
|
||||
icon={<HardDrive />}
|
||||
/>
|
||||
<MenuItem
|
||||
focusSelect
|
||||
route="/settings/plugins"
|
||||
label="Plugins"
|
||||
icon={<Puzzle />}
|
||||
/>
|
||||
<MenuItem
|
||||
focusSelect
|
||||
route="/settings/about"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useRef } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import
|
||||
{
|
||||
useFocusable,
|
||||
|
|
@ -11,9 +11,9 @@ 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, Download, Gamepad2, Info, Settings, Trash2, TriangleAlert } from "lucide-react";
|
||||
import { ChevronDown, Cpu, Download, Gamepad2, Info, Settings, Trash2, TriangleAlert, WandSparkles } from "lucide-react";
|
||||
import { ContextList, DialogEntry, useContextDialog } from "@/mainview/components/ContextDialog";
|
||||
import { FrontEndEmulatorDetailed, RPC_URL } from "@/shared/constants";
|
||||
import { RPC_URL } from "@/shared/constants";
|
||||
import Screenshots from "@/mainview/components/Screenshots";
|
||||
import { StickyHeaderUI } from "@/mainview/components/Header";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
|
|
@ -24,8 +24,9 @@ import { getErrorMessage } from "react-error-boundary";
|
|||
import { emulatorStatusIcons } from "@/mainview/components/store/StoreEmulatorCard";
|
||||
import StatList, { StatEntry } from "@/mainview/components/StatList";
|
||||
import { GamesSection } from "@/mainview/components/store/GamesSection";
|
||||
import { installEmulatorMutation, storeEmulatorDeleteMutation, storeEmulatorDetailsQuery, storeEmulatorsRecommendedQuery } from "@queries/store";
|
||||
import { deleteBiosMutation, downloadBiosMutation, installEmulatorMutation, storeEmulatorDeleteMutation, storeEmulatorDetailsQuery, storeEmulatorsRecommendedQuery } from "@queries/store";
|
||||
import { gamesRecommendedBasedOnEmulatorQuery } from "@queries/romm";
|
||||
import FocusTooltip from "@/mainview/components/FocusTooltip";
|
||||
|
||||
export const Route = createFileRoute('/store/details/emulator/$id')({
|
||||
component: RouteComponent,
|
||||
|
|
@ -42,7 +43,7 @@ function HomePageLink (data: { homepage?: string; })
|
|||
const { ref } = useFocusable({ focusKey: 'homepage-link' });
|
||||
return <a
|
||||
ref={ref}
|
||||
className="text-lg text-info cursor-pointer focusable focusable-accent focusable-hover bg-base-200 rounded-full px-4 py-1"
|
||||
className="text-lg text-info cursor-pointer focusable focusable-accent focusable-hover bg-base-200 rounded-full px-4 py-1 not-mobile:shadow-2xl"
|
||||
onClick={() =>
|
||||
{
|
||||
if (data.homepage) systemApi.api.system.open.post({ url: data.homepage });
|
||||
|
|
@ -58,10 +59,44 @@ function TitleArea (data: {
|
|||
{
|
||||
const queryClient = useQueryClient();
|
||||
const deleteMutation = useMutation({
|
||||
...storeEmulatorDeleteMutation, onSuccess: (data, variables, onMutateResult, context) => context.client.refetchQueries(storeEmulatorDetailsQuery(variables)),
|
||||
...storeEmulatorDeleteMutation,
|
||||
onSuccess (data, variables, onMutateResult, context)
|
||||
{
|
||||
context.client.refetchQueries(storeEmulatorDetailsQuery(variables));
|
||||
},
|
||||
});
|
||||
const downloadBios = useMutation(downloadBiosMutation(data.emulator?.name ?? ''));
|
||||
const deleteBios = useMutation({
|
||||
...deleteBiosMutation,
|
||||
onSuccess (data, variables, onMutateResult, context)
|
||||
{
|
||||
context.client.refetchQueries(storeEmulatorDetailsQuery(variables));
|
||||
toast.success("BIOS Deleted", { icon: <Trash2 /> });
|
||||
},
|
||||
});
|
||||
const installProgressRef = useRef<HTMLProgressElement>(null);
|
||||
const { data: installJob, status: installStatus } = useJobStatus('download-emulator', {
|
||||
const { data: biosInstallJob, state: biosDownloadState } = useJobStatus('bios-download-job', {
|
||||
query: { id: data.emulator?.name },
|
||||
onError (error)
|
||||
{
|
||||
console.log(error);
|
||||
toast.error(getErrorMessage(error) ?? "Error During Bios Download");
|
||||
},
|
||||
onProgress (process)
|
||||
{
|
||||
if (installProgressRef.current)
|
||||
installProgressRef.current.value = process;
|
||||
},
|
||||
onCompleted (data)
|
||||
{
|
||||
toast.success("BIOS Downloaded", { icon: <Download /> });
|
||||
},
|
||||
onEnded (data)
|
||||
{
|
||||
queryClient.refetchQueries(storeEmulatorDetailsQuery(data.emulator));
|
||||
},
|
||||
});
|
||||
const { data: installJob, state: installState } = useJobStatus('download-emulator', {
|
||||
onError (error)
|
||||
{
|
||||
console.log(error);
|
||||
|
|
@ -80,12 +115,13 @@ function TitleArea (data: {
|
|||
},
|
||||
});
|
||||
|
||||
const isInstalling = !!installJob;
|
||||
const isInstalling = !!installJob || !!biosInstallJob;
|
||||
|
||||
const options: DialogEntry[] = [];
|
||||
const installedFromStore = !!data.emulator?.sources.find(s => s.type === 'store' && s.exists);
|
||||
if (data.emulator)
|
||||
{
|
||||
if (!isInstalling && !data.emulator?.validSource)
|
||||
if (!isInstalling && !installedFromStore)
|
||||
{
|
||||
options.push(...data.emulator.downloads.map(d =>
|
||||
{
|
||||
|
|
@ -101,7 +137,7 @@ function TitleArea (data: {
|
|||
};
|
||||
return entry;
|
||||
}));
|
||||
} else if (data.emulator.sources.find(s => s.type === 'store' && s.exists))
|
||||
} else if (installedFromStore)
|
||||
{
|
||||
options.push({
|
||||
content: "Delete",
|
||||
|
|
@ -114,12 +150,43 @@ function TitleArea (data: {
|
|||
},
|
||||
id: "delete"
|
||||
});
|
||||
|
||||
if (!data.emulator.bios || data.emulator.bios.length <= 0)
|
||||
{
|
||||
options.push({
|
||||
content: "Download BIOS",
|
||||
type: "primary",
|
||||
icon: <Download />,
|
||||
action (ctx)
|
||||
{
|
||||
downloadBios.mutate();
|
||||
ctx.close();
|
||||
},
|
||||
id: "download-bios"
|
||||
});
|
||||
} else
|
||||
{
|
||||
options.push({
|
||||
content: "Delete BIOS",
|
||||
type: "error",
|
||||
icon: <Trash2 />,
|
||||
action (ctx)
|
||||
{
|
||||
if (!data.emulator) return;
|
||||
deleteBios.mutate(data.emulator.name);
|
||||
ctx.close();
|
||||
},
|
||||
id: "download-bios"
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const { ref, focusKey } = useFocusable({
|
||||
const { ref, focusKey, hasFocusedChild } = useFocusable({
|
||||
focusKey: 'title-area',
|
||||
preferredChildFocusKey: "install-btn",
|
||||
trackChildren: true,
|
||||
onFocus: () => { (ref.current as HTMLElement).scrollIntoView({ behavior: "smooth", block: 'end' }); }
|
||||
});
|
||||
|
||||
|
|
@ -131,7 +198,16 @@ function TitleArea (data: {
|
|||
}
|
||||
else if (isInstalling)
|
||||
{
|
||||
installButtonContent = <><span className="loading loading-spinner loading-lg"></span>{installStatus}</>;
|
||||
const status: any = {
|
||||
bios: {
|
||||
download: "Downloading BIOS"
|
||||
},
|
||||
install: {
|
||||
download: "Downloading",
|
||||
extract: "Extracting"
|
||||
}
|
||||
};
|
||||
installButtonContent = <><span className="loading loading-spinner loading-lg"></span>{installState ? status.install[installState] : biosDownloadState ? status.bios[biosDownloadState] : undefined}</>;
|
||||
} else if (data.emulator.validSource)
|
||||
{
|
||||
installButtonContent = <><Settings /> Options</>;
|
||||
|
|
@ -155,25 +231,37 @@ function TitleArea (data: {
|
|||
|
||||
return <div ref={ref} className="flex flex-wrap gap-4 sm:portrait:justify-center md:justify-normal items-center">
|
||||
<FocusContext value={focusKey}>
|
||||
{data.emulator ? <img className="size-32" src={data.emulator.logo}></img> : <div className="skeleton h-32 w-32" />}
|
||||
{data.emulator ? <img className="size-32 rounded-full shadow-lg bg-base-200 ring-7 ring-base-200" src={data.emulator.logo}></img> : <div className="skeleton h-32 w-32" />}
|
||||
<div className="flex flex-col grow gap-1 sm:portrait:items-center md:items-start">
|
||||
<h1 className="text-4xl font-semibold">{data.emulator?.name ?? <div className="skeleton h-10 w-84" />}</h1>
|
||||
<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 }) =>
|
||||
{
|
||||
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}`} />}
|
||||
<p className="text-nowrap text-ellipsis overflow-hidden">{name}</p>
|
||||
<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" /></>}
|
||||
</div>
|
||||
<div className="flex pt-2 gap-1">
|
||||
<HomePageLink homepage={data.emulator?.homepage} />
|
||||
<div className="divider divider-horizontal m-0"></div>
|
||||
{!!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">
|
||||
<div className="bg-base-200 rounded-full p-2"><WandSparkles className="size-5" /></div>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex relative sm:portrait:grow md:grow-0 justify-center gap-4">
|
||||
<Button style="accent" id="install-btn" className="px-8 py-3 rounded-4xl focusable focusable-accent sm:portrait:grow flex-col gap-2" onAction={handleOptionsOpen} >
|
||||
<div className="flex relative sm:portrait:grow md:grow-0 justify-center gap-4 items-center">
|
||||
<FocusTooltip visible={hasFocusedChild} parentRef={ref} />
|
||||
{(!data.emulator?.bios || data.emulator.bios.length <= 0) && (data.emulator?.biosRequirement === 'required') && installedFromStore && <div className="tooltip tooltip-error" data-tip="Missing BIOS">
|
||||
<Button id="bios-warning-bt" tooltipType="error" tooltip="Missing BIOS" style="error" className="rounded-full size-14 focusable focusable-error shadow-lg" onAction={() => setOpen(true, 'bios-warning-bt')}><TriangleAlert /></Button>
|
||||
</div>}
|
||||
<Button style="accent" id="install-btn" className="px-8 py-3 rounded-4xl focusable focusable-accent sm:portrait:grow flex-col gap-2 light:ring-offset-7 light:ring-offset-base-100 light:focused:ring-offset-0 shadow-lg" onAction={handleOptionsOpen} >
|
||||
<div className="flex gap-4">
|
||||
|
||||
{installButtonContent}
|
||||
<div className="divider divider-horizontal divider-neutral m-0 opacity-20"></div>
|
||||
<ChevronDown />
|
||||
|
|
@ -189,11 +277,11 @@ function TitleArea (data: {
|
|||
function Description (data: { emulator?: FrontEndEmulatorDetailed; })
|
||||
{
|
||||
return <div className="flex-col sm:px-8 md:px-16 pt-8 sm:pb-8 md:pb-12 bg-base-100">
|
||||
<p>{data.emulator?.description ?? <div className="flex flex-col gap-4 w-full">
|
||||
<div>{data.emulator?.description ?? <div className="flex flex-col gap-4 w-full">
|
||||
<div className="skeleton h-4 w-[40%]"></div>
|
||||
<div className="skeleton h-4 w-[80%]"></div>
|
||||
<div className="skeleton h-4 w-full"></div>
|
||||
</div>}</p>
|
||||
</div>}</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
|
@ -236,6 +324,14 @@ export function RouteComponent ()
|
|||
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 }]));
|
||||
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})` });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -248,6 +344,7 @@ export function RouteComponent ()
|
|||
|
||||
<div className='mobile:hidden left-0 top-0 absolute bg-gradient'></div>
|
||||
<div className='mobile:hidden left-0 top-0 absolute bg-noise'></div>
|
||||
<div className='mobile:hidden left-0 top-0 absolute bg-dots'></div>
|
||||
</div>
|
||||
<div className="flex flex-col bg-base-100 gap-4 pt-4 h-[50vh] min-h-128 grow text-lg">
|
||||
{isEmulatorPending || (!!emulator && emulator?.screenshots.length > 0) && <Screenshots className="grow bg-base-200" screenshots={emulator?.screenshots} onFocus={scrollIntoViewHandler({ block: 'end' })} />}
|
||||
|
|
@ -258,6 +355,7 @@ export function RouteComponent ()
|
|||
<div className="divider"> <Info className="size-12" /> Stats</div>
|
||||
<StatList id="emulator-details-stats" stats={stats} onFocus={scrollIntoViewHandler({ block: 'center' })} />
|
||||
{recommendedEmulators && <div className="relative bg-base-200">
|
||||
<div className="bg-dots z-0"></div>
|
||||
<EmulatorsSection
|
||||
id={`${id}-recommended`}
|
||||
header={<><div className="w-2 h-5 rounded-full bg-info shadow-sm shadow-error/40" />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { MissingEmulatorsSection } from "../../../components/store/MissingEmulat
|
|||
import { EmulatorsSection } from "../../../components/store/EmulatorsSection";
|
||||
import { GamesSection } from "../../../components/store/GamesSection";
|
||||
import { StatsSection } from "../../../components/store/StatsSection";
|
||||
import { FrontEndGameTypeDetailed, RPC_URL } from '@/shared/constants';
|
||||
import { RPC_URL } from '@/shared/constants';
|
||||
import { useContext, useEffect, useRef, useState } from 'react';
|
||||
import { scrollIntoViewHandler } from '@/mainview/scripts/utils';
|
||||
import { StoreContext } from '@/mainview/scripts/contexts';
|
||||
|
|
@ -53,18 +53,18 @@ function Main (data: { games?: FrontEndGameTypeDetailed[]; })
|
|||
const previewUrl = data.games ? new URL(`${RPC_URL(__HOST__)}${data.games[selectedGame].path_cover}`) : undefined;
|
||||
previewUrl?.searchParams.set('blur', '16');
|
||||
|
||||
return <div ref={ref} className='flex sm:flex-wrap md:flex-nowrap group-focusable p-4 mt-4 gap-4'>
|
||||
return <div ref={ref} className='flex sm:flex-wrap md:flex-nowrap group-focusable md:px-12 p-4 mt-4 gap-6'>
|
||||
|
||||
<FocusContext value={focusKey}>
|
||||
{game ? <div key={selectedGame} className="flex transition-all duration-500 flex-col rounded-3xl overflow-hidden shadow-black/5 shadow-xl w-full">
|
||||
{game ? <div key={selectedGame} className="flex transition-all duration-500 flex-col rounded-3xl overflow-hidden shadow-black/5 shadow-lg w-full ring-6 ring-base-200 border-6 border-base-200">
|
||||
<div className='flex relative h-full overflow-hidden'>
|
||||
<div className='absolute w-full h-full z-0 bg-base-200'>
|
||||
<img key={selectedGame}
|
||||
className='w-full h-full object-cover transition-all duration-500 ease-out scale-110 opacity-0 z-0 mask-l-from-0'
|
||||
className='w-full h-full object-cover transition-all duration-500 ease-out scale-110 opacity-0 light:data-loaded:opacity-40 dark:data-loaded:opacity-100 z-0 mask-l-from-0'
|
||||
src={previewUrl?.href}
|
||||
onLoad={(e) =>
|
||||
{
|
||||
e.currentTarget.classList.toggle('opacity-0', false);
|
||||
e.currentTarget.dataset.loaded = "true";
|
||||
e.currentTarget.classList.toggle('scale-110', false);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -140,9 +140,9 @@ export function RouteComponent ()
|
|||
|
||||
<div className="px-6 py-3">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-2 h-5 rounded-full bg-accent shadow-sm shadow-error/40" />
|
||||
<Gamepad2 className="text-accent" />
|
||||
<h2 className="font-bold uppercase tracking-widest text-accent grow">
|
||||
<div className="w-2 h-5 rounded-full bg-accent shadow-sm shadow-sm" />
|
||||
<Gamepad2 className="text-accent text-shadow-sm" />
|
||||
<h2 className="font-bold uppercase tracking-widest text-accent grow text-shadow-sm">
|
||||
Featured Games
|
||||
</h2>
|
||||
<div className="flex gap-2 bg-accent text-accent-content rounded-full py-1 px-4 font-semibold opacity-80"><Star />Creator Picks</div>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,8 @@ import { HeaderUI } from '@/mainview/components/Header';
|
|||
import Shortcuts from '@/mainview/components/Shortcuts';
|
||||
import { StoreContext } from '@/mainview/scripts/contexts';
|
||||
import { GamePadButtonCode, useShortcutContext, useShortcuts } from '@/mainview/scripts/shortcuts';
|
||||
import { GetFocusedElement } from '@/mainview/scripts/spatialNavigation';
|
||||
import { mobileCheck, useStickyDataAttr } from '@/mainview/scripts/utils';
|
||||
import { FocusContext, getCurrentFocusKey, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
|
||||
import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
|
||||
import { useMatchRoute } from '@tanstack/react-router';
|
||||
import { createFileRoute, Outlet } from '@tanstack/react-router';
|
||||
import { zodValidator } from '@tanstack/zod-adapter';
|
||||
|
|
@ -111,11 +110,6 @@ function RouteComponent ()
|
|||
|
||||
};
|
||||
|
||||
const goToSettings = () =>
|
||||
{
|
||||
Router.navigate({ to: '/settings' });
|
||||
};
|
||||
|
||||
const isMobile = mobileCheck();
|
||||
useStickyDataAttr(headerRef, sentinelRef, ref);
|
||||
|
||||
|
|
@ -125,7 +119,7 @@ function RouteComponent ()
|
|||
<div className="relative flex flex-col min-h-screen text-base-content z-10" >
|
||||
<div ref={sentinelRef} className="h-0" />
|
||||
<div ref={headerRef} className='sticky p-2 group top-0 not-mobile:data-stuck:backdrop-blur-xl z-15 mobile:data-stuck:bg-base-300'>
|
||||
<HeaderUI buttons={[{ icon: <Settings />, id: "settings", action: goToSettings, external: true }]} />
|
||||
<HeaderUI />
|
||||
</div>
|
||||
<TopArea filters={filters} />
|
||||
<StoreOutlet />
|
||||
|
|
@ -135,6 +129,7 @@ function RouteComponent ()
|
|||
{!isMobile && <>
|
||||
<div className='bg-gradient'></div>
|
||||
<div className='bg-noise'></div>
|
||||
<div className='bg-dots'></div>
|
||||
</>}
|
||||
</div>
|
||||
</FocusContext.Provider>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue