From be89e0d60bf77de522a402bc4f70c34f535db965 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Fri, 20 Dec 2024 10:14:21 -0300
Subject: [PATCH] feat: create stats box

---
 src/locales/en/translation.json               |  5 +-
 src/locales/pt-BR/translation.json            |  5 +-
 .../profile-content/profile-content.tsx       |  2 +
 .../profile-content/user-stats-box.tsx        | 65 +++++++++++++++++++
 src/types/index.ts                            | 10 ++-
 5 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/src/pages/profile/profile-content/user-stats-box.tsx

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index b3e1caed..b66b4da6 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -359,7 +359,10 @@
     "your_friend_code": "Your friend code:",
     "upload_banner": "Upload banner",
     "uploading_banner": "Uploading banner…",
-    "background_image_updated": "Background image updated"
+    "background_image_updated": "Background image updated",
+    "stats": "Stats",
+    "achievements": "Achievements",
+    "games": "Games"
   },
   "achievement": {
     "achievement_unlocked": "Achievement unlocked",
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
index a1197c78..1bf4d27e 100644
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -357,7 +357,10 @@
     "your_friend_code": "Seu código de amigo:",
     "upload_banner": "Carregar banner",
     "uploading_banner": "Carregando banner…",
-    "background_image_updated": "Imagem de fundo salva"
+    "background_image_updated": "Imagem de fundo salva",
+    "stats": "Estatísticas",
+    "achievements": "Conquistas",
+    "games": "Jogos"
   },
   "achievement": {
     "achievement_unlocked": "Conquista desbloqueada",
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
index 1792ed55..ec69711d 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -21,6 +21,7 @@ import {
   formatDownloadProgress,
 } from "@renderer/helpers";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
+import { UserStatsBox } from "./user-stats-box";
 
 export function ProfileContent() {
   const { userProfile, isMe, userStats } = useContext(userProfileContext);
@@ -248,6 +249,7 @@ export function ProfileContent() {
 
         {shouldShowRightContent && (
           <div className={styles.rightContent}>
+            <UserStatsBox />
             <RecentGamesBox />
             <FriendsBox />
 
diff --git a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
new file mode 100644
index 00000000..888b03d4
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
@@ -0,0 +1,65 @@
+import * as styles from "./profile-content.css";
+import { useCallback, useContext } from "react";
+import { userProfileContext } from "@renderer/context";
+import { useTranslation } from "react-i18next";
+import { useFormat } from "@renderer/hooks";
+import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
+
+export function UserStatsBox() {
+  const { userStats } = useContext(userProfileContext);
+
+  const { t } = useTranslation("user_profile");
+
+  const { numberFormatter } = useFormat();
+
+  const formatPlayTime = useCallback(
+    (playTimeInSeconds: number) => {
+      const seconds = playTimeInSeconds;
+      const minutes = seconds / 60;
+
+      if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
+        return t("amount_minutes", {
+          amount: minutes.toFixed(0),
+        });
+      }
+
+      const hours = minutes / 60;
+      return t("amount_hours", { amount: numberFormatter.format(hours) });
+    },
+    [numberFormatter, t]
+  );
+
+  if (!userStats) return null;
+
+  return (
+    <div>
+      <div className={styles.sectionHeader}>
+        <h2>{t("stats")}</h2>
+      </div>
+
+      <div className={styles.box}>
+        <ul className={styles.list}>
+          {userStats.achievementsPointsEarnedSum && (
+            <li>
+              <p className={styles.listItemTitle}>{t("achievements")}</p>
+              <p>
+                Total points: {userStats.achievementsPointsEarnedSum.value} -
+                Top {userStats.achievementsPointsEarnedSum.topPercentile}%{" "}
+              </p>
+              <p>Unlocked: {userStats.unlockedAchievementSum}</p>
+            </li>
+          )}
+
+          <li>
+            <p className={styles.listItemTitle}>{t("games")}</p>
+            <p>
+              Total playtime:{" "}
+              {formatPlayTime(userStats.totalPlayTimeInSeconds.value)} - Top{" "}
+              {userStats.totalPlayTimeInSeconds.topPercentile}%
+            </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index e35f1777..3669a91e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -320,11 +320,17 @@ export interface TrendingGame {
   logo: string | null;
 }
 
+export interface UserStatsPercentile {
+  value: number;
+  topPercentile: number;
+}
+
 export interface UserStats {
   libraryCount: number;
   friendsCount: number;
-  achievementsPointsEarnedSum?: number;
-  totalPlaytimeInSeconds: number;
+  totalPlayTimeInSeconds: UserStatsPercentile;
+  achievementsPointsEarnedSum?: UserStatsPercentile;
+  unlockedAchievementSum?: number;
 }
 
 export interface UnlockedAchievement {