external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: adjustments

Browse source
This commit is contained in:
Zamitto 2024-10-19 01:01:14 -03:00
parent 6c6d13e387
commit 584f725eda
2 changed files with 105 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -33,11 +33,12 @@ interface AchievementListProps {
otherUser: UserInfo | null;
}
interface AchievementPanelProps {
interface AchievementSummaryProps {
user: UserInfo;
isComparison?: boolean;
}
function AchievementPanel({ user }: AchievementPanelProps) {
function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
const { userDetails, hasActiveSubscription } = useUserDetails();
const userTotalAchievementCount = user.achievements.length;
@ -61,8 +62,55 @@ function AchievementPanel({ user }: AchievementPanelProps) {
);
};
if (userDetails?.id == user.userId && !hasActiveSubscription) {
return <></>;
if (
isComparison &&
userDetails?.id == user.userId &&
!hasActiveSubscription
) {
return (
<div
style={{
display: "flex",
gap: `${SPACING_UNIT * 2}px`,
alignItems: "center",
position: "relative",
padding: `${SPACING_UNIT}px`,
}}
>
<div
style={{
position: "absolute",
zIndex: 2,
inset: 0,
width: "100%",
height: "100%",
background: "rgba(0, 0, 0, 0.7)",
display: "flex",
alignItems: "center",
flexDirection: "row",
gap: `${SPACING_UNIT}px`,
borderRadius: "4px",
justifyContent: "center",
}}
>
<LockIcon size={24} />
<h3>Assine o HYDRA CLOUD para comparar suas conquistas!!!!</h3>
</div>
<div
style={{
display: "flex",
gap: `${SPACING_UNIT * 2}px`,
alignItems: "center",
height: "62px",
position: "relative",
filter: "blur(4px)",
}}
>
{getProfileImage(user)}
<h1 style={{ marginBottom: "8px" }}>{user.displayName}</h1>
</div>
</div>
);
}
return (
@ -71,6 +119,7 @@ function AchievementPanel({ user }: AchievementPanelProps) {
display: "flex",
gap: `${SPACING_UNIT * 2}px`,
alignItems: "center",
padding: `${SPACING_UNIT}px`,
}}
>
{getProfileImage(user)}
@ -126,7 +175,7 @@ function AchievementList({ user, otherUser }: AchievementListProps) {
const { t } = useTranslation("achievement");
const { formatDateTime } = useDate();
const { userDetails } = useUserDetails();
const { hasActiveSubscription } = useUserDetails();
if (!otherUserAchievements || otherUserAchievements.length === 0) {
return (
@ -167,7 +216,12 @@ function AchievementList({ user, otherUser }: AchievementListProps) {
<li
key={index}
className={styles.listItem}
style={{ display: "grid", gridTemplateColumns: "3fr 1fr 1fr" }}
style={{
display: "grid",
gridTemplateColumns: hasActiveSubscription
? "3fr 1fr 1fr"
: "3fr 2fr",
}}
>
<div
style={{
@ -191,6 +245,33 @@ function AchievementList({ user, otherUser }: AchievementListProps) {
</div>
</div>
{hasActiveSubscription ? (
achievements[index].unlocked ? (
<div
style={{
whiteSpace: "nowrap",
display: "flex",
flexDirection: "row",
gap: `${SPACING_UNIT}px`,
justifyContent: "center",
}}
>
<CheckCircleIcon />
<small>{formatDateTime(achievements[index].unlockTime!)}</small>
</div>
) : (
<div
style={{
display: "flex",
padding: `${SPACING_UNIT}px`,
justifyContent: "center",
}}
>
<LockIcon />
</div>
)
) : null}
{otherUserAchievement.unlocked ? (
<div
style={{
@ -215,31 +296,6 @@ function AchievementList({ user, otherUser }: AchievementListProps) {
<LockIcon />
</div>
)}
{userDetails?.subscription && achievements[index].unlocked ? (
<div
style={{
whiteSpace: "nowrap",
display: "flex",
flexDirection: "row",
gap: `${SPACING_UNIT}px`,
justifyContent: "center",
}}
>
<CheckCircleIcon />
<small>{formatDateTime(achievements[index].unlockTime!)}</small>
</div>
) : (
<div
style={{
display: "flex",
padding: `${SPACING_UNIT}px`,
justifyContent: "center",
}}
>
<LockIcon />
</div>
)}
</li>
))}
</ul>
@ -270,7 +326,7 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
const dispatch = useAppDispatch();
const { userDetails } = useUserDetails();
const { userDetails, hasActiveSubscription } = useUserDetails();
useEffect(() => {
if (gameTitle) {
@ -359,19 +415,20 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
display: "flex",
flexDirection: "column",
width: "100%",
gap: `${SPACING_UNIT * 2}px`,
padding: `${SPACING_UNIT * 2}px`,
gap: `${SPACING_UNIT}px`,
padding: `${SPACING_UNIT}px`,
}}
>
<AchievementPanel
<AchievementSummary
user={{
...userDetails,
userId: userDetails.id,
achievements: sortedAchievements,
}}
isComparison={otherUser !== null}
/>
{otherUser && <AchievementPanel user={otherUser} />}
{otherUser && <AchievementSummary user={otherUser} />}
</div>
</div>
@ -380,22 +437,26 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
<div
style={{
display: "grid",
gridTemplateColumns: "3fr 1fr 1fr",
gridTemplateColumns: hasActiveSubscription
? "3fr 1fr 1fr"
: "3fr 2fr",
gap: `${SPACING_UNIT * 2}px`,
padding: `${SPACING_UNIT}px ${SPACING_UNIT * 3}px`,
}}
>
<div></div>
{hasActiveSubscription && (
<div style={{ display: "flex", justifyContent: "center" }}>
{getProfileImage({
...userDetails,
userId: userDetails.id,
achievements: sortedAchievements,
})}
</div>
)}
<div style={{ display: "flex", justifyContent: "center" }}>
{getProfileImage(otherUser)}
</div>
<div style={{ display: "flex", justifyContent: "center" }}>
{getProfileImage({
...userDetails,
userId: userDetails.id,
achievements: sortedAchievements,
})}
</div>
</div>
</div>
)}

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

@ -52,7 +52,6 @@ export const heroImage = style({
export const heroContent = style({
padding: `${SPACING_UNIT * 2}px`,
height: "100%",
width: "100%",
display: "flex",
justifyContent: "space-between",