Swipe cards one by one

pages/game.vue

@@ -1,12 +1,7 @@
 <template>
-  <div class="grid min-h-screen place-items-center">
-    <CardView
-      v-for="(card, index) in cardStore.cards"
-      :key="card.id"
-      :card="card"
-      :is-front="index === 0"
-      :z="index"
-    />
+  <div v-if="loading">Loading...</div>
+  <div v-else class="grid min-h-screen place-items-center">
+    <CardView :cards="cardStore.cards" @empty-list="showResults" />
   </div>
 </template>
 
@@ -17,6 +12,14 @@ import { useCardStore } from "~/store/Card";
 const route = useRoute();
 const collection: string = route.query.collection as string;
 const cardStore = useCardStore();
+const loading = ref(true);
 
-cardStore.fetchCardsByCollection(collection);
+onMounted(async () => {
+  cardStore.fetchCardsByCollection(collection);
+  loading.value = false;
+});
+
+const showResults = () => {
+  navigateTo("result");
+};
 </script>

pages/index.vue

@@ -26,68 +26,22 @@
         />
       </li>
     </ul>
-    <UploadView />
+    <UploadView v-if="isUploadActive" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useCardStore } from "~/store/Card";
 
+const config = useRuntimeConfig();
 const cardStore = useCardStore();
 
 cardStore.fetchCollections();
-/* 
-cardStore.cards = [
-  {
-    id: 1,
-    name: "Pipi",
-    url: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  },
-
-  {
-    id: 2,
-    name: "Pipi",
-    url: "https://images.unsplash.com/photo-1512374382149-233c42b6a83b?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  },
-
-  {
-    id: 3,
-    name: "Pipi",
-    url: "https://images.unsplash.com/photo-1539185441755-769473a23570?q=80&w=2342&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  },
-
-  {
-    id: 4,
-    name: "Pipi",
-    url: "https://images.unsplash.com/photo-1549298916-b41d501d3772?q=80&w=2224&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  },
-
-  {
-    id: 5,
-    name: "Pipi",
-    url: "https://images.unsplash.com/photo-1516478177764-9fe5bd7e9717?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  },
-
-  {
-    id: 6,
-    name: "Pipi",
-    url: "https://images.unsplash.com/photo-1570464197285-9949814674a7?q=80&w=2273&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  },
-
-  {
-    id: 7,
-    name: "Pipi",
-    url: "https://images.unsplash.com/photo-1578608712688-36b5be8823dc?q=80&w=2187&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  },
-
-  {
-    id: 8,
-    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();
+const isUploadActive = computed(() =>
+  config.public.isUploadActive === "true" ? true : false,
+);
 
 const play = (collection: string) => {
   navigateTo({ path: "game", query: { collection: collection } });

pages/result.vue

@@ -8,14 +8,14 @@
           class="grid grid-cols-1 gap-2 lg:grid-cols-3 xl:grid-cols-5 xl:gap-4"
         >
           <div
-            v-for="(img, idx) in imagesListOne"
-            :key="idx"
+            v-for="card in cardStore.smashList"
+            :key="card.id"
             class="flex items-center justify-center rounded p-2 shadow"
           >
             <img
-              :src="img"
+              :src="card.image"
               alt="Image from Smash List"
-              class="h-32 w-full rounded object-cover"
+              class="w-full rounded object-cover"
             />
           </div>
         </div>
@@ -27,42 +27,29 @@
           class="grid grid-cols-1 gap-2 lg:grid-cols-3 xl:grid-cols-5 xl:gap-4"
         >
           <div
-            v-for="(img, idx) in imagesListTwo"
-            :key="idx"
+            v-for="card in cardStore.passList"
+            :key="card.id"
             class="flex items-center justify-center rounded p-2 shadow"
           >
             <img
-              :src="img"
+              :src="card.image"
               alt="Image from pass list"
-              class="h-32 w-full rounded object-cover"
+              class="w-full rounded object-cover"
             />
           </div>
         </div>
       </div>
     </div>
-    <Button label="Return" class="h-16 w-64" />
+    <Button label="Return" class="h-16 w-64" @click="goHome" />
   </div>
 </template>
 
 <script setup>
-const imagesListOne = [
-  // Replace with your image URLs
-  "https://picsum.photos/id/1011/200/200",
-  "https://picsum.photos/id/1012/800/400",
-  "https://picsum.photos/id/1013/200/200",
-  "https://picsum.photos/id/1014/200/200",
-  "https://picsum.photos/id/1015/200/200",
-  "https://picsum.photos/id/1016/200/200",
-  // ...more images
-];
+import { useCardStore } from "~/store/Card";
 
-const imagesListTwo = [
-  "https://picsum.photos/id/1021/200/200",
-  "https://picsum.photos/id/1022/200/200",
-  "https://picsum.photos/id/1023/200/200",
-  "https://picsum.photos/id/1024/200/200",
-  "https://picsum.photos/id/1025/200/200",
-  "https://picsum.photos/id/1026/200/200",
-  // ...more images
-];
+const cardStore = useCardStore();
+
+const goHome = () => {
+  navigateTo("");
+};
 </script>