feat: browser window for notification

src/renderer/src/declaration.d.ts

@@ -71,7 +71,12 @@ declare global {
       shop: GameShop
     ) => Promise<GameAchievement[]>;
     onAchievementUnlocked: (
-      cb: (objectId: string, shop: GameShop) => void
+      cb: (
+        objectId: string,
+        shop: GameShop,
+        displayName: string,
+        iconUrl: string
+      ) => void
     ) => () => Electron.IpcRenderer;
 
     /* Library */

src/renderer/src/main.tsx

@@ -28,6 +28,7 @@ import {
 import { store } from "./store";
 
 import resources from "@locales";
+import { Achievemnt } from "./pages/achievement/achievement";
 
 Sentry.init({});
 
@@ -65,6 +66,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             <Route path="/settings" Component={Settings} />
             <Route path="/profile/:userId" Component={Profile} />
           </Route>
+          <Route path="/achievement-notification" Component={Achievemnt} />
         </Routes>
       </HashRouter>
     </Provider>

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

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+
+export function Achievemnt() {
+  const [achievementInfo, setAchievementInfo] = useState<{
+    displayName: string;
+    icon: string;
+  } | null>(null);
+
+  const [audio, setAudio] = useState<string | null>(null);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onAchievementUnlocked(
+      (_object, _shop, displayName, icon) => {
+        console.log("Achievement unlocked", displayName, icon);
+        setAudio(
+          "https://us-tuna-sounds-files.voicemod.net/ade71f0d-a41b-4e3a-8097-9f1cc585745c-1646035604239.mp3"
+        );
+
+        setAchievementInfo({
+          displayName,
+          icon,
+        });
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (audio) {
+      const audioElement = new Audio(audio);
+      audioElement.volume = 1.0;
+      audioElement.play();
+      setAudio(null);
+    }
+  }, [audio]);
+
+  if (!achievementInfo) return <p>Nada</p>;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        gap: "8px",
+        alignItems: "center",
+      }}
+    >
+      <img
+        src={achievementInfo.icon}
+        alt={achievementInfo.displayName}
+        style={{ width: 60, height: 60 }}
+      />
+      <div>
+        <p>Achievement unlocked</p>
+        <p>{achievementInfo.displayName}</p>
+      </div>
+    </div>
+  );
+}