frontend/src/App.vue

@@ -51,8 +51,7 @@ const optionsOpen = ref(false);
 onMounted(async () => {
   games.value = await fetchGames();
   tags.value = [...new Set(games.value.flatMap(game => game.Genres.split(",")))];
-  selectedTag.value = tags.value[0];
+  store.selectTag(tags.value[0])
-  selectedGame.value = store.filteredGames[0];
 });
 
 KeyboardManager.switchContext("sidebar")

frontend/src/components/GamePreview.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="p-6 h-full overflow-auto">
     <div v-if="game" class="space-y-4">
-      <h1 class="text-4xl font-bold">{{ game.title }}</h1>
+      <h1 class="text-4xl font-bold">{{ game.Game }}</h1>
-      <div class="text-sm text-gray-400">{{ game.genre }} - {{ 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">
         <img
-            v-for="(img, index) in game.media"
+            v-for="(img, index) in [game.ImagePath, game.ThumbnailPath]"
             :key="index"
             :src="img"
             class="rounded-lg border border-gray-600 max-h-48 object-cover"
@@ -15,10 +15,11 @@
       </div>
 
       <div class="space-y-2">
-        <div><strong>Languages:</strong> {{ game.languages.join(', ') }}</div>
         <div class="flex gap-2 mt-2">
           <button
-              v-for="(link, name) in game.links"
+              v-for="(link, name) in {
+                Repo: game.PublicRepositoryLink
+              }"
               :key="name"
               class="bg-blue-600 px-3 py-1 rounded hover:bg-blue-500"
               @click="$emit('qr', link)"
@@ -33,9 +34,12 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
+import { models } from "../../wailsjs/go/models";
-  game: Object,
+import Game = models.Game;
-});
+
+defineProps<{
+  game: Game,
+}>();
 
 defineEmits(['qr']);
 </script>