feat: ui adjustments and add friend playing game

This commit is contained in:
Zamitto
2024-12-22 16:47:13 -03:00
parent 93bc7c690f
commit 041b7d520c
7 changed files with 62 additions and 14 deletions

View File

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
import * as styles from "./profile-content.css";
import { Avatar, Link } from "@renderer/components";
import { buildGameDetailsPath } from "@renderer/helpers";
export function FriendsBox() {
const { userProfile, userStats } = useContext(userProfileContext);
@@ -35,7 +36,16 @@ export function FriendsBox() {
alt={friend.displayName}
/>
<span className={styles.friendName}>{friend.displayName}</span>
<div>
<span className={styles.friendName}>
{friend.displayName}
</span>
{friend.currentGame && (
<Link to={buildGameDetailsPath({ ...friend.currentGame })}>
<p>{t("playing", { game: friend.currentGame.title })}</p>
</Link>
)}
</div>
</Link>
</li>
))}

View File

@@ -42,16 +42,19 @@ export function UserStatsBox() {
<ul className={styles.list}>
{userStats.achievementsPointsEarnedSum && (
<li>
<p className={styles.listItemTitle}>{t("achievements")}</p>
<h3 className={styles.listItemTitle}>{t("achievements")}</h3>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<p
style={{ display: "flex", alignItems: "center", gap: "4px" }}
>
<HydraIcon width={20} height={20} />
{userStats.achievementsPointsEarnedSum.value} points
{userStats.achievementsPointsEarnedSum.value}
</p>
<p>
Top {userStats.achievementsPointsEarnedSum.topPercentile}%{" "}
<p title={t("ranking_updated_weekly")}>
{t("top_percentile", {
percentile:
userStats.achievementsPointsEarnedSum.topPercentile,
})}
</p>
</div>
<p>Unlock count: {userStats.unlockedAchievementSum}</p>
@@ -59,13 +62,20 @@ export function UserStatsBox() {
)}
<li>
<p className={styles.listItemTitle}>{t("games")}</p>
<h3 className={styles.listItemTitle}>{t("games")}</h3>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<p>
Total playtime:{" "}
{formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
{t("total_play_time", {
amount: formatPlayTime(
userStats.totalPlayTimeInSeconds.value
),
})}
</p>
<p title={t("ranking_updated_weekly")}>
{t("top_percentile", {
percentile: userStats.totalPlayTimeInSeconds.topPercentile,
})}
</p>
<p> Top {userStats.totalPlayTimeInSeconds.topPercentile}%</p>
</div>
</li>
</ul>