mirror of
https://github.com/hydralauncher/hydra.git
synced 2026-01-24 11:21:02 +00:00
feat: ui adjustments and add friend playing game
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user