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

feat: Implemented emulator versions and updating

Browse source
This commit is contained in:
Simeon Radivoev 2026-04-03 23:02:22 +03:00
parent a69147a4f7
commit 34db717ec5
Signed by: simeonradivoev
GPG key ID: 7611A451D2A5D37A
22 changed files with 434 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,7 +12,7 @@ export default function FocusTooltip (data: { parentRef: RefObject<any>; visible
{
const dataTooltip = e.getAttribute('data-tooltip');
setHoverText(dataTooltip ?? undefined);
setHoverTextType(e.getAttribute('data-tooltip_type') ?? 'accent');
setHoverTextType(e.getAttribute('data-tooltip-type') ?? 'accent');
};
const { isPointer } = useActiveControl();
@ -29,7 +29,10 @@ export default function FocusTooltip (data: { parentRef: RefObject<any>; visible
const tooltipStyles = {
base: 'bg-base-100 text-base-content',
accent: 'bg-accent text-accent-content',
error: 'bg-error text-error-content'
error: 'bg-error text-error-content',
warning: 'bg-warning text-warning-content',
info: 'bg-info text-info-content',
success: 'bg-success text-success-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>;

10
src/mainview/components/StatList.tsx
View file

@ -29,7 +29,7 @@ export default function StatList (data: {
return <ul ref={ref} className="grid md:grid-cols-[8rem_1fr] sm:px-8 md:px-16 py-4 gap-2 focused:border-y focused:border-dashed focused:border-base-content/40">
<FocusContext value={focusKey}>
{data.stats.map((s, i) =>
{data.stats.flatMap((s, i) =>
{
let content: any = undefined;
if (s.content instanceof Array)
@ -37,13 +37,9 @@ export default function StatList (data: {
content = <div key={`label-items-${i}`} className="flex flex-wrap gap-2">{s.content.map((c, ci) => <span key={`label-items-${i}-${ci}`} className={twMerge("rounded-3xl bg-base-200 px-3 py-1", data.elementClassName)}>{c}</span>)}</div>;
} else
{
content = <div key={`label-element-${i}`} className={twMerge("flex gap-2 rounded-3xl bg-base-200 px-3 py-1", data.elementClassName)}>{s.icon}{s.content}</div>;
content = <div key={`label-element-${i}`} className={twMerge("flex gap-2 rounded-2xl bg-base-200 px-3 py-2", data.elementClassName)}>{s.icon}{s.content}</div>;
}
const element = <>
<Label id={`${data.id}-label-${i}`} key={`label-${i}`} label={s.label} />
{content}
</>;
return element;
return [<Label key={`label-${i}`} id={`${data.id}-label-${i}`} label={s.label} />, <div key={`content-${i}`}>{content}</div>];
})}
</FocusContext>
</ul>;

2
src/mainview/components/game/ActionButton.tsx
View file

@ -31,7 +31,7 @@ export default function ActionButton (data: {
ref={ref}
onClick={data.onAction}
data-tooltip={data.tooltip}
data-tooltip_type={data.tooltip_type}
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}

2
src/mainview/components/game/MainActions.tsx
View file

@ -137,7 +137,7 @@ export default function MainActions (data: { game?: FrontEndGameTypeDetailed, so
mainButton = <ActionButton
key="error"
tooltip={error}
tooltip_type="error"
tooltip-type="error"
type='error'
onAction={() =>
{

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

@ -33,7 +33,7 @@ export function Button (data: {
focusClassName?: string;
cssStyle?: CSSProperties;
tooltip?: string;
tooltipType?: "base" | "accent" | "error";
tooltipType?: "base" | "accent" | "error" | "warning";
} & InteractParams & FocusParams)
{
const handleAction = (e?: any) =>
@ -58,7 +58,7 @@ export function Button (data: {
onClick={handleAction}
disabled={data.disabled}
data-tooltip={data.tooltip}
data-tooltip_type={data.tooltipType}
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 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'],

31
src/mainview/components/store/StoreEmulatorCard.tsx
View file

@ -5,11 +5,13 @@ 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 { BadgeCheck, ChevronRight, EllipsisVertical, FileQuestion, IceCream2, Package, Sparkles, Store, WandSparkles } from "lucide-react";
import { BadgeCheck, ChevronRight, CircleFadingArrowUp, 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";
import { oneShot } from "@/mainview/scripts/audio/audio";
import { useQuery } from "@tanstack/react-query";
import { getUpdateInfoForEmulator } from "@/mainview/scripts/queries/store";
export const emulatorStatusIcons: Record<string, JSX.Element> = {
store: <Store />,
@ -42,8 +44,9 @@ export function StoreEmulatorCard (data: {
}
});
const { data: updateInfo } = useQuery(getUpdateInfoForEmulator(data.emulator.name));
useShortcuts(focusKey, () => [{ button: GamePadButtonCode.A, label: "Details", action: handleSelect }], [handleSelect]);
const { isMouse, isTouch } = useActiveControl();
return (
<div
@ -52,8 +55,8 @@ export function StoreEmulatorCard (data: {
tabIndex={0}
data-sound-category="emulator"
data-installed={data.emulator.validSources.some(s => s.exists)}
onClick={isTouch ? handleSelect : undefined}
className={twMerge("relative focusable focusable-info bg-base-100 rounded-4xl transition-shadow focused:not-control-mouse:animate-scale-small shadow-lg border border-base-content/10 active:ring-4 active:ring-base-content active:transition-none", data.className)}
onClick={handleSelect}
className={twMerge("relative focusable focusable-info focusable-hover bg-base-100 rounded-4xl transition-shadow focused:not-control-mouse:animate-scale-small shadow-lg border border-base-content/10 active:ring-4 active:ring-base-content active:transition-none cursor-pointer", data.className)}
>
<div className="flex flex-col justify-between p-4 gap-2 h-full">
<div className="flex flex-col gap-2">
@ -81,21 +84,27 @@ export function StoreEmulatorCard (data: {
</div>
<div className="flex gap-1 mt-1 h-10 items-center">
{!!data.emulator.integration && <div aria-disabled={!data.emulator.integration.possible} className="tooltip not-aria-disabled:tooltip-primary" data-tip={data.emulator.integration.possible ? "Has Integration" : "Can Integrate"}>
<div className="bg-primary in-aria-disabled:bg-base-200 text-primary-content rounded-full p-1.5"><WandSparkles className="size-5" /></div>
{updateInfo?.hasUpdate && <div className="tooltip" data-tip="Has Update">
<div className="flex items-center justify-center rounded-full p-1 size-8 bg-warning text-warning-content">
<CircleFadingArrowUp />
</div>
</div>}
{data.emulator.integrations.length > 0 && <div
aria-disabled={!data.emulator.integrations.some(i => i.supportLevel)}
data-full-support={data.emulator.integrations.some(i => i.supportLevel === 'full')}
className="tooltip not-aria-disabled:tooltip-primary"
data-tip={data.emulator.integrations.some(i => i.supportLevel) ? data.emulator.integrations.some(i => i.supportLevel === 'full') ? "Full Support" : "Partial SUpport" : "Can Integrate"}
>
<div className="bg-primary in-data-[full-support=false]:bg-warning in-data-[full-support=false]:text-warning-content in-aria-disabled:bg-base-200 in-aria-disabled:text-base-content text-primary-content rounded-full p-1.5"><WandSparkles className="size-5" /></div>
</div>}
{data.emulator.validSources.slice(0, 3).map(s =>
{
return <div className="tooltip" data-tip={s.type}>
<div data-source={s.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">
<div data-source={s.type} className="flex items-center justify-center rounded-full p-1 size-8 bg-base-300 text-base-content data-[source=store]:bg-success data-[source=store]:text-success-content">
{emulatorStatusIcons[s.type]}
</div>
</div>;
})}
{isMouse && <>
<Button onAction={e => data.onSelect?.(data.emulator.name, focusKey)} style="base" className="grow text-base-content/40" id={`${data.emulator.name}-details`} >Details<ChevronRight /></Button>
</>}
</div>
</div>
</div>