diff --git a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx index 8f437a1d..d35a4d30 100644 --- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx +++ b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx @@ -3,7 +3,7 @@ import * as styles from "./profile-content.css"; import HydraIcon from "@renderer/assets/icons/hydra.svg?react"; import { useFormat } from "@renderer/hooks"; import { useNavigate } from "react-router-dom"; -import { useCallback, useContext } from "react"; +import { useCallback, useContext, useEffect, useState } from "react"; import { buildGameAchievementPath, buildGameDetailsPath, @@ -26,19 +26,35 @@ export function UserLibraryGameCard({ game }: UserLibraryGameCardProps) { const { numberFormatter } = useFormat(); const navigate = useNavigate(); - // const handleCloseClick = useCallback(() => { - // setIsClosing(true); - // const zero = performance.now(); + const [mediaIndex, setMediaIndex] = useState(0); - // requestAnimationFrame(function animateClosing(time) { - // if (time - zero <= 400) { - // requestAnimationFrame(animateClosing); - // } else { - // onClose(); - // setIsClosing(false); - // } - // }); - // }, [onClose]); + const statsItemCount = + Number(Boolean(game.achievementsPointsEarnedSum)) + + Number(Boolean(game.unlockedAchievementCount)); + + console.log(game.title, statsItemCount); + + useEffect(() => { + if (statsItemCount <= 1) return; + + let zero = performance.now(); + const animation = requestAnimationFrame(function animateClosing(time) { + if (time - zero <= 4000) { + requestAnimationFrame(animateClosing); + } else { + setMediaIndex((index) => { + if (index === statsItemCount - 1) return 0; + return index + 1; + }); + zero = performance.now(); + requestAnimationFrame(animateClosing); + } + }); + + return () => { + cancelAnimationFrame(animation); + }; + }, [setMediaIndex, statsItemCount]); const buildUserGameDetailsPath = useCallback( (game: UserGame) => { @@ -129,59 +145,76 @@ export function UserLibraryGameCard({ game }: UserLibraryGameCardProps) { {userProfile?.hasActiveSubscription && game.achievementCount > 0 && (
+
+
+
+ + + {game.unlockedAchievementCount} / {game.achievementCount} + +
+ + + {formatDownloadProgress( + game.unlockedAchievementCount / game.achievementCount + )} + +
+ + +
+ {game.achievementsPointsEarnedSum > 0 && (
{numberFormatter.format(game.achievementsPointsEarnedSum)}
)} -
-
- - - {game.unlockedAchievementCount} / {game.achievementCount} - -
- - - {formatDownloadProgress( - game.unlockedAchievementCount / game.achievementCount - )} - -
- -
)}