feat: logo positions are now loaded if they exist

Tormak9970 · May 12, 2023 · 7a2ff47 · 7a2ff47
1 parent ce2be67
commit 7a2ff47
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 52 deletions.
diff --git a/src/Stores.ts b/src/Stores.ts
@@ -77,7 +77,9 @@ export const selectedSteamGridGameId = writable("None");
 export const showGridModal = writable(false);
 export const gridModalInfo: Writable<SGDBImage> = writable(null);
 
-export const showLogoPositionModal = writable(true);
+export const originalLogoPositions:Writable<{ [appid: string]: SteamLogoConfig }> = writable({});
+export const steamLogoPositions:Writable<{ [appid: string]: SteamLogoConfig }> = writable({});
+export const showLogoPositionModal = writable(false);
 
 export const dbFilters:Writable<DBFilters> = writable({
   "Capsule": {

diff --git a/src/components/toast-modals/LogoPositionModal.svelte b/src/components/toast-modals/LogoPositionModal.svelte
@@ -17,7 +17,7 @@
  -->
  <script lang="ts">
   import Lazy from "svelte-lazy";
-  import { appLibraryCache, nonSteamGames, selectedGameAppId, showLogoPositionModal, steamGames, unfilteredLibraryCache } from "../../Stores";
+  import { appLibraryCache, nonSteamGames, selectedGameAppId, showLogoPositionModal, steamGames, steamLogoPositions, unfilteredLibraryCache } from "../../Stores";
   import Button from "../interactables/Button.svelte";
   import { AppController } from "../../lib/controllers/AppController";
   import { afterUpdate, onMount } from "svelte";
@@ -26,7 +26,6 @@
   import Slider from "../interactables/Slider.svelte";
   import { fade } from "svelte/transition";
 
-  export let show: boolean = false;
   export let onClose: () => void;
 
   type LogoCssStyles = {
@@ -50,12 +49,16 @@
   let logoPath = "";
 
   let canSave = false;
-
-  let logoWidth = 50; //used as percent of the width of the background
-  let logoHeight = 50; //used as percent of the height of the background
   
-  let currentLogoPosition: LogoPinPositions = "CenterCenter"; // This needs to be grabbed dynamically
-  let currentCssStyles: LogoCssStyles = getLogoPosition(currentLogoPosition, logoHeight, logoWidth);
+  let originalWidth = 0;
+  let originalHeight = 0;
+  let originalPosition: LogoPinPositions = "CenterCenter";
+
+  let logoWidth = 0;
+  let logoHeight = 0;
+  let logoPosition: LogoPinPositions = "CenterCenter";
+
+  let currentCssStyles: LogoCssStyles = getLogoPosition(logoPosition, logoHeight, logoWidth);
 
   const widths = {
     "Hero": 956,
@@ -103,21 +106,20 @@
     return positions[pos];
   }
 
-  function onPositionChange(position: LogoPinPositions): void {
-    currentLogoPosition = position;
-    currentCssStyles = getLogoPosition(currentLogoPosition, logoHeight, logoWidth);
-    canSave = true;
-  }
-
   /**
    * Apply the logo position changes.
    */
   async function applyChanges() {
-    await AppController.setLogoPosition($selectedGameAppId, currentLogoPosition, logoHeight, logoWidth);
+    await AppController.setLogoPosition($selectedGameAppId, logoPosition, logoHeight, logoWidth);
     onClose();
   }
 
   afterUpdate(() => {
+    currentCssStyles = getLogoPosition(logoPosition, logoHeight, logoWidth);
+    canSave = (originalHeight != logoHeight) || (originalWidth != logoWidth) || (originalPosition != logoPosition);
+  });
+
+  onMount(() => {
     if ($appLibraryCache[$selectedGameAppId]?.Hero) {
       if ($appLibraryCache[$selectedGameAppId].Hero == "REMOVE") {
         heroPath = tauri.convertFileSrc($unfilteredLibraryCache[$selectedGameAppId].Hero);
@@ -136,19 +138,26 @@
       }
     }
 
-    currentCssStyles = getLogoPosition(currentLogoPosition, logoHeight, logoWidth);
-    canSave = true;
-  });
+    const gameLogoPos = $steamLogoPositions[$selectedGameAppId];
 
-  onMount(() => {
-    setTimeout(() => {
-      $showLogoPositionModal = false;
-    });
+    if (gameLogoPos) {
+      originalHeight = gameLogoPos.logoPosition.nHeightPct;
+      originalWidth = gameLogoPos.logoPosition.nWidthPct;
+      originalPosition = gameLogoPos.logoPosition.pinnedPosition;
+    } else {
+      originalHeight = 50;
+      originalWidth = 50;
+      originalPosition = "CenterCenter";
+    }
+
+    logoHeight = originalHeight;
+    logoWidth = originalWidth;
+    logoPosition = originalPosition;
   });
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="background" class:show on:click={onClose}>
+<div class="background" on:click={onClose}>
   <div class="modal-body" on:click|stopPropagation>
     <div class="close-btn" on:click={onClose}>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
@@ -169,19 +178,19 @@
             {/if}
           </div>
         </div>
-        <div class="logo-cont" style="justify-content: {currentLogoPosition.includes("Bottom") ? "flex-end" : (currentLogoPosition.includes("Upper") ? "flex-start" : "center")}; align-items: {currentLogoPosition.includes("Left") ? "flex-start" : "center"}; height: {logoHeight}%; width: {logoWidth}%; top: {currentCssStyles.top}%; bottom: {currentCssStyles.bottom}%; right: {currentCssStyles.right}%; left: {currentCssStyles.left}%;">
+        <div class="logo-cont" style="justify-content: {logoPosition.includes("Bottom") ? "flex-end" : (logoPosition.includes("Upper") ? "flex-start" : "center")}; align-items: {logoPosition.includes("Left") ? "flex-start" : "center"}; height: {logoHeight}%; width: {logoWidth}%; top: {currentCssStyles.top}%; bottom: {currentCssStyles.bottom}%; right: {currentCssStyles.right}%; left: {currentCssStyles.left}%;">
           <img in:fade={{delay: 500, duration: 1000}} src="{logoPath}" alt="Logo image for {game?.name}" style="max-height: 100%; max-width: 100%; width: auto; height: auto;" />
         </div>
       </div>
       <div class="interactables">
         <div class="logo-size">
-          <Slider label="Width" width="200px" bind:value={logoWidth} />
+          <Slider label="Width" bind:value={logoWidth} width="200px" />
         </div>
         <div class="logo-size">
-          <Slider label="Height" width="200px" bind:value={logoHeight} />
+          <Slider label="Height" bind:value={logoHeight} width="200px" />
         </div>
         <div class="logo-position">
-          <DropDown label="Position" options={dropdownOptions} onChange={onPositionChange} bind:value={currentLogoPosition} width="140px" />
+          <DropDown label="Position" options={dropdownOptions} bind:value={logoPosition} width="140px" />
         </div>
         <Button label="Save" onClick={applyChanges} width="300px" />
       </div>
@@ -199,7 +208,7 @@
     background-color: rgba(0, 0, 0, 0.6);
     width: 100%;
     height: calc(100% - 30px);
-    display: none;
+    display: flex;
   }
 
   .border {
@@ -230,8 +239,6 @@
     background-color: var(--background-hover);
   }
 
-  .show { display: flex; }
-
   .modal-body {
     margin: auto;
     background-color: var(--background);

diff --git a/src/lib/controllers/AppController.ts b/src/lib/controllers/AppController.ts
@@ -20,7 +20,7 @@ import { ToastController } from "./ToastController";
 import { SettingsManager } from "../utils/SettingsManager";
 import { LogController } from "./LogController";
 import { get } from "svelte/store";
-import { GridTypes, Platforms, activeUserId, appLibraryCache, canSave, currentPlatform, gridModalInfo, gridType, hiddenGameIds, isOnline, loadingGames, needsSGDBAPIKey, needsSteamKey, nonSteamGames, originalAppLibraryCache, originalSteamShortcuts, selectedGameAppId, selectedGameName, showGridModal, steamGames, steamGridDBKey, steamKey, steamShortcuts, steamUsers, theme, unfilteredLibraryCache } from "../../Stores";
+import { GridTypes, Platforms, activeUserId, appLibraryCache, canSave, currentPlatform, gridModalInfo, gridType, hiddenGameIds, isOnline, loadingGames, needsSGDBAPIKey, needsSteamKey, nonSteamGames, originalAppLibraryCache, originalLogoPositions, originalSteamShortcuts, selectedGameAppId, selectedGameName, showGridModal, steamGames, steamGridDBKey, steamKey, steamLogoPositions, steamShortcuts, steamUsers, theme, unfilteredLibraryCache } from "../../Stores";
 import { CacheController } from "./CacheController";
 import { RustInterop } from "./RustInterop";
 import type { SGDBImage } from "../models/SGDB";
@@ -123,37 +123,66 @@ export class AppController {
       WindowController.openSettingsWindow();
     }
   }
+
+  /**
+   * Caches the steam game logo configs.
+   * @param logoConfigs The list of logoConfig files.
+   * ? Logging complete.
+   */
+  private static async cacheLogoConfigs(logoConfigs: fs.FileEntry[]): Promise<void> {
+    const configs = {};
+
+    for (const logoConfig of logoConfigs) {
+      const id = parseInt(logoConfig.name.substring(0, logoConfig.name.lastIndexOf(".")));
+
+      if (!isNaN(id)) {
+        const contents = await fs.readTextFile(logoConfig.path);
+        const jsonContents = JSON.parse(contents);
+        configs[id] = jsonContents;
+      }
+    }
+
+    originalLogoPositions.set(JSON.parse(JSON.stringify(configs)));
+    steamLogoPositions.set(JSON.parse(JSON.stringify(configs)));
+
+    LogController.log(`Cached logo positions for ${Object.entries(configs).length} games.`);
+  }
 
   /**
    * Filters and structures the library grids based on the app's needs.
    * @param gridsDirContents The contents of the grids dir.
    * @returns The filtered and structured grids dir.
    * ? Logging complete.
    */
-  private static filterGridsDir(gridsDirContents: fs.FileEntry[]): { [appid: string]: LibraryCacheEntry } {
+  private static filterGridsDir(gridsDirContents: fs.FileEntry[]): [{ [appid: string]: LibraryCacheEntry }, fs.FileEntry[]] {
     let resKeys = [];
+    const logoConfigs = [];
     const res: { [appid: string]: LibraryCacheEntry } = {};
 
     for (const fileEntry of gridsDirContents) {
-      const firstUnderscore = fileEntry.name.indexOf("_") > 0 ? fileEntry.name.indexOf("_") : fileEntry.name.indexOf(".") - 1;
-      const appId = fileEntry.name.substring(0, firstUnderscore);
-      let type = "";
-      if (fileEntry.name.indexOf("_") > 0) {
-        type = fileEntry.name.substring(firstUnderscore + 1, fileEntry.name.indexOf("."));
+      if (fileEntry.name.endsWith(".json")) {
+        logoConfigs.push(fileEntry);
       } else {
-        type = (fileEntry.name.includes("p")) ? "capsule" : "wide_capsule";
-      }
+        const firstUnderscore = fileEntry.name.indexOf("_") > 0 ? fileEntry.name.indexOf("_") : fileEntry.name.indexOf(".") - 1;
+        const appId = fileEntry.name.substring(0, firstUnderscore);
+        let type = "";
+        if (fileEntry.name.indexOf("_") > 0) {
+          type = fileEntry.name.substring(firstUnderscore + 1, fileEntry.name.indexOf("."));
+        } else {
+          type = (fileEntry.name.includes("p")) ? "capsule" : "wide_capsule";
+        }
 
-      if (gridTypeLUT[type]) {
-        if (!resKeys.includes(appId)) {
-          resKeys.push(appId);
-          res[appId] = {} as LibraryCacheEntry;
+        if (gridTypeLUT[type]) {
+          if (!resKeys.includes(appId)) {
+            resKeys.push(appId);
+            res[appId] = {} as LibraryCacheEntry;
+          }
+          res[appId][gridTypeLUT[type]] = fileEntry.path;
         }
-        res[appId][gridTypeLUT[type]] = fileEntry.path;
       }
     }
 
-    return res;
+    return [res, logoConfigs];
   }
 
   /**
@@ -206,13 +235,15 @@ export class AppController {
    */
   private static async getCacheData(shortcuts: GameStruct[]): Promise<{ [appid: string]: LibraryCacheEntry }> {
     const gridDirContents = (await fs.readDir(await RustInterop.getGridsDirectory(get(activeUserId).toString())));
-    const filteredGrids = AppController.filterGridsDir(gridDirContents);
+    const [filteredGrids, logoConfigs] = AppController.filterGridsDir(gridDirContents);
     LogController.log("Grids loaded.");
 
     const libraryCacheContents = (await fs.readDir(await RustInterop.getLibraryCacheDirectory()));
     const filteredCache = AppController.filterLibraryCache(libraryCacheContents, filteredGrids, shortcuts);
     LogController.log("Library Cache loaded.");
 
+    await AppController.cacheLogoConfigs(logoConfigs);
+
     return filteredCache;
   }
 
@@ -613,9 +644,26 @@ export class AppController {
    * @param pinPosition The position of the logo.
    * @param heightPct The height percentage.
    * @param widthPct The width percentage.
+   * ? Logging complete.
    */
   static async setLogoPosition(appId: number, pinPosition: LogoPinPositions, heightPct: number, widthPct: number): Promise<void> {
+    const logoPositions = get(steamLogoPositions);
+
+    const currentPos = logoPositions[appId];
+    logoPositions[appId] = {
+      nVersion: currentPos.nVersion,
+      logoPosition: {
+        pinnedPosition: pinPosition,
+        nHeightPct: heightPct,
+        nWidthPct: widthPct
+      }
+    }
+
+    steamLogoPositions.set(logoPositions);
+
+    canSave.set(true);
 
+    LogController.log(`Updated logo position for game ${appId}`);
   }
 
   /**

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -71,8 +71,13 @@ type ChangedPath = {
 
 type LogoPinPositions = 'BottomLeft' | 'UpperLeft' | 'CenterCenter' | 'UpperCenter' | 'BottomCenter';
 
-interface LogoPosition {
-  pinnedPosition: LogoPinPositions;
-  nWidthPct: number;
-  nHeightPct: number;
-};
+type LogoPosition = {
+  pinnedPosition: LogoPinPositions,
+  nWidthPct: number,
+  nHeightPct: number,
+};
+
+type SteamLogoConfig = {
+  nVersion: number,
+  logoPosition: LogoPosition,
+}
diff --git a/src/windows/main/Main.svelte b/src/windows/main/Main.svelte
@@ -115,7 +115,9 @@
   </Titlebar>
 	<div class="content">
 		<GridPreviewModal show={$showGridModal} onClose={onGridModalClose} />
-		<LogoPositionModal show={$showLogoPositionModal} onClose={onLogoPositionModalClose} />
+    {#if $showLogoPositionModal}
+		  <LogoPositionModal onClose={onLogoPositionModalClose} />
+    {/if}
 		<Splitpanes>
 			<Options />