external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-15 04:32:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

show games library in a grid

Browse source
This commit is contained in:
Zamitto 2024-06-14 22:09:41 -03:00
parent 1997dbcd5d
commit aeaeb1f086
2 changed files with 17 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,12 +9,12 @@ import { useDate } from "@renderer/hooks";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { buildGameDetailsPath } from "@renderer/helpers"; import { buildGameDetailsPath } from "@renderer/helpers";
import { PersonIcon } from "@primer/octicons-react"; import { PersonIcon } from "@primer/octicons-react";
const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
export interface ProfileContentProps { export interface ProfileContentProps {
userProfile: UserProfile; userProfile: UserProfile;
} }
const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
export const ProfileContent = ({ userProfile }: ProfileContentProps) => { export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
const { t, i18n } = useTranslation("user_profile"); const { t, i18n } = useTranslation("user_profile");
@ -28,8 +28,11 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
const { formatDistance } = useDate(); const { formatDistance } = useDate();
const formatPlayTime = (game: ProfileGame) => { const formatPlayTime = () => {
const seconds = game.playTimeInSeconds; const seconds = userProfile.libraryGames.reduce(
(acc, game) => acc + game.playTimeInSeconds,
0
);
const minutes = seconds / 60; const minutes = seconds / 60;
if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) { if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
@ -123,6 +126,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
}} }}
> >
<h2>Games</h2> <h2>Games</h2>
<div <div
style={{ style={{
flex: 1, flex: 1,
@ -134,10 +138,11 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
{userProfile.libraryGames.length} {userProfile.libraryGames.length}
</h3> </h3>
</div> </div>
<small>Tempo total de jogo: {formatPlayTime()}</small>
<div <div
style={{ style={{
display: "flex", display: "grid",
flexDirection: "column", gridTemplateColumns: "auto auto auto",
gap: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT}px`,
}} }}
> >
@ -150,6 +155,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
padding: `${SPACING_UNIT + SPACING_UNIT / 2}px`, padding: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
}} }}
onClick={() => handleGameClick(game)} onClick={() => handleGameClick(game)}
title={game.title}
> >
{game.iconUrl ? ( {game.iconUrl ? (
<img <img
@ -160,16 +166,6 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
) : ( ) : (
<SteamLogo className={styles.libraryGameIcon} /> <SteamLogo className={styles.libraryGameIcon} />
)} )}
<div className={styles.gameInformation}>
<h4>{game.title}</h4>
<small>
{t("play_time", {
amount: formatPlayTime(game),
})}
</small>
</div>
</button> </button>
); );
})} })}

11
src/renderer/src/pages/profile/profile.css.tsx
View file

@ -60,15 +60,15 @@ export const contentSidebar = style({
"@media": { "@media": {
"(min-width: 768px)": { "(min-width: 768px)": {
width: "100%", width: "100%",
maxWidth: "200px", maxWidth: "150px",
}, },
"(min-width: 1024px)": { "(min-width: 1024px)": {
maxWidth: "300px", maxWidth: "250px",
width: "100%", width: "100%",
}, },
"(min-width: 1280px)": { "(min-width: 1280px)": {
width: "100%", width: "100%",
maxWidth: "400px", maxWidth: "350px",
}, },
}, },
}); });
@ -83,7 +83,7 @@ export const feedGameIcon = style({
export const libraryGameIcon = style({ export const libraryGameIcon = style({
height: "100%", height: "100%",
borderRadius: "50%", borderRadius: "4px",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
@ -110,8 +110,7 @@ export const gameListItem = style({
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
gap: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT}px`,
width: "100%", aspectRatio: "1",
height: "60px",
transition: "all ease 0.2s", transition: "all ease 0.2s",
cursor: "pointer", cursor: "pointer",
zIndex: "1", zIndex: "1",