Swipe cards one by one

components/CardView.vue

@@ -1,30 +1,27 @@
 <template>
   <motion.img
-    :src="props.card.image"
+    v-if="currentCard"
+    :src="currentCard?.image"
     draggable="false"
     class="h-[60cqh] max-h-[800px] w-[400px] origin-bottom rounded-lg object-cover hover:cursor-grab active:cursor-grabbing md:w-[600px]"
     :style="{
-      zIndex: props.isFront ? 500 : props.z,
       gridRow: 1,
       gridColumn: 1,
       transition: '0.125s transform',
       x,
       opacity,
       rotate,
-      boxShadow: isFront
-        ? '0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)'
-        : undefined,
+      boxShadow:
+        '0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)',
     }"
-    alt="Picture of the author"
-    :drag="dragValue"
+    :alt="currentCard?.name"
+    drag="x"
     :drag-constraints="{ left: 0, right: 0 }"
     :on-drag-end="handleDragEnd"
-    :animate="{
-      scale: props.isFront ? 1 : 0.98,
-    }"
   />
+  <h1 class="h-2 text-5xl">{{ currentCard?.name }}</h1>
 
-  <div v-if="props.isFront" class="flex justify-between">
+  <div v-if="currentCard" class="flex justify-between">
     <!-- Pass Button -->
     <button
       class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-violet-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-violet-600 focus:ring-4 focus:ring-violet-300 focus:outline-none"
@@ -57,39 +54,48 @@ import type { Card } from "~/types/Card";
 const cardStore = useCardStore();
 
 const props = defineProps({
-  card: {
-    type: Object as PropType<Card>,
-    required: true,
-  },
-  isFront: {
-    type: Boolean,
-    required: true,
-  },
-  z: {
-    type: Number,
+  cards: {
+    type: Object as PropType<Card[]>,
     required: true,
   },
 });
 
-const dragValue = computed(() => (props.isFront ? "x" : false));
+const emit = defineEmits<{
+  (e: "empty-list", isEmpty: boolean): void;
+}>();
+
+const currentCard = computed(() => props.cards[0]);
 
 const x = useMotionValue(0);
 const opacity = useTransform(x, [-150, 0, 150], [0, 1, 0]);
 const rotate = useTransform(x, [-150, 150], [-18, 18]);
 
+watch(
+  () => props.cards.length,
+  (newLength, oldLength) => {
+    if (oldLength && oldLength > 0 && newLength === 0) {
+      emit("empty-list", true);
+    }
+  },
+  { immediate: true },
+);
+
 const handleDragEnd = () => {
   if (Math.abs(x.get()) > 50) {
-    cardStore.removeCard(props.card.id);
+    cardStore.removeCard(currentCard?.value.id);
   }
 };
 
 async function swipeRight() {
-  console.log(props.card.id);
-  await animate(x, 300, { duration: 0.3 });
-  cardStore.removeCard(props.card.id);
+  await animate(x, 150, { duration: 0.3 });
+  cardStore.smashList.push(currentCard.value);
+  cardStore.removeCard(currentCard.value.id);
+  await animate(x, 0, { duration: 0.6 });
 }
 async function swipeLeft() {
-  await animate(x, -300, { duration: 0.3 });
-  cardStore.removeCard(props.card.id);
+  await animate(x, -150, { duration: 0.3 });
+  cardStore.passList.push(currentCard.value);
+  cardStore.removeCard(currentCard.value.id);
+  await animate(x, 0, { duration: 0.6 });
 }
 </script>