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

feat First implementation of plugins system

Browse source 
feat: Added PCSX2 integration
feat: Revamped UI a bit made it look better on light mode
This commit is contained in:
Simeon Radivoev 2026-03-25 21:51:10 +02:00
parent d85268fad7
commit a78e75335f
Signed by: simeonradivoev
GPG key ID: 7611A451D2A5D37A
95 changed files with 2639 additions and 1259 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/mainview/components/store/EmulatorsSection.tsx
View file

@ -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 }) =>
{

3
src/mainview/components/store/GamesSection.tsx
View file

@ -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";

2
src/mainview/components/store/MissingEmulatorsSection.tsx
View file

@ -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 ───────────────────────────────────────────

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

@ -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>