From 93bc7c690ff1b42d39f2ed2816b87a4dfa1a7561 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Sun, 22 Dec 2024 12:38:31 -0300
Subject: [PATCH] feat: ui adjustments

---
 src/locales/en/translation.json               |  6 ++-
 src/locales/pt-BR/translation.json            |  6 ++-
 .../pages/achievements/achievement-list.tsx   |  4 +-
 .../achievements/achievement-panel.css.ts     |  2 +-
 .../compared-achievement-panel.tsx            | 44 +++++++++----------
 src/types/index.ts                            |  1 +
 6 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 2d40976a..3b3ad552 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -168,7 +168,8 @@
     "select_folder": "Select folder",
     "backup_from": "Backup from {{date}}",
     "custom_backup_location_set": "Custom backup location set",
-    "no_directory_selected": "No directory selected"
+    "no_directory_selected": "No directory selected",
+    "available_points": "Available points:"
   },
   "activation": {
     "title": "Activate Hydra",
@@ -378,7 +379,8 @@
     "new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games",
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} achievements",
     "achievements_unlocked_for_game": "Unlocked {{achievementCount}} new achievements for {{gameTitle}}",
-    "hidden_achievement_tooltip": "This is a hidden achievement"
+    "hidden_achievement_tooltip": "This is a hidden achievement",
+    "achievement_earn_points": "Earn {{points}} with this achievement"
   },
   "tour": {
     "subscription_tour_title": "Hydra Cloud Subscription",
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
index 45f8e9d9..c8e72eb1 100644
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -164,7 +164,8 @@
     "select_folder": "Selecione a pasta",
     "manage_files_description": "Gerencie quais arquivos serão feitos backup",
     "clear": "Limpar",
-    "no_directory_selected": "Nenhum diretório selecionado"
+    "no_directory_selected": "Nenhum diretório selecionado",
+    "available_points": "Pontos disponíveis:"
   },
   "activation": {
     "title": "Ativação",
@@ -376,7 +377,8 @@
     "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos",
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} conquistas",
     "achievements_unlocked_for_game": "Desbloqueadas {{achievementCount}} novas conquistas em {{gameTitle}}",
-    "hidden_achievement_tooltip": "Está é uma conquista oculta"
+    "hidden_achievement_tooltip": "Está é uma conquista oculta",
+    "achievement_earn_points": "Ganhe {{points}} com essa conquista"
   },
   "tour": {
     "subscription_tour_title": "Assinatura Hydra Cloud",
diff --git a/src/renderer/src/pages/achievements/achievement-list.tsx b/src/renderer/src/pages/achievements/achievement-list.tsx
index afea6522..0bd09a69 100644
--- a/src/renderer/src/pages/achievements/achievement-list.tsx
+++ b/src/renderer/src/pages/achievements/achievement-list.tsx
@@ -44,7 +44,9 @@ export function AchievementList({ achievements }: AchievementListProps) {
             {achievement.points && (
               <div
                 style={{ display: "flex", alignItems: "center", gap: "4px" }}
-                title="This achievement is worth 69 H-points"
+                title={t("achievement_earn_points", {
+                  points: achievement.points,
+                })}
               >
                 <HydraIcon width={20} height={20} />
                 <p style={{ fontSize: "1.1em" }}>{achievement.points}</p>
diff --git a/src/renderer/src/pages/achievements/achievement-panel.css.ts b/src/renderer/src/pages/achievements/achievement-panel.css.ts
index 0056a7f5..1882a8ef 100644
--- a/src/renderer/src/pages/achievements/achievement-panel.css.ts
+++ b/src/renderer/src/pages/achievements/achievement-panel.css.ts
@@ -5,7 +5,7 @@ import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const panel = style({
   width: "100%",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
+  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
   backgroundColor: vars.color.background,
   display: "flex",
   alignItems: "center",
diff --git a/src/renderer/src/pages/achievements/compared-achievement-panel.tsx b/src/renderer/src/pages/achievements/compared-achievement-panel.tsx
index 6912e59e..0f35aa5d 100644
--- a/src/renderer/src/pages/achievements/compared-achievement-panel.tsx
+++ b/src/renderer/src/pages/achievements/compared-achievement-panel.tsx
@@ -19,31 +19,31 @@ export function ComparedAchievementPanel({
   const {} = useContext(gameDetailsContext);
 
   return (
-    <>
-      <div
-        className={styles.panel}
-        style={{
-          display: "grid",
-          gridTemplateColumns:
-            achievements.owner.achievementsPointsEarnedSum !== undefined
-              ? "3fr 1fr 1fr"
-              : "3fr 2fr",
-        }}
-      >
-        <div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
-          Total de pontos: <HydraIcon width={20} height={20} /> 4200
-        </div>
-        {achievements.owner.achievementsPointsEarnedSum !== undefined && (
-          <div className={styles.content}>
-            <HydraIcon width={20} height={20} />
-            {achievements.owner.achievementsPointsEarnedSum}
-          </div>
-        )}
+    <div
+      className={styles.panel}
+      style={{
+        display: "grid",
+        gridTemplateColumns:
+          achievements.owner.achievementsPointsEarnedSum !== undefined
+            ? "3fr 1fr 1fr"
+            : "3fr 2fr",
+        gap: `${SPACING_UNIT * 2}px`,
+      }}
+    >
+      <div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
+        {t("available_points")} <HydraIcon width={20} height={20} />{" "}
+        {achievements.achievementsPointsTotal}
+      </div>
+      {achievements.owner.achievementsPointsEarnedSum !== undefined && (
         <div className={styles.content}>
           <HydraIcon width={20} height={20} />
-          {achievements.target.achievementsPointsEarnedSum}
+          {achievements.owner.achievementsPointsEarnedSum}
         </div>
+      )}
+      <div className={styles.content}>
+        <HydraIcon width={20} height={20} />
+        {achievements.target.achievementsPointsEarnedSum}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index 28780e7e..37ecb2d2 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -368,6 +368,7 @@ export interface GameArtifact {
 }
 
 export interface ComparedAchievements {
+  achievementsPointsTotal: number;
   owner: {
     totalAchievementCount: number;
     unlockedAchievementCount: number;