feat: adding hltb key extraction

2025-03-09 15:40:26 +00:00 · 2024-10-07 20:56:53 +01:00 · 2024-10-07 20:56:53 +01:00 · baafc6c7d1
commit baafc6c7d1
parent 0222121288
22 changed files with 791 additions and 205 deletions
--- a/src/renderer/src/context/repacks/repacks.context.tsx
+++ b/src/renderer/src/context/repacks/repacks.context.tsx
@ -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);
    };
  }, []);
--- a/src/renderer/src/declaration.d.ts
+++ b/src/renderer/src/declaration.d.ts
@ -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[]>;
--- a/src/renderer/src/dexie.ts
+++ b/src/renderer/src/dexie.ts
@ -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();
--- a/src/renderer/src/pages/game-details/game-details-skeleton.tsx
+++ b/src/renderer/src/pages/game-details/game-details-skeleton.tsx
@ -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}
--- a/src/renderer/src/pages/game-details/hero/hero-panel.tsx
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.tsx
@ -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;

--- a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts
+++ b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts
@ -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)",
+      },
+    },
+  },
+});
--- a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx
+++ b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx
@ -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>
+  );
+}
--- a/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx
+++ b/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx
@ -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>
  );
 }
--- a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
@ -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",
--- a/src/renderer/src/pages/game-details/sidebar/sidebar.tsx
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx
@ -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>
  );
 }
--- a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx
+++ b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx
@ -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);
                }
              };
--- a/src/renderer/src/workers/repacks.worker.ts
+++ b/src/renderer/src/workers/repacks.worker.ts
@ -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 {