feat: game session start time stamp

src/main/services/process-watcher.ts

@@ -5,6 +5,7 @@ import { gameRepository } from "@main/repository";
 import { getProcesses } from "@main/helpers";
 import { WindowManager } from "./window-manager";
 import { createGame, updateGamePlaytime } from "./library-sync";
+import { RunningGameEvent } from "@types";
 
 const gamesPlaytime = new Map<
   number,
@@ -96,10 +97,13 @@ export const watchProcesses = async () => {
   }
 
   if (WindowManager.mainWindow) {
-    const gamesRunningIds = Array.from(gamesPlaytime.keys());
+    const runningGames = Array.from(gamesPlaytime.entries()).map((entry) => {
+      return { id: entry[0], sessionStartTimestamp: entry[1].firstTick };
+    });
+
     WindowManager.mainWindow.webContents.send(
       "on-games-running",
-      gamesRunningIds
+      runningGames as RunningGameEvent
     );
   }
 };

src/preload/index.ts

@@ -8,6 +8,7 @@ import type {
   UserPreferences,
   AppUpdaterEvent,
   StartGameDownloadPayload,
+  RunningGameEvent,
 } from "@types";
 
 contextBridge.exposeInMainWorld("electron", {
@@ -84,9 +85,11 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.invoke("deleteGameFolder", gameId),
   getGameByObjectID: (objectID: string) =>
     ipcRenderer.invoke("getGameByObjectID", objectID),
-  onGamesRunning: (cb: (gamesId: number[]) => void) => {
-    const listener = (_event: Electron.IpcRendererEvent, gamesId: number[]) =>
-      cb(gamesId);
+  onRunningGames: (cb: (runningGames: RunningGameEvent) => void) => {
+    const listener = (
+      _event: Electron.IpcRendererEvent,
+      runningGames: RunningGameEvent
+    ) => cb(runningGames);
     ipcRenderer.on("on-games-running", listener);
     return () => ipcRenderer.removeListener("on-games-running", listener);
   },

src/renderer/src/app.tsx

@@ -97,16 +97,18 @@ export function App() {
   }, [dispatch, fetchUserDetails]);
 
   useEffect(() => {
-    const unsubscribe = window.electron.onGamesRunning((gamesIds) => {
-      if (gamesIds.length) {
-        const lastGame = gamesIds.at(-1);
-        const libraryGame = library.find((library) => library.id == lastGame);
+    const unsubscribe = window.electron.onRunningGames((runningGames) => {
+      if (runningGames.length) {
+        const lastGame = runningGames[runningGames.length - 1];
+        const libraryGame = library.find(
+          (library) => library.id === lastGame.id
+        );
 
         if (libraryGame) {
           dispatch(
             setRunningGame({
               ...libraryGame,
-              sessionStartTimestamp: new Date().getTime(),
+              sessionStartTimestamp: lastGame.sessionStartTimestamp,
             })
           );
           return;

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

@@ -109,20 +109,19 @@ export function GameDetailsContextProvider({
   }, [objectID, gameTitle, dispatch]);
 
   useEffect(() => {
-    const listeners = [
-      window.electron.onGamesRunning((gamesIds) => {
-        const updatedIsGameRunning = !!game?.id && gamesIds.includes(game.id);
+    const unsubscribe = window.electron.onRunningGames((gamesIds) => {
+      const updatedIsGameRunning =
+        !!game?.id &&
+        !!gamesIds.find((runningGame) => runningGame.id == game.id);
 
-        if (isGameRunning != updatedIsGameRunning) {
-          updateGame();
-        }
-
-        setisGameRunning(updatedIsGameRunning);
-      }),
-    ];
+      if (isGameRunning != updatedIsGameRunning) {
+        updateGame();
+      }
 
+      setisGameRunning(updatedIsGameRunning);
+    });
     return () => {
-      listeners.forEach((unsubscribe) => unsubscribe());
+      unsubscribe();
     };
   }, [game?.id, isGameRunning, updateGame]);
 

src/renderer/src/declaration.d.ts

@@ -14,6 +14,7 @@ import type {
   RealDebridUser,
   DownloadSource,
   UserProfile,
+  RunningGameEvent,
 } from "@types";
 import type { DiskSpace } from "check-disk-space";
 
@@ -71,8 +72,8 @@ declare global {
     removeGame: (gameId: number) => Promise<void>;
     deleteGameFolder: (gameId: number) => Promise<unknown>;
     getGameByObjectID: (objectID: string) => Promise<Game | null>;
-    onGamesRunning: (
-      cb: (gamesId: number[]) => void
+    onRunningGames: (
+      cb: (runningGames: RunningGameEvent) => void
     ) => () => Electron.IpcRenderer;
     onLibraryBatchComplete: (cb: () => void) => () => Electron.IpcRenderer;
 

src/renderer/src/helpers.ts

@@ -43,12 +43,5 @@ export const buildGameDetailsPath = (
   return `/game/${game.shop}/${game.objectID}?${searchParams.toString()}`;
 };
 
-export const darkenColor = (
-  color: string,
-  amount: number,
-  alpha: number = 1
-) => {
-  const newColor = new Color(color).darken(amount).alpha(alpha).toString();
-  console.log(color, newColor);
-  return newColor;
-};
+export const darkenColor = (color: string, amount: number, alpha: number = 1) =>
+  new Color(color).darken(amount).alpha(alpha).toString();

src/renderer/src/hooks/use-user-details.ts

@@ -47,7 +47,10 @@ export function useUserDetails() {
         const profileBackground = `#151515e6`;
         dispatch(setProfileBackground(profileBackground));
 
-        window.localStorage.setItem("userDetails", JSON.stringify(userDetails));
+        window.localStorage.setItem(
+          "userDetails",
+          JSON.stringify({ ...userDetails, profileBackground })
+        );
       }
     },
     [dispatch]

src/renderer/src/pages/user/user-content.tsx

@@ -159,7 +159,7 @@ export function UserContent({
                 {t("playing_for", {
                   amount: formatDistance(
                     runningGame.sessionStartTimestamp,
-                    new Date()
+                    performance.now()
                   ),
                 })}
               </small>

src/types/index.ts

@@ -127,7 +127,13 @@ export interface Game {
 
 export type LibraryGame = Omit<Game, "repacks">;
 
+export type RunningGameEvent = {
+  id: number;
+  sessionStartTimestamp: number;
+}[];
+
 export interface RunningGame {
+  id: number;
   title: string;
   iconUrl: string;
   objectID: string;