From 4a84c5d1261ffa5a7b5cd9dbe950bfb7c3638649 Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Tue, 21 Jan 2025 20:54:29 -0500
Subject: feat: got working dropdown listing installed games

---
 src/index.tsx | 154 ++++++++++++++--------------------------------------------
 1 file changed, 36 insertions(+), 118 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index 15fe792..e8db057 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,131 +1,49 @@
-import {
-  ButtonItem,
-  PanelSection,
-  PanelSectionRow,
-  Navigation,
-  staticClasses,
-  Dropdown,
-  DropdownOption
-} from "@decky/ui";
-import {
-  addEventListener,
-  removeEventListener,
-  callable,
-  definePlugin,
-  toaster,
-  // routerHook
-} from "@decky/api"
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { PanelSection, PanelSectionRow, Dropdown, DropdownOption } from "@decky/ui";
+import { callable, definePlugin } from "@decky/api";
 import { FaShip } from "react-icons/fa";
 
-// import logo from "../assets/logo.png";
-
-// This function calls the python function "add", which takes in two numbers and returns their sum (as a number)
-// Note the type annotations:
-//  the first one: [first: number, second: number] is for the arguments
-//  the second one: number is for the return value
-const add = callable<[first: number, second: number], number>("add");
-
-// This function calls the python function "start_timer", which takes in no arguments and returns nothing.
-// It starts a (python) timer which eventually emits the event 'timer_event'
-const startTimer = callable<[], void>("start_timer");
-
-const dropdownOptions: DropdownOption[] = [
-  { label: "1", data: 1 },
-  { label: "2", data: 2 },
-  { label: "3", data: 3 },
-];
+const fetchInstalledGames = callable<[], string>("get_installed_games");
 
 function Content() {
-  const [result, setResult] = useState<number | undefined>();
-  const [selectedOption, setSelectedOption] = useState<number | undefined>();
+  const [games, setGames] = useState<DropdownOption[]>([]);
+  const [selectedGame, setSelectedGame] = useState<DropdownOption | null>(null);
+
+  useEffect(() => {
+    const loadGames = async () => {
+      const result = await fetchInstalledGames();
+      const gameList = JSON.parse(result) as { appid: string; name: string }[];
+      setGames(gameList.map(game => ({ data: game.appid, label: game.name })));
+    };
 
-  const onClick = async () => {
-    const result = await add(Math.random(), Math.random());
-    setResult(result);
-  };
+    loadGames();
+  }, []);
 
   return (
-    <PanelSection title="Panel Section">
-      <PanelSectionRow>
-        <ButtonItem
-          layout="below"
-          onClick={onClick}
-        >
-          {result ?? "Add two numbers via Python"}
-        </ButtonItem>
-      </PanelSectionRow>
-      <PanelSectionRow>
-        <ButtonItem
-          layout="below"
-          onClick={() => startTimer()}
-        >
-          {"Start Python timer"}
-        </ButtonItem>
-      </PanelSectionRow>
+    <PanelSection title="Installed Games">
       <PanelSectionRow>
         <Dropdown
-          rgOptions={dropdownOptions}
-          selectedOption={selectedOption}
-          onChange={(option) => setSelectedOption(option.data)}
+          rgOptions={games}
+          selectedOption={selectedGame?.data || null}
+          onChange={(option) => setSelectedGame(option)}
+          strDefaultLabel="Select a game" // Placeholder equivalent
         />
       </PanelSectionRow>
-
-      {/* <PanelSectionRow>
-        <div style={{ display: "flex", justifyContent: "center" }}>
-          <img src={logo} />
-        </div>
-      </PanelSectionRow> */}
-
-      {/*<PanelSectionRow>
-        <ButtonItem
-          layout="below"
-          onClick={() => {
-            Navigation.Navigate("/decky-plugin-test");
-            Navigation.CloseSideMenus();
-          }}
-        >
-          Router
-        </ButtonItem>
-      </PanelSectionRow>*/}
+      {selectedGame && (
+        <PanelSectionRow>
+          <div>You selected: {selectedGame.label}</div>
+        </PanelSectionRow>
+      )}
     </PanelSection>
   );
-};
-
-export default definePlugin(() => {
-  console.log("Template plugin initializing, this is called once on frontend startup")
-
-  // serverApi.routerHook.addRoute("/decky-plugin-test", DeckyPluginRouterTest, {
-  //   exact: true,
-  // });
-
-  // Add an event listener to the "timer_event" event from the backend
-  const listener = addEventListener<[
-    test1: string,
-    test2: boolean,
-    test3: number
-  ]>("timer_event", (test1, test2, test3) => {
-    console.log("Template got timer_event with:", test1, test2, test3)
-    toaster.toast({
-      title: "template got timer_event",
-      body: `${test1}, ${test2}, ${test3}`
-    });
-  });
-
-  return {
-    // The name shown in various decky menus
-    name: "Test Plugin",
-    // The element displayed at the top of your plugin's menu
-    titleView: <div className={staticClasses.Title}>Decky Example Plugin</div>,
-    // The content of your plugin's menu
-    content: <Content />,
-    // The icon displayed in the plugin list
-    icon: <FaShip />,
-    // The function triggered when your plugin unloads
-    onDismount() {
-      console.log("Unloading")
-      removeEventListener("timer_event", listener);
-      // serverApi.routerHook.removeRoute("/decky-plugin-test");
-    },
-  };
-});
+}
+
+export default definePlugin(() => ({
+  name: "Game Selector Plugin",
+  titleView: <div>Game Selector Plugin</div>,
+  content: <Content />,
+  icon: <FaShip />,
+  onDismount() {
+    console.log("Plugin unmounted");
+  },
+}));
\ No newline at end of file
-- 
cgit v1.2.3