image!

frontend/src/components/GameCard.vue

@@ -10,7 +10,7 @@
         :src="game.ThumbnailPath"
         class="h-32 w-48 object-cover"
         :alt="game.Game"
-        :key="game.Id"
+        :gameId="game.Id"
     />
   </div>
 </template>

frontend/src/components/GamePreview.vue

@@ -5,11 +5,13 @@
       <div class="text-sm text-gray-400">{{ game.Genres }} - {{ game.Players }} players</div>
       <p class="text-lg">{{ game.Description }}</p>
 
-      <div class="grid grid-cols-2 gap-4">
-        <img
-            v-for="(img, index) in [game.ImagePath, game.ThumbnailPath]"
+      <div class="flex">
+        <LocalImage
+            v-for="(img, index) in [game.ImagePath]"
             :key="index"
             :src="img"
+            :alt="img"
+            :gameId="game.Id"
             class="rounded-lg border border-gray-600 max-h-48 object-cover"
         />
       </div>
@@ -36,6 +38,7 @@
 <script setup lang="ts">
 import { models } from "../../wailsjs/go/models";
 import Game = models.Game;
+import LocalImage from "./LocalImage.vue";
 
 defineProps<{
   game: Game,

frontend/src/components/LocalImage.vue

@@ -14,16 +14,14 @@ import { ref, watch } from "vue";
 import { ImageManager } from "../utils/image-manager";
 
 const props = defineProps<{
-  key: string
+  gameId: string
   src: string
   alt: string
 }>();
 
 const blobUrl = ref<string | null>(null);
 
-watch(() => props.src, async (newUrl) => {
-  console.log(newUrl);
-  blobUrl.value = await ImageManager.getImage(props.key, newUrl);
-  console.log(blobUrl.value);
+watch(() => [props.src, props.gameId], async ([newUrl, key]) => {
+  blobUrl.value = await ImageManager.getImage(key, newUrl);
 }, { immediate: true });
 </script>

frontend/src/utils/image-manager.ts

@@ -1,20 +1,29 @@
-import {LoadImage} from "../../wailsjs/go/main/App";
-import * as path from "node:path";
+import { LoadImage } from "../../wailsjs/go/main/App";
 
 export class ImageManager {
 
     static Dictionary: {[key: string]: string} = {}
 
     public static async getImage(gameId: string, src: string): Promise<string> {
-        const id = path.join(gameId, src);
+        const id = gameId + "\\" + src;
+        console.log(gameId, src, id)
         if (this.Dictionary[id])
             return this.Dictionary[id]
 
         const fileBlob = await LoadImage(gameId, src);
-        const bytes = new Uint8Array(fileBlob.Data);
+        console.log(fileBlob)
+        const byteCharacters = atob(fileBlob.Data as any as string);
+        const byteNumbers = Array.from(byteCharacters).map(c => c.charCodeAt(0));
+        console.log(byteCharacters, byteNumbers)
+
+        const bytes = new Uint8Array(byteNumbers);
+        console.log(bytes)
         const blob = new Blob([bytes], {type: fileBlob.MimeType });
+        console.log(blob)
         const url = URL.createObjectURL(blob);
+        console.log(url)
         this.Dictionary[id] = url
+        console.log(this.Dictionary)
         return url;
     }