{Array.from({ length: 6 }).map((_, index) => (
))}
diff --git a/src/renderer/src/pages/game-details/game-details.css.ts b/src/renderer/src/pages/game-details/game-details.css.ts
index 72c5e4d3..dadfb641 100644
--- a/src/renderer/src/pages/game-details/game-details.css.ts
+++ b/src/renderer/src/pages/game-details/game-details.css.ts
@@ -79,62 +79,6 @@ export const descriptionContent = style({
height: "100%",
});
-export const contentSidebar = style({
- borderLeft: `solid 1px ${vars.color.border};`,
- width: "100%",
- height: "100%",
- "@media": {
- "(min-width: 768px)": {
- width: "100%",
- maxWidth: "200px",
- },
- "(min-width: 1024px)": {
- maxWidth: "300px",
- width: "100%",
- },
- "(min-width: 1280px)": {
- width: "100%",
- maxWidth: "400px",
- },
- },
-});
-
-export const contentSidebarTitle = style({
- height: "72px",
- padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
- display: "flex",
- alignItems: "center",
- backgroundColor: vars.color.background,
-});
-
-export const requirementButtonContainer = style({
- width: "100%",
- display: "flex",
-});
-
-export const requirementButton = style({
- border: `solid 1px ${vars.color.border};`,
- borderLeft: "none",
- borderRight: "none",
- borderRadius: "0",
- width: "100%",
-});
-
-export const requirementsDetails = style({
- padding: `${SPACING_UNIT * 2}px`,
- lineHeight: "22px",
- fontFamily: "'Fira Sans', sans-serif",
- fontSize: "16px",
-});
-
-export const requirementsDetailsSkeleton = style({
- display: "flex",
- flexDirection: "column",
- gap: "8px",
- padding: `${SPACING_UNIT * 2}px`,
- fontSize: "16px",
-});
-
export const description = style({
userSelect: "text",
lineHeight: "22px",
@@ -183,34 +127,6 @@ export const descriptionHeaderInfo = style({
flexDirection: "column",
});
-export const howLongToBeatCategoriesList = style({
- margin: "0",
- padding: "16px",
- display: "flex",
- flexDirection: "column",
- gap: "16px",
-});
-
-export const howLongToBeatCategory = style({
- display: "flex",
- flexDirection: "column",
- gap: "4px",
- backgroundColor: vars.color.background,
- borderRadius: "8px",
- padding: `8px 16px`,
- border: `solid 1px ${vars.color.border}`,
-});
-
-export const howLongToBeatCategoryLabel = style({
- color: vars.color.muted,
-});
-
-export const howLongToBeatCategorySkeleton = style({
- border: `solid 1px ${vars.color.border}`,
- borderRadius: "8px",
- height: "76px",
-});
-
export const randomizerButton = style({
animationName: slideIn,
animationDuration: "0.2s",
@@ -260,8 +176,3 @@ globalStyle(`${description} img`, {
globalStyle(`${description} a`, {
color: vars.color.bodyText,
});
-
-globalStyle(`${requirementsDetails} a`, {
- display: "flex",
- color: vars.color.bodyText,
-});
diff --git a/src/renderer/src/pages/game-details/game-details.tsx b/src/renderer/src/pages/game-details/game-details.tsx
index 02c880d8..ed709c80 100644
--- a/src/renderer/src/pages/game-details/game-details.tsx
+++ b/src/renderer/src/pages/game-details/game-details.tsx
@@ -3,14 +3,7 @@ import { average } from "color.js";
import { useCallback, useEffect, useState } from "react";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
-import type {
- Game,
- GameRepack,
- GameShop,
- HowLongToBeatCategory,
- ShopDetails,
- SteamAppDetails,
-} from "@types";
+import type { Game, GameRepack, GameShop, ShopDetails } from "@types";
import { Button } from "@renderer/components";
import { setHeaderTitle } from "@renderer/features";
@@ -26,7 +19,6 @@ import { DescriptionHeader } from "./description-header";
import { GameDetailsSkeleton } from "./game-details-skeleton";
import * as styles from "./game-details.css";
import { HeroPanel } from "./hero";
-import { HowLongToBeatSection } from "./how-long-to-beat-section";
import { RepacksModal } from "./repacks-modal";
import { vars } from "../../theme.css";
@@ -37,6 +29,7 @@ import {
OnlineFixInstallationGuide,
} from "./installation-guides";
import { GallerySlider } from "./gallery-slider";
+import { Sidebar } from "./sidebar/sidebar";
export function GameDetails() {
const { objectID, shop } = useParams();
@@ -45,10 +38,7 @@ export function GameDetails() {
const [isLoadingRandomGame, setIsLoadingRandomGame] = useState(false);
const [color, setColor] = useState({ dark: "", light: "" });
const [gameDetails, setGameDetails] = useState
(null);
- const [howLongToBeat, setHowLongToBeat] = useState<{
- isLoading: boolean;
- data: HowLongToBeatCategory[] | null;
- }>({ isLoading: true, data: null });
+ const [repacks, setRepacks] = useState([]);
const [game, setGame] = useState(null);
const [isGamePlaying, setIsGamePlaying] = useState(false);
@@ -56,12 +46,12 @@ export function GameDetails() {
null | "onlinefix" | "DODI"
>(null);
- const [activeRequirement, setActiveRequirement] =
- useState("minimum");
-
const navigate = useNavigate();
const [searchParams] = useSearchParams();
+ const fromRandomizer = searchParams.get("fromRandomizer");
+ const title = searchParams.get("title")!;
+
const { t, i18n } = useTranslation("game_details");
const [showRepacksModal, setShowRepacksModal] = useState(false);
@@ -90,28 +80,24 @@ export function GameDetails() {
useEffect(() => {
getGame();
}, [getGame, gameDownloading?.id]);
+
useEffect(() => {
setGame(null);
setIsLoading(true);
setIsGamePlaying(false);
- dispatch(setHeaderTitle(""));
+ dispatch(setHeaderTitle(title));
- window.electron
- .getGameShopDetails(objectID!, "steam", getSteamLanguage(i18n.language))
- .then((result) => {
- if (!result) {
- navigate(-1);
- return;
- }
-
- window.electron
- .getHowLongToBeat(objectID!, "steam", result.name)
- .then((data) => {
- setHowLongToBeat({ isLoading: false, data });
- });
-
- setGameDetails(result);
- dispatch(setHeaderTitle(result.name));
+ Promise.all([
+ window.electron.getGameShopDetails(
+ objectID!,
+ "steam",
+ getSteamLanguage(i18n.language)
+ ),
+ window.electron.searchGameRepacks(title),
+ ])
+ .then(([appDetails, repacks]) => {
+ if (appDetails) setGameDetails(appDetails);
+ setRepacks(repacks);
setIsLoadingRandomGame(false);
})
.finally(() => {
@@ -119,8 +105,7 @@ export function GameDetails() {
});
getGame();
- setHowLongToBeat({ isLoading: true, data: null });
- }, [getGame, dispatch, navigate, objectID, i18n.language]);
+ }, [getGame, dispatch, navigate, title, objectID, i18n.language]);
const isGameDownloading = gameDownloading?.id === game?.id;
@@ -154,30 +139,28 @@ export function GameDetails() {
repack: GameRepack,
downloadPath: string
) => {
- if (gameDetails) {
- return startDownload(
- repack.id,
- gameDetails.objectID,
- gameDetails.name,
- shop as GameShop,
- downloadPath
- ).then(() => {
- getGame();
- setShowRepacksModal(false);
+ return startDownload(
+ repack.id,
+ objectID!,
+ title,
+ shop as GameShop,
+ downloadPath
+ ).then(() => {
+ getGame();
+ setShowRepacksModal(false);
- if (
- repack.repacker === "onlinefix" &&
- !window.localStorage.getItem(DONT_SHOW_ONLINE_FIX_INSTRUCTIONS_KEY)
- ) {
- setShowInstructionsModal("onlinefix");
- } else if (
- repack.repacker === "DODI" &&
- !window.localStorage.getItem(DONT_SHOW_DODI_INSTRUCTIONS_KEY)
- ) {
- setShowInstructionsModal("DODI");
- }
- });
- }
+ if (
+ repack.repacker === "onlinefix" &&
+ !window.localStorage.getItem(DONT_SHOW_ONLINE_FIX_INSTRUCTIONS_KEY)
+ ) {
+ setShowInstructionsModal("onlinefix");
+ } else if (
+ repack.repacker === "DODI" &&
+ !window.localStorage.getItem(DONT_SHOW_DODI_INSTRUCTIONS_KEY)
+ ) {
+ setShowInstructionsModal("DODI");
+ }
+ });
};
const handleRandomizerClick = async () => {
@@ -191,18 +174,14 @@ export function GameDetails() {
navigate(`/game/steam/${randomGameObjectID}?${searchParams.toString()}`);
};
- const fromRandomizer = searchParams.get("fromRandomizer");
-
return (
- {gameDetails && (
- setShowRepacksModal(false)}
- />
- )}
+ setShowRepacksModal(false)}
+ />
setShowRepacksModal(true)}
getGame={getGame}
isGamePlaying={isGamePlaying}
@@ -247,63 +228,22 @@ export function GameDetails() {
-
-
-
+ {gameDetails &&
}
+ {gameDetails &&
}
-
-
-
-
-
{t("requirements")}
-
-
-
- setActiveRequirement("minimum")}
- theme={
- activeRequirement === "minimum" ? "primary" : "outline"
- }
- >
- {t("minimum")}
-
- setActiveRequirement("recommended")}
- theme={
- activeRequirement === "recommended" ? "primary" : "outline"
- }
- >
- {t("recommended")}
-
-
-
-
-
+
)}
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx b/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx
index 7638f53e..c88d9411 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx
+++ b/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx
@@ -3,7 +3,7 @@ import { NoEntryIcon, PlusCircleIcon } from "@primer/octicons-react";
import { Button } from "@renderer/components";
import { useDownload, useLibrary } from "@renderer/hooks";
-import type { Game, ShopDetails } from "@types";
+import type { Game, GameRepack } from "@types";
import { useState } from "react";
import { useTranslation } from "react-i18next";
@@ -11,9 +11,11 @@ import * as styles from "./hero-panel-actions.css";
export interface HeroPanelActionsProps {
game: Game | null;
- gameDetails: ShopDetails | null;
+ repacks: GameRepack[];
isGamePlaying: boolean;
isGameDownloading: boolean;
+ objectID: string;
+ title: string;
openRepacksModal: () => void;
openBinaryNotFoundModal: () => void;
getGame: () => void;
@@ -21,9 +23,11 @@ export interface HeroPanelActionsProps {
export function HeroPanelActions({
game,
- gameDetails,
isGamePlaying,
isGameDownloading,
+ repacks,
+ objectID,
+ title,
openRepacksModal,
openBinaryNotFoundModal,
getGame,
@@ -69,12 +73,12 @@ export function HeroPanelActions({
try {
if (game) {
await removeGameFromLibrary(game.id);
- } else if (gameDetails) {
+ } else {
const gameExecutablePath = await selectGameExecutable();
await window.electron.addGameToLibrary(
- gameDetails.objectID,
- gameDetails.name,
+ objectID,
+ title,
"steam",
gameExecutablePath
);
@@ -123,7 +127,7 @@ export function HeroPanelActions({
const toggleGameOnLibraryButton = (
@@ -239,7 +243,7 @@ export function HeroPanelActions({
);
}
- if (gameDetails && gameDetails.repacks.length) {
+ if (repacks.length) {
return (
<>
{toggleGameOnLibraryButton}
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts b/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
index 1fe8f23f..640196e6 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
@@ -4,13 +4,13 @@ import { SPACING_UNIT, vars } from "../../../theme.css";
export const panel = style({
width: "100%",
height: "72px",
+ minHeight: "72px",
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
transition: "all ease 0.2s",
borderBottom: `solid 1px ${vars.color.border}`,
- boxShadow: "0px 0px 15px 0px #000000",
});
export const content = style({
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.tsx b/src/renderer/src/pages/game-details/hero/hero-panel.tsx
index 9dafc720..fa689522 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel.tsx
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDownload } from "@renderer/hooks";
-import type { Game, ShopDetails } from "@types";
+import type { Game, GameRepack } from "@types";
import { formatDownloadProgress } from "@renderer/helpers";
import { HeroPanelActions } from "./hero-panel-actions";
@@ -15,20 +15,24 @@ import { HeroPanelPlaytime } from "./hero-panel-playtime";
export interface HeroPanelProps {
game: Game | null;
- gameDetails: ShopDetails | null;
color: string;
isGamePlaying: boolean;
+ objectID: string;
+ title: string;
+ repacks: GameRepack[];
openRepacksModal: () => void;
getGame: () => void;
}
export function HeroPanel({
game,
- gameDetails,
color,
+ repacks,
+ objectID,
+ title,
+ isGamePlaying,
openRepacksModal,
getGame,
- isGamePlaying,
}: HeroPanelProps) {
const { t } = useTranslation("game_details");
@@ -58,7 +62,7 @@ export function HeroPanel({
}, [game, isGameDownloading, gameDownloading]);
const getInfo = () => {
- if (!gameDetails) return null;
+ if (!repacks.length) return null;
if (isGameDeleting(game?.id ?? -1)) {
return {t("deleting")}
;
@@ -110,11 +114,11 @@ export function HeroPanel({
return
setShowBinaryNotFoundModal(true)}
diff --git a/src/renderer/src/pages/game-details/repacks-modal.tsx b/src/renderer/src/pages/game-details/repacks-modal.tsx
index 0e441520..fd4db423 100644
--- a/src/renderer/src/pages/game-details/repacks-modal.tsx
+++ b/src/renderer/src/pages/game-details/repacks-modal.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button, Modal, TextField } from "@renderer/components";
-import type { GameRepack, ShopDetails } from "@types";
+import type { GameRepack } from "@types";
import * as styles from "./repacks-modal.css";
@@ -13,14 +13,14 @@ import { SelectFolderModal } from "./select-folder-modal";
export interface RepacksModalProps {
visible: boolean;
- gameDetails: ShopDetails;
+ repacks: GameRepack[];
startDownload: (repack: GameRepack, downloadPath: string) => Promise;
onClose: () => void;
}
export function RepacksModal({
visible,
- gameDetails,
+ repacks,
startDownload,
onClose,
}: RepacksModalProps) {
@@ -35,8 +35,8 @@ export function RepacksModal({
const { t } = useTranslation("game_details");
useEffect(() => {
- setFilteredRepacks(gameDetails.repacks);
- }, [gameDetails.repacks, visible]);
+ setFilteredRepacks(repacks);
+ }, [repacks, visible]);
const handleRepackClick = (repack: GameRepack) => {
setRepack(repack);
@@ -47,7 +47,7 @@ export function RepacksModal({
const term = event.target.value.toLocaleLowerCase();
setFilteredRepacks(
- gameDetails.repacks.filter((repack) => {
+ repacks.filter((repack) => {
const lowerCaseTitle = repack.title.toLowerCase();
const lowerCaseRepacker = repack.repacker.toLowerCase();
@@ -63,14 +63,13 @@ export function RepacksModal({
setShowSelectFolderModal(false)}
- gameDetails={gameDetails}
startDownload={startDownload}
repack={repack}
/>
diff --git a/src/renderer/src/pages/game-details/select-folder-modal.tsx b/src/renderer/src/pages/game-details/select-folder-modal.tsx
index 97567c98..69b6aaba 100644
--- a/src/renderer/src/pages/game-details/select-folder-modal.tsx
+++ b/src/renderer/src/pages/game-details/select-folder-modal.tsx
@@ -1,5 +1,5 @@
import { Button, Link, Modal, TextField } from "@renderer/components";
-import { GameRepack, ShopDetails } from "@types";
+import type { GameRepack } from "@types";
import { useEffect, useState } from "react";
import { Trans, useTranslation } from "react-i18next";
@@ -10,7 +10,6 @@ import { formatBytes } from "@shared";
export interface SelectFolderModalProps {
visible: boolean;
- gameDetails: ShopDetails;
onClose: () => void;
startDownload: (repack: GameRepack, downloadPath: string) => Promise;
repack: GameRepack | null;
@@ -18,7 +17,6 @@ export interface SelectFolderModalProps {
export function SelectFolderModal({
visible,
- gameDetails,
onClose,
startDownload,
repack,
@@ -74,7 +72,7 @@ export function SelectFolderModal({
return (
= {
Hours: "hours",
diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
new file mode 100644
index 00000000..cae988ab
--- /dev/null
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
@@ -0,0 +1,92 @@
+import { globalStyle, style } from "@vanilla-extract/css";
+
+import { SPACING_UNIT, vars } from "../../../theme.css";
+
+export const contentSidebar = style({
+ borderLeft: `solid 1px ${vars.color.border};`,
+ width: "100%",
+ height: "100%",
+ "@media": {
+ "(min-width: 768px)": {
+ width: "100%",
+ maxWidth: "200px",
+ },
+ "(min-width: 1024px)": {
+ maxWidth: "300px",
+ width: "100%",
+ },
+ "(min-width: 1280px)": {
+ width: "100%",
+ maxWidth: "400px",
+ },
+ },
+});
+
+export const contentSidebarTitle = style({
+ height: "72px",
+ padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
+ display: "flex",
+ alignItems: "center",
+ backgroundColor: vars.color.background,
+});
+
+export const requirementButtonContainer = style({
+ width: "100%",
+ display: "flex",
+});
+
+export const requirementButton = style({
+ border: `solid 1px ${vars.color.border};`,
+ borderLeft: "none",
+ borderRight: "none",
+ borderRadius: "0",
+ width: "100%",
+});
+
+export const requirementsDetails = style({
+ padding: `${SPACING_UNIT * 2}px`,
+ lineHeight: "22px",
+ fontFamily: "'Fira Sans', sans-serif",
+ fontSize: "16px",
+});
+
+export const requirementsDetailsSkeleton = style({
+ display: "flex",
+ flexDirection: "column",
+ gap: "8px",
+ padding: `${SPACING_UNIT * 2}px`,
+ fontSize: "16px",
+});
+
+export const howLongToBeatCategoriesList = style({
+ margin: "0",
+ padding: "16px",
+ display: "flex",
+ flexDirection: "column",
+ gap: "16px",
+});
+
+export const howLongToBeatCategory = style({
+ display: "flex",
+ flexDirection: "column",
+ gap: "4px",
+ backgroundColor: vars.color.background,
+ borderRadius: "8px",
+ padding: `8px 16px`,
+ border: `solid 1px ${vars.color.border}`,
+});
+
+export const howLongToBeatCategoryLabel = style({
+ color: vars.color.muted,
+});
+
+export const howLongToBeatCategorySkeleton = style({
+ border: `solid 1px ${vars.color.border}`,
+ borderRadius: "8px",
+ height: "76px",
+});
+
+globalStyle(`${requirementsDetails} a`, {
+ display: "flex",
+ color: vars.color.bodyText,
+});
diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.tsx b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx
new file mode 100644
index 00000000..ec9e12c7
--- /dev/null
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import { HowLongToBeatSection } from "./how-long-to-beat-section";
+import type {
+ HowLongToBeatCategory,
+ ShopDetails,
+ SteamAppDetails,
+} from "@types";
+import { useTranslation } from "react-i18next";
+import { Button } from "@renderer/components";
+
+import * as styles from "./sidebar.css";
+
+export interface SidebarProps {
+ objectID: string;
+ title: string;
+ gameDetails: ShopDetails | null;
+}
+
+export function Sidebar({ objectID, title, gameDetails }: SidebarProps) {
+ const [howLongToBeat, setHowLongToBeat] = useState<{
+ isLoading: boolean;
+ data: HowLongToBeatCategory[] | null;
+ }>({ isLoading: true, data: null });
+
+ const [activeRequirement, setActiveRequirement] =
+ useState("minimum");
+
+ const { t } = useTranslation("game_details");
+
+ useEffect(() => {
+ setHowLongToBeat({ isLoading: true, data: null });
+
+ window.electron
+ .getHowLongToBeat(objectID, "steam", title)
+ .then((howLongToBeat) => {
+ setHowLongToBeat({ isLoading: false, data: howLongToBeat });
+ })
+ .catch(() => {
+ setHowLongToBeat({ isLoading: false, data: null });
+ });
+ }, [objectID, title]);
+
+ return (
+
+
+
{t("requirements")}
+
+
+
+ setActiveRequirement("minimum")}
+ theme={activeRequirement === "minimum" ? "primary" : "outline"}
+ >
+ {t("minimum")}
+
+
+ setActiveRequirement("recommended")}
+ theme={activeRequirement === "recommended" ? "primary" : "outline"}
+ >
+ {t("recommended")}
+
+
+
+
+
+ );
+}
diff --git a/src/renderer/src/pages/home/home.tsx b/src/renderer/src/pages/home/home.tsx
index 7230e51e..c1587512 100644
--- a/src/renderer/src/pages/home/home.tsx
+++ b/src/renderer/src/pages/home/home.tsx
@@ -12,6 +12,7 @@ import starsAnimation from "@renderer/assets/lottie/stars.json";
import * as styles from "./home.css";
import { vars } from "../../theme.css";
import Lottie from "lottie-react";
+import { buildGameDetailsPath } from "@renderer/helpers";
const categories: CatalogueCategory[] = ["trending", "recently_added"];
@@ -129,9 +130,7 @@ export function Home() {
- navigate(`/game/${result.shop}/${result.objectID}`)
- }
+ onClick={() => navigate(buildGameDetailsPath(result))}
/>
))}
diff --git a/src/renderer/src/pages/home/search-results.tsx b/src/renderer/src/pages/home/search-results.tsx
index 2def747d..be461918 100644
--- a/src/renderer/src/pages/home/search-results.tsx
+++ b/src/renderer/src/pages/home/search-results.tsx
@@ -14,6 +14,7 @@ import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate, useSearchParams } from "react-router-dom";
import * as styles from "./home.css";
+import { buildGameDetailsPath } from "@renderer/helpers";
export function SearchResults() {
const dispatch = useAppDispatch();
@@ -30,7 +31,7 @@ export function SearchResults() {
const handleGameClick = (game: CatalogueEntry) => {
dispatch(clearSearch());
- navigate(`/game/${game.shop}/${game.objectID}`);
+ navigate(buildGameDetailsPath(game));
};
useEffect(() => {
diff --git a/src/types/index.ts b/src/types/index.ts
index 94361564..5723245d 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -69,7 +69,6 @@ export interface GameRepack {
export type ShopDetails = SteamAppDetails & {
objectID: string;
- repacks: GameRepack[];
};
export interface TorrentFile {
](https://hydralauncher.site)
+[