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
|
|
@ -119,16 +119,18 @@ export function AnimatedBackground (data: {
|
|||
|
||||
>
|
||||
{!data.scrolling && <div className='absolute top-0 left-0 right-0 bottom-0 overflow-hidden'>
|
||||
<div className='fixed bg-base-100 top-0 left-0 right-0 bottom-0 -z-5'></div>
|
||||
{blur && finalLastBackgroundUrl && <img className='absolute w-full h-full object-cover object-center -z-4' src={finalLastBackgroundUrl.href}></img>}
|
||||
{blur && finalLastBackgroundUrl && <img className='absolute w-full h-full object-cover object-center -z-4 mask-radial-at-center mask-radial-from-0 mask-radial-farthest-corner' src={finalLastBackgroundUrl.href}></img>}
|
||||
{finalBackgroundUrl ? <img
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
key={finalBackgroundUrl?.href}
|
||||
className={'absolute w-full h-full object-cover object-center opacity-0 -z-3'}
|
||||
className={'absolute w-full h-full object-cover object-center opacity-0 -z-3 mask-radial-from-0'}
|
||||
src={finalBackgroundUrl?.href}
|
||||
onLoad={e => e.currentTarget.classList.add(blur ? "animate-bg-zoom-big" : "animate-bg-zoom")}
|
||||
></img> : <><div className='mobile:hidden bg-gradient'></div></>}
|
||||
<div className='absolute top-0 left-0 right-0 bottom-0 bg-linear-to-b from-base-100/60 to-base-300/80 -z-2' />
|
||||
<div className='mobile:hidden bg-noise'></div>
|
||||
<div className='mobile:hidden bg-dots'></div>
|
||||
</div>}
|
||||
{data.animated && animateBackground && <div className="fixed overflow-hidden top-0 left-0 right-0 bottom-0" style={{ zIndex: -1 }}>
|
||||
{backgroundElements}
|
||||
|
|
@ -147,6 +149,7 @@ export function AnimatedBackground (data: {
|
|||
backgroundColor: "var(--color-base-300)",
|
||||
} : {}}></div>
|
||||
<div className='mobile:hidden bg-noise opacity-30 z-1'></div>
|
||||
<div className='mobile:hidden bg-dots opacity-30 z-1'></div>
|
||||
</>}
|
||||
</div>
|
||||
</AnimatedBackgroundContext >
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export interface GameCardParams
|
|||
type?: string;
|
||||
subtitle: string | JSX.Element;
|
||||
preview?: string | JSX.Element | ((p: { focused: boolean; }) => JSX.Element);
|
||||
srcset?: string;
|
||||
focusKey: string;
|
||||
index: number;
|
||||
id: string;
|
||||
|
|
@ -64,7 +65,7 @@ export default function CardElement (data: GameCardParams & InteractParams)
|
|||
data.onAction?.();
|
||||
}}
|
||||
className={twMerge(
|
||||
"relative game-card bg-base-300 flex flex-col z-5 overflow-hidden transition-all duration-200 not-mobile:drop-shadow-lg cursor-pointer focusable focusable-primary focusable-hover select-none focused focused:not-control-mouse:animate-wiggle focused:not-control-mouse:bg-base-content focused:not-control-mouse:text-base-300 focused:not-control-mouse:drop-shadow-xl focused:not-control-mouse:drop-shadow-black/30 focused:not-control-mouse:scale-102 focused:not-control-mouse:z-10 group control-mouse:hover:bg-base-200 h-full [--tw-border-style:inset] border-2 border-base-content/5 backdrop-opacity-0 active:bg-base-content! active:text-base-100 active:transition-none",
|
||||
"relative game-card light:bg-base-100 dark:bg-base-300 flex flex-col z-5 overflow-hidden transition-all duration-200 not-mobile:drop-shadow-lg cursor-pointer focusable focusable-primary focusable-hover select-none focused focused:not-control-mouse:animate-wiggle focused:not-control-mouse:bg-base-content focused:not-control-mouse:text-base-300 focused:not-control-mouse:drop-shadow-lg focused:not-control-mouse:drop-shadow-black/30 focused:not-control-mouse:scale-102 focused:not-control-mouse:z-10 group control-mouse:hover:bg-base-200 h-full [--tw-border-style:inset] border-2 border-base-content/5 backdrop-opacity-0 active:bg-base-content! active:text-base-100 active:transition-none",
|
||||
data.className
|
||||
)}
|
||||
>
|
||||
|
|
@ -75,7 +76,7 @@ export default function CardElement (data: GameCardParams & InteractParams)
|
|||
classNames({ "h-full": typeof data.preview === "string" })
|
||||
)}>
|
||||
{typeof data.preview === "string" ? (
|
||||
<img draggable={false} className={classNames("object-cover w-full h-full", data.previewClassName, { "animate-rotate-small": focused && !isPointer })} src={data.preview} ></img>
|
||||
<img draggable={false} srcSet={data.srcset} className={classNames("object-cover w-full h-full", data.previewClassName, { "animate-rotate-small": focused && !isPointer })} src={data.preview} loading="lazy" decoding="async" ></img>
|
||||
) : (
|
||||
typeof data.preview === 'function' ? data.preview({ focused }) : data.preview
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ export function CardList (data: {
|
|||
data-index={i}
|
||||
title={g.title}
|
||||
subtitle={g.subtitle ?? ""}
|
||||
srcset={g.previewSrcset}
|
||||
onFocus={(id, node, details) =>
|
||||
{
|
||||
g.onFocus?.(details);
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default function CollectionList (data: {
|
|||
title: g.name,
|
||||
focusKey: `collection-${g.id}`,
|
||||
subtitle: g.owner_username,
|
||||
previewUrl: `${RPC_URL(__HOST__)}/api/romm/${g.path_covers_large[0]}`,
|
||||
previewUrl: `${RPC_URL(__HOST__)}/api/romm/${g.path_covers_small[0]}`,
|
||||
badges: [
|
||||
<span className="text-lg font-bold badge bg-base-100 shadow-md shadow-base-300 h-8 rounded-full mr-2">
|
||||
{g.rom_count}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,8 @@ import { JSX, Suspense, useEffect } from 'react';
|
|||
import Shortcuts from './Shortcuts';
|
||||
import { AutoFocus } from './AutoFocus';
|
||||
import { GamePadButtonCode, useShortcutContext, useShortcuts } from '../scripts/shortcuts';
|
||||
import { PopNavigateSource } from '../scripts/spatialNavigation';
|
||||
import { GameListFilterType } from '@/shared/constants';
|
||||
import { GameCardFocusHandler } from './CardElement';
|
||||
import { Router } from '..';
|
||||
import { HandleGoBack } from '../scripts/utils';
|
||||
|
||||
export interface CollectionsDetailParams
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { twMerge } from "tailwind-merge";
|
|||
import { X } from "lucide-react";
|
||||
import { GamePadButtonCode, Shortcut, useShortcuts } from "../scripts/shortcuts";
|
||||
import { ContextDialogContext } from "../scripts/contexts";
|
||||
import { FOCUS_KEYS } from "../scripts/types";
|
||||
|
||||
export function ContextList (data: { options?: DialogEntry[]; className?: string; showCloseButton?: boolean; })
|
||||
{
|
||||
|
|
@ -25,18 +26,18 @@ export function OptionElement (data: DialogEntry & { onFocus?: () => void; class
|
|||
};
|
||||
const handleAction = data.action ? () => data.action?.({ close: context.close, focus: focusSelf }) : undefined;
|
||||
const { ref, focusSelf, focusKey } = useFocusable({
|
||||
focusKey: `${context.id}-list-option-${data.id}`,
|
||||
focusKey: FOCUS_KEYS.CONTEXT_DIALOG_OPTION(context.id, data.id),
|
||||
onEnterPress: data.shortcuts ? undefined : handleAction,
|
||||
onFocus: handleFocus,
|
||||
trackChildren: typeof data.content !== 'string'
|
||||
});
|
||||
const colors = {
|
||||
primary: "active:bg-primary control-pointer:hover:bg-primary focused:bg-primary focused:text-primary-content in-focused:bg-primary in-focused:text-primary-content",
|
||||
secondary: "active:bg-secondary control-pointer:hover:bg-secondary focused:bg-secondary focused:text-secondary-content in-focused:bg-secondary in-focused:text-secondary-content",
|
||||
accent: "active:bg-accent control-pointer:hover:bg-accent focused:bg-accent focused:text-accent-content in-focused:bg-accent in-focused:text-accent-content",
|
||||
info: "active:bg-info control-pointer:hover:bg-info focused:bg-info focused:text-info-content in-focused:bg-info in-focused:text-info-content",
|
||||
warning: "active:bg-warning control-pointer:hover:bg-warning focused:bg-warning focused:text-warning-content in-focused:bg-warning in-focused:text-warning-content",
|
||||
error: "active:bg-error control-pointer:hover:bg-error focused:bg-error focused:text-error-content in-focused:bg-error in-focused:text-error-content"
|
||||
primary: "active:bg-primary control-pointer:hover:bg-primary control-pointer:hover:text-primary-content focused:bg-primary focused:text-primary-content in-focused:bg-primary in-focused:text-primary-content",
|
||||
secondary: "active:bg-secondary control-pointer:hover:bg-secondary control-pointer:hover:text-secondary-content focused:bg-secondary focused:text-secondary-content in-focused:bg-secondary in-focused:text-secondary-content",
|
||||
accent: "active:bg-accent control-pointer:hover:bg-accent control-pointer:hover:text-accent-content focused:bg-accent focused:text-accent-content in-focused:bg-accent in-focused:text-accent-content",
|
||||
info: "active:bg-info control-pointer:hover:bg-info control-pointer:hover:text-info-content focused:bg-info focused:text-info-content in-focused:bg-info in-focused:text-info-content",
|
||||
warning: "active:bg-warning control-pointer:hover:bg-warning control-pointer:hover:text-warning-content focused:bg-warning focused:text-warning-content in-focused:bg-warning in-focused:text-warning-content",
|
||||
error: "active:bg-error control-pointer:hover:bg-error control-pointer:hover:text-error-content focused:bg-error focused:text-error-content in-focused:bg-error in-focused:text-error-content"
|
||||
};
|
||||
if (data.shortcuts)
|
||||
{
|
||||
|
|
@ -47,9 +48,10 @@ export function OptionElement (data: DialogEntry & { onFocus?: () => void; class
|
|||
className={
|
||||
twMerge("flex cursor-pointer sm:text-sm md:text-base")}>
|
||||
<FocusContext value={focusKey}>
|
||||
<div className={twMerge("flex w-full sm:h-12 md:h-14 items-center px-4 rounded-2xl transition-all gap-2 active:animate-scale in-focused:font-semibold",
|
||||
<div className={twMerge("flex w-full sm:h-12 md:h-14 items-center px-4 rounded-2xl transition-all gap-2 active:animate-scale in-focused:font-semibold",
|
||||
data.className,
|
||||
colors[data.type])}>
|
||||
colors[data.type],
|
||||
"active:bg-base-content! active:text-base-300! active:transition-none")}>
|
||||
{data.icon}
|
||||
{data.content}
|
||||
</div>
|
||||
|
|
@ -71,33 +73,34 @@ export function useContextDialog (id: string, data: { content?: JSX.Element; cla
|
|||
{
|
||||
const [open, setOpen] = useState(false);
|
||||
const [sourceFocusKey, setSourceFocusKey] = useState<string | undefined>(undefined);
|
||||
const dialog = <ContextDialog id={id} open={open} close={() =>
|
||||
const handleClose = (value: boolean, newSourceFocusKey?: string) =>
|
||||
{
|
||||
setOpen(false);
|
||||
data.onClose?.();
|
||||
}} className={data.className} sourceFocusKey={sourceFocusKey} preferredChildFocusKey={data.preferredChildFocusKey}>
|
||||
if (value === open) return;
|
||||
if (value)
|
||||
{
|
||||
setOpen(true);
|
||||
setSourceFocusKey(newSourceFocusKey);
|
||||
} else
|
||||
{
|
||||
setOpen(false);
|
||||
data.onClose?.();
|
||||
if (newSourceFocusKey)
|
||||
{
|
||||
setFocus(newSourceFocusKey);
|
||||
} else if (sourceFocusKey)
|
||||
{
|
||||
setFocus(sourceFocusKey);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
const dialog = <ContextDialog id={id} open={open} close={handleClose} className={data.className} preferredChildFocusKey={data.preferredChildFocusKey}>
|
||||
{data.content}
|
||||
</ContextDialog>;
|
||||
return {
|
||||
dialog,
|
||||
open,
|
||||
setOpen: (value: boolean, sourceFocusKey?: string) =>
|
||||
{
|
||||
if (value === open) return;
|
||||
if (value)
|
||||
{
|
||||
setOpen(true);
|
||||
setSourceFocusKey(sourceFocusKey);
|
||||
} else
|
||||
{
|
||||
setOpen(false);
|
||||
if (sourceFocusKey)
|
||||
{
|
||||
setFocus(sourceFocusKey);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
setOpen: handleClose
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +111,6 @@ export function ContextDialog (data: {
|
|||
close: (open: boolean) => void;
|
||||
className?: string;
|
||||
preferredChildFocusKey?: string;
|
||||
sourceFocusKey?: string;
|
||||
})
|
||||
{
|
||||
const { ref, focusKey, focusSelf } = useFocusable({
|
||||
|
|
@ -137,7 +139,7 @@ export function ContextDialog (data: {
|
|||
}] : [], [data.open]);
|
||||
|
||||
return <dialog ref={ref} open={data.open} closedby="any" className={
|
||||
twMerge("fixed modal cursor-pointer bg-base-300/80 backdrop-brightness-50 duration-300 ease-in-out transition-all text-base-content",
|
||||
twMerge("fixed modal cursor-pointer bg-base-300/80 backdrop-blur-md backdrop-brightness-50 duration-300 ease-in-out transition-all text-base-content",
|
||||
classNames({ "opacity-0": !data.open }))
|
||||
}
|
||||
onClick={handleClose}>
|
||||
|
|
@ -145,7 +147,7 @@ export function ContextDialog (data: {
|
|||
<ContextDialogContext value={{ id: data.id, close: handleClose }} >
|
||||
<div
|
||||
className={twMerge(
|
||||
"bg-base-100/80 delay-200 rounded-4xl sm:p-4 md:p-6 sm:min-w-[80vw] md:min-w-[20vw] cursor-auto",
|
||||
"bg-base-100/80 delay-200 rounded-4xl sm:p-4 md:p-6 sm:min-w-[80vw] md:min-w-[20vw] cursor-auto backdrop-blur-2xl",
|
||||
data.open ? "animate-scale-delayed" : "opacity-0",
|
||||
data.className)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ export default function Error (data: ErrorComponentProps)
|
|||
<Button className="text-2xl! focusable focusable-primary" id="return" onAction={handleReturn}><Home />Return Home</Button>
|
||||
<div className="mobile:hidden bg-gradient"></div>
|
||||
<div className="mobile:hidden bg-noise"></div>
|
||||
<div className="mobile:hidden bg-dots"></div>
|
||||
<div className="flex justify-end fixed bottom-4 left-4 right-4"><Shortcuts shortcuts={shortcuts} /></div>
|
||||
</FocusContext>
|
||||
</div>;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
|
|||
import { ContextList, DialogEntry } from "./ContextDialog";
|
||||
import { systemApi } from "../scripts/clientApi";
|
||||
import { useContext, useRef, useState } from "react";
|
||||
import path, { dirname } from "pathe";
|
||||
import path from "pathe";
|
||||
import { Check, Folder, FolderInput, FolderOutput, FolderPlus, HardDrive, Usb, X } from "lucide-react";
|
||||
import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { DirType } from "@/shared/constants";
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { setFocus } from "@noriginmedia/norigin-spatial-navigation";
|
|||
import classNames from "classnames";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { useGlobalFocus } from "../scripts/spatialNavigation";
|
||||
import { JSX, RefObject, useMemo, useState } from "react";
|
||||
import { RefObject, useMemo, useState } from "react";
|
||||
import { useEventListener } from "usehooks-ts";
|
||||
|
||||
function ScrollDot (data: { index: number; parent: RefObject<HTMLElement | null>, peers: HTMLElement[]; })
|
||||
|
|
|
|||
36
src/mainview/components/FocusTooltip.tsx
Normal file
36
src/mainview/components/FocusTooltip.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { Ref, RefObject, useEffect, useState } from "react";
|
||||
import { useFocusEventListener } from "../scripts/spatialNavigation";
|
||||
import useActiveControl from "../scripts/gamepads";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export default function FocusTooltip (data: { parentRef: RefObject<any>; visible?: boolean; })
|
||||
{
|
||||
const [hoverText, setHoverText] = useState<string | undefined>(undefined);
|
||||
const [hoverTextType, setHoverTextType] = useState<string>('accent');
|
||||
|
||||
const handleTooltipSet = (e: HTMLElement) =>
|
||||
{
|
||||
const dataTooltip = e.getAttribute('data-tooltip');
|
||||
setHoverText(dataTooltip ?? undefined);
|
||||
setHoverTextType(e.getAttribute('data-tooltip_type') ?? 'accent');
|
||||
};
|
||||
|
||||
const { isPointer } = useActiveControl();
|
||||
|
||||
useFocusEventListener('focuschanged', (e) =>
|
||||
{
|
||||
if (e.target instanceof HTMLElement)
|
||||
{
|
||||
handleTooltipSet(e.target);
|
||||
}
|
||||
|
||||
}, data.parentRef);
|
||||
|
||||
const tooltipStyles = {
|
||||
base: 'bg-base-100 text-base-content',
|
||||
accent: 'bg-accent text-accent-content',
|
||||
error: 'bg-error text-error-content'
|
||||
};
|
||||
|
||||
return !!hoverText && (data.visible ?? true) && !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>;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { FrontEndGameType, FrontEndId, RPC_URL } from "@/shared/constants";
|
||||
import { RPC_URL } from "@/shared/constants";
|
||||
import CardElement from "./CardElement";
|
||||
import { Router } from "..";
|
||||
import { FileQuestion, HardDrive, Store } from "lucide-react";
|
||||
|
|
@ -57,7 +57,7 @@ export default function FrontEndGameCard (data: { index: number, game: FrontEndG
|
|||
subtitle={subtitle}
|
||||
focusKey={FOCUS_KEYS.GAME_CARD(data.game.id)}
|
||||
className={data.game.id.source === 'local' ? 'ring-offset-info/40 ring-offset-2' : ""}
|
||||
previewClassName={data.game.id.source === 'local' ? "not-in-focused:opacity-40" : ""}
|
||||
previewClassName={data.game.id.source === 'local' ? "dark:not-in-focused:opacity-40 light:not-in-focus:opacity-60" : ""}
|
||||
index={data.index}
|
||||
id={`game-${data.game.id.source}-${data.game.id.id}`}
|
||||
/>;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { GameMetaExtra, CardList } from "./CardList";
|
||||
import { FrontEndGameType, FrontEndId, GameListFilterType, RPC_URL } from "@shared/constants";
|
||||
import { GameListFilterType, RPC_URL } from "@shared/constants";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { FileQuestion, HardDrive, Store } from "lucide-react";
|
||||
import { HardDrive } from "lucide-react";
|
||||
import { JSX, useContext } from "react";
|
||||
import { GameCardFocusHandler } from "./CardElement";
|
||||
import { useLocalSetting } from "../scripts/utils";
|
||||
|
|
@ -75,7 +75,7 @@ export function GameList (data: GameListParams)
|
|||
|
||||
const previewUrl = new URL(`${RPC_URL(__HOST__)}${g.path_cover}`);
|
||||
previewUrl.searchParams.delete('ts');
|
||||
previewUrl.searchParams.set('width', "16");
|
||||
|
||||
const platformUrl = new URL(`${RPC_URL(__HOST__)}${g.path_platform_cover}`);
|
||||
platformUrl.searchParams.set('width', "64");
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import
|
|||
Bell,
|
||||
Bluetooth,
|
||||
Clock,
|
||||
User,
|
||||
Settings,
|
||||
Wifi,
|
||||
WifiHigh,
|
||||
WifiLow,
|
||||
|
|
@ -22,70 +22,44 @@ import
|
|||
} from "lucide-react";
|
||||
import { RoundButton } from "./RoundButton";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getCurrentUserApiUsersMeGetOptions, statsApiStatsGetOptions } from "@clients/romm/@tanstack/react-query.gen";
|
||||
import { RPC_URL } from "../../shared/constants";
|
||||
import { JSX, Ref, RefObject, useEffect, useRef, useState } from "react";
|
||||
import { JSX, RefObject, useEffect, useRef, useState } from "react";
|
||||
import { systemApi } from "../scripts/clientApi";
|
||||
import { Router } from "..";
|
||||
import { useStickyDataAttr } from "../scripts/utils";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { TwitchIcon } from "../scripts/brandIcons";
|
||||
import { rommUserQuery } from "../scripts/queries/romm";
|
||||
import { twitchLoginVerificationQuery } from "../scripts/queries/settings";
|
||||
|
||||
function HeaderAvatar (data: {
|
||||
id: string;
|
||||
imageSrc?: string | string[];
|
||||
preview?: string | JSX.Element;
|
||||
className?: string;
|
||||
active?: boolean;
|
||||
status?: HeaderAccount['status'];
|
||||
locked?: boolean;
|
||||
type?: HeaderAccount['type'];
|
||||
onSelect?: () => void;
|
||||
})
|
||||
{
|
||||
const { ref, focused } = useFocusable({ focusKey: data.id, onEnterPress: data.onSelect });
|
||||
const bgColors = {
|
||||
primary: " text-primary-content",
|
||||
secondary: " text-secondary-content",
|
||||
accent: " text-accent-content",
|
||||
base: "bg-base-100",
|
||||
none: undefined,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
id={data.id}
|
||||
ref={ref}
|
||||
onClick={data.onSelect}
|
||||
style={{ viewTransitionName: `header-account-${data.id}` }}
|
||||
className={classNames(
|
||||
`avatar indicator ring-offset-base-100 sm:size-8 md:size-14 rounded-full flex items-center justify-center`,
|
||||
bgColors[data.type ?? "none"],
|
||||
"text-base-content cursor-pointer transition-all drop-shadow-md",
|
||||
"hover:ring-primary hover:ring-7 focusable focusable-primary focused:ring-offset-base-100",
|
||||
{
|
||||
"ring-5 hover:ring-offset-5": data.active,
|
||||
"ring-offset-5": focused && data.active,
|
||||
},
|
||||
className={twMerge(
|
||||
`avatar overflow-visible bg-base-100 indicator border-7 sm:size-8 md:size-14 rounded-full flex items-center justify-center drop-shadow-md`,
|
||||
data.className,
|
||||
)}
|
||||
>
|
||||
{data.imageSrc ? (
|
||||
{typeof data.preview === 'string' ? (
|
||||
<div className="overflow rounded-full w-full h-full">
|
||||
<picture>
|
||||
{typeof data.imageSrc === 'string' && <img key={"og-image"} src={data.imageSrc}></img>}
|
||||
{Array.isArray(data.imageSrc) && data.imageSrc.map((s, i) =>
|
||||
{
|
||||
if (i === (data.imageSrc!.length - 1))
|
||||
{
|
||||
return <img key={'fallback-image'} src={s}></img>;
|
||||
}
|
||||
return <source key={`alt-img-${i}`} srcSet={s}></source>;
|
||||
})}
|
||||
<img key={"og-image"} src={data.preview}></img>
|
||||
|
||||
</picture>
|
||||
</div>
|
||||
) : (
|
||||
<User />
|
||||
)}
|
||||
<span className={classNames("indicator-item status md:left-1 top-1 sm:ring-2 md:ring-3 ring-base-100 z-1", data.status)}></span>
|
||||
|
||||
) : data.preview}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -101,7 +75,7 @@ export interface HeaderButton
|
|||
export interface HeaderAccount
|
||||
{
|
||||
id: string;
|
||||
previewUrl?: string | string[];
|
||||
preview?: string | JSX.Element;
|
||||
status?: "status-error" | "status-success" | "status-neutral";
|
||||
type?: "base" | "primary" | "secondary" | "accent";
|
||||
locked?: boolean;
|
||||
|
|
@ -228,32 +202,52 @@ function BatteryStatus ()
|
|||
|
||||
export function HeaderAccounts (data: { accounts?: HeaderAccount[]; })
|
||||
{
|
||||
const user = useQuery({
|
||||
...getCurrentUserApiUsersMeGetOptions(),
|
||||
const rommUser = useQuery({
|
||||
...rommUserQuery(),
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 1
|
||||
});
|
||||
const twitchStatus = useQuery({
|
||||
...twitchLoginVerificationQuery, refetchOnWindowFocus: false,
|
||||
retry: 1
|
||||
});
|
||||
|
||||
const accounts: HeaderAccount[] = [{
|
||||
id: 'romm', previewUrl: [
|
||||
`${RPC_URL(__HOST__)}/api/romm/assets/logos/romm_logo_xbox_one_square.svg`,
|
||||
],
|
||||
action: () =>
|
||||
{
|
||||
Router.navigate({ to: '/settings/accounts', search: { focus: 'rommAddress' } });
|
||||
},
|
||||
status: user.data ? "status-success" : 'status-error',
|
||||
type: 'secondary'
|
||||
}, ...data.accounts ?? []];
|
||||
const { ref } = useFocusable({ focusKey: 'accounts' });
|
||||
|
||||
return <div className="flex items-center gap-2 drop-shadow-sm">
|
||||
const accounts: HeaderAccount[] = [];
|
||||
if (data.accounts) accounts.push(...data.accounts);
|
||||
|
||||
if (rommUser.data)
|
||||
{
|
||||
accounts.push({
|
||||
id: 'romm', preview: `${RPC_URL(__HOST__)}/api/romm/assets/logos/romm_logo_xbox_one_square.svg`,
|
||||
action: () =>
|
||||
{
|
||||
Router.navigate({ to: '/settings/accounts', search: { focus: 'rommAddress' } });
|
||||
},
|
||||
status: rommUser.data ? "status-success" : 'status-error',
|
||||
type: 'secondary'
|
||||
});
|
||||
}
|
||||
|
||||
if (twitchStatus.data)
|
||||
{
|
||||
accounts.push({
|
||||
id: 'twitch', preview: TwitchIcon,
|
||||
action: () =>
|
||||
{
|
||||
Router.navigate({ to: '/settings/accounts', search: { focus: 'rommAddress' } });
|
||||
},
|
||||
type: 'secondary'
|
||||
});
|
||||
}
|
||||
|
||||
return <div ref={ref} className="avatar-group cursor-pointer -space-x-6 w-fit flex items-center gap-2 drop-shadow-sm overflow-visible rounded-3xl focusable focusable-hover ">
|
||||
{accounts?.map(a => <HeaderAvatar
|
||||
key={`header-avatar-${a.id}`}
|
||||
type={a.type}
|
||||
id={`account-${a.id}`}
|
||||
status={a.status}
|
||||
locked={a.locked}
|
||||
imageSrc={a.previewUrl}
|
||||
preview={a.preview}
|
||||
onSelect={a.action}
|
||||
/>)}
|
||||
</div>;
|
||||
|
|
@ -273,7 +267,7 @@ export function HeaderStatusBar (data: { buttons?: HeaderButton[]; buttonElement
|
|||
<div className="flex gap-2">
|
||||
{data.buttonElements ?? data.buttons?.map(b => <RoundButton
|
||||
key={b.id}
|
||||
className="header-icon sm:size-10 md:size-16"
|
||||
className="header-icon sm:size-10 md:size-14"
|
||||
id={b.id}
|
||||
external={b.external}
|
||||
cssStyle={{ viewTransitionName: `header-button-${b.id}` }}
|
||||
|
|
@ -296,6 +290,10 @@ interface HeaderUIParams
|
|||
export function HeaderUI (data: HeaderUIParams)
|
||||
{
|
||||
const { ref, focusKey } = useFocusable({ focusKey: "header-elements", focusable: data.focusable, preferredChildFocusKey: data.preferredChildFocusKey });
|
||||
const goToSettings = () =>
|
||||
{
|
||||
Router.navigate({ to: '/settings/accounts' });
|
||||
};
|
||||
return (
|
||||
<FocusContext.Provider value={focusKey}>
|
||||
<header
|
||||
|
|
@ -305,7 +303,7 @@ export function HeaderUI (data: HeaderUIParams)
|
|||
>
|
||||
<HeaderAccounts accounts={data.accounts} />
|
||||
{data.title}
|
||||
<HeaderStatusBar buttonElements={data.buttonElements} buttons={data.buttons} />
|
||||
<HeaderStatusBar buttonElements={data.buttonElements} buttons={[...data.buttons ?? [], { icon: <Settings />, id: "settings", action: goToSettings, external: true }]} />
|
||||
</header>
|
||||
</FocusContext.Provider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { FOCUS_KEYS } from "../scripts/types";
|
||||
import { useIntersectionObserver } from "usehooks-ts";
|
||||
import { FrontEndId } from "@/shared/constants";
|
||||
|
||||
export default function LoadMoreButton (data: { isFetching: boolean; lastId?: FrontEndId; } & FocusParams & InteractParams)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export default function NotFound ()
|
|||
<Button className="text-2xl! p-6! focusable focusable-primary" id="return" onAction={handleReturn}><Home />Return Home</Button>
|
||||
<div className="mobile:hidden bg-gradient"></div>
|
||||
<div className="mobile:hidden bg-noise"></div>
|
||||
<div className="mobile:hidden bg-dots"></div>
|
||||
<div className="flex justify-end fixed bottom-4 left-4 right-4"><Shortcuts shortcuts={shortcuts} /></div>
|
||||
</FocusContext>
|
||||
</div>;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Notification, RPC_URL } from "@/shared/constants";
|
||||
import { RPC_URL } from "@/shared/constants";
|
||||
import { useEffect } from "react";
|
||||
import toast, { ToastOptions } from "react-hot-toast";
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ export default function Notifications (data: {})
|
|||
const es = new EventSource(`${RPC_URL(__HOST__)}/api/system/notifications`);
|
||||
es.addEventListener('notification', (e) =>
|
||||
{
|
||||
const notification = JSON.parse(e.data) as Notification;
|
||||
const notification = JSON.parse(e.data) as FrontendNotification;
|
||||
const options: ToastOptions = { removeDelay: notification.duration };
|
||||
if (notification.type === 'error')
|
||||
{
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ function Screenshot (data: { path: string; index: number; setFocused?: (index: n
|
|||
}
|
||||
}); 4096;
|
||||
return <div ref={ref} className="group relative flex min-w-fit aspect-video max-h-[60vh] rounded-3xl focusable focusable-accent not-focused:cursor-pointer overflow-hidden">
|
||||
<img ref={imageRef} draggable={false} className="object-cover w-full h-full" onClick={e => focusSelf({ nativeEvent: e.nativeEvent })} src={`${RPC_URL(__HOST__)}${data.path}`} loading="lazy" />
|
||||
<img ref={imageRef} draggable={false} className="object-cover w-full h-full" onClick={e => focusSelf({ nativeEvent: e.nativeEvent })} src={`${RPC_URL(__HOST__)}${data.path}`} loading="lazy" decoding="async" />
|
||||
<div className="absolute flex justify-center items-center bottom-2 right-2 size-10 rounded-full bg-base-100 hover:bg-base-content hover:text-base-300 cursor-pointer opacity-60 not-control-mouse:hidden invisible group-has-hover:visible" onClick={e => data.onAction?.(e.nativeEvent)}> <Fullscreen /> </div>
|
||||
</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,48 +3,48 @@ import { GamePadButtonCode, Shortcut } from '../scripts/shortcuts';
|
|||
import ShortcutPrompt from './ShortcutPrompt';
|
||||
import { IconType } from './SvgIcon';
|
||||
|
||||
const iconMap: Record<GamePadButtonCode, IconType> = {
|
||||
[GamePadButtonCode.A]: 'steamdeck_button_a',
|
||||
[GamePadButtonCode.B]: 'steamdeck_button_b',
|
||||
[GamePadButtonCode.X]: 'steamdeck_button_x',
|
||||
[GamePadButtonCode.Y]: 'steamdeck_button_y',
|
||||
[GamePadButtonCode.L1]: 'steamdeck_button_l1',
|
||||
[GamePadButtonCode.R1]: 'steamdeck_button_r1',
|
||||
[GamePadButtonCode.L2]: 'steamdeck_button_l2',
|
||||
[GamePadButtonCode.R2]: 'steamdeck_button_r2',
|
||||
[GamePadButtonCode.Select]: 'steamdeck_button_guide',
|
||||
[GamePadButtonCode.Start]: 'steamdeck_button_options',
|
||||
[GamePadButtonCode.LJoy]: 'steamdeck_stick_l_press',
|
||||
[GamePadButtonCode.RJoy]: 'steamdeck_stick_r_press',
|
||||
[GamePadButtonCode.Up]: 'steamdeck_dpad_up',
|
||||
[GamePadButtonCode.Down]: 'steamdeck_dpad_down',
|
||||
[GamePadButtonCode.Left]: 'steamdeck_dpad_left',
|
||||
[GamePadButtonCode.Right]: 'steamdeck_dpad_right',
|
||||
[GamePadButtonCode.Steam]: 'steamdeck_button_quickaccess'
|
||||
};
|
||||
|
||||
const keyboardMap: Record<GamePadButtonCode, string> = {
|
||||
[GamePadButtonCode.A]: 'ENTER',
|
||||
[GamePadButtonCode.B]: 'ESC',
|
||||
[GamePadButtonCode.X]: 'BACKSPACE',
|
||||
[GamePadButtonCode.Y]: 'SPACE',
|
||||
[GamePadButtonCode.L1]: 'Q',
|
||||
[GamePadButtonCode.R1]: 'E',
|
||||
[GamePadButtonCode.L2]: '',
|
||||
[GamePadButtonCode.R2]: '',
|
||||
[GamePadButtonCode.Select]: '',
|
||||
[GamePadButtonCode.Start]: '',
|
||||
[GamePadButtonCode.LJoy]: '',
|
||||
[GamePadButtonCode.RJoy]: '',
|
||||
[GamePadButtonCode.Up]: '',
|
||||
[GamePadButtonCode.Down]: '',
|
||||
[GamePadButtonCode.Left]: '',
|
||||
[GamePadButtonCode.Right]: '',
|
||||
[GamePadButtonCode.Steam]: ''
|
||||
};
|
||||
|
||||
export default function Shortcuts (data: { shortcuts?: Shortcut[]; })
|
||||
{
|
||||
const iconMap: Record<GamePadButtonCode, IconType> = {
|
||||
[GamePadButtonCode.A]: 'steamdeck_button_a',
|
||||
[GamePadButtonCode.B]: 'steamdeck_button_b',
|
||||
[GamePadButtonCode.X]: 'steamdeck_button_x',
|
||||
[GamePadButtonCode.Y]: 'steamdeck_button_y',
|
||||
[GamePadButtonCode.L1]: 'steamdeck_button_l1',
|
||||
[GamePadButtonCode.R1]: 'steamdeck_button_r1',
|
||||
[GamePadButtonCode.L2]: 'steamdeck_button_l2',
|
||||
[GamePadButtonCode.R2]: 'steamdeck_button_r2',
|
||||
[GamePadButtonCode.Select]: 'steamdeck_button_guide',
|
||||
[GamePadButtonCode.Start]: 'steamdeck_button_options',
|
||||
[GamePadButtonCode.LJoy]: 'steamdeck_stick_l_press',
|
||||
[GamePadButtonCode.RJoy]: 'steamdeck_stick_r_press',
|
||||
[GamePadButtonCode.Up]: 'steamdeck_dpad_up',
|
||||
[GamePadButtonCode.Down]: 'steamdeck_dpad_down',
|
||||
[GamePadButtonCode.Left]: 'steamdeck_dpad_left',
|
||||
[GamePadButtonCode.Right]: 'steamdeck_dpad_right',
|
||||
[GamePadButtonCode.Steam]: 'steamdeck_button_quickaccess'
|
||||
};
|
||||
|
||||
const keyboardMap: Record<GamePadButtonCode, string> = {
|
||||
[GamePadButtonCode.A]: 'ENTER',
|
||||
[GamePadButtonCode.B]: 'ESC',
|
||||
[GamePadButtonCode.X]: 'BACKSPACE',
|
||||
[GamePadButtonCode.Y]: 'SPACE',
|
||||
[GamePadButtonCode.L1]: 'Q',
|
||||
[GamePadButtonCode.R1]: 'E',
|
||||
[GamePadButtonCode.L2]: '',
|
||||
[GamePadButtonCode.R2]: '',
|
||||
[GamePadButtonCode.Select]: '',
|
||||
[GamePadButtonCode.Start]: '',
|
||||
[GamePadButtonCode.LJoy]: '',
|
||||
[GamePadButtonCode.RJoy]: '',
|
||||
[GamePadButtonCode.Up]: '',
|
||||
[GamePadButtonCode.Down]: '',
|
||||
[GamePadButtonCode.Left]: '',
|
||||
[GamePadButtonCode.Right]: '',
|
||||
[GamePadButtonCode.Steam]: ''
|
||||
};
|
||||
|
||||
const { control } = useActiveControl();
|
||||
const showKeyboard = control === 'keyboard' || control === 'mouse';
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { FrontEndGameTypeDetailed, FrontEndGameTypeDetailedAchievement } from "@/shared/constants";
|
||||
|
||||
import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { Medal } from "lucide-react";
|
||||
|
||||
|
|
|
|||
42
src/mainview/components/game/ActionButton.tsx
Normal file
42
src/mainview/components/game/ActionButton.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import classNames from "classnames";
|
||||
import { JSX } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export default 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>
|
||||
);
|
||||
}
|
||||
84
src/mainview/components/game/ActionButtons.tsx
Normal file
84
src/mainview/components/game/ActionButtons.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { deleteGameMutation } from "@/mainview/scripts/queries/romm";
|
||||
import { FocusContext, setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { ContextList, DialogEntry, useContextDialog } from "../ContextDialog";
|
||||
import { getErrorMessage } from "react-error-boundary";
|
||||
import toast from "react-hot-toast";
|
||||
import { Settings, Trash, Trophy } from "lucide-react";
|
||||
import MainActions from "./MainActions";
|
||||
import ActionButton from "./ActionButton";
|
||||
import { useLocalStorage } from "usehooks-ts";
|
||||
import FocusTooltip from "../FocusTooltip";
|
||||
|
||||
function AchievementsInfo (data: { game: FrontEndGameTypeDetailed; } & InteractParams)
|
||||
{
|
||||
if (!data.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 />
|
||||
{`${data.game.achievements.unlocked}/${data.game.achievements.total}`}
|
||||
</div>
|
||||
<progress className="progress progress-secondary w-full" value={data.game.achievements.unlocked / data.game.achievements.total} max="1"></progress>
|
||||
</div>
|
||||
</ActionButton>;
|
||||
}
|
||||
|
||||
export default function ActionButtons (data: { game: FrontEndGameTypeDetailed, source: string, id: string; })
|
||||
{
|
||||
const [, setDetailsSection] = useLocalStorage('details-section', 'screenshots');
|
||||
|
||||
const { ref, focusKey, hasFocusedChild } = useFocusable({ focusKey: 'actions', trackChildren: true });
|
||||
const deleteMutation = useMutation({
|
||||
...deleteGameMutation(data.game.id),
|
||||
onSuccess: () =>
|
||||
{
|
||||
location.reload();
|
||||
console.log("Deleted");
|
||||
},
|
||||
onError (error)
|
||||
{
|
||||
toast.error(getErrorMessage(error) ?? "Error While Deleting");
|
||||
}
|
||||
});
|
||||
|
||||
const contextOptions: DialogEntry[] = [];
|
||||
if (data.game.local)
|
||||
{
|
||||
contextOptions.push({
|
||||
id: 'delete',
|
||||
action: () =>
|
||||
{
|
||||
deleteMutation.mutate();
|
||||
},
|
||||
icon: <Trash />,
|
||||
content: "Delete",
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
|
||||
const { setOpen, dialog: settingsDialog } = useContextDialog("settings-context", { content: <ContextList options={contextOptions} /> });
|
||||
|
||||
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 game={data.game} source={data.source} id={data.id} />
|
||||
<AchievementsInfo game={data.game} onAction={() =>
|
||||
{
|
||||
setDetailsSection("achievements");
|
||||
if (data.game.achievements?.entires[0])
|
||||
{
|
||||
setFocus(data.game.achievements.entires[0].id);
|
||||
}
|
||||
|
||||
}} />
|
||||
<ActionButton tooltip="Settings" onAction={() => setOpen(true, 'settings')} type="base" id="settings" icon={<Settings />} >
|
||||
</ActionButton >
|
||||
{settingsDialog}
|
||||
<FocusTooltip visible={hasFocusedChild} parentRef={ref} />
|
||||
</FocusContext>
|
||||
</div>;
|
||||
}
|
||||
95
src/mainview/components/game/Details.tsx
Normal file
95
src/mainview/components/game/Details.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { scrollIntoViewHandler } from "@/mainview/scripts/utils";
|
||||
import { RPC_URL } from "@/shared/constants";
|
||||
import { FocusContext, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import classNames from "classnames";
|
||||
import { Clock, CloudDownload, HardDrive, Store, TriangleAlert } from "lucide-react";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import { JSX } from "react";
|
||||
import ActionButtons from "./ActionButtons";
|
||||
|
||||
|
||||
export function DetailElement (data: { icon: JSX.Element; children?: any | any[]; })
|
||||
{
|
||||
return (
|
||||
<div className="flex gap-2 items-center">
|
||||
{data.icon}
|
||||
{data.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Details (data: {
|
||||
game?: FrontEndGameTypeDetailed,
|
||||
source: string,
|
||||
id: string;
|
||||
})
|
||||
{
|
||||
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 = data.game?.path_platform_cover ? new URL(`${RPC_URL(__HOST__)}${data.game?.path_platform_cover}`) : undefined;
|
||||
if (platformCoverImg)
|
||||
platformCoverImg.searchParams.set("width", "64");
|
||||
const gameCoverImg = data.game?.path_cover ? `${RPC_URL(__HOST__)}${data.game?.path_cover}` : undefined;
|
||||
|
||||
let fileSizeIcon: JSX.Element | undefined;
|
||||
if (!data.game)
|
||||
{
|
||||
fileSizeIcon = <span className="loading loading-spinner loading-lg"></span>;
|
||||
} else if (data.game.missing)
|
||||
{
|
||||
fileSizeIcon = <TriangleAlert />;
|
||||
} else if (data.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">
|
||||
<DetailElement icon={<Clock />} >{data.game?.last_played ? new Date(data.game.last_played).toDateString() : "Never"}</DetailElement>
|
||||
{!!data.game && (data.game.fs_size_bytes !== null || data.game.missing) &&
|
||||
<div className={classNames({ "text-error": data.game.missing })}>
|
||||
<div className="tooltip" data-tip={data.game.path_fs}>
|
||||
<DetailElement icon={fileSizeIcon} >{data.game.missing ? 'Missing' : prettyBytes(data.game.fs_size_bytes!)}</DetailElement>
|
||||
</div>
|
||||
</div>}
|
||||
<DetailElement icon={platformCoverImg ? <img className="size-6" src={platformCoverImg.href}></img> : <div className="skeleton size-6 rounded-full shrink-0"></div>} >{data.game?.platform_display_name ?? <div className="skeleton h-4 w-32"></div>}</DetailElement>
|
||||
<DetailElement icon={
|
||||
<Store />
|
||||
} >
|
||||
{data.game?.source ?? data.game?.id.source}
|
||||
{data.game?.local && <small className="text-base-content/60 font-semibold">local</small>}</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">
|
||||
{data.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>
|
||||
{!!data.game && <ActionButtons source={data.source} id={data.id} game={data.game} key="actions" />}
|
||||
</div>
|
||||
</section>
|
||||
</FocusContext>
|
||||
</main>;
|
||||
}
|
||||
207
src/mainview/components/game/MainActions.tsx
Normal file
207
src/mainview/components/game/MainActions.tsx
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
import { Router } from "@/mainview";
|
||||
import { rommApi } from "@/mainview/scripts/clientApi";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { JSX, useEffect, useRef, useState } from "react";
|
||||
import { getErrorMessage } from "react-error-boundary";
|
||||
import toast from "react-hot-toast";
|
||||
import { useLocalStorage } from "usehooks-ts";
|
||||
import { ContextList, DialogEntry, useContextDialog } from "../ContextDialog";
|
||||
import { Clock, Download, EllipsisVertical, PackageOpen, Play, TriangleAlert } from "lucide-react";
|
||||
import { installMutation, playMutation } from "@/mainview/scripts/queries/romm";
|
||||
import ActionButton from "./ActionButton";
|
||||
|
||||
export default function MainActions (data: { game: FrontEndGameTypeDetailed, source: string, id: string; })
|
||||
{
|
||||
const installMut = useMutation(installMutation(data.source, data.id));
|
||||
const playMut = useMutation({
|
||||
...playMutation, onError (error)
|
||||
{
|
||||
toast.error(error.message);
|
||||
},
|
||||
onSuccess (data, { source, id }, onMutateResult, context)
|
||||
{
|
||||
Router.navigate({ to: '/launcher/$source/$id', params: { source: source, id: id }, replace: true });
|
||||
},
|
||||
});
|
||||
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.game.source ?? data.game.id.source}-${data.game.source_id ?? data.game.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.game.id.source })({ id: data.game.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: data.id, source: data.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.game.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: data.source, id: data.id }, search: Object.fromEntries(params.entries()), replace: true });
|
||||
} else
|
||||
{
|
||||
playMut.mutate({ source: data.game.id.source, id: data.game.id.id, command_id: cmd.id });
|
||||
}
|
||||
};
|
||||
|
||||
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>;
|
||||
}
|
||||
|
|
@ -11,14 +11,14 @@ import { CSSProperties } from "react";
|
|||
export type ButtonStyle = 'base' | 'accent' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
|
||||
|
||||
const styles = {
|
||||
base: 'bg-base-200 text-base-content active:bg-base-300! active:text-base-content! active:ring-offset-base-content',
|
||||
accent: "bg-accent text-accent-content active:bg-base-content! active:text-base-content active:ring-offset-accent",
|
||||
primary: "bg-primary text-primary-content active:bg-base-content! active:text-base-content! active:ring-offset-primary",
|
||||
secondary: "bg-secondary text-secondary-content active:bg-base-content! active:text-base-content! active:ring-offset-secondary",
|
||||
info: "bg-info text-info-content active:bg-base-content! active:text-base-content! active:ring-offset-info",
|
||||
success: "bg-success text-success-content active:bg-base-content! active:text-base-content! active:ring-offset-success",
|
||||
warning: "bg-warning text-warning-content active:bg-base-content! active:text-base-content! active:ring-offset-warning",
|
||||
error: "bg-error text-error-content active:bg-base-content! active:text-base-content! active:ring-offset-error",
|
||||
base: 'dark:bg-base-200 light:bg-base-300 text-base-content active:not-disabled:bg-base-300! active:not-disabled:text-base-content! active:not-disabled:ring-offset-base-content',
|
||||
accent: "bg-accent text-accent-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:ring-offset-accent",
|
||||
primary: "bg-primary text-primary-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-primary",
|
||||
secondary: "bg-secondary text-secondary-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-secondary",
|
||||
info: "bg-info text-info-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-info",
|
||||
success: "bg-success text-success-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-success",
|
||||
warning: "bg-warning text-warning-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-warning",
|
||||
error: "bg-error text-error-content active:not-disabled:bg-base-100! active:not-disabled:text-base-content! active:not-disabled:ring-offset-error",
|
||||
};
|
||||
|
||||
export function Button (data: {
|
||||
|
|
@ -31,6 +31,8 @@ export function Button (data: {
|
|||
shortcutLabel?: string;
|
||||
focusClassName?: string;
|
||||
cssStyle?: CSSProperties;
|
||||
tooltip?: string;
|
||||
tooltipType?: "base" | "accent" | "error";
|
||||
} & InteractParams & FocusParams)
|
||||
{
|
||||
const { ref, focused, focusKey } = useFocusable({
|
||||
|
|
@ -49,8 +51,10 @@ export function Button (data: {
|
|||
ref={ref}
|
||||
onClick={e => data.onAction?.(e.nativeEvent)}
|
||||
disabled={data.disabled}
|
||||
data-tooltip={data.tooltip}
|
||||
data-tooltip_type={data.tooltipType}
|
||||
style={data.cssStyle}
|
||||
className={twMerge("flex items-center justify-center px-4 py-2 disabled:bg-base-200/40 disabled:text-base-content/40 cursor-pointer rounded-3xl md:text-lg not-control-mouse:focused:drop-shadow-lg border border-base-content/5 not-control-mouse:focused:bg-base-content not-control-mouse:focused:text-base-100 control-mouse:hover:bg-base-content control-mouse:hover:text-base-100 active:transition-none active:ring-offset-4",
|
||||
className={twMerge("flex items-center justify-center px-4 py-2 disabled:bg-base-200/40 disabled:text-base-content/40 not-disabled:cursor-pointer rounded-3xl md:text-lg not-control-mouse:focused:drop-shadow-lg border border-base-content/5 not-control-mouse:focused:bg-base-content not-control-mouse:focused:text-base-100 control-mouse:hover:not-disabled:bg-base-content control-mouse:hover:not-disabled:text-base-100 active:not-disabled:transition-none active:not-disabled:ring-offset-4",
|
||||
styles[data.style ?? 'base'],
|
||||
focused ? data.focusClassName : undefined,
|
||||
classNames({
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { twMerge } from "tailwind-merge";
|
|||
import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { ContextDialog, ContextList, DialogEntry } from "../ContextDialog";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { FOCUS_KEYS } from "@/mainview/scripts/types";
|
||||
|
||||
export function OptionDropdown (data: {
|
||||
name: string;
|
||||
|
|
@ -38,7 +39,7 @@ export function OptionDropdown (data: {
|
|||
setOpen(true);
|
||||
}} className={'flex items-center justify-center border h-10 border-base-content/30 px-4 py-2 rounded-full cursor-pointer grow not-in-focused:bg-base-200 focusable focusable-accent hover:border-base-content hover:bg-base-content hover:text-base-300'}>{data.value}<ChevronDown /></button>
|
||||
</label>
|
||||
{open && <ContextDialog id={`${data.name}-context`} open={true} close={handleClose}>
|
||||
{open && <ContextDialog id={`${data.name}-context`} preferredChildFocusKey={FOCUS_KEYS.CONTEXT_DIALOG_OPTION(`${data.name}-context`, String(data.values.indexOf(data.value ?? '')))} open={true} close={handleClose}>
|
||||
<ContextList options={data.values.map((v, i) => ({
|
||||
content: v,
|
||||
id: String(i),
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export function OptionInput (data: {
|
|||
className?: string;
|
||||
placeholder?: string;
|
||||
icon?: JSX.Element;
|
||||
value?: string;
|
||||
value?: string | boolean;
|
||||
defaultValue?: string | boolean;
|
||||
autocomplete?: HTMLInputAutoCompleteAttribute;
|
||||
onBlur?: FocusEventHandler<HTMLInputElement>;
|
||||
|
|
@ -58,7 +58,7 @@ export function OptionInput (data: {
|
|||
id={data.name}
|
||||
data-focus={"input"}
|
||||
name={data.name}
|
||||
value={data.value}
|
||||
value={String(data.value)}
|
||||
defaultValue={typeof data.defaultValue === 'string' ? data.defaultValue : undefined}
|
||||
type={data.type}
|
||||
autoComplete={data.autocomplete}
|
||||
|
|
@ -68,24 +68,22 @@ export function OptionInput (data: {
|
|||
onBlur={data.onBlur}
|
||||
defaultChecked={typeof data.defaultValue === 'boolean' ? data.defaultValue : undefined}
|
||||
className={twMerge(
|
||||
"flex text-base-content px-4 py-2 items-center justify-center border border-base-content/20 grow rounded-full focus:ring-base-content in-focused:bg-base-200 focusable focusable-accent focus:not-focused:ring-7 control-mouse:ring-0! hover:border-base-content",
|
||||
"flex text-base-content px-4 py-2 items-center justify-center border bg-base-200 border-base-content/20 grow rounded-full focus:ring-base-content in-focused:bg-base-100 focusable focusable-accent focus:not-focused:ring-7 control-mouse:ring-0! hover:border-base-content",
|
||||
data.className
|
||||
)}
|
||||
/>}
|
||||
{data.type === 'checkbox' && <div className="toggle toggle-xl before:size-6 h-8 border-base-content/30 rounded-full before:rounded-full text-base-content not-in-focus:bg-base-200 focused-child:border-0 ml-1 ring-7 hover:border-base-content focusable focusable-accent">
|
||||
{data.type === 'checkbox' && <div className="toggle toggle-xl toggle-success before:size-6 h-8 border-base-content/30 rounded-full before:bg-base-100 before:rounded-full text-base-content not-in-focus:bg-base-200 focused-child:border-0 ml-1 ring-7 hover:border-base-content focusable has-checked:bg-success not-has-checked:bg-error">
|
||||
<input
|
||||
ref={inputRef}
|
||||
id={data.name}
|
||||
name={data.name}
|
||||
value={data.value}
|
||||
defaultValue={typeof data.defaultValue === 'string' ? data.defaultValue : undefined}
|
||||
checked={Boolean(data.value)}
|
||||
type={data.type}
|
||||
autoComplete={data.autocomplete}
|
||||
onFocus={handleFocus}
|
||||
placeholder={data.placeholder}
|
||||
onChange={e => data.onChange?.(typeof data.defaultValue === 'boolean' ? e.target.checked : e.target.value)}
|
||||
onChange={e => data.onChange?.(e.target.checked)}
|
||||
onBlur={data.onBlur}
|
||||
defaultChecked={typeof data.defaultValue === 'boolean' ? data.defaultValue : undefined}
|
||||
className={twMerge(
|
||||
data.className
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -10,10 +10,6 @@ import FilePicker from "../FilePicker";
|
|||
import { setFocus } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { getSettingQuery, setSettingMutation } from "@queries/settings";
|
||||
|
||||
type KeysWithValueAssignableTo<T, Value> = {
|
||||
[K in keyof T]: Exclude<T[K], undefined> extends Value ? K : never;
|
||||
}[keyof T];
|
||||
|
||||
export interface PathSettingsOptionParams
|
||||
{
|
||||
label: string;
|
||||
|
|
@ -68,11 +64,8 @@ export function PathSettingsOptionBase (data: PathSettingsOptionParams & {
|
|||
|
||||
useEffect(() =>
|
||||
{
|
||||
if (!data.isDirty)
|
||||
{
|
||||
data.setLocalValue(String(defaultValue));
|
||||
}
|
||||
}, [data.isDirty, defaultValue]);
|
||||
data.setLocalValue(String(defaultValue));
|
||||
}, [defaultValue]);
|
||||
|
||||
const handleSelectPath = (path: string) =>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,17 +1,13 @@
|
|||
import { HTMLInputTypeAttribute, JSX, useCallback, useState } from "react";
|
||||
import { HTMLInputTypeAttribute, JSX, useCallback, useEffect, useState } from "react";
|
||||
import { SettingsType } from "../../../shared/constants";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { OptionSpace } from "./OptionSpace";
|
||||
import { OptionInput } from "./OptionInput";
|
||||
import { getSettingQuery, setSettingMutation } from "@queries/settings";
|
||||
|
||||
type KeysWithValueAssignableTo<T, Value> = {
|
||||
[K in keyof T]: Exclude<T[K], undefined> extends Value ? K : never;
|
||||
}[keyof T];
|
||||
|
||||
export function SettingsOption (data: {
|
||||
label: string;
|
||||
id: KeysWithValueAssignableTo<SettingsType, string>;
|
||||
id: KeysWithValueAssignableTo<SettingsType, string | boolean>;
|
||||
type: HTMLInputTypeAttribute;
|
||||
placeholder?: string;
|
||||
icon?: JSX.Element;
|
||||
|
|
@ -19,10 +15,16 @@ export function SettingsOption (data: {
|
|||
})
|
||||
{
|
||||
const [dirty, setDirty] = useState(false);
|
||||
const [localValue, setLocalValue] = useState<string | undefined>();
|
||||
useQuery(getSettingQuery(data.id));
|
||||
const [localValue, setLocalValue] = useState<string | boolean | undefined>();
|
||||
const { data: serverValue } = useQuery(getSettingQuery(data.id));
|
||||
const setMutation = useMutation(setSettingMutation(data.id));
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setLocalValue(serverValue as any);
|
||||
setDirty(false);
|
||||
}, [serverValue]);
|
||||
|
||||
const handleSave = useCallback(() =>
|
||||
{
|
||||
if (dirty)
|
||||
|
|
@ -43,7 +45,14 @@ export function SettingsOption (data: {
|
|||
onChange={(v) =>
|
||||
{
|
||||
setLocalValue(v);
|
||||
setDirty(true);
|
||||
|
||||
if (data.type === 'checkbox')
|
||||
{
|
||||
setMutation.mutate(v);
|
||||
} else
|
||||
{
|
||||
setDirty(true);
|
||||
}
|
||||
}}
|
||||
value={localValue}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import FocusDots from "../FocusDots";
|
|||
import { Router } from "@/mainview";
|
||||
import { StoreEmulatorCard } from "./StoreEmulatorCard";
|
||||
import { FOCUS_KEYS } from "@/mainview/scripts/types";
|
||||
import { FrontEndEmulator } from "@/shared/constants";
|
||||
import Carousel from "../Carousel";
|
||||
|
||||
function SeeAllCard (data: { id: string; onAction: () => void; onFocus?: (details: { node: HTMLElement, instant: boolean; }) => void; })
|
||||
|
|
@ -51,18 +50,18 @@ export function EmulatorsSection (data: {
|
|||
|
||||
return (
|
||||
<FocusContext.Provider value={focusKey}>
|
||||
<section ref={ref} className="px-2 py-4">
|
||||
<section ref={ref} className="px-2 py-4 pb-0">
|
||||
<div className="flex items-center gap-3 px-4 mb-4 text-info">
|
||||
{data.header ?? <>
|
||||
<div className="w-2 h-5 rounded-full bg-info shadow-sm shadow-error/40" />
|
||||
<Joystick />
|
||||
<h2 className="font-bold uppercase tracking-widest">
|
||||
<div className="w-2 h-5 rounded-full bg-info shadow-sm" />
|
||||
<Joystick className="shadow-sm" />
|
||||
<h2 className="font-bold uppercase tracking-widest text-shadow-sm">
|
||||
Recommended Emulators
|
||||
</h2>
|
||||
</>}
|
||||
</div>
|
||||
|
||||
<Carousel scrollRef={containerRef} className="flex *:min-w-[18rem] overflow-y-hidden overflow-x-scroll scrollbar-none py-2 px-4 gap-4 select-none">
|
||||
<Carousel scrollRef={containerRef} className="flex *:min-w-[18rem] overflow-y-hidden overflow-x-scroll scrollbar-none py-2 pb-4 px-4 gap-4 select-none">
|
||||
{data.emulators?.map((em) => (
|
||||
<StoreEmulatorCard id={`${data.id}-${em.name}`} key={em.name} emulator={em} onSelect={(id, focusKey) => data.onSelect?.(em.name, focusKey)} onFocus={({ node, details }) =>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { CSSProperties, Ref, RefObject, useEffect, useRef } from "react";
|
||||
import { Ref, useEffect, useRef } from "react";
|
||||
import
|
||||
{
|
||||
useFocusable,
|
||||
|
|
@ -6,7 +6,6 @@ import
|
|||
} from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { scrollIntoNearestParent, useDragScroll } from "@/mainview/scripts/utils";
|
||||
import FocusDots from "../FocusDots";
|
||||
import { FrontEndGameType, FrontEndId } from "@/shared/constants";
|
||||
import FrontEndGameCard from "../FrontEndGameCard";
|
||||
import { FOCUS_KEYS } from "@/mainview/scripts/types";
|
||||
import Carousel from "../Carousel";
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { Button } from "../options/Button";
|
|||
import useActiveControl from "@/mainview/scripts/gamepads";
|
||||
import { ChevronRight, CircleQuestionMark, SearchAlert } from "lucide-react";
|
||||
import { GamePadButtonCode, useShortcuts } from "@/mainview/scripts/shortcuts";
|
||||
import { FrontEndEmulator, RPC_URL } from "@/shared/constants";
|
||||
import { RPC_URL } from "@/shared/constants";
|
||||
import { FOCUS_KEYS } from "@/mainview/scripts/types";
|
||||
|
||||
// ── Single missing-emulator card ───────────────────────────────────────────
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { FrontEndEmulator, RPC_URL } from "@/shared/constants";
|
||||
import { RPC_URL } from "@/shared/constants";
|
||||
import { Button } from "../options/Button";
|
||||
import useActiveControl from "@/mainview/scripts/gamepads";
|
||||
import { useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
||||
import { GamePadButtonCode, useShortcuts } from "@/mainview/scripts/shortcuts";
|
||||
import { ChevronRight, EllipsisVertical, FileQuestion, IceCream2, Package, Store } from "lucide-react";
|
||||
import { BadgeCheck, ChevronRight, EllipsisVertical, FileQuestion, IceCream2, Package, Sparkles, Store, WandSparkles } from "lucide-react";
|
||||
import { FOCUS_KEYS } from "@/mainview/scripts/types";
|
||||
import { FlatpackIcon } from "@/mainview/scripts/brandIcons";
|
||||
import { JSX } from "react";
|
||||
|
|
@ -54,14 +54,13 @@ export function StoreEmulatorCard (data: {
|
|||
<div className="flex gap-2">
|
||||
<div className="flex items-start">
|
||||
<div
|
||||
data-installed={!!data.emulator.validSource}
|
||||
className={`size-14 p-2 rounded-full bg-info flex items-center justify-center text-xl shadow-lg data-[installed=true]:bg-success`}
|
||||
className={`size-14 p-2 rounded-full bg-info flex items-center justify-center text-xl shadow-lg in-data-[installed=true]:bg-success`}
|
||||
>
|
||||
<img draggable={false} src={data.emulator.logo}></img>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p data-installed={!!data.emulator.validSource} className="font-bold text-base-content text-xl leading-snug data-[installed=true]:text-success">{data.emulator.name}</p>
|
||||
<p className="font-bold text-base-content text-xl leading-snug in-data-[installed=true]:text-success">{data.emulator.name}</p>
|
||||
<ul className="flex flex-wrap gap-1">
|
||||
{data.emulator.systems.map(({ id, name, icon }) =>
|
||||
{
|
||||
|
|
@ -75,15 +74,15 @@ export function StoreEmulatorCard (data: {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-0.5 mt-1 h-10 items-center">
|
||||
<div className="flex gap-1 mt-1 h-10 items-center">
|
||||
{!!data.emulator.integration && data.emulator.validSource?.type === 'store' && <div className="tooltip tooltip-primary" data-tip="Has Integration">
|
||||
<div className="bg-primary text-primary-content rounded-full p-1"><WandSparkles /></div>
|
||||
</div>}
|
||||
{!!data.emulator.validSource && <div className="tooltip" data-tip={data.emulator.validSource.type}>
|
||||
<div className="flex items-center justify-center rounded-full p-1 size-8 bg-success text-success-content">
|
||||
<div data-source={data.emulator.validSource?.type} className="flex items-center justify-center rounded-full p-1 size-8 bg-warning text-warning-content data-[source=store]:bg-success data-[source=store]:text-success-content">
|
||||
{emulatorStatusIcons[data.emulator.validSource?.type ?? '']}
|
||||
</div>
|
||||
</div>}
|
||||
{data.emulator.gameCount > 0 && <div className="tooltip" data-tip="Game Count">
|
||||
<div className="flex items-center justify-center rounded-full font-semibold size-9 p-2 bg-base-200 text-base-content/40">{data.emulator.gameCount}</div>
|
||||
</div>}
|
||||
{isMouse && <>
|
||||
<Button onAction={handleSelect} style="base" className="grow text-base-content/40" id={`${data.emulator.name}-details`} >Details<ChevronRight /></Button>
|
||||
<Button className="bg-transparent border-none shadow-none w-6 p-0" id={`${data.emulator.name}-options`} ><EllipsisVertical /></Button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue