Feat: Adding current card display (#43)

* Fixed bug where current card wouldn't clear
* Added current card display to library patch

lib/src/MicoSDeck.ts

@@ -131,7 +131,7 @@ export class MicroSDeck {
 	}
 
 	async fetchCurrent() {
-		this.currentCardAndGames = await fetchCurrentCardAndGames(this.fetchProps) || this.currentCardAndGames;
+		this.currentCardAndGames = await fetchCurrentCardAndGames(this.fetchProps);
 	}
 	async fetchCardsAndGames() {
 		this.cardsAndGames = await fetchCardsAndGames(this.fetchProps) || this.cardsAndGames || [];

lib/src/components/MicroSDeckContext.tsx

@@ -3,7 +3,7 @@ import { MicroSDeck } from "../MicoSDeck.js";
 import { CardAndGames, CardsAndGames } from "../types.js";
 
 const MicroSDeckContext = createContext<MicroSDeckContext>(null as any);
-export const useMicroSDeckContext = () => useContext(MicroSDeckContext);
+export const useMicroSDeckContext = () => useContext(MicroSDeckContext) || {};
 
 interface ProviderProps {
 	microSDeck: MicroSDeck

src/components/LibraryModal.tsx

@@ -2,18 +2,19 @@ import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import { FaSdCard } from 'react-icons/fa';
 import { Logger } from '../Logging';
 import { API_URL, UNNAMED_CARD_NAME } from '../const';
-import { useCardsForGame } from "../../lib/src"
+import { useCardsForGame, useMicroSDeckContext } from "../../lib/src"
 import { findModule } from "@decky/ui"
 
 const logger = Logger.Child({ module: "patching" });
 
 export default function LibraryModal({ appId: gameId }: { appId: string }): ReactElement {
 	const { cards } = useCardsForGame({ url: API_URL, logger: Logger, gameId });
+	const { currentCardAndGames } = useMicroSDeckContext();
+	const [ currentCard ] = (currentCardAndGames || [undefined]);
 
 	var ref = useRef();
 
-	const bottomMargin = 8;
-	const height = 20;
+	const bottomMargin = 4;
 	const [top, setTop] = useState<number>(210);
 
 	useEffect(() => {
@@ -71,18 +72,27 @@ export default function LibraryModal({ appId: gameId }: { appId: string }): Reac
 		return (<></>);
 	}
 
+
 	return (
 		<div
 			//@ts-ignore
 			ref={ref}
 			className="microsdeck-app-modal"
-			style={{ padding: "0.4em", borderRadius: "6px", backgroundColor: "#0c131b", position: 'absolute', height, top, left: '20px' }}
+			style={{ position: 'absolute', height: 30, top, left: '20px', display: "flex", flexDirection: "row", gap: "8px", flexWrap: "nowrap", justifyContent: "flex-start"}}
 		>
+			{cards.map(card => (<CardLabel cardName={card.name || UNNAMED_CARD_NAME} isCurrent={card.uid == currentCard?.uid}/>))}
+		</div>
+	);
+}
+
+function CardLabel({ cardName, isCurrent }: { cardName: string, isCurrent: boolean }): ReactElement {
+	return (
+		<div style={{ padding: "0.4em", borderRadius: "6px", backgroundColor: isCurrent ? "#51bd5c" : "#0c131b"}}>
 			<div style={{ float: "left" }}>
 				<FaSdCard size={18} />
 			</div>
 			<div style={{ marginLeft: "1.4rem", lineHeight: "18px", fontSize: 18, fontWeight: "bold" }} className="tab-label">
-				{cards.map(v => v.name || UNNAMED_CARD_NAME).join(", ")}
+				{cardName}
 			</div>
 		</div>
 	)

src/index.tsx

@@ -125,7 +125,7 @@ export default definePlugin(() => {
 
 	Logger.Log("Started MicroSDeck");
 
-	const patch = PatchAppScreen();
+	const patch = PatchAppScreen(window.MicroSDeck);
 
 	routerHook.addRoute(DOCUMENTATION_PATH, () => (
 		<MicroSDeckContextProvider microSDeck={window.MicroSDeck || (() => {throw "MicroSDeck not initialized";})()}>

src/patch/PatchAppScreen.tsx

@@ -8,8 +8,9 @@ import { ReactElement } from 'react'
 import { routerHook } from '@decky/api';
 import LibraryModal from '../components/LibraryModal';
 import { Logger } from '../Logging';
+import { MicroSDeck, MicroSDeckContextProvider } from '../../lib/src';
 
-function PatchLibraryApp() {
+function PatchLibraryApp(microSDeck: MicroSDeck) {
 
 	const path = '/library/app/:appid';
 	Logger.Log("Patching {path}", { path });
@@ -55,7 +56,9 @@ function PatchLibraryApp() {
 					container.props.children.splice(
 						1,
 						0,
-						<LibraryModal appId={appId}/>
+						<MicroSDeckContextProvider microSDeck={microSDeck}>
+							<LibraryModal appId={appId}/>
+						</MicroSDeckContextProvider>,
 					)
 
 					return element