feat: showing achievements queue

src/main/services/achievements/merge-achievements.ts

@@ -66,6 +66,9 @@ export const mergeAchievements = async (
 
   if (newAchievements.length && publishNotification) {
     const achievementsInfo = newAchievements
+      .sort((a, b) => {
+        return a.unlockTime - b.unlockTime;
+      })
       .map((achievement) => {
         return JSON.parse(localGameAchievement?.achievements || "[]").find(
           (steamAchievement) => {

src/renderer/src/pages/achievement/achievement.tsx

@@ -1,15 +1,18 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import achievementSound from "@renderer/assets/audio/achievement.wav";
 import { useTranslation } from "react-i18next";
 import { vars } from "@renderer/theme.css";
 
+interface AchievementInfo {
+  displayName: string;
+  iconUrl: string;
+}
+
 export function Achievement() {
   const { t } = useTranslation("achievement");
 
-  const [achievementInfo, setAchievementInfo] = useState<{
+  const [achievements, setAchievements] = useState<AchievementInfo[]>([]);
-    displayName: string;
+  const achievementAnimation = useRef(-1);
-    icon: string;
-  } | null>(null);
 
   const audio = useMemo(() => {
     const audio = new Audio(achievementSound);
@@ -24,11 +27,7 @@ export function Achievement() {
         if (!achievements) return;
 
         if (achievements.length) {
-          const achievement = achievements[0];
+          setAchievements((ach) => ach.concat(achievements));
-          setAchievementInfo({
-            displayName: achievement.displayName,
-            icon: achievement.iconUrl,
-          });
         }
 
         audio.play();
@@ -40,7 +39,26 @@ export function Achievement() {
     };
   }, [audio]);
 
-  if (!achievementInfo) return null;
+  const hasAchievementsPending = achievements.length > 0;
+
+  useEffect(() => {
+    if (hasAchievementsPending) {
+      let zero = performance.now();
+      achievementAnimation.current = requestAnimationFrame(
+        function animateLock(time) {
+          if (time - zero > 3000) {
+            zero = performance.now();
+            setAchievements((ach) => ach.slice(1));
+          }
+          achievementAnimation.current = requestAnimationFrame(animateLock);
+        }
+      );
+    } else {
+      cancelAnimationFrame(achievementAnimation.current);
+    }
+  }, [hasAchievementsPending]);
+
+  if (!hasAchievementsPending) return null;
 
   return (
     <div
@@ -53,13 +71,13 @@ export function Achievement() {
       }}
     >
       <img
-        src={achievementInfo.icon}
+        src={achievements[0].iconUrl}
-        alt={achievementInfo.displayName}
+        alt={achievements[0].displayName}
         style={{ width: 60, height: 60 }}
       />
       <div>
         <p>{t("achievement_unlocked")}</p>
-        <p>{achievementInfo.displayName}</p>
+        <p>{achievements[0].displayName}</p>
       </div>
     </div>
   );