diff --git a/src/components/PlayerBadge.tsx b/src/components/PlayerBadge.tsx index 21c84ae..111b299 100644 --- 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 index cdb2106..e3ef374 100644 --- 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(undefined); const [playerCount, setPlayerCount] = useState(""); const [isVisible, setIsVisible] = useState(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 index 88cae21..5a4b94f 100644 --- 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); + } + } + ) ) - ) - ] - ); + ] + ) + ]; }; \ No newline at end of file diff --git a/src/patches/LibraryPatch.ts b/src/patches/LibraryPatch.ts index 8b083bf..a5ae195 100644 --- 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 index 43ee2f1..5b97791 100644 --- 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