external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-14 20:22:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: achievements adjustments

Browse source
This commit is contained in:
Zamitto 2024-10-16 12:37:44 -03:00
parent a498f9dd80
commit 108b2552b5
4 changed files with 55 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/src/pages/achievements/achievements-content.tsx
View file

@ -422,7 +422,7 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
<img <img
src={steamUrlBuilder.libraryHero(objectId)} src={steamUrlBuilder.libraryHero(objectId)}
alt={gameTitle} alt={gameTitle}
className={styles.hero} className={styles.heroImage}
onLoad={handleHeroLoad} onLoad={handleHeroLoad}
/> />
@ -431,7 +431,7 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
onScroll={onScroll} onScroll={onScroll}
className={styles.container} className={styles.container}
> >
<div ref={heroRef} className={styles.header}> <div ref={heroRef} className={styles.hero}>
<div <div
style={{ style={{
backgroundColor: gameColor, backgroundColor: gameColor,

2
src/renderer/src/pages/achievements/achievements-skeleton.tsx
View file

@ -4,7 +4,7 @@ import * as styles from "./achievements.css";
export function AchievementsSkeleton() { export function AchievementsSkeleton() {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.hero}> <div className={styles.heroImage}>
<Skeleton className={styles.heroImageSkeleton} /> <Skeleton className={styles.heroImageSkeleton} />
</div> </div>
<div className={styles.heroPanelSkeleton}></div> <div className={styles.heroPanelSkeleton}></div>

26
src/renderer/src/pages/achievements/achievements.css.ts
View file

@ -13,11 +13,11 @@ export const wrapper = style({
transition: "all ease 0.3s", transition: "all ease 0.3s",
}); });
export const header = style({ export const hero = style({
display: "flex", width: "100%",
height: `${HERO_HEIGHT}px`, height: `${HERO_HEIGHT}px`,
minHeight: `${HERO_HEIGHT}px`, minHeight: `${HERO_HEIGHT}px`,
gap: `${SPACING_UNIT}px`, display: "flex",
flexDirection: "column", flexDirection: "column",
position: "relative", position: "relative",
transition: "all ease 0.2s", transition: "all ease 0.2s",
@ -29,14 +29,22 @@ export const header = style({
}, },
}); });
export const hero = style({ export const heroImage = style({
position: "absolute",
inset: "0",
borderRadius: "4px",
objectFit: "cover",
cursor: "pointer",
width: "100%", width: "100%",
height: `${HERO_HEIGHT}px`,
minHeight: `${HERO_HEIGHT}px`,
objectFit: "cover",
objectPosition: "top",
transition: "all ease 0.2s", transition: "all ease 0.2s",
position: "absolute",
zIndex: "0",
"@media": {
"(min-width: 1250px)": {
objectPosition: "center",
height: "350px",
minHeight: "350px",
},
},
}); });
export const heroContent = style({ export const heroContent = style({

69
src/renderer/src/pages/profile/profile-content/profile-content.tsx
View file

@ -46,7 +46,7 @@ export function ProfileContent() {
}, [userProfile]); }, [userProfile]);
const buildUserGameDetailsPath = (game: UserGame) => { const buildUserGameDetailsPath = (game: UserGame) => {
if (!userProfile?.hasActiveSubscription) { if (!userProfile?.hasActiveSubscription || game.achievementCount === 0) {
return buildGameDetailsPath({ return buildGameDetailsPath({
...game, ...game,
objectId: game.objectId, objectId: game.objectId,
@ -174,55 +174,56 @@ export function ProfileContent() {
{formatPlayTime(game.playTimeInSeconds)} {formatPlayTime(game.playTimeInSeconds)}
</small> </small>
{userProfile.hasActiveSubscription && ( {userProfile.hasActiveSubscription &&
<div game.achievementCount > 0 && (
style={{
color: "white",
width: "100%",
display: "flex",
flexDirection: "column",
}}
>
<div <div
style={{ style={{
color: "white",
width: "100%",
display: "flex", display: "flex",
justifyContent: "space-between", flexDirection: "column",
marginBottom: 8,
color: vars.color.muted,
}} }}
> >
<div <div
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", justifyContent: "space-between",
gap: 8, marginBottom: 8,
color: vars.color.muted,
}} }}
> >
<TrophyIcon size={13} /> <div
style={{
display: "flex",
alignItems: "center",
gap: 8,
}}
>
<TrophyIcon size={13} />
<span>
{game.unlockedAchievementCount} /{" "}
{game.achievementCount}
</span>
</div>
<span> <span>
{game.unlockedAchievementCount} /{" "} {formatDownloadProgress(
{game.achievementCount} game.unlockedAchievementCount /
game.achievementCount
)}
</span> </span>
</div> </div>
<span> <progress
{formatDownloadProgress( max={1}
value={
game.unlockedAchievementCount / game.unlockedAchievementCount /
game.achievementCount game.achievementCount
)} }
</span> className={styles.achievementsProgressBar}
/>
</div> </div>
)}
<progress
max={1}
value={
game.unlockedAchievementCount /
game.achievementCount
}
className={styles.achievementsProgressBar}
/>
</div>
)}
</div> </div>
<img <img