From ea5b07a1ec66b7d866ff26f9c598f2c3a0a07871 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Wed, 16 Oct 2024 23:06:21 -0300 Subject: [PATCH] feat: testing new achievements page ui --- .github/workflows/build.yml | 1 - .../events/catalogue/get-game-achievements.ts | 2 +- .../achievements/merge-achievements.ts | 8 +- .../achievements/achievements-content.tsx | 85 +++++++------------ .../pages/achievements/achievements.css.ts | 8 +- .../pages/game-details/sidebar/sidebar.tsx | 6 ++ src/types/index.ts | 1 + 7 files changed, 48 insertions(+), 63 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 91069c4b..908f6c80 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -63,7 +63,6 @@ jobs: with: name: Build-${{ matrix.os }} path: | - dist/win-unpacked/** dist/*-portable.exe dist/*.zip dist/*.dmg diff --git a/src/main/events/catalogue/get-game-achievements.ts b/src/main/events/catalogue/get-game-achievements.ts index 93e89441..da86f895 100644 --- a/src/main/events/catalogue/get-game-achievements.ts +++ b/src/main/events/catalogue/get-game-achievements.ts @@ -110,7 +110,7 @@ const getAchievementsRemoteUser = async ( ...achievementData, unlocked: false, unlockTime: null, - icon: icongray, + icongray: icongray, } as UserAchievement; }) .sort((a, b) => { diff --git a/src/main/services/achievements/merge-achievements.ts b/src/main/services/achievements/merge-achievements.ts index c97e8f56..7b03723f 100644 --- a/src/main/services/achievements/merge-achievements.ts +++ b/src/main/services/achievements/merge-achievements.ts @@ -64,7 +64,13 @@ export const mergeAchievements = async ( localGameAchievement?.unlockedAchievements || "[]" ).filter((achievement) => achievement.name) as UnlockedAchievement[]; - const newAchievements = achievements + const newAchievementsMap = new Map( + achievements.reverse().map((achievement) => { + return [achievement.name.toUpperCase(), achievement]; + }) + ); + + const newAchievements = [...newAchievementsMap.values()] .filter((achievement) => { return !unlockedAchievements.some((localAchievement) => { return ( diff --git a/src/renderer/src/pages/achievements/achievements-content.tsx b/src/renderer/src/pages/achievements/achievements-content.tsx index 153311ef..1a922a37 100644 --- a/src/renderer/src/pages/achievements/achievements-content.tsx +++ b/src/renderer/src/pages/achievements/achievements-content.tsx @@ -37,6 +37,7 @@ interface AchievementPanelProps { function AchievementPanel({ user, otherUser }: AchievementPanelProps) { const { t } = useTranslation("achievement"); + const { userDetails } = useUserDetails(); const getProfileImage = (imageUrl: string | null | undefined) => { return ( @@ -121,35 +122,29 @@ function AchievementPanel({ user, otherUser }: AchievementPanelProps) { const otherUserTotalAchievementCount = otherUser.achievements.length; return ( - <> -
- {getProfileImage(otherUser.profileImageUrl)} +
+

- {t("user_achievements", { - displayName: otherUser.displayName, - })} + {otherUser.displayName}

@@ -182,26 +177,14 @@ function AchievementPanel({ user, otherUser }: AchievementPanelProps) { className={styles.achievementsProgressBar} />
-
-
- {getProfileImage(user.profileImageUrl)}

- {t("your_achievements")} + {userDetails?.displayName}

- +
{getProfileImage(otherUser.profileImageUrl)}
+
{getProfileImage(user.profileImageUrl)}
+
); } @@ -288,7 +273,7 @@ function AchievementList({
  • - {otherUserAchievement.unlockTime && ( +
    +

    {otherUserAchievement.displayName}

    +

    {otherUserAchievement.description}

    +
    +
    + +
    + {otherUserAchievement.unlockTime ? (
    {t("unlocked_at")}

    {formatDateTime(otherUserAchievement.unlockTime)}

    + ) : ( + "Não desbloqueada" )}
    -
    -

    {otherUserAchievement.displayName}

    -

    {otherUserAchievement.description}

    -
    - -
    - {achievements[index].displayName} - {achievements[index].unlockTime && ( +
    + {achievements[index].unlockTime ? (
    {t("unlocked_at")}

    {formatDateTime(achievements[index].unlockTime)}

    + ) : ( + "Não desbloqueada" )}
    • diff --git a/src/renderer/src/pages/achievements/achievements.css.ts b/src/renderer/src/pages/achievements/achievements.css.ts index f84bc7be..986f809f 100644 --- a/src/renderer/src/pages/achievements/achievements.css.ts +++ b/src/renderer/src/pages/achievements/achievements.css.ts @@ -72,12 +72,10 @@ export const container = style({ export const panel = recipe({ base: { width: "100%", - height: "100px", - minHeight: "100px", - padding: `${SPACING_UNIT * 2}px 0`, + height: "180px", + minHeight: "180px", + padding: `${SPACING_UNIT * 2}px`, backgroundColor: vars.color.darkBackground, - display: "flex", - flexDirection: "row", transition: "all ease 0.2s", borderBottom: `solid 1px ${vars.color.border}`, position: "sticky", diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.tsx b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx index 8d1fe8d6..a6a24850 100644 --- a/src/renderer/src/pages/game-details/sidebar/sidebar.tsx +++ b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx @@ -24,6 +24,8 @@ const fakeAchievements: UserAchievement[] = [ hidden: false, description: "Chop down your first tree.", icon: "https://cdn.akamai.steamstatic.com/steamcommunity/public/images/apps/105600/0fbb33098c9da39d1d4771d8209afface9c46e81.jpg", + icongray: + "https://cdn.akamai.steamstatic.com/steamcommunity/public/images/apps/105600/0fbb33098c9da39d1d4771d8209afface9c46e81.jpg", unlocked: true, unlockTime: Date.now(), }, @@ -32,6 +34,8 @@ const fakeAchievements: UserAchievement[] = [ name: "", hidden: false, icon: "https://cdn.akamai.steamstatic.com/steamcommunity/public/images/apps/105600/0a6ff6a36670c96ceb4d30cf6fd69d2fdf55f38e.jpg", + icongray: + "https://cdn.akamai.steamstatic.com/steamcommunity/public/images/apps/105600/0a6ff6a36670c96ceb4d30cf6fd69d2fdf55f38e.jpg", unlocked: false, unlockTime: null, }, @@ -40,6 +44,8 @@ const fakeAchievements: UserAchievement[] = [ name: "", hidden: false, icon: "https://cdn.akamai.steamstatic.com/steamcommunity/public/images/apps/105600/2d10311274fe7c92ab25cc29afdca86b019ad472.jpg", + icongray: + "https://cdn.akamai.steamstatic.com/steamcommunity/public/images/apps/105600/2d10311274fe7c92ab25cc29afdca86b019ad472.jpg", unlocked: false, unlockTime: null, }, diff --git a/src/types/index.ts b/src/types/index.ts index eadab11c..58c7191f 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -45,6 +45,7 @@ export interface UserAchievement { unlocked: boolean; unlockTime: number | null; icon: string; + icongray: string; } export interface RemoteUnlockedAchievement {