feat: added modal to view current grids for games

Tormak9970 · Jan 7, 2024 · abab377 · abab377
1 parent e726dfd
commit abab377
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 38 deletions.
diff --git a/src/components/modals/current-grids/CurrentGridImage.svelte b/src/components/modals/current-grids/CurrentGridImage.svelte
@@ -5,29 +5,27 @@
   export let gameTitle: string;
   export let gridType: GridTypes;
   export let src: string;
-  export let imageWidth: string;
-  export let imageHeight: string;
 
   const widths = {
     "Capsule": 200,
-    "Wide Capsule": 600,
-    "Hero": 956,
-    "Logo": 600,
-    "Icon": 64,
+    "Wide Capsule": 460,
+    "Hero": 680,
+    "Logo": 460,
+    "Icon": 32,
   };
 
   const heights = {
     "Capsule": 300,
-    "Wide Capsule": 291,
-    "Hero": 342,
-    "Logo": 201,
-    "Icon": 64,
+    "Wide Capsule": 215,
+    "Hero": 220,
+    "Logo": 122,
+    "Icon": 32,
   };
 </script>
 
 <div class="grid-image">
   <div class="label">{gridType}</div>
-  <div class="img-cont" style="max-width: {widths[gridType]}px; max-height: {heights[gridType]}px; width: {imageWidth}px; height: {imageHeight}px;">
+  <div class="img-cont" style="width: {widths[gridType]}px; height: {heights[gridType]}px;">
     <div class="img" class:logo-background={gridType === GridTypes.LOGO} class:icon-background={gridType === GridTypes.ICON} style="max-height: {heights[gridType]}px;">
       <Lazy height="{heights[gridType]}px" fadeOption={{ delay: 500, duration: 1000 }}>
         <img src="{src}" alt="{gridType} image for {gameTitle}." style="max-width: {widths[gridType]}px; max-height: {heights[gridType]}px; width: auto; height: auto;" />
@@ -37,17 +35,13 @@
 </div>
 
 <style>
-  .grid-image {
-
-  }
-
   .label {
     padding-left: 10px;
     font-size: 18px;
   }
 
   .img-cont {
-    padding: 3px 10px;
+    margin: 3px 10px;
     display: flex;
     flex-direction: column;
     justify-content: center;

diff --git a/src/components/modals/current-grids/CurrentGridsModal.svelte b/src/components/modals/current-grids/CurrentGridsModal.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import { GridTypes, appLibraryCache, gridType, manualSteamGames, nonSteamGames, steamGames, unfilteredLibraryCache } from "../../../stores/AppState";
   import ModalBody from "../modal-utils/ModalBody.svelte";
-  import { currentGridsAppid, gridModalInfo, showGridModal } from "../../../stores/Modals";
+  import { currentGridsAppid, showCurrentGridsModal } from "../../../stores/Modals";
   import CurrentGridImage from "./CurrentGridImage.svelte";
-    import { tauri } from "@tauri-apps/api";
+  import { tauri } from "@tauri-apps/api";
 
   /**
    * The function to run when the modal closes.
    */
   function onClose(): void {
-    $showGridModal = false;
-		$gridModalInfo = null;
+    $showCurrentGridsModal = false;
+		$currentGridsAppid = null;
   }
 
   let imageSources = {
@@ -41,38 +41,26 @@
   <div class="content">
     <div class="other-grids-container">
       <div class="left-col">
-        <CurrentGridImage gameTitle={game.name} gridType={GridTypes.CAPSULE} src={imageSources[GridTypes.CAPSULE]} imageWidth="auto" imageHeight="auto" />
-        <CurrentGridImage gameTitle={game.name} gridType={GridTypes.ICON} src={imageSources[GridTypes.ICON]} imageWidth="auto" imageHeight="auto" />
+        <CurrentGridImage gameTitle={game.name} gridType={GridTypes.CAPSULE} src={imageSources[GridTypes.CAPSULE]} />
+        <CurrentGridImage gameTitle={game.name} gridType={GridTypes.ICON} src={imageSources[GridTypes.ICON]} />
       </div>
       <div class="right-col">
-        <CurrentGridImage gameTitle={game.name} gridType={GridTypes.WIDE_CAPSULE} src={imageSources[GridTypes.WIDE_CAPSULE]} imageWidth="auto" imageHeight="auto" />
-        <CurrentGridImage gameTitle={game.name} gridType={GridTypes.LOGO} src={imageSources[GridTypes.LOGO]} imageWidth="auto" imageHeight="auto" />
+        <CurrentGridImage gameTitle={game.name} gridType={GridTypes.WIDE_CAPSULE} src={imageSources[GridTypes.WIDE_CAPSULE]} />
+        <CurrentGridImage gameTitle={game.name} gridType={GridTypes.LOGO} src={imageSources[GridTypes.LOGO]} />
       </div>
     </div>
     <div class="hero-container">
-      <CurrentGridImage gameTitle={game.name} gridType={GridTypes.HERO} src={imageSources[GridTypes.HERO]} imageWidth="auto" imageHeight="auto" />
+      <CurrentGridImage gameTitle={game.name} gridType={GridTypes.HERO} src={imageSources[GridTypes.HERO]} />
     </div>
   </div>
 </ModalBody>
 
 <style>
   .content {
-
+    width: 700px;
   }
 
   .other-grids-container {
     display: flex;
   }
-
-  .left-col {
-
-  }
-
-  .right-col {
-
-  }
-
-  .hero-container {
-
-  }
 </style>