feat: adjusting achievements page

src/locales/en/translation.json

@@ -338,6 +338,7 @@
   "achievement": {
     "achievement_unlocked": "Achievement unlocked",
     "user_achievements": "{{displayName}}'s Achievements",
-    "your_achievements": "Your Achievements"
+    "your_achievements": "Your Achievements",
+    "unlocked_at": "Unlocked at:"
   }
 }

src/locales/pt-BR/translation.json

@@ -340,6 +340,7 @@
   "achievement": {
     "achievement_unlocked": "Conquista desbloqueada",
     "your_achievements": "Suas Conquistas",
-    "user_achievements": "Conquistas de {{displayName}}"
+    "user_achievements": "Conquistas de {{displayName}}",
+    "unlocked_at": "Desbloqueado em:"
   }
 }

src/locales/pt-PT/translation.json

@@ -282,6 +282,7 @@
     "your_friend_code": "Seu código de amigo:"
   },
   "achievement": {
-    "achievement_unlocked": "Conquista desbloqueada"
+    "achievement_unlocked": "Conquista desbloqueada",
+    "unlocked_at": "Desbloqueado em:"
   }
 }

src/main/services/achievements/merge-achievements.ts

@@ -3,7 +3,7 @@ import {
   gameRepository,
   userPreferencesRepository,
 } from "@main/repository";
-import type { GameShop, UnlockedAchievement } from "@types";
+import type { AchievementData, GameShop, UnlockedAchievement } from "@types";
 import { WindowManager } from "../window-manager";
 import { HydraApi } from "../hydra-api";
 import { getGameAchievements } from "@main/events/catalogue/get-game-achievements";
@@ -52,9 +52,13 @@ export const mergeAchievements = async (
     userPreferencesRepository.findOne({ where: { id: 1 } }),
   ]);
 
+  const achievementsData = JSON.parse(
+    localGameAchievement?.achievements || "[]"
+  ) as AchievementData[];
+
   const unlockedAchievements = JSON.parse(
     localGameAchievement?.unlockedAchievements || "[]"
-  ).filter((achievement) => achievement.name);
+  ).filter((achievement) => achievement.name) as UnlockedAchievement[];
 
   const newAchievements = achievements
     .filter((achievement) => {
@@ -81,20 +85,18 @@ export const mergeAchievements = async (
         return a.unlockTime - b.unlockTime;
       })
       .map((achievement) => {
-        return JSON.parse(localGameAchievement?.achievements || "[]").find(
+        return achievementsData.find((steamAchievement) => {
-          (steamAchievement) => {
           return (
             achievement.name.toUpperCase() ===
             steamAchievement.name.toUpperCase()
           );
-          }
+        });
-        );
       })
       .filter((achievement) => achievement)
       .map((achievement) => {
         return {
-          displayName: achievement.displayName,
+          displayName: achievement!.displayName,
-          iconUrl: achievement.icon,
+          iconUrl: achievement!.icon,
         };
       });
 

src/renderer/src/pages/achievement/achievements-content.tsx

@@ -1,7 +1,7 @@
 import { setHeaderTitle } from "@renderer/features";
 import { useAppDispatch, useDate } from "@renderer/hooks";
 import { steamUrlBuilder } from "@shared";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import * as styles from "./achievements.css";
 import { formatDownloadProgress } from "@renderer/helpers";
@@ -21,6 +21,7 @@ interface AchievementsContentProps {
 
 interface AchievementListProps {
   achievements: UserAchievement[];
+  otherUserAchievements: UserAchievement[];
 }
 
 interface AchievementPanelProps {
@@ -92,13 +93,22 @@ function AchievementPanel({
   );
 }
 
-function AchievementList({ achievements }: AchievementListProps) {
+function AchievementList({
+  achievements,
+  otherUserAchievements,
+}: AchievementListProps) {
+  const { t } = useTranslation("achievement");
   const { formatDateTime } = useDate();
 
+  if (otherUserAchievements.length === 0) {
     return (
       <ul className={styles.list}>
         {achievements.map((achievement, index) => (
-        <li key={index} className={styles.listItem}>
+          <li
+            key={index}
+            className={styles.listItem}
+            style={{ display: "flex" }}
+          >
             <img
               className={styles.listItemImage({
                 unlocked: achievement.unlocked,
@@ -107,12 +117,82 @@ function AchievementList({ achievements }: AchievementListProps) {
               alt={achievement.displayName}
               loading="lazy"
             />
-          <div>
+            <div style={{ flex: 1 }}>
-            <p>{achievement.displayName}</p>
+              <h4>{achievement.displayName}</h4>
               <p>{achievement.description}</p>
-            <small>
+            </div>
-              {achievement.unlockTime && formatDateTime(achievement.unlockTime)}
+            {achievement.unlockTime && (
-            </small>
+              <div style={{ whiteSpace: "nowrap" }}>
+                <small>{t("unlocked_at")}</small>
+                <p>{formatDateTime(achievement.unlockTime)}</p>
+              </div>
+            )}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <ul className={styles.list}>
+      {otherUserAchievements.map((otherUserAchievement, index) => (
+        <li
+          key={index}
+          className={styles.listItem}
+          style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr" }}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: `${SPACING_UNIT}px`,
+            }}
+          >
+            <img
+              className={styles.listItemImage({
+                unlocked: otherUserAchievement.unlocked,
+              })}
+              src={otherUserAchievement.icon}
+              alt={otherUserAchievement.displayName}
+              loading="lazy"
+            />
+            {otherUserAchievement.unlockTime && (
+              <div style={{ whiteSpace: "nowrap" }}>
+                <small>{t("unlocked_at")}</small>
+                <p>{formatDateTime(otherUserAchievement.unlockTime)}</p>
+              </div>
+            )}
+          </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 style={{ whiteSpace: "nowrap" }}>
+                <small>{t("unlocked_at")}</small>
+                <p>{formatDateTime(achievements[index].unlockTime)}</p>
+              </div>
+            )}
           </div>
         </li>
       ))}
@@ -128,13 +208,27 @@ export function AchievementsContent({
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [isHeaderStuck, setIsHeaderStuck] = useState(false);
   const [backdropOpactiy, setBackdropOpacity] = useState(1);
-  const [pageAchievements, setPageAchievements] = useState<UserAchievement[]>(
+  const [otherUserAchievements, setOtherUserAchievements] = useState<
-    []
+    UserAchievement[]
-  );
+  >([]);
 
   const { gameTitle, objectId, shop, achievements, gameColor, setGameColor } =
     useContext(gameDetailsContext);
 
+  const sortedAchievements = useMemo(() => {
+    if (otherUserAchievements.length === 0) return achievements;
+
+    return achievements.sort((a, b) => {
+      const indexA = otherUserAchievements.findIndex(
+        (achievement) => achievement.name === a.name
+      );
+      const indexB = otherUserAchievements.findIndex(
+        (achievement) => achievement.name === b.name
+      );
+      return indexA - indexB;
+    });
+  }, [achievements, otherUserAchievements]);
+
   const dispatch = useAppDispatch();
 
   useEffect(() => {
@@ -161,7 +255,7 @@ export function AchievementsContent({
       window.electron
         .getGameAchievements(objectId, shop as GameShop, userId)
         .then((achievements) => {
-          setPageAchievements(achievements);
+          setOtherUserAchievements(achievements);
         });
     }
   }, [objectId, shop, userId]);
@@ -188,8 +282,6 @@ export function AchievementsContent({
 
   if (!objectId || !shop || !gameTitle) return null;
 
-  const userAchievements = userId ? pageAchievements : achievements;
-
   return (
     <div className={styles.wrapper}>
       <img
@@ -228,25 +320,30 @@ export function AchievementsContent({
         </div>
 
         <div className={styles.panel({ stuck: isHeaderStuck })}>
+          {userId && (
             <AchievementPanel
               displayName={displayName}
-            achievements={userAchievements}
+              achievements={otherUserAchievements}
             />
-          {pageAchievements.length > 0 && (
-            <AchievementPanel displayName={null} achievements={achievements} />
           )}
+
+          <AchievementPanel
+            displayName={null}
+            achievements={sortedAchievements}
+          />
         </div>
         <div
           style={{
             display: "flex",
             flexDirection: "row",
+            width: "100%",
+            backgroundColor: vars.color.background,
           }}
         >
-          {pageAchievements.length > 0 && (
+          <AchievementList
-            <AchievementList achievements={pageAchievements} />
+            achievements={sortedAchievements}
-          )}
+            otherUserAchievements={otherUserAchievements}
-
+          />
-          <AchievementList achievements={achievements} />
         </div>
       </section>
     </div>

src/renderer/src/pages/achievement/achievements.css.ts

@@ -93,11 +93,10 @@ export const list = style({
   flexDirection: "column",
   gap: `${SPACING_UNIT * 2}px`,
   padding: `${SPACING_UNIT * 2}px`,
-  backgroundColor: vars.color.background,
+  width: "100%",
 });
 
 export const listItem = style({
-  display: "flex",
   transition: "all ease 0.1s",
   color: vars.color.muted,
   width: "100%",