diff --git a/src/renderer/src/helpers.ts b/src/renderer/src/helpers.ts index 2eb83df6..d4563330 100644 --- a/src/renderer/src/helpers.ts +++ b/src/renderer/src/helpers.ts @@ -36,7 +36,7 @@ export const buildGameDetailsPath = ( export const buildGameAchievementPath = ( game: { shop: GameShop; objectId: string; title: string }, - user?: { userId: string; displayName: string } + user?: { userId: string; displayName: string; profileImageUrl: string | null } ) => { const searchParams = new URLSearchParams({ title: game.title, @@ -44,6 +44,7 @@ export const buildGameAchievementPath = ( objectId: game.objectId, userId: user?.userId || "", displayName: user?.displayName || "", + profileImageUrl: user?.profileImageUrl || "", }); return `/achievements/?${searchParams.toString()}`; diff --git a/src/renderer/src/pages/achievement/achievements-content.tsx b/src/renderer/src/pages/achievement/achievements-content.tsx index 5e0af51f..1a3fbd14 100644 --- a/src/renderer/src/pages/achievement/achievements-content.tsx +++ b/src/renderer/src/pages/achievement/achievements-content.tsx @@ -1,11 +1,11 @@ import { setHeaderTitle } from "@renderer/features"; -import { useAppDispatch, useDate } from "@renderer/hooks"; +import { useAppDispatch, useDate, useUserDetails } from "@renderer/hooks"; import { steamUrlBuilder } from "@shared"; import { useContext, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import * as styles from "./achievements.css"; import { formatDownloadProgress } from "@renderer/helpers"; -import { TrophyIcon } from "@primer/octicons-react"; +import { PersonIcon, TrophyIcon } from "@primer/octicons-react"; import { SPACING_UNIT, vars } from "@renderer/theme.css"; import { gameDetailsContext } from "@renderer/context"; import { UserAchievement } from "@types"; @@ -14,12 +14,15 @@ import Color from "color"; const HERO_ANIMATION_THRESHOLD = 25; +interface UserInfo { + userId: string; + displayName: string; + achievements: UserAchievement[]; + profileImageUrl: string; +} + interface AchievementsContentProps { - otherUser: { - userId: string; - displayName: string; - achievements: UserAchievement[]; - } | null; + otherUser: UserInfo | null; } interface AchievementListProps { @@ -30,11 +33,13 @@ interface AchievementListProps { interface AchievementPanelProps { achievements: UserAchievement[]; displayName: string | null; + profileImageUrl: string | null; } function AchievementPanel({ achievements, displayName, + profileImageUrl, }: AchievementPanelProps) { const { t } = useTranslation("achievement"); @@ -42,56 +47,81 @@ function AchievementPanel({ (achievement) => achievement.unlocked ).length; + const { userDetails } = useUserDetails(); + + const getProfileImage = () => { + const imageUrl = profileImageUrl || userDetails?.profileImageUrl; + return ( +
+ {imageUrl ? ( + {"teste"} + ) : ( + + )} +
+ ); + }; + const totalAchievementCount = achievements.length; return (
-

- {displayName - ? t("user_achievements", { - displayName, - }) - : t("your_achievements")} -

+ {getProfileImage()}
+

+ {displayName + ? t("user_achievements", { + displayName, + }) + : t("your_achievements")} +

- +
+ + + {unlockedAchievementCount} / {totalAchievementCount} + +
+ - {unlockedAchievementCount} / {totalAchievementCount} + {formatDownloadProgress( + unlockedAchievementCount / totalAchievementCount + )}
- - - {formatDownloadProgress( - unlockedAchievementCount / totalAchievementCount - )} - +
-
); } @@ -311,12 +341,14 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) { )}