mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-03-09 15:40:26 +00:00
feat: adding hltb key extraction
This commit is contained in:
parent
0222121288
commit
baafc6c7d1
22 changed files with 791 additions and 205 deletions
|
@ -41,10 +41,12 @@ export function RepacksContextProvider({ children }: RepacksContextProps) {
|
|||
}, []);
|
||||
|
||||
const indexRepacks = useCallback(() => {
|
||||
console.log("INDEXING");
|
||||
setIsIndexingRepacks(true);
|
||||
repacksWorker.postMessage("INDEX_REPACKS");
|
||||
|
||||
repacksWorker.onmessage = () => {
|
||||
console.log("INDEXING COMPLETE");
|
||||
setIsIndexingRepacks(false);
|
||||
};
|
||||
}, []);
|
||||
|
|
2
src/renderer/src/declaration.d.ts
vendored
2
src/renderer/src/declaration.d.ts
vendored
|
@ -58,8 +58,6 @@ declare global {
|
|||
) => Promise<ShopDetails | null>;
|
||||
getRandomGame: () => Promise<Steam250Game>;
|
||||
getHowLongToBeat: (
|
||||
objectId: string,
|
||||
shop: GameShop,
|
||||
title: string
|
||||
) => Promise<HowLongToBeatCategory[] | null>;
|
||||
getGames: (take?: number, skip?: number) => Promise<CatalogueEntry[]>;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { GameShop } from "@types";
|
||||
import type { GameShop, HowLongToBeatCategory } from "@types";
|
||||
import { Dexie } from "dexie";
|
||||
|
||||
export interface GameBackup {
|
||||
|
@ -8,16 +8,29 @@ export interface GameBackup {
|
|||
createdAt: Date;
|
||||
}
|
||||
|
||||
export interface HowLongToBeatEntry {
|
||||
id?: number;
|
||||
objectId: string;
|
||||
categories: HowLongToBeatCategory[];
|
||||
shop: GameShop;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
export const db = new Dexie("Hydra");
|
||||
|
||||
db.version(3).stores({
|
||||
db.version(4).stores({
|
||||
repacks: `++id, title, uris, fileSize, uploadDate, downloadSourceId, repacker, createdAt, updatedAt`,
|
||||
downloadSources: `++id, url, name, etag, downloadCount, status, createdAt, updatedAt`,
|
||||
gameBackups: `++id, [shop+objectId], createdAt`,
|
||||
howLongToBeatEntries: `++id, categories, [shop+objectId], createdAt, updatedAt`,
|
||||
});
|
||||
|
||||
export const downloadSourcesTable = db.table("downloadSources");
|
||||
export const repacksTable = db.table("repacks");
|
||||
export const gameBackupsTable = db.table<GameBackup>("gameBackups");
|
||||
export const howLongToBeatEntriesTable = db.table<HowLongToBeatEntry>(
|
||||
"howLongToBeatEntries"
|
||||
);
|
||||
|
||||
db.open();
|
||||
|
|
|
@ -43,23 +43,6 @@ export function GameDetailsSkeleton() {
|
|||
</div>
|
||||
</div>
|
||||
<div className={sidebarStyles.contentSidebar}>
|
||||
{/* <div className={sidebarStyles.contentSidebarTitle}>
|
||||
<h3>HowLongToBeat</h3>
|
||||
</div>
|
||||
<ul className={sidebarStyles.howLongToBeatCategoriesList}>
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
<Skeleton
|
||||
key={index}
|
||||
className={sidebarStyles.howLongToBeatCategorySkeleton}
|
||||
/>
|
||||
))}
|
||||
</ul> */}
|
||||
<div
|
||||
className={sidebarStyles.contentSidebarTitle}
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
<h3>{t("requirements")}</h3>
|
||||
</div>
|
||||
<div className={sidebarStyles.requirementButtonContainer}>
|
||||
<Button
|
||||
className={sidebarStyles.requirementButton}
|
||||
|
|
|
@ -29,6 +29,7 @@ export function HeroPanel({ isHeaderStuck }: HeroPanelProps) {
|
|||
const [latestRepack] = repacks;
|
||||
|
||||
if (latestRepack) {
|
||||
console.log(latestRepack);
|
||||
const lastUpdate = format(latestRepack.uploadDate!, "dd/MM/yyyy");
|
||||
const repacksCount = repacks.length;
|
||||
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
import { recipe } from "@vanilla-extract/recipes";
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
export const sidebarSectionButton = style({
|
||||
height: "72px",
|
||||
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.background,
|
||||
color: vars.color.muted,
|
||||
width: "100%",
|
||||
cursor: "pointer",
|
||||
transition: "all ease 0.2s",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
fontSize: "14px",
|
||||
fontWeight: "bold",
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.05)",
|
||||
},
|
||||
":active": {
|
||||
opacity: vars.opacity.active,
|
||||
},
|
||||
});
|
||||
|
||||
export const chevron = recipe({
|
||||
base: {
|
||||
transition: "transform ease 0.2s",
|
||||
},
|
||||
variants: {
|
||||
open: {
|
||||
true: {
|
||||
transform: "rotate(180deg)",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
|
@ -0,0 +1,38 @@
|
|||
import { ChevronDownIcon } from "@primer/octicons-react";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
import * as styles from "./sidebar-section.css";
|
||||
|
||||
export interface SidebarSectionProps {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function SidebarSection({ title, children }: SidebarSectionProps) {
|
||||
const content = useRef<HTMLDivElement>(null);
|
||||
const [isOpen, setIsOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={styles.sidebarSectionButton}
|
||||
>
|
||||
<ChevronDownIcon className={styles.chevron({ open: isOpen })} />
|
||||
<span>{title}</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
ref={content}
|
||||
style={{
|
||||
maxHeight: isOpen ? `${content.current?.scrollHeight}px` : "0",
|
||||
overflow: "hidden",
|
||||
transition: "max-height 0.4s cubic-bezier(0, 1, 0, 1)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -4,6 +4,7 @@ import type { HowLongToBeatCategory } from "@types";
|
|||
import { vars } from "@renderer/theme.css";
|
||||
|
||||
import * as styles from "./sidebar.css";
|
||||
import { SidebarSection } from "../sidebar-section/sidebar-section";
|
||||
|
||||
const durationTranslation: Record<string, string> = {
|
||||
Hours: "hours",
|
||||
|
@ -30,41 +31,42 @@ export function HowLongToBeatSection({
|
|||
|
||||
return (
|
||||
<SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
|
||||
<div className={styles.contentSidebarTitle}>
|
||||
<h3>HowLongToBeat</h3>
|
||||
</div>
|
||||
|
||||
<ul className={styles.howLongToBeatCategoriesList}>
|
||||
{howLongToBeatData
|
||||
? howLongToBeatData.map((category) => (
|
||||
<li key={category.title} className={styles.howLongToBeatCategory}>
|
||||
<p
|
||||
className={styles.howLongToBeatCategoryLabel}
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
<SidebarSection title="HowLongToBeat">
|
||||
<ul className={styles.howLongToBeatCategoriesList}>
|
||||
{howLongToBeatData
|
||||
? howLongToBeatData.map((category) => (
|
||||
<li
|
||||
key={category.title}
|
||||
className={styles.howLongToBeatCategory}
|
||||
>
|
||||
{category.title}
|
||||
</p>
|
||||
<p
|
||||
className={styles.howLongToBeatCategoryLabel}
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{category.title}
|
||||
</p>
|
||||
|
||||
<p className={styles.howLongToBeatCategoryLabel}>
|
||||
{getDuration(category.duration)}
|
||||
</p>
|
||||
<p className={styles.howLongToBeatCategoryLabel}>
|
||||
{getDuration(category.duration)}
|
||||
</p>
|
||||
|
||||
{category.accuracy !== "00" && (
|
||||
<small>
|
||||
{t("accuracy", { accuracy: category.accuracy })}
|
||||
</small>
|
||||
)}
|
||||
</li>
|
||||
))
|
||||
: Array.from({ length: 4 }).map((_, index) => (
|
||||
<Skeleton
|
||||
key={index}
|
||||
className={styles.howLongToBeatCategorySkeleton}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
{category.accuracy !== "00" && (
|
||||
<small>
|
||||
{t("accuracy", { accuracy: category.accuracy })}
|
||||
</small>
|
||||
)}
|
||||
</li>
|
||||
))
|
||||
: Array.from({ length: 4 }).map((_, index) => (
|
||||
<Skeleton
|
||||
key={index}
|
||||
className={styles.howLongToBeatCategorySkeleton}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</SidebarSection>
|
||||
</SkeletonTheme>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -3,7 +3,8 @@ import { globalStyle, style } from "@vanilla-extract/css";
|
|||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
|
||||
export const contentSidebar = style({
|
||||
borderLeft: `solid 1px ${vars.color.border};`,
|
||||
borderLeft: `solid 1px ${vars.color.border}`,
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
"@media": {
|
||||
|
@ -18,14 +19,6 @@ export const contentSidebar = style({
|
|||
},
|
||||
});
|
||||
|
||||
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",
|
||||
|
@ -55,7 +48,7 @@ export const requirementsDetailsSkeleton = style({
|
|||
|
||||
export const howLongToBeatCategoriesList = style({
|
||||
margin: "0",
|
||||
padding: "16px",
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "16px",
|
||||
|
@ -65,7 +58,8 @@ export const howLongToBeatCategory = style({
|
|||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "4px",
|
||||
backgroundColor: vars.color.background,
|
||||
background:
|
||||
"linear-gradient(90deg, transparent 20%, rgb(255 255 255 / 2%) 100%)",
|
||||
borderRadius: "4px",
|
||||
padding: `8px 16px`,
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
|
@ -86,6 +80,8 @@ export const statsSection = style({
|
|||
gap: `${SPACING_UNIT * 2}px`,
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
justifyContent: "space-between",
|
||||
transition: "max-height ease 0.5s",
|
||||
overflow: "hidden",
|
||||
"@media": {
|
||||
"(min-width: 1024px)": {
|
||||
flexDirection: "column",
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { useContext, useState } from "react";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import type { HowLongToBeatCategory, SteamAppDetails } from "@types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@renderer/components";
|
||||
|
@ -8,9 +8,12 @@ import { gameDetailsContext } from "@renderer/context";
|
|||
import { useDate, useFormat } from "@renderer/hooks";
|
||||
import { DownloadIcon, PeopleIcon } from "@primer/octicons-react";
|
||||
import { SPACING_UNIT } from "@renderer/theme.css";
|
||||
import { HowLongToBeatSection } from "./how-long-to-beat-section";
|
||||
import { howLongToBeatEntriesTable } from "@renderer/dexie";
|
||||
import { SidebarSection } from "../sidebar-section/sidebar-section";
|
||||
|
||||
export function Sidebar() {
|
||||
const [_howLongToBeat, _setHowLongToBeat] = useState<{
|
||||
const [howLongToBeat, setHowLongToBeat] = useState<{
|
||||
isLoading: boolean;
|
||||
data: HowLongToBeatCategory[] | null;
|
||||
}>({ isLoading: true, data: null });
|
||||
|
@ -18,7 +21,7 @@ export function Sidebar() {
|
|||
const [activeRequirement, setActiveRequirement] =
|
||||
useState<keyof SteamAppDetails["pc_requirements"]>("minimum");
|
||||
|
||||
const { gameTitle, shopDetails, stats, achievements } =
|
||||
const { gameTitle, shopDetails, objectId, shop, stats, achievements } =
|
||||
useContext(gameDetailsContext);
|
||||
|
||||
const { t } = useTranslation("game_details");
|
||||
|
@ -26,28 +29,45 @@ export function Sidebar() {
|
|||
|
||||
const { numberFormatter } = useFormat();
|
||||
|
||||
// useEffect(() => {
|
||||
// if (objectId) {
|
||||
// setHowLongToBeat({ isLoading: true, data: null });
|
||||
useEffect(() => {
|
||||
if (objectId) {
|
||||
setHowLongToBeat({ isLoading: true, data: null });
|
||||
|
||||
// window.electron
|
||||
// .getHowLongToBeat(objectId, "steam", gameTitle)
|
||||
// .then((howLongToBeat) => {
|
||||
// setHowLongToBeat({ isLoading: false, data: howLongToBeat });
|
||||
// })
|
||||
// .catch(() => {
|
||||
// setHowLongToBeat({ isLoading: false, data: null });
|
||||
// });
|
||||
// }
|
||||
// }, [objectId, gameTitle]);
|
||||
howLongToBeatEntriesTable
|
||||
.where({ shop, objectId })
|
||||
.first()
|
||||
.then(async (cachedHowLongToBeat) => {
|
||||
if (cachedHowLongToBeat) {
|
||||
setHowLongToBeat({
|
||||
isLoading: false,
|
||||
data: cachedHowLongToBeat.categories,
|
||||
});
|
||||
} else {
|
||||
try {
|
||||
const howLongToBeat =
|
||||
await window.electron.getHowLongToBeat(gameTitle);
|
||||
|
||||
if (howLongToBeat) {
|
||||
howLongToBeatEntriesTable.add({
|
||||
objectId,
|
||||
shop: "steam",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
categories: howLongToBeat,
|
||||
});
|
||||
}
|
||||
|
||||
setHowLongToBeat({ isLoading: false, data: howLongToBeat });
|
||||
} catch (err) {
|
||||
setHowLongToBeat({ isLoading: false, data: null });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [objectId, shop, gameTitle]);
|
||||
|
||||
return (
|
||||
<aside className={styles.contentSidebar}>
|
||||
{/* <HowLongToBeatSection
|
||||
howLongToBeatData={howLongToBeat.data}
|
||||
isLoading={howLongToBeat.isLoading}
|
||||
/> */}
|
||||
|
||||
{achievements.length > 0 && (
|
||||
<div
|
||||
style={{
|
||||
|
@ -90,14 +110,7 @@ export function Sidebar() {
|
|||
)}
|
||||
|
||||
{stats && (
|
||||
<>
|
||||
<div
|
||||
className={styles.contentSidebarTitle}
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
<h3>{t("stats")}</h3>
|
||||
</div>
|
||||
|
||||
<SidebarSection title={t("stats")}>
|
||||
<div className={styles.statsSection}>
|
||||
<div className={styles.statsCategory}>
|
||||
<p className={styles.statsCategoryTitle}>
|
||||
|
@ -115,40 +128,44 @@ export function Sidebar() {
|
|||
<p>{numberFormatter.format(stats?.playerCount)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</SidebarSection>
|
||||
)}
|
||||
|
||||
<div className={styles.contentSidebarTitle} style={{ border: "none" }}>
|
||||
<h3>{t("requirements")}</h3>
|
||||
</div>
|
||||
<div className={styles.requirementButtonContainer}>
|
||||
<Button
|
||||
className={styles.requirementButton}
|
||||
onClick={() => setActiveRequirement("minimum")}
|
||||
theme={activeRequirement === "minimum" ? "primary" : "outline"}
|
||||
>
|
||||
{t("minimum")}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={styles.requirementButton}
|
||||
onClick={() => setActiveRequirement("recommended")}
|
||||
theme={activeRequirement === "recommended" ? "primary" : "outline"}
|
||||
>
|
||||
{t("recommended")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={styles.requirementsDetails}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
shopDetails?.pc_requirements?.[activeRequirement] ??
|
||||
t(`no_${activeRequirement}_requirements`, {
|
||||
gameTitle,
|
||||
}),
|
||||
}}
|
||||
<HowLongToBeatSection
|
||||
howLongToBeatData={howLongToBeat.data}
|
||||
isLoading={howLongToBeat.isLoading}
|
||||
/>
|
||||
|
||||
<SidebarSection title={t("requirements")}>
|
||||
<div className={styles.requirementButtonContainer}>
|
||||
<Button
|
||||
className={styles.requirementButton}
|
||||
onClick={() => setActiveRequirement("minimum")}
|
||||
theme={activeRequirement === "minimum" ? "primary" : "outline"}
|
||||
>
|
||||
{t("minimum")}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={styles.requirementButton}
|
||||
onClick={() => setActiveRequirement("recommended")}
|
||||
theme={activeRequirement === "recommended" ? "primary" : "outline"}
|
||||
>
|
||||
{t("recommended")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={styles.requirementsDetails}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
shopDetails?.pc_requirements?.[activeRequirement] ??
|
||||
t(`no_${activeRequirement}_requirements`, {
|
||||
gameTitle,
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</SidebarSection>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -64,6 +64,8 @@ export function EditProfileModal(
|
|||
const { showSuccessToast, showErrorToast } = useToast();
|
||||
|
||||
const onSubmit = async (values: FormValues) => {
|
||||
console.log(values);
|
||||
|
||||
return patchUser(values)
|
||||
.then(async () => {
|
||||
await Promise.allSettled([fetchUserDetails(), getUserProfile()]);
|
||||
|
@ -118,6 +120,8 @@ export function EditProfileModal(
|
|||
return { imagePath: null };
|
||||
});
|
||||
|
||||
console.log(imagePath);
|
||||
|
||||
onChange(imagePath);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -3,20 +3,21 @@ import { formatName } from "@shared";
|
|||
import { GameRepack } from "@types";
|
||||
import flexSearch from "flexsearch";
|
||||
|
||||
const index = new flexSearch.Index();
|
||||
|
||||
interface SerializedGameRepack extends Omit<GameRepack, "uris"> {
|
||||
uris: string;
|
||||
}
|
||||
|
||||
const state = {
|
||||
repacks: [] as SerializedGameRepack[],
|
||||
index: null as flexSearch.Index | null,
|
||||
};
|
||||
|
||||
self.onmessage = async (
|
||||
event: MessageEvent<[string, string] | "INDEX_REPACKS">
|
||||
) => {
|
||||
if (event.data === "INDEX_REPACKS") {
|
||||
state.index = new flexSearch.Index();
|
||||
|
||||
repacksTable
|
||||
.toCollection()
|
||||
.sortBy("uploadDate")
|
||||
|
@ -26,7 +27,7 @@ self.onmessage = async (
|
|||
for (let i = 0; i < state.repacks.length; i++) {
|
||||
const repack = state.repacks[i];
|
||||
const formattedTitle = formatName(repack.title);
|
||||
index.add(i, formattedTitle);
|
||||
state.index!.add(i, formattedTitle);
|
||||
}
|
||||
|
||||
self.postMessage("INDEXING_COMPLETE");
|
||||
|
@ -34,7 +35,7 @@ self.onmessage = async (
|
|||
} else {
|
||||
const [requestId, query] = event.data;
|
||||
|
||||
const results = index.search(formatName(query)).map((index) => {
|
||||
const results = state.index!.search(formatName(query)).map((index) => {
|
||||
const repack = state.repacks.at(index as number) as SerializedGameRepack;
|
||||
|
||||
return {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue