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

feat: Added way to update the local games from romm when IDs change based on IGDB or Retro Achievement ID

Browse source 
Fixes #2
This commit is contained in:
Simeon Radivoev 2026-04-10 02:00:11 +03:00
parent 7948bd24fa
commit 4806f3487a
Signed by: simeonradivoev
GPG key ID: 7611A451D2A5D37A
9 changed files with 143 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/mainview/components/game/ActionButtons.tsx
View file

@ -1,10 +1,10 @@
import { deleteGameMutation, gameInvalidationQuery } from "@/mainview/scripts/queries/romm";
import { deleteGameMutation, fixSourceMutation, gameInvalidationQuery, validateSourceQuery } from "@/mainview/scripts/queries/romm";
import { FocusContext, setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
import { useMutation } from "@tanstack/react-query";
import { useMutation, useQuery } 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 { Hammer, Settings, Trash, Trophy } from "lucide-react";
import MainActions from "./MainActions";
import ActionButton from "./ActionButton";
import { useLocalStorage } from "usehooks-ts";
@ -33,6 +33,18 @@ export default function ActionButtons (data: { game?: FrontEndGameTypeDetailed,
{
const [, setDetailsSection] = useLocalStorage('details-section', 'screenshots');
const fixMutation = useMutation({
...fixSourceMutation, onSuccess (data, variables, onMutateResult, context)
{
if (onMutateResult) toast.success("Updated Source");
context.client.invalidateQueries(gameInvalidationQuery(variables.id, variables.source)).then(() => router.history.back());
},
onError (error)
{
toast.error(getErrorMessage(error) ?? "Error While Trying To Fix");
}
});
const { data: validation } = useQuery(validateSourceQuery(data.source, data.id));
const { ref, focusKey, hasFocusedChild } = useFocusable({ focusKey: 'actions', forceFocus: true, trackChildren: true, preferredChildFocusKey: 'mainAction' });
const router = useRouter();
const deleteMutation = useMutation({
@ -47,32 +59,41 @@ export default function ActionButtons (data: { game?: FrontEndGameTypeDetailed,
}
});
useBlocker({ shouldBlockFn: () => deleteMutation.isPending });
useBlocker({
shouldBlockFn: () =>
{
return deleteMutation.isPending || fixMutation.isPending;
}
});
const contextOptions: DialogEntry[] = [];
if (data.game?.local)
{
if (deleteMutation.isPending)
{
contextOptions.push({
id: 'delete',
icon: <span className="loading loading-spinner loading-lg"></span>,
content: "Deleting",
type: 'error'
});
} else
{
contextOptions.push({
id: 'delete',
action: () =>
{
deleteMutation.mutate();
},
icon: <Trash />,
content: "Delete",
type: 'error'
});
}
contextOptions.push({
id: 'delete',
action: () =>
{
deleteMutation.mutate();
},
icon: deleteMutation.isPending ? <span className="loading loading-spinner loading-lg"></span> : <Trash />,
content: deleteMutation.isPending ? "Deleting" : "Delete",
type: 'error'
});
}
if (!validation?.valid)
{
contextOptions.push({
id: "fix_source",
action (ctx)
{
if (data.game)
fixMutation.mutate({ source: data.game.id.source, id: data.game.id.id });
},
icon: fixMutation.isPending ? <span className="loading loading-spinner loading-lg"></span> : <Hammer />,
content: "Try Fix Source",
type: "warning"
});
}
const { setOpen, dialog: settingsDialog } = useContextDialog("settings-context", { content: <ContextList disableCloseButton={deleteMutation.isPending} options={contextOptions} />, canClose: !deleteMutation.isPending });

16
src/mainview/components/game/Details.tsx
View file

@ -2,11 +2,13 @@ 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, CloudBackup, CloudDownload, CloudUpload, HardDrive, Store, TriangleAlert } from "lucide-react";
import { Clock, CloudBackup, CloudDownload, CloudUpload, Gamepad2, HardDrive, Store, TriangleAlert } from "lucide-react";
import prettyBytes from "pretty-bytes";
import { JSX } from "react";
import ActionButtons from "./ActionButtons";
import prettyMilliseconds from 'pretty-ms';
import { useQuery } from "@tanstack/react-query";
import { validateSourceQuery } from "@/mainview/scripts/queries/romm";
export function DetailElement (data: { icon: JSX.Element; tooltip?: string | null, children?: any | any[]; })
{
@ -18,6 +20,12 @@ export function DetailElement (data: { icon: JSX.Element; tooltip?: string | nul
);
}
const sourceIconMap: Record<string, any> = {
store: <Store />,
local: <HardDrive />,
romm: <Gamepad2 />
};
export default function Details (data: {
game?: FrontEndGameTypeDetailed,
source: string,
@ -32,6 +40,8 @@ export default function Details (data: {
forceFocus: true
});
const { data: validation } = useQuery(validateSourceQuery(data.source, data.id));
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");
@ -70,8 +80,8 @@ export default function Details (data: {
</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>
{data.game?.emulators?.some(e => e.integrations.some(i => i.capabilities?.includes('saves'))) && <DetailElement tooltip={"Save Backup"} icon={<CloudUpload />} />}
<DetailElement icon={
<Store />
<DetailElement tooltip={validation?.reason} icon={
validation ? validation.valid ? sourceIconMap[data.game?.source ?? ''] : <TriangleAlert className="text-error" /> : <span className="loading loading-spinner loading-lg"></span>
} >
{data.game?.source ?? data.game?.id.source}
{data.game?.local && <small className="text-base-content/60 font-semibold">local</small>}</DetailElement>

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

@ -23,6 +23,7 @@ import { GamesSection } from "@/mainview/components/store/GamesSection";
import Details from "@/mainview/components/game/Details";
import { AutoFocus } from "@/mainview/components/AutoFocus";
import SelectMenu from "@/mainview/components/SelectMenu";
import { stat } from "node:fs";
export const Route = createFileRoute("/game/$source/$id")({
loader: async ({ params, context }) =>
@ -104,6 +105,8 @@ function Stats (data: { game: FrontEndGameTypeDetailed | undefined; })
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) });
if (data.game.source)
stats.push({ label: "Source", content: `${data.game.source} - ${data.game.source_id}` });
const integrations = new Set<string>(data.game.emulators?.flatMap(e => e.integrations).flatMap(i => i.capabilities).filter(c => !!c));
stats.push({ label: "Integrations", content: Array.from(integrations) });
}

17
src/mainview/scripts/queries/romm.ts
View file

@ -1,6 +1,6 @@
import { DefaultRommStaleTime, GameListFilterType, RommLoginDataSchema } from "@/shared/constants";
import { rommApi, settingsApi } from "../clientApi";
import { mutationOptions, QueryFilters, queryOptions } from "@tanstack/react-query";
import { mutationOptions, QueryFilters, queryOptions, useMutation } from "@tanstack/react-query";
import z from "zod";
import { statsApiStatsGetOptions } from "@/clients/romm/@tanstack/react-query.gen";
@ -155,4 +155,19 @@ export const gameInvalidationQuery = (source: string, id: string): QueryFilters
if (query.queryKey.includes(source) && query.queryKey.includes(id)) return true;
return false;
},
});
export const validateSourceQuery = (source: string, id: string) => queryOptions({
queryKey: ["game", source, id, "validate"], queryFn: async () =>
{
const { data, error } = await rommApi.api.romm.game({ source })({ id }).validate.get();
return data;
}
});
export const fixSourceMutation = mutationOptions({
mutationKey: ['game', "fix_source"], mutationFn: async ({ source, id }: { source: string, id: string; }) =>
{
const { data, error } = await rommApi.api.romm.game({ source })({ id }).fix_source.post();
if (error) throw error;
return data;
}
});