feat: animation

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(() => {
+  const [mediaIndex, setMediaIndex] = useState(0);
-  //   setIsClosing(true);
-  //   const zero = performance.now();
 
-  //   requestAnimationFrame(function animateClosing(time) {
+  const statsItemCount =
-  //     if (time - zero <= 400) {
+    Number(Boolean(game.achievementsPointsEarnedSum)) +
-  //       requestAnimationFrame(animateClosing);
+    Number(Boolean(game.unlockedAchievementCount));
-  //     } else {
+
-  //       onClose();
+  console.log(game.title, statsItemCount);
-  //       setIsClosing(false);
+
-  //     }
+  useEffect(() => {
-  //   });
+    if (statsItemCount <= 1) return;
-  // }, [onClose]);
+
+    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,26 +145,22 @@ export function UserLibraryGameCard({ game }: UserLibraryGameCardProps) {
           {userProfile?.hasActiveSubscription && game.achievementCount > 0 && (
             <div
               style={{
-                color: "#fff",
+                width: "100%",
+                display: "flex",
+                overflow: "hidden",
+              }}
+            >
+              <div
+                style={{
                   width: "100%",
                   display: "flex",
                   flexDirection: "column",
+                  transition: "translate 0.5s ease-in-out",
+                  flexShrink: "0",
+                  flexGrow: "0",
+                  translate: `${-100 * mediaIndex}%`,
                 }}
               >
-              {game.achievementsPointsEarnedSum > 0 && (
-                <div
-                  style={{
-                    display: "flex",
-                    justifyContent: "start",
-                    gap: 8,
-                    marginBottom: 4,
-                    color: vars.color.muted,
-                  }}
-                >
-                  <HydraIcon width={16} height={16} />
-                  {numberFormatter.format(game.achievementsPointsEarnedSum)}
-                </div>
-              )}
                 <div
                   style={{
                     display: "flex",
@@ -183,6 +195,27 @@ export function UserLibraryGameCard({ game }: UserLibraryGameCardProps) {
                   className={styles.achievementsProgressBar}
                 />
               </div>
+
+              {game.achievementsPointsEarnedSum > 0 && (
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "start",
+                    gap: 8,
+                    width: "100%",
+                    translate: `${-100 * mediaIndex}%`,
+                    transition: "translate 0.5s ease-in-out",
+                    alignItems: "center",
+                    color: vars.color.muted,
+                    flexShrink: "0",
+                    flexGrow: "0",
+                  }}
+                >
+                  <HydraIcon width={16} height={16} />
+                  {numberFormatter.format(game.achievementsPointsEarnedSum)}
+                </div>
+              )}
+            </div>
           )}
         </div>