external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-12 19:22:28 +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
src={steamUrlBuilder.libraryHero(objectId)}
alt={gameTitle}
className={styles.hero}
className={styles.heroImage}
onLoad={handleHeroLoad}
/>
@ -431,7 +431,7 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
onScroll={onScroll}
className={styles.container}
>
<div ref={heroRef} className={styles.header}>
<div ref={heroRef} className={styles.hero}>
<div
style={{
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() {
return (
<div className={styles.container}>
<div className={styles.hero}>
<div className={styles.heroImage}>
<Skeleton className={styles.heroImageSkeleton} />
</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",
});
export const header = style({
display: "flex",
export const hero = style({
width: "100%",
height: `${HERO_HEIGHT}px`,
minHeight: `${HERO_HEIGHT}px`,
gap: `${SPACING_UNIT}px`,
display: "flex",
flexDirection: "column",
position: "relative",
transition: "all ease 0.2s",
@ -29,14 +29,22 @@ export const header = style({
},
});
export const hero = style({
position: "absolute",
inset: "0",
borderRadius: "4px",
objectFit: "cover",
cursor: "pointer",
export const heroImage = style({
width: "100%",
height: `${HERO_HEIGHT}px`,
minHeight: `${HERO_HEIGHT}px`,
objectFit: "cover",
objectPosition: "top",
transition: "all ease 0.2s",
position: "absolute",
zIndex: "0",
"@media": {
"(min-width: 1250px)": {
objectPosition: "center",
height: "350px",
minHeight: "350px",
},
},
});
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]);
const buildUserGameDetailsPath = (game: UserGame) => {
if (!userProfile?.hasActiveSubscription) {
if (!userProfile?.hasActiveSubscription || game.achievementCount === 0) {
return buildGameDetailsPath({
...game,
objectId: game.objectId,
@ -174,55 +174,56 @@ export function ProfileContent() {
{formatPlayTime(game.playTimeInSeconds)}
</small>
{userProfile.hasActiveSubscription && (
<div
style={{
color: "white",
width: "100%",
display: "flex",
flexDirection: "column",
}}
>
{userProfile.hasActiveSubscription &&
game.achievementCount > 0 && (
<div
style={{
color: "white",
width: "100%",
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
color: vars.color.muted,
flexDirection: "column",
}}
>
<div
style={{
display: "flex",
alignItems: "center",
gap: 8,
justifyContent: "space-between",
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>
{game.unlockedAchievementCount} /{" "}
{game.achievementCount}
{formatDownloadProgress(
game.unlockedAchievementCount /
game.achievementCount
)}
</span>
</div>
<span>
{formatDownloadProgress(
<progress
max={1}
value={
game.unlockedAchievementCount /
game.achievementCount
)}
</span>
game.achievementCount
}
className={styles.achievementsProgressBar}
/>
</div>
<progress
max={1}
value={
game.unlockedAchievementCount /
game.achievementCount
}
className={styles.achievementsProgressBar}
/>
</div>
)}
)}
</div>
<img