feat: adding hltb key extraction

This commit is contained in:
Chubby Granny Chaser 2024-10-07 20:56:53 +01:00
parent 0222121288
commit baafc6c7d1
No known key found for this signature in database
22 changed files with 791 additions and 205 deletions

View file

@ -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);
};
}, []);

View file

@ -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[]>;

View file

@ -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();

View file

@ -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}

View file

@ -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;

View file

@ -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)",
},
},
},
});

View file

@ -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>
);
}

View file

@ -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>
);
}

View file

@ -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",

View file

@ -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>
);
}

View file

@ -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);
}
};

View file

@ -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 {