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

feat: Made design more responsive

Browse source 
fix: Made blurring server side to help with performance
fix: Fixed shortcut useEffect loop
This commit is contained in:
Simeon Radivoev 2026-02-26 00:28:14 +02:00
parent b4a89385d0
commit 9e4b2a02c1
Signed by: simeonradivoev
GPG key ID: 7611A451D2A5D37A
38 changed files with 583 additions and 329 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/mainview/components/GameList.tsx
View file

@ -1,4 +1,4 @@
import { useSuspenseQuery } from "@tanstack/react-query";
import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
import { GameMetaExtra, CardList } from "./CardList";
import { FrontEndId, GameListFilterType, RPC_URL } from "@shared/constants";
import { useNavigate } from "@tanstack/react-router";
@ -7,6 +7,7 @@ import { rommApi } from "../scripts/clientApi";
import { HardDrive } from "lucide-react";
import { JSX } from "react";
import { GameCardFocusHandler } from "./GameCard";
import { gameQuery } from "../scripts/queries";
export interface GameListParams
{
@ -28,15 +29,25 @@ export function GameList (data: GameListParams)
}).then(d => d.data)
});
const navigator = useNavigate();
const queryClient = useQueryClient();
const handleFocus = (id: FrontEndId) =>
const handleFocus = (id: FrontEndId, source: string | null, sourceId: number | null) =>
{
const game = games.data?.games.find((g) => g.id === id);
if (game)
{
data.setBackground?.(
`${RPC_URL(__HOST__)}${game.path_cover}`,
);
try
{
const screenshotUrl = new URL(`${RPC_URL(__HOST__)}${game.paths_screenshots[new Date().getMinutes() % game.paths_screenshots.length]}`);
const coverUrl = new URL(`${RPC_URL(__HOST__)}${game.path_cover}`);
const previewUrl = localStorage.getItem('background-blur') !== "false" ? coverUrl : screenshotUrl;
previewUrl.searchParams.delete('ts');
data.setBackground?.(previewUrl.href);
queryClient.prefetchQuery(gameQuery(source ?? id.source, sourceId ?? id.id));
} catch
{
}
}
};
@ -61,8 +72,13 @@ export function GameList (data: GameListParams)
const badges: JSX.Element[] = [];
if (g.id.source === 'local')
{
badges.push(<HardDrive className="size-8 m-1" />);
badges.push(<HardDrive className="sm:size-4 md:size-8 m-1" />);
}
const previewUrl = new URL(`${RPC_URL(__HOST__)}${g.path_cover}`);
previewUrl.searchParams.delete('ts');
previewUrl.searchParams.set('width', "640");
const platformUrl = new URL(`${RPC_URL(__HOST__)}${g.path_platform_cover}`);
platformUrl.searchParams.set('width', "64");
return {
id: `game-${g.id.source}-${g.id.id}`,
@ -70,14 +86,14 @@ export function GameList (data: GameListParams)
title: g.name ?? "",
subtitle: (
<div className="flex gap-1 items-center">
{!!g.path_platform_cover && <img className="sm:hidden md:inline size-4" src={`${RPC_URL(__HOST__)}${g.path_platform_cover}`} />}
{!!g.path_platform_cover && <img className="sm:hidden md:inline size-4" src={platformUrl.href} />}
<p className="opacity-80">{g.platform_display_name}</p>
</div>
),
previewUrl: `${RPC_URL(__HOST__)}${g.path_cover}`,
previewUrl: previewUrl.href,
badges: badges,
onSelect: () => data.onGameSelect ? data.onGameSelect(g.id) : handleDefaultSelect(g.id, g.source, g.source_id),
onFocus: () => handleFocus(g.id)
onFocus: () => handleFocus(g.id, g.source, g.source_id)
} satisfies GameMetaExtra;
},
) ?? []}