diff --git a/src/renderer/src/components/game-context-menu/game-context-menu.tsx b/src/renderer/src/components/game-context-menu/game-context-menu.tsx
index 694012b7..782857a9 100644
--- a/src/renderer/src/components/game-context-menu/game-context-menu.tsx
+++ b/src/renderer/src/components/game-context-menu/game-context-menu.tsx
@@ -70,8 +70,10 @@ export function GameContextMenu({
onClick: () => {
if (isGameRunning) {
void handleCloseGame();
- } else {
+ } else if (canPlay) {
void handlePlayGame();
+ } else {
+ handleOpenDownloadOptions();
}
},
disabled: isDeleting,
diff --git a/src/renderer/src/pages/library/library-game-card-large.scss b/src/renderer/src/pages/library/library-game-card-large.scss
index 0be1e907..700c7d0b 100644
--- a/src/renderer/src/pages/library/library-game-card-large.scss
+++ b/src/renderer/src/pages/library/library-game-card-large.scss
@@ -40,8 +40,7 @@
}
&:hover {
- transform: scale(1.05);
- transform: translateY(-2px);
+ transform: scale(1.01);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.1);
}
@@ -66,9 +65,9 @@
bottom: 0;
background: linear-gradient(
0deg,
- rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.2) 50%,
- rgba(0, 0, 0, 0.5) 100%
+ rgba(0, 0, 0, 0.3) 100%
);
z-index: 1;
}
@@ -154,9 +153,9 @@
&__info-bar {
display: flex;
- justify-content: space-between;
- align-items: flex-end;
+ align-items: center;
gap: calc(globals.$spacing-unit * 2);
+ justify-content: flex-end;
}
&__playtime {
@@ -187,7 +186,8 @@
flex-direction: column;
gap: 6px;
padding: 6px 12px;
- width: 100%;
+ flex: 1 1 auto;
+ min-width: 0;
}
&__achievement-header {
@@ -261,7 +261,7 @@
font-size: 14px;
font-weight: 600;
transition: all ease 0.2s;
- flex-shrink: 0;
+ flex: 0 0 auto;
&:hover {
background: rgba(255, 255, 255, 0.15);
diff --git a/src/renderer/src/pages/library/library-game-card-large.tsx b/src/renderer/src/pages/library/library-game-card-large.tsx
index cc1c659d..3c9285e9 100644
--- a/src/renderer/src/pages/library/library-game-card-large.tsx
+++ b/src/renderer/src/pages/library/library-game-card-large.tsx
@@ -9,9 +9,11 @@ import {
AlertFillIcon,
ThreeBarsIcon,
TrophyIcon,
+ XIcon,
} from "@primer/octicons-react";
import { useTranslation } from "react-i18next";
import { useCallback, useState } from "react";
+import { useGameActions } from "@renderer/components/game-context-menu/use-game-actions";
import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
import { GameContextMenu } from "@renderer/components";
import "./library-game-card-large.scss";
@@ -66,18 +68,32 @@ export function LibraryGameCardLarge({ game }: LibraryGameCardLargeProps) {
navigate(buildGameDetailsPath(game));
};
+ const {
+ handlePlayGame,
+ handleOpenDownloadOptions,
+ handleCloseGame,
+ isGameRunning,
+ } = useGameActions(game);
+
const handleActionClick = async (e: React.MouseEvent) => {
e.stopPropagation();
- if (game.executablePath) {
- window.electron.openGame(
- game.shop,
- game.objectId,
- game.executablePath,
- game.launchOptions
- );
- } else {
- navigate(buildGameDetailsPath(game));
+ if (isGameRunning) {
+ try {
+ await handleCloseGame();
+ } catch (e) {
+ void e;
+ }
+ return;
+ }
+ try {
+ await handlePlayGame();
+ } catch (err) {
+ try {
+ handleOpenDownloadOptions();
+ } catch (e) {
+ void e;
+ }
}
};
@@ -215,6 +231,11 @@ export function LibraryGameCardLarge({ game }: LibraryGameCardLargeProps) {
/>
{t("downloading")}
>
+ ) : isGameRunning ? (
+ <>
+
+ {t("close")}
+ >
) : game.executablePath ? (
<>
diff --git a/src/renderer/src/pages/library/library-game-card.scss b/src/renderer/src/pages/library/library-game-card.scss
index d6bf8c6d..aa957d12 100644
--- a/src/renderer/src/pages/library/library-game-card.scss
+++ b/src/renderer/src/pages/library/library-game-card.scss
@@ -37,7 +37,7 @@
}
&:hover {
- transform: scale(1.05);
+ transform: scale(1.02);
}
&:hover::before {
@@ -215,8 +215,8 @@
-webkit-backdrop-filter: blur(8px);
border: solid 1px rgba(255, 255, 255, 0.15);
border-radius: 4px;
- width: 32px;
- height: 32px;
+ width: 28px;
+ height: 28px;
display: flex;
align-items: center;
justify-content: center;