Conjure/conjure-os
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'tristan-wip' of https://gitea.clubconjure.com/Conjure/conjure-os into tristan-wip

Browse Source
This commit is contained in:
club 2025-06-30 21:32:35 -04:00
commit 87eb3de238
4 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/GameCard.vue
View File

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

9
frontend/src/components/GamePreview.vue
View File

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

8
frontend/src/components/LocalImage.vue
View File

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

17
frontend/src/utils/image-manager.ts
View File

@ -1,20 +1,29 @@
import {LoadImage} from "../../wailsjs/go/main/App"; import { LoadImage } from "../../wailsjs/go/main/App";
import * as path from "node:path";
export class ImageManager { export class ImageManager {
static Dictionary: {[key: string]: string} = {} static Dictionary: {[key: string]: string} = {}
public static async getImage(gameId: string, src: string): Promise<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]) if (this.Dictionary[id])
return this.Dictionary[id] return this.Dictionary[id]
const fileBlob = await LoadImage(gameId, src); 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 }); const blob = new Blob([bytes], {type: fileBlob.MimeType });
console.log(blob)
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
console.log(url)
this.Dictionary[id] = url this.Dictionary[id] = url
console.log(this.Dictionary)
return url; return url;
} }