diff --git a/src/main/events/catalogue/get-game-achievements.ts b/src/main/events/catalogue/get-game-achievements.ts
index da86f895..734366c8 100644
--- a/src/main/events/catalogue/get-game-achievements.ts
+++ b/src/main/events/catalogue/get-game-achievements.ts
@@ -51,7 +51,7 @@ const getAchievementLocalUser = async (shop: string, objectId: string) => {
...achievementData,
unlocked: false,
unlockTime: null,
- icon: icongray,
+ icongray: icongray,
} as UserAchievement;
})
.sort((a, b) => {
diff --git a/src/main/services/achievements/get-game-achievement-data.ts b/src/main/services/achievements/get-game-achievement-data.ts
index 443af59a..552e66b7 100644
--- a/src/main/services/achievements/get-game-achievement-data.ts
+++ b/src/main/services/achievements/get-game-achievement-data.ts
@@ -42,7 +42,9 @@ export const getGameAchievementData = async (
where: { objectId, shop },
})
.then((gameAchievements) => {
- return JSON.parse(gameAchievements?.achievements || "[]");
+ return JSON.parse(
+ gameAchievements?.achievements || "[]"
+ ) as AchievementData[];
});
});
};
diff --git a/src/renderer/src/pages/achievements/achievements-content.tsx b/src/renderer/src/pages/achievements/achievements-content.tsx
index 1a922a37..fbf9da9f 100644
--- a/src/renderer/src/pages/achievements/achievements-content.tsx
+++ b/src/renderer/src/pages/achievements/achievements-content.tsx
@@ -5,7 +5,7 @@ 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 { PersonIcon, TrophyIcon } from "@primer/octicons-react";
+import { LockIcon, PersonIcon, TrophyIcon } from "@primer/octicons-react";
import { SPACING_UNIT, vars } from "@renderer/theme.css";
import { gameDetailsContext } from "@renderer/context";
import { UserAchievement } from "@types";
@@ -26,8 +26,8 @@ interface AchievementsContentProps {
}
interface AchievementListProps {
- achievements: UserAchievement[];
- otherUserAchievements?: UserAchievement[];
+ user: UserInfo;
+ otherUser: UserInfo | null;
}
interface AchievementPanelProps {
@@ -39,18 +39,6 @@ function AchievementPanel({ user, otherUser }: AchievementPanelProps) {
const { t } = useTranslation("achievement");
const { userDetails } = useUserDetails();
- const getProfileImage = (imageUrl: string | null | undefined) => {
- return (
-
- {imageUrl ? (
-
![{"teste"}]({imageUrl})
- ) : (
-
- )}
-
- );
- };
-
const userTotalAchievementCount = user.achievements.length;
const userUnlockedAchievementCount = user.achievements.filter(
(achievement) => achievement.unlocked
@@ -63,11 +51,9 @@ function AchievementPanel({ user, otherUser }: AchievementPanelProps) {
display: "flex",
flexDirection: "row",
width: "100%",
- padding: `0 ${SPACING_UNIT * 2}px`,
gap: `${SPACING_UNIT * 2}px`,
}}
>
- {getProfileImage(user.profileImageUrl)}
- {getProfileImage(otherUser.profileImageUrl)}
- {getProfileImage(user.profileImageUrl)}
);
}
-function AchievementList({
- achievements,
- otherUserAchievements,
-}: AchievementListProps) {
+function AchievementList({ user, otherUser }: AchievementListProps) {
+ const achievements = user.achievements;
+ const otherUserAchievements = otherUser?.achievements;
+
const { t } = useTranslation("achievement");
const { formatDateTime } = useDate();
+ const { userDetails } = useUserDetails();
+
+ const getProfileImage = (imageUrl: string | null | undefined) => {
+ return (
+
+ {imageUrl ? (
+
![{"teste"}]({imageUrl})
+ ) : (
+
+ )}
+
+ );
+ };
+
if (!otherUserAchievements || otherUserAchievements.length === 0) {
return (
@@ -273,7 +271,7 @@ function AchievementList({
-
![{otherUserAchievement.displayName}]({otherUserAchievement.icon})
{otherUserAchievement.unlockTime ? (
+ {getProfileImage(otherUser.profileImageUrl)}
{t("unlocked_at")}
{formatDateTime(otherUserAchievement.unlockTime)}
) : (
- "Não desbloqueada"
+
)}
- {achievements[index].unlockTime ? (
+ {userDetails?.subscription && achievements[index].unlockTime ? (
+ {getProfileImage(user.profileImageUrl)}
{t("unlocked_at")}
{formatDateTime(achievements[index].unlockTime)}
) : (
- "Não desbloqueada"
+
)}
@@ -434,7 +440,7 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
user={{
...userDetails,
userId: userDetails.id,
- achievements: achievements!,
+ achievements: sortedAchievements,
}}
otherUser={otherUser}
/>
@@ -448,8 +454,12 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
}}
>
diff --git a/src/renderer/src/pages/achievements/achievements.css.ts b/src/renderer/src/pages/achievements/achievements.css.ts
index 986f809f..0a95e889 100644
--- a/src/renderer/src/pages/achievements/achievements.css.ts
+++ b/src/renderer/src/pages/achievements/achievements.css.ts
@@ -72,8 +72,8 @@ export const container = style({
export const panel = recipe({
base: {
width: "100%",
- height: "180px",
- minHeight: "180px",
+ height: "150px",
+ minHeight: "150px",
padding: `${SPACING_UNIT * 2}px`,
backgroundColor: vars.color.darkBackground,
transition: "all ease 0.2s",
@@ -184,8 +184,8 @@ export const listItemSkeleton = style({
});
export const profileAvatar = style({
- height: "65px",
- width: "65px",
+ height: "32px",
+ width: "32px",
borderRadius: "4px",
display: "flex",
justifyContent: "center",