mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-02-02 16:23:48 +03:00
chore: merge with dev
This commit is contained in:
Chubby Granny Chaser
commit
7c87e121bc
@ -14,12 +14,14 @@ import {
|
||||
|
||||
import { routes } from "./routes";
|
||||
|
||||
import * as styles from "./sidebar.css";
|
||||
import "./sidebar.scss";
|
||||
|
||||
import { buildGameDetailsPath } from "@renderer/helpers";
|
||||
|
||||
import SteamLogo from "@renderer/assets/steam-logo.svg?react";
|
||||
import { SidebarProfile } from "./sidebar-profile";
|
||||
import { sortBy } from "lodash-es";
|
||||
import cn from "classnames";
|
||||
import { CommentDiscussionIcon } from "@primer/octicons-react";
|
||||
|
||||
const SIDEBAR_MIN_WIDTH = 200;
|
||||
@ -168,9 +170,9 @@ export function Sidebar() {
|
||||
return (
|
||||
<aside
|
||||
ref={sidebarRef}
|
||||
className={styles.sidebar({
|
||||
resizing: isResizing,
|
||||
darwin: window.electron.platform === "darwin",
|
||||
className={cn("sidebar", {
|
||||
"sidebar--resizing": isResizing,
|
||||
"sidebar--darwin": window.electron.platform === "darwin",
|
||||
})}
|
||||
style={{
|
||||
width: sidebarWidth,
|
||||
@ -183,19 +185,19 @@ export function Sidebar() {
|
||||
>
|
||||
<SidebarProfile />
|
||||
|
||||
<div className={styles.content}>
|
||||
<section className={styles.section}>
|
||||
<ul className={styles.menu}>
|
||||
<div className="sidebar__content">
|
||||
<section className="sidebar__section">
|
||||
<ul className="sidebar__menu">
|
||||
{routes.map(({ nameKey, path, render }) => (
|
||||
<li
|
||||
key={nameKey}
|
||||
className={styles.menuItem({
|
||||
active: location.pathname === path,
|
||||
className={cn("sidebar__menu-item", {
|
||||
"sidebar__menu-item--active": location.pathname === path,
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.menuItemButton}
|
||||
className="sidebar__menu-item-button"
|
||||
onClick={() => handleSidebarItemClick(path)}
|
||||
>
|
||||
{render()}
|
||||
@ -206,8 +208,8 @@ export function Sidebar() {
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<small className={styles.sectionTitle}>{t("my_library")}</small>
|
||||
<section className="sidebar__section">
|
||||
<small className="sidebar__section-title">{t("my_library")}</small>
|
||||
|
||||
<TextField
|
||||
ref={filterRef}
|
||||
@ -216,34 +218,35 @@ export function Sidebar() {
|
||||
theme="dark"
|
||||
/>
|
||||
|
||||
<ul className={styles.menu}>
|
||||
<ul className="sidebar__menu">
|
||||
{filteredLibrary.map((game) => (
|
||||
<li
|
||||
key={`${game.shop}-${game.objectId}`}
|
||||
className={styles.menuItem({
|
||||
active:
|
||||
key={game.id}
|
||||
className={cn("sidebar__menu-item", {
|
||||
"sidebar__menu-item--active":
|
||||
location.pathname ===
|
||||
`/game/${game.shop}/${game.objectId}`,
|
||||
muted: game.download?.status === "removed",
|
||||
"sidebar__menu-item--muted":
|
||||
game.download?.status === "removed",
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.menuItemButton}
|
||||
className="sidebar__menu-item-button"
|
||||
onClick={(event) => handleSidebarGameClick(event, game)}
|
||||
>
|
||||
{game.iconUrl ? (
|
||||
<img
|
||||
className={styles.gameIcon}
|
||||
className="sidebar__game-icon"
|
||||
src={game.iconUrl}
|
||||
alt={game.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<SteamLogo className={styles.gameIcon} />
|
||||
<SteamLogo className="sidebar__game-icon" />
|
||||
)}
|
||||
|
||||
<span className={styles.menuItemButtonLabel}>
|
||||
<span className="sidebar__menu-item-button-label">
|
||||
{getGameTitle(game)}
|
||||
</span>
|
||||
</button>
|
||||
@ -257,10 +260,10 @@ export function Sidebar() {
|
||||
{hasActiveSubscription && (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.helpButton}
|
||||
className="sidebar__help-button"
|
||||
data-open-support-chat
|
||||
>
|
||||
<div className={styles.helpButtonIcon}>
|
||||
<div className="sidebar__help-button-icon">
|
||||
<CommentDiscussionIcon size={14} />
|
||||
</div>
|
||||
<span>{t("need_help")}</span>
|
||||
@ -269,7 +272,7 @@ export function Sidebar() {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={styles.handle}
|
||||
className="sidebar__handle"
|
||||
onMouseDown={handleMouseDown}
|
||||
/>
|
||||
</aside>
|
||||
|
||||
@ -1,97 +0,0 @@
|
||||
import { keyframes, style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
|
||||
export const enter = keyframes({
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "translateY(100%)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 1,
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
});
|
||||
|
||||
export const exit = keyframes({
|
||||
"0%": {
|
||||
opacity: 1,
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 0,
|
||||
transform: "translateY(100%)",
|
||||
},
|
||||
});
|
||||
|
||||
export const toast = recipe({
|
||||
base: {
|
||||
animationDuration: "0.15s",
|
||||
animationTimingFunction: "ease-in-out",
|
||||
maxWidth: "420px",
|
||||
position: "absolute",
|
||||
backgroundColor: vars.color.background,
|
||||
borderRadius: "4px",
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
right: "0",
|
||||
bottom: "0",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
zIndex: vars.zIndex.toast,
|
||||
},
|
||||
variants: {
|
||||
closing: {
|
||||
true: {
|
||||
animationName: exit,
|
||||
transform: "translateY(100%)",
|
||||
},
|
||||
false: {
|
||||
animationName: enter,
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const toastContent = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
});
|
||||
|
||||
export const progress = style({
|
||||
width: "100%",
|
||||
height: "3px",
|
||||
"::-webkit-progress-bar": {
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
},
|
||||
"::-webkit-progress-value": {
|
||||
backgroundColor: vars.color.muted,
|
||||
},
|
||||
});
|
||||
|
||||
export const closeButton = style({
|
||||
color: vars.color.body,
|
||||
cursor: "pointer",
|
||||
transition: "all ease 0.15s",
|
||||
":hover": {
|
||||
color: vars.color.muted,
|
||||
},
|
||||
});
|
||||
|
||||
export const successIcon = style({
|
||||
color: vars.color.success,
|
||||
});
|
||||
|
||||
export const errorIcon = style({
|
||||
color: vars.color.danger,
|
||||
});
|
||||
|
||||
export const warningIcon = style({
|
||||
color: vars.color.warning,
|
||||
});
|
||||
@ -6,12 +6,13 @@ import {
|
||||
XIcon,
|
||||
} from "@primer/octicons-react";
|
||||
|
||||
import * as styles from "./toast.css";
|
||||
import { SPACING_UNIT } from "@renderer/theme.css";
|
||||
import "./toast.scss";
|
||||
import cn from "classnames";
|
||||
|
||||
export interface ToastProps {
|
||||
visible: boolean;
|
||||
message: string;
|
||||
title: string;
|
||||
message?: string;
|
||||
type: "success" | "error" | "warning";
|
||||
duration?: number;
|
||||
onClose: () => void;
|
||||
@ -21,9 +22,10 @@ const INITIAL_PROGRESS = 100;
|
||||
|
||||
export function Toast({
|
||||
visible,
|
||||
title,
|
||||
message,
|
||||
type,
|
||||
duration = 5000,
|
||||
duration = 2500,
|
||||
onClose,
|
||||
}: Readonly<ToastProps>) {
|
||||
const [isClosing, setIsClosing] = useState(false);
|
||||
@ -79,12 +81,16 @@ export function Toast({
|
||||
if (!visible) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.toast({ closing: isClosing })}>
|
||||
<div className={styles.toastContent}>
|
||||
<div
|
||||
className={cn("toast", {
|
||||
"toast--closing": isClosing,
|
||||
})}
|
||||
>
|
||||
<div className="toast__content">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
gap: `8px`,
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
@ -93,24 +99,26 @@ export function Toast({
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
gap: `8px`,
|
||||
}}
|
||||
>
|
||||
{type === "success" && (
|
||||
<CheckCircleFillIcon className={styles.successIcon} />
|
||||
<CheckCircleFillIcon className="toast__icon--success" />
|
||||
)}
|
||||
|
||||
{type === "error" && (
|
||||
<XCircleFillIcon className={styles.errorIcon} />
|
||||
<XCircleFillIcon className="toast__icon--error" />
|
||||
)}
|
||||
|
||||
{type === "warning" && <AlertIcon className={styles.warningIcon} />}
|
||||
{type === "warning" && (
|
||||
<AlertIcon className="toast__icon--warning" />
|
||||
)}
|
||||
|
||||
<span style={{ fontWeight: "bold", flex: 1 }}>{message}</span>
|
||||
<span style={{ fontWeight: "bold", flex: 1 }}>{title}</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={styles.closeButton}
|
||||
className="toast__close-button"
|
||||
onClick={startAnimateClosing}
|
||||
aria-label="Close toast"
|
||||
>
|
||||
@ -118,14 +126,11 @@ export function Toast({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This is a really really long message that should wrap to the next
|
||||
line
|
||||
</p>
|
||||
{message && <p>{message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<progress className={styles.progress} value={progress} max={100} />
|
||||
<progress className="toast__progress" value={progress} max={100} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,43 +1,38 @@
|
||||
import { useDate } from "@renderer/hooks";
|
||||
import type { UserAchievement } from "@types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import * as styles from "./achievements.css";
|
||||
import "./achievements.scss";
|
||||
import { EyeClosedIcon } from "@primer/octicons-react";
|
||||
import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
|
||||
import { useSubscription } from "@renderer/hooks/use-subscription";
|
||||
import { vars } from "@renderer/theme.css";
|
||||
|
||||
interface AchievementListProps {
|
||||
achievements: UserAchievement[];
|
||||
}
|
||||
|
||||
export function AchievementList({ achievements }: AchievementListProps) {
|
||||
export function AchievementList({
|
||||
achievements,
|
||||
}: Readonly<AchievementListProps>) {
|
||||
const { t } = useTranslation("achievement");
|
||||
const { showHydraCloudModal } = useSubscription();
|
||||
const { formatDateTime } = useDate();
|
||||
|
||||
return (
|
||||
<ul className={styles.list}>
|
||||
<ul className="achievements__list">
|
||||
{achievements.map((achievement) => (
|
||||
<li
|
||||
key={achievement.name}
|
||||
className={styles.listItem}
|
||||
style={{ display: "flex" }}
|
||||
>
|
||||
<li key={achievement.name} className="achievements__item">
|
||||
<img
|
||||
className={styles.listItemImage({
|
||||
unlocked: achievement.unlocked,
|
||||
})}
|
||||
className={`achievements__item-image ${!achievement.unlocked ? "achievements__item-image--locked" : ""}`}
|
||||
src={achievement.icon}
|
||||
alt={achievement.displayName}
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<div style={{ flex: 1 }}>
|
||||
<h4 style={{ display: "flex", alignItems: "center", gap: "4px" }}>
|
||||
<div className="achievements__item-content">
|
||||
<h4 className="achievements__item-title">
|
||||
{achievement.hidden && (
|
||||
<span
|
||||
style={{ display: "flex" }}
|
||||
className="achievements__item-hidden-icon"
|
||||
title={t("hidden_achievement_tooltip")}
|
||||
>
|
||||
<EyeClosedIcon size={12} />
|
||||
@ -47,48 +42,36 @@ export function AchievementList({ achievements }: AchievementListProps) {
|
||||
</h4>
|
||||
<p>{achievement.description}</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "8px",
|
||||
alignItems: "flex-end",
|
||||
}}
|
||||
>
|
||||
|
||||
<div className="achievements__item-meta">
|
||||
{achievement.points != undefined ? (
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center", gap: "4px" }}
|
||||
className="achievements__item-points"
|
||||
title={t("achievement_earn_points", {
|
||||
points: achievement.points,
|
||||
})}
|
||||
>
|
||||
<HydraIcon width={20} height={20} />
|
||||
<p style={{ fontSize: "1.1em" }}>{achievement.points}</p>
|
||||
<HydraIcon className="achievements__item-points-icon" />
|
||||
<p className="achievements__item-points-value">
|
||||
{achievement.points}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => showHydraCloudModal("achievements")}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "4px",
|
||||
cursor: "pointer",
|
||||
color: vars.color.warning,
|
||||
}}
|
||||
title={t("achievement_earn_points", {
|
||||
points: "???",
|
||||
})}
|
||||
className="achievements__item-points achievements__item-points--locked"
|
||||
title={t("achievement_earn_points", { points: "???" })}
|
||||
>
|
||||
<HydraIcon width={20} height={20} />
|
||||
<p style={{ fontSize: "1.1em" }}>???</p>
|
||||
<HydraIcon className="achievements__item-points-icon" />
|
||||
<p className="achievements__item-points-value">???</p>
|
||||
</button>
|
||||
)}
|
||||
{achievement.unlockTime != null && (
|
||||
<div
|
||||
className="achievements__item-unlock-time"
|
||||
title={t("unlocked_at", {
|
||||
date: formatDateTime(achievement.unlockTime),
|
||||
})}
|
||||
style={{ whiteSpace: "nowrap", gap: "4px", display: "flex" }}
|
||||
>
|
||||
<small>{formatDateTime(achievement.unlockTime)}</small>
|
||||
</div>
|
||||
|
||||
@ -12,9 +12,8 @@ import { Downloader, formatBytes, steamUrlBuilder } from "@shared";
|
||||
import { DOWNLOADER_NAME } from "@renderer/constants";
|
||||
import { useAppSelector, useDownload } from "@renderer/hooks";
|
||||
|
||||
import * as styles from "./download-group.css";
|
||||
import "./download-group.scss";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { SPACING_UNIT, vars } from "@renderer/theme.css";
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
@ -260,44 +259,26 @@ export function DownloadGroup({
|
||||
if (!library.length) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.downloadGroup}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
}}
|
||||
>
|
||||
<div className="download-group">
|
||||
<div className="download-group__header">
|
||||
<h2>{title}</h2>
|
||||
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: vars.color.border,
|
||||
height: "1px",
|
||||
}}
|
||||
/>
|
||||
<h3 style={{ fontWeight: "400" }}>{library.length}</h3>
|
||||
<div className="download-group__header-divider" />
|
||||
<h3 className="download-group__header-count">{library.length}</h3>
|
||||
</div>
|
||||
|
||||
<ul className={styles.downloads}>
|
||||
<ul className="download-group__downloads">
|
||||
{library.map((game) => {
|
||||
return (
|
||||
<li
|
||||
key={game.id}
|
||||
className={styles.download}
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<div className={styles.downloadCover}>
|
||||
<div className={styles.downloadCoverBackdrop}>
|
||||
<li key={game.id} className="download-group__item">
|
||||
<div className="download-group__cover">
|
||||
<div className="download-group__cover-backdrop">
|
||||
<img
|
||||
src={steamUrlBuilder.library(game.objectId)}
|
||||
className={styles.downloadCoverImage}
|
||||
className="download-group__cover-image"
|
||||
alt={game.title}
|
||||
/>
|
||||
|
||||
<div className={styles.downloadCoverContent}>
|
||||
<div className="download-group__cover-content">
|
||||
<Badge>
|
||||
{
|
||||
DOWNLOADER_NAME[
|
||||
@ -308,12 +289,12 @@ export function DownloadGroup({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.downloadRightContent}>
|
||||
<div className={styles.downloadDetails}>
|
||||
<div className={styles.downloadTitleWrapper}>
|
||||
<div className="download-group__right-content">
|
||||
<div className="download-group__details">
|
||||
<div className="download-group__title-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
className={styles.downloadTitle}
|
||||
className="download-group__title"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
buildGameDetailsPath({
|
||||
@ -337,15 +318,7 @@ export function DownloadGroup({
|
||||
sideOffset={-75}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "12px",
|
||||
right: "12px",
|
||||
borderRadius: "50%",
|
||||
border: "none",
|
||||
padding: "8px",
|
||||
minHeight: "unset",
|
||||
}}
|
||||
className="download-group__menu-button"
|
||||
theme="outline"
|
||||
>
|
||||
<ThreeBarsIcon />
|
||||
|
||||
@ -1,24 +1,18 @@
|
||||
import { useContext, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import * as styles from "./hero-panel.css";
|
||||
import { formatDownloadProgress } from "@renderer/helpers";
|
||||
import { useDate, useDownload, useFormat } from "@renderer/hooks";
|
||||
import { Link } from "@renderer/components";
|
||||
|
||||
import { gameDetailsContext } from "@renderer/context";
|
||||
import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
|
||||
import "./hero-panel-playtime.scss";
|
||||
|
||||
export function HeroPanelPlaytime() {
|
||||
const [lastTimePlayed, setLastTimePlayed] = useState("");
|
||||
|
||||
const { game, isGameRunning } = useContext(gameDetailsContext);
|
||||
|
||||
const { t } = useTranslation("game_details");
|
||||
|
||||
const { numberFormatter } = useFormat();
|
||||
|
||||
const { progress, lastPacket } = useDownload();
|
||||
|
||||
const { formatDistance } = useDate();
|
||||
|
||||
useEffect(() => {
|
||||
@ -56,8 +50,8 @@ export function HeroPanelPlaytime() {
|
||||
game.download?.status === "active" && lastPacket?.gameId === game.id;
|
||||
|
||||
const downloadInProgressInfo = (
|
||||
<div className={styles.downloadDetailsRow}>
|
||||
<Link to="/downloads" className={styles.downloadsLink}>
|
||||
<div className="hero-panel-playtime__download-details">
|
||||
<Link to="/downloads" className="hero-panel-playtime__downloads-link">
|
||||
{game.download?.status === "active"
|
||||
? t("download_in_progress")
|
||||
: t("download_paused")}
|
||||
@ -84,7 +78,6 @@ export function HeroPanelPlaytime() {
|
||||
return (
|
||||
<>
|
||||
<p>{t("playing_now")}</p>
|
||||
|
||||
{hasDownload && downloadInProgressInfo}
|
||||
</>
|
||||
);
|
||||
|
||||
@ -4,10 +4,10 @@ import { useTranslation } from "react-i18next";
|
||||
import { useDate, useDownload } from "@renderer/hooks";
|
||||
|
||||
import { HeroPanelActions } from "./hero-panel-actions";
|
||||
import * as styles from "./hero-panel.css";
|
||||
import { HeroPanelPlaytime } from "./hero-panel-playtime";
|
||||
|
||||
import { gameDetailsContext } from "@renderer/context";
|
||||
import "./hero-panel.scss";
|
||||
|
||||
export interface HeroPanelProps {
|
||||
isHeaderStuck: boolean;
|
||||
@ -54,30 +54,28 @@ export function HeroPanel({ isHeaderStuck }: HeroPanelProps) {
|
||||
game?.download?.status === "paused";
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{ backgroundColor: gameColor }}
|
||||
className={styles.panel({ stuck: isHeaderStuck })}
|
||||
>
|
||||
<div className={styles.content}>{getInfo()}</div>
|
||||
<div className={styles.actions}>
|
||||
<HeroPanelActions />
|
||||
</div>
|
||||
|
||||
{showProgressBar && (
|
||||
<progress
|
||||
max={1}
|
||||
value={
|
||||
isGameDownloading
|
||||
? lastPacket?.progress
|
||||
: game?.download?.progress
|
||||
}
|
||||
className={styles.progressBar({
|
||||
disabled: game?.download?.status === "paused",
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
style={{ backgroundColor: gameColor }}
|
||||
className={`hero-panel ${isHeaderStuck ? "hero-panel--stuck" : ""}`}
|
||||
>
|
||||
<div className="hero-panel__content">{getInfo()}</div>
|
||||
<div className="hero-panel__actions">
|
||||
<HeroPanelActions />
|
||||
</div>
|
||||
</>
|
||||
|
||||
{showProgressBar && (
|
||||
<progress
|
||||
max={1}
|
||||
value={
|
||||
isGameDownloading ? lastPacket?.progress : game?.download?.progress
|
||||
}
|
||||
className={`hero-panel__progress-bar ${
|
||||
game?.download?.status === "paused"
|
||||
? "hero-panel__progress-bar--disabled"
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@ import { useContext, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Modal, TextField } from "@renderer/components";
|
||||
import type { LibraryGame } from "@types";
|
||||
import * as styles from "./game-options-modal.css";
|
||||
import { gameDetailsContext } from "@renderer/context";
|
||||
import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
|
||||
import { useDownload, useToast, useUserDetails } from "@renderer/hooks";
|
||||
@ -10,6 +9,7 @@ import { RemoveGameFromLibraryModal } from "./remove-from-library-modal";
|
||||
import { ResetAchievementsModal } from "./reset-achievements-modal";
|
||||
import { FileDirectoryIcon, FileIcon } from "@primer/octicons-react";
|
||||
import { debounce } from "lodash-es";
|
||||
import "./game-options-modal.scss";
|
||||
|
||||
export interface GameOptionsModalProps {
|
||||
visible: boolean;
|
||||
@ -21,7 +21,7 @@ export function GameOptionsModal({
|
||||
visible,
|
||||
game,
|
||||
onClose,
|
||||
}: GameOptionsModalProps) {
|
||||
}: Readonly<GameOptionsModalProps>) {
|
||||
const { t } = useTranslation("game_details");
|
||||
|
||||
const { showSuccessToast, showErrorToast } = useToast();
|
||||
@ -192,14 +192,12 @@ export function GameOptionsModal({
|
||||
onClose={() => setShowDeleteModal(false)}
|
||||
deleteGame={handleDeleteGame}
|
||||
/>
|
||||
|
||||
<RemoveGameFromLibraryModal
|
||||
visible={showRemoveGameModal}
|
||||
onClose={() => setShowRemoveGameModal(false)}
|
||||
removeGameFromLibrary={handleRemoveGameFromLibrary}
|
||||
game={game}
|
||||
/>
|
||||
|
||||
<ResetAchievementsModal
|
||||
visible={showResetAchievementsModal}
|
||||
onClose={() => setShowResetAchievementsModal(false)}
|
||||
@ -213,59 +211,66 @@ export function GameOptionsModal({
|
||||
onClose={onClose}
|
||||
large={true}
|
||||
>
|
||||
<div className={styles.optionsContainer}>
|
||||
<div className={styles.gameOptionHeader}>
|
||||
<h2>{t("executable_section_title")}</h2>
|
||||
<h4 className={styles.gameOptionHeaderDescription}>
|
||||
{t("executable_section_description")}
|
||||
</h4>
|
||||
<div className="game-options-modal__container">
|
||||
<div className="game-options-modal__section">
|
||||
<div className="game-options-modal__header">
|
||||
<h2>{t("executable_section_title")}</h2>
|
||||
<h4 className="game-options-modal__header-description">
|
||||
{t("executable_section_description")}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="game-options-modal__executable-field">
|
||||
<TextField
|
||||
value={game.executablePath || ""}
|
||||
readOnly
|
||||
theme="dark"
|
||||
disabled
|
||||
placeholder={t("no_executable_selected")}
|
||||
rightContent={
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
theme="outline"
|
||||
onClick={handleChangeExecutableLocation}
|
||||
>
|
||||
<FileIcon />
|
||||
{t("select_executable")}
|
||||
</Button>
|
||||
{game.executablePath && (
|
||||
<Button
|
||||
onClick={handleClearExecutablePath}
|
||||
theme="outline"
|
||||
>
|
||||
{t("clear")}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{game.executablePath && (
|
||||
<div className="game-options-modal__executable-field-buttons">
|
||||
<Button
|
||||
type="button"
|
||||
theme="outline"
|
||||
onClick={handleOpenGameExecutablePath}
|
||||
>
|
||||
{t("open_folder")}
|
||||
</Button>
|
||||
<Button onClick={handleCreateShortcut} theme="outline">
|
||||
{t("create_shortcut")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TextField
|
||||
value={game.executablePath || ""}
|
||||
readOnly
|
||||
theme="dark"
|
||||
disabled
|
||||
placeholder={t("no_executable_selected")}
|
||||
rightContent={
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
theme="outline"
|
||||
onClick={handleChangeExecutableLocation}
|
||||
>
|
||||
<FileIcon />
|
||||
{t("select_executable")}
|
||||
</Button>
|
||||
{game.executablePath && (
|
||||
<Button onClick={handleClearExecutablePath} theme="outline">
|
||||
{t("clear")}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{game.executablePath && (
|
||||
<div className={styles.gameOptionRow}>
|
||||
<Button
|
||||
type="button"
|
||||
theme="outline"
|
||||
onClick={handleOpenGameExecutablePath}
|
||||
>
|
||||
{t("open_folder")}
|
||||
</Button>
|
||||
<Button onClick={handleCreateShortcut} theme="outline">
|
||||
{t("create_shortcut")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{shouldShowWinePrefixConfiguration && (
|
||||
<div className={styles.optionsContainer}>
|
||||
<div className={styles.gameOptionHeader}>
|
||||
<div className="game-options-modal__wine-prefix">
|
||||
<div className="game-options-modal__header">
|
||||
<h2>{t("wine_prefix")}</h2>
|
||||
<h4 className={styles.gameOptionHeaderDescription}>
|
||||
<h4 className="game-options-modal__header-description">
|
||||
{t("wine_prefix_description")}
|
||||
</h4>
|
||||
</div>
|
||||
@ -300,11 +305,13 @@ export function GameOptionsModal({
|
||||
)}
|
||||
|
||||
{shouldShowLaunchOptionsConfiguration && (
|
||||
<div className={styles.gameOptionHeader}>
|
||||
<h2>{t("launch_options")}</h2>
|
||||
<h4 className={styles.gameOptionHeaderDescription}>
|
||||
{t("launch_options_description")}
|
||||
</h4>
|
||||
<div className="game-options-modal__launch-options">
|
||||
<div className="game-options-modal__header">
|
||||
<h2>{t("launch_options")}</h2>
|
||||
<h4 className="game-options-modal__header-description">
|
||||
{t("launch_options_description")}
|
||||
</h4>
|
||||
</div>
|
||||
<TextField
|
||||
value={launchOptions}
|
||||
theme="dark"
|
||||
@ -321,72 +328,76 @@ export function GameOptionsModal({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={styles.gameOptionHeader}>
|
||||
<h2>{t("downloads_secion_title")}</h2>
|
||||
<h4 className={styles.gameOptionHeaderDescription}>
|
||||
{t("downloads_section_description")}
|
||||
</h4>
|
||||
<div className="game-options-modal__downloads">
|
||||
<div className="game-options-modal__header">
|
||||
<h2>{t("downloads_secion_title")}</h2>
|
||||
<h4 className="game-options-modal__header-description">
|
||||
{t("downloads_section_description")}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="game-options-modal__row">
|
||||
<Button
|
||||
onClick={() => setShowRepacksModal(true)}
|
||||
theme="outline"
|
||||
disabled={deleting || isGameDownloading || !repacks.length}
|
||||
>
|
||||
{t("open_download_options")}
|
||||
</Button>
|
||||
{game.download?.downloadPath && (
|
||||
<Button
|
||||
onClick={handleOpenDownloadFolder}
|
||||
theme="outline"
|
||||
disabled={deleting}
|
||||
>
|
||||
{t("open_download_location")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.gameOptionRow}>
|
||||
<Button
|
||||
onClick={() => setShowRepacksModal(true)}
|
||||
theme="outline"
|
||||
disabled={deleting || isGameDownloading || !repacks.length}
|
||||
>
|
||||
{t("open_download_options")}
|
||||
</Button>
|
||||
{game.download?.downloadPath && (
|
||||
<div className="game-options-modal__danger-zone">
|
||||
<div className="game-options-modal__header">
|
||||
<h2>{t("danger_zone_section_title")}</h2>
|
||||
<h4 className="game-options-modal__danger-zone-description">
|
||||
{t("danger_zone_section_description")}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="game-options-modal__danger-zone-buttons">
|
||||
<Button
|
||||
onClick={handleOpenDownloadFolder}
|
||||
theme="outline"
|
||||
onClick={() => setShowRemoveGameModal(true)}
|
||||
theme="danger"
|
||||
disabled={deleting}
|
||||
>
|
||||
{t("open_download_location")}
|
||||
{t("remove_from_library")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.gameOptionHeader}>
|
||||
<h2>{t("danger_zone_section_title")}</h2>
|
||||
<h4 className={styles.gameOptionHeaderDescription}>
|
||||
{t("danger_zone_section_description")}
|
||||
</h4>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setShowResetAchievementsModal(true)}
|
||||
theme="danger"
|
||||
disabled={
|
||||
deleting ||
|
||||
isDeletingAchievements ||
|
||||
!hasAchievements ||
|
||||
!userDetails
|
||||
}
|
||||
>
|
||||
{t("reset_achievements")}
|
||||
</Button>
|
||||
|
||||
<div className={styles.gameOptionRow}>
|
||||
<Button
|
||||
onClick={() => setShowRemoveGameModal(true)}
|
||||
theme="danger"
|
||||
disabled={deleting}
|
||||
>
|
||||
{t("remove_from_library")}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => setShowResetAchievementsModal(true)}
|
||||
theme="danger"
|
||||
disabled={
|
||||
deleting ||
|
||||
isDeletingAchievements ||
|
||||
!hasAchievements ||
|
||||
!userDetails
|
||||
}
|
||||
>
|
||||
{t("reset_achievements")}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
theme="danger"
|
||||
disabled={
|
||||
isGameDownloading || deleting || !game.download?.downloadPath
|
||||
}
|
||||
>
|
||||
{t("remove_files")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
theme="danger"
|
||||
disabled={
|
||||
isGameDownloading || deleting || !game.download?.downloadPath
|
||||
}
|
||||
>
|
||||
{t("remove_files")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@ -7,7 +7,6 @@ import type {
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Link } from "@renderer/components";
|
||||
|
||||
import * as styles from "./sidebar.css";
|
||||
import { gameDetailsContext } from "@renderer/context";
|
||||
import { useDate, useFormat, useUserDetails } from "@renderer/hooks";
|
||||
import {
|
||||
@ -20,8 +19,8 @@ import { HowLongToBeatSection } from "./how-long-to-beat-section";
|
||||
import { howLongToBeatEntriesTable } from "@renderer/dexie";
|
||||
import { SidebarSection } from "../sidebar-section/sidebar-section";
|
||||
import { buildGameAchievementPath } from "@renderer/helpers";
|
||||
import { SPACING_UNIT } from "@renderer/theme.css";
|
||||
import { useSubscription } from "@renderer/hooks/use-subscription";
|
||||
import "./sidebar.scss";
|
||||
|
||||
const achievementsPlaceholder: UserAchievement[] = [
|
||||
{
|
||||
@ -64,7 +63,6 @@ export function Sidebar() {
|
||||
}>({ isLoading: true, data: null });
|
||||
|
||||
const { userDetails, hasActiveSubscription } = useUserDetails();
|
||||
|
||||
const [activeRequirement, setActiveRequirement] =
|
||||
useState<keyof SteamAppDetails["pc_requirements"]>("minimum");
|
||||
|
||||
@ -72,10 +70,8 @@ export function Sidebar() {
|
||||
useContext(gameDetailsContext);
|
||||
|
||||
const { showHydraCloudModal } = useSubscription();
|
||||
|
||||
const { t } = useTranslation("game_details");
|
||||
const { formatDateTime } = useDate();
|
||||
|
||||
const { numberFormatter } = useFormat();
|
||||
|
||||
useEffect(() => {
|
||||
@ -118,7 +114,7 @@ export function Sidebar() {
|
||||
}, [objectId, shop, gameTitle]);
|
||||
|
||||
return (
|
||||
<aside className={styles.contentSidebar}>
|
||||
<aside className="content-sidebar">
|
||||
{userDetails === null && (
|
||||
<SidebarSection title={t("achievements")}>
|
||||
<div
|
||||
@ -133,21 +129,21 @@ export function Sidebar() {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
gap: "8px",
|
||||
}}
|
||||
>
|
||||
<LockIcon size={36} />
|
||||
<h3>{t("sign_in_to_see_achievements")}</h3>
|
||||
</div>
|
||||
<ul className={styles.list} style={{ filter: "blur(4px)" }}>
|
||||
{achievementsPlaceholder.map((achievement, index) => (
|
||||
<li key={index}>
|
||||
<div className={styles.listItem}>
|
||||
<ul className="list" style={{ filter: "blur(4px)" }}>
|
||||
{achievementsPlaceholder.map((achievement) => (
|
||||
<li key={achievement.displayName}>
|
||||
<div className="list__item">
|
||||
<img
|
||||
style={{ filter: "blur(8px)" }}
|
||||
className={styles.listItemImage({
|
||||
unlocked: achievement.unlocked,
|
||||
})}
|
||||
className={`list__item-image ${
|
||||
achievement.unlocked ? "" : "list__item-image--locked"
|
||||
}`}
|
||||
src={achievement.icon}
|
||||
alt={achievement.displayName}
|
||||
/>
|
||||
@ -164,6 +160,7 @@ export function Sidebar() {
|
||||
</ul>
|
||||
</SidebarSection>
|
||||
)}
|
||||
|
||||
{userDetails && achievements && achievements.length > 0 && (
|
||||
<SidebarSection
|
||||
title={t("achievements_count", {
|
||||
@ -171,10 +168,10 @@ export function Sidebar() {
|
||||
achievementsCount: achievements.length,
|
||||
})}
|
||||
>
|
||||
<ul className={styles.list}>
|
||||
<ul className="list">
|
||||
{!hasActiveSubscription && (
|
||||
<button
|
||||
className={styles.subscriptionRequiredButton}
|
||||
className="subscription-required-button"
|
||||
onClick={() => showHydraCloudModal("achievements")}
|
||||
>
|
||||
<CloudOfflineIcon size={16} />
|
||||
@ -182,21 +179,21 @@ export function Sidebar() {
|
||||
</button>
|
||||
)}
|
||||
|
||||
{achievements.slice(0, 4).map((achievement, index) => (
|
||||
<li key={index}>
|
||||
{achievements.slice(0, 4).map((achievement) => (
|
||||
<li key={achievement.displayName}>
|
||||
<Link
|
||||
to={buildGameAchievementPath({
|
||||
shop: shop,
|
||||
objectId: objectId!,
|
||||
title: gameTitle,
|
||||
})}
|
||||
className={styles.listItem}
|
||||
className="list__item"
|
||||
title={achievement.description}
|
||||
>
|
||||
<img
|
||||
className={styles.listItemImage({
|
||||
unlocked: achievement.unlocked,
|
||||
})}
|
||||
className={`list__item-image ${
|
||||
achievement.unlocked ? "" : "list__item-image--locked"
|
||||
}`}
|
||||
src={achievement.icon}
|
||||
alt={achievement.displayName}
|
||||
/>
|
||||
@ -226,17 +223,17 @@ export function Sidebar() {
|
||||
|
||||
{stats && (
|
||||
<SidebarSection title={t("stats")}>
|
||||
<div className={styles.statsSection}>
|
||||
<div className={styles.statsCategory}>
|
||||
<p className={styles.statsCategoryTitle}>
|
||||
<div className="stats__section">
|
||||
<div className="stats__category">
|
||||
<p className="stats__category-title">
|
||||
<DownloadIcon size={18} />
|
||||
{t("download_count")}
|
||||
</p>
|
||||
<p>{numberFormatter.format(stats?.downloadCount)}</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.statsCategory}>
|
||||
<p className={styles.statsCategoryTitle}>
|
||||
<div className="stats__category">
|
||||
<p className="stats__category-title">
|
||||
<PeopleIcon size={18} />
|
||||
{t("player_count")}
|
||||
</p>
|
||||
@ -252,9 +249,9 @@ export function Sidebar() {
|
||||
/>
|
||||
|
||||
<SidebarSection title={t("requirements")}>
|
||||
<div className={styles.requirementButtonContainer}>
|
||||
<div className="requirement__button-container">
|
||||
<Button
|
||||
className={styles.requirementButton}
|
||||
className="requirement__button"
|
||||
onClick={() => setActiveRequirement("minimum")}
|
||||
theme={activeRequirement === "minimum" ? "primary" : "outline"}
|
||||
>
|
||||
@ -262,7 +259,7 @@ export function Sidebar() {
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={styles.requirementButton}
|
||||
className="requirement__button"
|
||||
onClick={() => setActiveRequirement("recommended")}
|
||||
theme={activeRequirement === "recommended" ? "primary" : "outline"}
|
||||
>
|
||||
@ -271,7 +268,7 @@ export function Sidebar() {
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={styles.requirementsDetails}
|
||||
className="requirement__details"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
shopDetails?.pc_requirements?.[activeRequirement] ??
|
||||
|
||||
Loading…
Reference in New Issue
Block a user