feat: grayscale and update game details context on achievement event

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

@@ -1,6 +1,7 @@
 import { gameAchievementRepository, gameRepository } from "@main/repository";
 import { publishNewAchievementNotification } from "../notifications";
 import type { GameShop, UnlockedAchievement } from "@types";
+import { WindowManager } from "../window-manager";
 
 export const mergeAchievements = async (
   objectId: string,
@@ -28,6 +29,14 @@ export const mergeAchievements = async (
     });
   });
 
+  if (!newAchievements.length) return;
+
+  WindowManager.mainWindow?.webContents.send(
+    "on-achievement-unlocked",
+    objectId,
+    shop
+  );
+
   for (const achievement of newAchievements) {
     const completeAchievement = JSON.parse(
       localGameAchievement?.achievements || "[]"

src/preload/index.ts

@@ -51,6 +51,16 @@ contextBridge.exposeInMainWorld("electron", {
   getTrendingGames: () => ipcRenderer.invoke("getTrendingGames"),
   getGameAchievements: (objectId: string, shop: GameShop) =>
     ipcRenderer.invoke("getGameAchievements", objectId, shop),
+  onAchievementUnlocked: (cb: (objectId: string, shop: GameShop) => void) => {
+    const listener = (
+      _event: Electron.IpcRendererEvent,
+      objectId: string,
+      shop: GameShop
+    ) => cb(objectId, shop);
+    ipcRenderer.on("on-achievement-unlocked", listener);
+    return () =>
+      ipcRenderer.removeListener("on-achievement-unlocked", listener);
+  },
 
   /* User preferences */
   getUserPreferences: () => ipcRenderer.invoke("getUserPreferences"),

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

@@ -138,6 +138,7 @@ export function GameDetailsContextProvider({
     setGame(null);
     setIsLoading(true);
     setisGameRunning(false);
+    setAchievements([]);
     dispatch(setHeaderTitle(gameTitle));
   }, [objectID, gameTitle, dispatch]);
 
@@ -158,6 +159,22 @@ export function GameDetailsContextProvider({
     };
   }, [game?.id, isGameRunning, updateGame]);
 
+  useEffect(() => {
+    const unsubscribe = window.electron.onAchievementUnlocked(
+      (objectId, shop) => {
+        if (objectID !== objectId || shop !== shop) return;
+
+        window.electron
+          .getGameAchievements(objectID!, shop as GameShop)
+          .then(setAchievements);
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [objectID, shop]);
+
   const getDownloadsPath = async () => {
     if (userPreferences?.downloadsPath) return userPreferences.downloadsPath;
     return window.electron.getDefaultDownloadsPath();

src/renderer/src/declaration.d.ts

@@ -70,6 +70,9 @@ declare global {
       objectId: string,
       shop: GameShop
     ) => Promise<GameAchievement[]>;
+    onAchievementUnlocked: (
+      cb: (objectId: string, shop: GameShop) => void
+    ) => () => Electron.IpcRenderer;
 
     /* Library */
     addGameToLibrary: (

src/renderer/src/pages/game-details/sidebar/sidebar.tsx

@@ -48,7 +48,7 @@ export function Sidebar() {
         isLoading={howLongToBeat.isLoading}
       /> */}
 
-      {achievements.length && (
+      {achievements.length > 0 && (
         <div
           style={{
             display: "flex",
@@ -71,11 +71,14 @@ export function Sidebar() {
               <img
                 style={{
                   height: "72px",
+                  width: "72px",
+                  filter: achievement.unlocked ? "none" : "grayscale(100%)",
                 }}
                 src={
                   achievement.unlocked ? achievement.icon : achievement.icongray
                 }
                 alt={achievement.displayName}
+                loading="lazy"
               />
               <div>
                 <p>{achievement.displayName}</p>