feat: testing new achievements page ui

.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

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) => {

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 (

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 (
-    <>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          width: "100%",
-          padding: `0 ${SPACING_UNIT * 2}px`,
-          gap: `${SPACING_UNIT * 2}px`,
-        }}
-      >
-        {getProfileImage(otherUser.profileImageUrl)}
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "3fr 1fr 1fr",
+        gap: `${SPACING_UNIT * 2}px`,
+        padding: `${SPACING_UNIT}px`,
+      }}
+    >
+      <div style={{ display: "flex", flexDirection: "column" }}>
         <div
           style={{
             display: "flex",
             flexDirection: "column",
-            width: "100%",
           }}
         >
           <h1 style={{ fontSize: "1.2em", marginBottom: "8px" }}>
-            {t("user_achievements", {
-              displayName: otherUser.displayName,
-            })}
+            {otherUser.displayName}
           </h1>
           <div
             style={{
               display: "flex",
               justifyContent: "space-between",
               marginBottom: 8,
-              width: "100%",
               color: vars.color.muted,
             }}
           >
@@ -182,26 +177,14 @@ function AchievementPanel({ user, otherUser }: AchievementPanelProps) {
             className={styles.achievementsProgressBar}
           />
         </div>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row-reverse",
-          width: "100%",
-          padding: `0 ${SPACING_UNIT * 2}px`,
-          gap: `${SPACING_UNIT * 2}px`,
-        }}
-      >
-        {getProfileImage(user.profileImageUrl)}
         <div
           style={{
             display: "flex",
             flexDirection: "column",
-            width: "100%",
           }}
         >
           <h1 style={{ fontSize: "1.2em", marginBottom: "8px" }}>
-            {t("your_achievements")}
+            {userDetails?.displayName}
           </h1>
           <div
             style={{
@@ -238,7 +221,9 @@ function AchievementPanel({ user, otherUser }: AchievementPanelProps) {
           />
         </div>
       </div>
-    </>
+      <div>{getProfileImage(otherUser.profileImageUrl)}</div>
+      <div>{getProfileImage(user.profileImageUrl)}</div>
+    </div>
   );
 }
 
@@ -288,7 +273,7 @@ function AchievementList({
         <li
           key={index}
           className={styles.listItem}
-          style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr" }}
+          style={{ display: "grid", gridTemplateColumns: "3fr 1fr 1fr" }}
         >
           <div
             style={{
@@ -306,41 +291,31 @@ function AchievementList({
               alt={otherUserAchievement.displayName}
               loading="lazy"
             />
-            {otherUserAchievement.unlockTime && (
+            <div>
+              <h4>{otherUserAchievement.displayName}</h4>
+              <p>{otherUserAchievement.description}</p>
+            </div>
+          </div>
+
+          <div>
+            {otherUserAchievement.unlockTime ? (
               <div style={{ whiteSpace: "nowrap" }}>
                 <small>{t("unlocked_at")}</small>
                 <p>{formatDateTime(otherUserAchievement.unlockTime)}</p>
               </div>
+            ) : (
+              "Não desbloqueada"
             )}
           </div>
 
-          <div style={{ textAlign: "center" }}>
-            <h4>{otherUserAchievement.displayName}</h4>
-            <p>{otherUserAchievement.description}</p>
-          </div>
-
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row-reverse",
-              alignItems: "center",
-              gap: `${SPACING_UNIT}px`,
-              textAlign: "right",
-            }}
-          >
-            <img
-              className={styles.listItemImage({
-                unlocked: achievements[index].unlocked,
-              })}
-              src={achievements[index].icon}
-              alt={achievements[index].displayName}
-              loading="lazy"
-            />
-            {achievements[index].unlockTime && (
+          <div>
+            {achievements[index].unlockTime ? (
               <div style={{ whiteSpace: "nowrap" }}>
                 <small>{t("unlocked_at")}</small>
                 <p>{formatDateTime(achievements[index].unlockTime)}</p>
               </div>
+            ) : (
+              "Não desbloqueada"
             )}
           </div>
         </li>

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",

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,
   },

src/types/index.ts

@@ -45,6 +45,7 @@ export interface UserAchievement {
   unlocked: boolean;
   unlockTime: number | null;
   icon: string;
+  icongray: string;
 }
 
 export interface RemoteUnlockedAchievement {