fix player count issue on some games

itsOwen · Jan 8, 2025 · 597213b · 597213b
1 parent c3d2f7e
commit 597213b
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 111 deletions.
diff --git a/src/components/PlayerBadge.tsx b/src/components/PlayerBadge.tsx
@@ -35,6 +35,8 @@ export const PlayerBadge = ({ count, appId }: PlayerBadgeProps) => {
     return () => unsubscribe();
   }, []);
 
+  if (!settings.showLibraryCount) return null;
+
   const positionStyle = getPositionStyle(settings.badgePosition);
   const baseSize = 12;
 

diff --git a/src/components/PlayerCount.tsx b/src/components/PlayerCount.tsx
@@ -12,19 +12,16 @@ interface SteamPlayerResponse {
 }
 
 export const PlayerCount = () => {
-  const [settings, setSettings] = useState(loadSettings());
   const [appId, setAppId] = useState<string | undefined>(undefined);
   const [playerCount, setPlayerCount] = useState<string>("");
   const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [settings, setSettings] = useState(loadSettings());
   const mountedRef = useRef(true);
 
-  useEffect(() => {
-    const unsubscribe = subscribeToSettings(setSettings);
-    return () => unsubscribe();
-  }, []);
-
   useEffect(() => {
     mountedRef.current = true;
+
+    const unsubscribeSettings = subscribeToSettings(setSettings);
 
     async function loadAppId() {
       if (!mountedRef.current) return;
@@ -60,6 +57,7 @@ export const PlayerCount = () => {
     return () => {
       mountedRef.current = false;
       CACHE.unsubscribe("PlayerCount");
+      unsubscribeSettings();
       setIsVisible(false);
       setAppId(undefined);
       setPlayerCount("");

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -49,103 +49,107 @@ export const Settings = () => {
     saveSettings(newSettings);
   };
 
-  const handleStoreCountChange = (value: boolean) => {
-    const newSettings = {
-      ...settings,
-      showStoreCount: value
-    };
-    setSettings(newSettings);
-    saveSettings(newSettings);
-  };
-
-  const handleLibraryCountChange = (value: boolean) => {
-    const newSettings = {
-      ...settings,
-      showLibraryCount: value
-    };
-    setSettings(newSettings);
-    saveSettings(newSettings);
-  };
-
-  return window.SP_REACT.createElement(
-    PanelSection,
-    { title: "Badge Settings" },
-    [
-      window.SP_REACT.createElement(
-        PanelSectionRow,
-        { key: "position-row" },
+  return [
+    window.SP_REACT.createElement(
+      PanelSection,
+      { title: "Badge Settings", key: "badge-settings" },
+      [
         window.SP_REACT.createElement(
-          DropdownItem,
-          {
-            label: "Badge Position",
-            description: "Choose where the player count badge appears",
-            rgOptions: positionOptions,
-            selectedOption: settings.badgePosition,
-            onChange: handlePositionChange
-          }
-        )
-      ),
-      window.SP_REACT.createElement(
-        PanelSectionRow,
-        { key: "size-row" },
+          PanelSectionRow,
+          { key: "position-row" },
+          window.SP_REACT.createElement(
+            DropdownItem,
+            {
+              label: "Badge Position",
+              description: "Choose where the player count badge appears",
+              rgOptions: positionOptions,
+              selectedOption: settings.badgePosition,
+              onChange: handlePositionChange
+            }
+          )
+        ),
         window.SP_REACT.createElement(
-          SliderField,
-          {
-            label: "Badge Size",
-            description: "Adjust the size of the badge",
-            value: settings.badgeSize,
-            min: 0.7,
-            max: 1.5,
-            step: 0.1,
-            onChange: handleSizeChange,
-            notchLabels: [
-              { notchIndex: 0, label: "Small" },
-              { notchIndex: 4, label: "Default" },
-              { notchIndex: 8, label: "Large" }
-            ],
-            showValue: true
-          }
-        )
-      ),
-      window.SP_REACT.createElement(
-        PanelSectionRow,
-        { key: "rounded-corners-row" },
+          PanelSectionRow,
+          { key: "size-row" },
+          window.SP_REACT.createElement(
+            SliderField,
+            {
+              label: "Badge Size",
+              description: "Adjust the size of the badge",
+              value: settings.badgeSize,
+              min: 0.7,
+              max: 1.5,
+              step: 0.1,
+              onChange: handleSizeChange,
+              notchLabels: [
+                { notchIndex: 0, label: "Small" },
+                { notchIndex: 4, label: "Default" },
+                { notchIndex: 8, label: "Large" }
+              ],
+              showValue: true
+            }
+          )
+        ),
         window.SP_REACT.createElement(
-          ToggleField,
-          {
-            label: "Rounded Corners",
-            description: "Toggle between rounded or sharp corners",
-            checked: settings.roundedCorners,
-            onChange: handleRoundedCornersChange
-          }
+          PanelSectionRow,
+          { key: "rounded-corners-row" },
+          window.SP_REACT.createElement(
+            ToggleField,
+            {
+              label: "Rounded Corners",
+              description: "Toggle between rounded or sharp corners",
+              checked: settings.roundedCorners,
+              onChange: handleRoundedCornersChange
+            }
+          )
         )
-      ),
-      window.SP_REACT.createElement(
-        PanelSectionRow,
-        { key: "store-count-row" },
+      ]
+    ),
+    window.SP_REACT.createElement(
+      PanelSection,
+      { title: "Display Settings", key: "display-settings" },
+      [
         window.SP_REACT.createElement(
-          ToggleField,
-          {
-            label: "Show Store Count",
-            description: "Show player count on Steam store pages",
-            checked: settings.showStoreCount,
-            onChange: handleStoreCountChange
-          }
-        )
-      ),
-      window.SP_REACT.createElement(
-        PanelSectionRow,
-        { key: "library-count-row" },
+          PanelSectionRow,
+          { key: "show-library-count-row" },
+          window.SP_REACT.createElement(
+            ToggleField,
+            {
+              label: "Show Library Badge",
+              description: "Show player count badge in game library",
+              checked: settings.showLibraryCount,
+              onChange: (value) => {
+                const newSettings = {
+                  ...settings,
+                  showLibraryCount: value
+                };
+                setSettings(newSettings);
+                saveSettings(newSettings);
+              }
+            }
+          )
+        ),
         window.SP_REACT.createElement(
-          ToggleField,
-          {
-            label: "Show Library Count",
-            description: "Show player count in game library",
-            checked: settings.showLibraryCount,
-            onChange: handleLibraryCountChange
-          }
+          PanelSectionRow,
+          { key: "show-store-count-row" },
+          window.SP_REACT.createElement(
+            ToggleField,
+            {
+              label: "Show Store Count",
+              description: "Show player count text in Steam store",
+              checked: settings.showStoreCount,
+              onChange: (value) => {
+                const newSettings = {
+                  ...settings,
+                  showStoreCount: value
+                };
+                setSettings(newSettings);
+                saveSettings(newSettings);
+              }
+            }
+          )
         )
-      )
-    ]
-  );
+      ]
+    )
+  ];
 };
diff --git a/src/patches/LibraryPatch.ts b/src/patches/LibraryPatch.ts
@@ -7,7 +7,6 @@ import {
 import { routerHook, fetchNoCors } from '@decky/api';
 import { CACHE } from "../utils/Cache";
 import { PlayerBadge } from "../components/PlayerBadge";
-import { loadSettings, subscribeToSettings } from '../utils/Settings';
 
 interface SteamPlayerResponse {
   response: {
@@ -18,12 +17,6 @@ interface SteamPlayerResponse {
 
 const PlayerCountWrapper = ({ appId }: { appId: string }) => {
   const [playerCount, setPlayerCount] = window.SP_REACT.useState("Loading...");
-  const [settings, setSettings] = window.SP_REACT.useState(loadSettings());
-
-  window.SP_REACT.useEffect(() => {
-    const unsubscribe = subscribeToSettings(setSettings);
-    return () => unsubscribe();
-  }, []);
 
   window.SP_REACT.useEffect(() => {
     const fetchPlayerCount = async () => {
@@ -55,8 +48,6 @@ const PlayerCountWrapper = ({ appId }: { appId: string }) => {
     return () => clearInterval(interval);
   }, [appId]);
 
-  if (!settings.showLibraryCount) return null;
-
   return window.SP_REACT.createElement(PlayerBadge, { count: playerCount, appId });
 };
 

diff --git a/src/utils/Settings.ts b/src/utils/Settings.ts
@@ -4,16 +4,16 @@ export interface Settings {
   badgePosition: BadgePosition;
   badgeSize: number;
   roundedCorners: boolean;
-  showStoreCount: boolean;  // New setting for store page
-  showLibraryCount: boolean;  // New setting for library view
+  showLibraryCount: boolean;
+  showStoreCount: boolean;
 }
 
 export const DEFAULT_SETTINGS: Settings = {
   badgePosition: 'top-right',
   badgeSize: 1,
   roundedCorners: true,
-  showStoreCount: true,  // Default to showing counts
-  showLibraryCount: true
+  showLibraryCount: true,
+  showStoreCount: true
 };
 
 // Using a custom event for settings changes