swipe game with overlay

pages/game.vue

@@ -4,7 +4,7 @@
       v-for="(card, index) in cardStore.cards"
       :key="card.id"
       :card="card"
-      :is-front="index === cardStore.cards.length - 1"
+      :is-front="index === 0"
       :z="index"
     />
   </div>
@@ -15,6 +15,8 @@ import CardView from "~/components/CardView.vue";
 import { useCardStore } from "~/store/Card";
 
 const route = useRoute();
-const collection = route.query.collection;
+const collection: string = route.query.collection as string;
 const cardStore = useCardStore();
+
+cardStore.fetchCardsByCollection(collection);
 </script>

pages/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="flex min-h-screen flex-col items-center justify-center">
+  <div class="flex min-h-screen flex-col items-center justify-center gap-5">
     <h1 class="mb-8 text-3xl font-bold">Select a collection to begin</h1>
     <ul class="w-full max-w-md space-y-4">
       <li
         v-for="collection in cardStore.collections"
-        :key="collection"
+        :key="collection.name"
         class="flex items-center justify-between rounded p-4 shadow"
       >
-        <span class="text-lg font-medium">{{ collection }}</span>
+        <span class="text-lg font-bold">{{ collection.name }}</span>
         <!-- Large Play Button -->
         <Button
           icon="pi pi-play"
@@ -22,10 +22,11 @@
               width 0.3s,
               height 0.3s;
           "
-          @click="play(collection)"
+          @click="play(collection.name)"
         />
       </li>
     </ul>
+    <UploadView />
   </div>
 </template>
 
@@ -34,8 +35,8 @@ import { useCardStore } from "~/store/Card";
 
 const cardStore = useCardStore();
 
-cardStore.collections = ["Test", "Test1"];
-
+cardStore.fetchCollections();
+/* 
 cardStore.cards = [
   {
     id: 1,
@@ -84,7 +85,7 @@ cardStore.cards = [
     name: "Pipi",
     url: "https://images.unsplash.com/photo-1505784045224-1247b2b29cf3?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
   },
-];
+]; */
 
 const activeItem = ref();