feat: update achievement audio and refactors

src/renderer/src/context/game-details/game-details.context.tsx

@@ -179,6 +179,8 @@ export function GameDetailsContextProvider({
   }, [game?.id, isGameRunning, updateGame]);
 
   useEffect(() => {
+    window.electron.updateGameUnlockedAchievements(objectID!).catch(() => {});
+
     const unsubscribe = window.electron.onAchievementUnlocked(
       (objectId, shop) => {
         if (objectID !== objectId || shop !== shop) return;

src/renderer/src/declaration.d.ts

@@ -70,12 +70,12 @@ declare global {
       objectId: string,
       shop: GameShop
     ) => Promise<GameAchievement[]>;
+    updateGameUnlockedAchievements: (objectId: string) => Promise<void>;
     onAchievementUnlocked: (
       cb: (
         objectId: string,
         shop: GameShop,
-        displayName: string,
-        iconUrl: string
+        achievements?: { displayName: string; iconUrl: string }[]
       ) => void
     ) => () => Electron.IpcRenderer;
 

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

@@ -1,27 +1,34 @@
 import { useEffect, useMemo, useState } from "react";
+import achievementSound from "@renderer/assets/audio/achievement.wav";
+import { useTranslation } from "react-i18next";
 
 export function Achievemnt() {
+  const { t } = useTranslation("achievement");
+
   const [achievementInfo, setAchievementInfo] = useState<{
     displayName: string;
     icon: string;
   } | null>(null);
 
   const audio = useMemo(() => {
-    const audio = new Audio(
-      "https://cms-public-artifacts.artlist.io/content/sfx/aac/94201_690187_Classics_-_Achievement_Unlocked_-_MASTERED_-_2496.aac"
-    );
-
+    const audio = new Audio(achievementSound);
+    audio.volume = 0.2;
     audio.preload = "auto";
     return audio;
   }, []);
 
   useEffect(() => {
     const unsubscribe = window.electron.onAchievementUnlocked(
-      (_object, _shop, displayName, icon) => {
-        setAchievementInfo({
-          displayName,
-          icon,
-        });
+      (_object, _shop, achievements) => {
+        if (!achievements) return;
+
+        if (achievements.length) {
+          const achievement = achievements[0];
+          setAchievementInfo({
+            displayName: achievement.displayName,
+            icon: achievement.iconUrl,
+          });
+        }
 
         audio.play();
       }
@@ -49,7 +56,7 @@ export function Achievemnt() {
         style={{ width: 60, height: 60 }}
       />
       <div>
-        <p>Achievement unlocked</p>
+        <p>{t("achievement_unlocked")}</p>
         <p>{achievementInfo.displayName}</p>
       </div>
     </div>