swipe game with overlay

components/CardView.vue

@@ -1,10 +1,10 @@
 <template>
   <motion.img
-    :src="props.card.url"
+    :src="props.card.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 ? 10 : props.z,
+      zIndex: props.isFront ? 500 : props.z,
       gridRow: 1,
       gridColumn: 1,
       transition: '0.125s transform',
@@ -75,11 +75,7 @@ const dragValue = computed(() => (props.isFront ? "x" : false));
 
 const x = useMotionValue(0);
 const opacity = useTransform(x, [-150, 0, 150], [0, 1, 0]);
-const rotateRaw = useTransform(x, [-150, 150], [-18, 18]);
-const rotate = useTransform(() => {
-  const offset = props.isFront ? 0 : props.card.id % 2 ? 4 : -4;
-  return `${rotateRaw.get() + offset}deg`;
-});
+const rotate = useTransform(x, [-150, 150], [-18, 18]);
 
 const handleDragEnd = () => {
   if (Math.abs(x.get()) > 50) {
@@ -88,6 +84,7 @@ const handleDragEnd = () => {
 };
 
 async function swipeRight() {
+  console.log(props.card.id);
   await animate(x, 300, { duration: 0.3 });
   cardStore.removeCard(props.card.id);
 }

components/UploadView.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="mt-20 flex flex-col items-center gap-5">
+    <FloatLabel variant="in">
+      <InputText id="collection" v-model="collectionName" variant="filled" />
+      <label for="collection">Collection Name</label>
+    </FloatLabel>
+    <FileUpload
+      name="files[]"
+      :auto="false"
+      :multiple="true"
+      accept="image/*"
+      custom-upload
+      @uploader="onUpload"
+    >
+      <template #empty>
+        <p>Drag and drop files here to upload.</p>
+      </template>
+    </FileUpload>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FileUploadUploaderEvent } from "primevue";
+
+const toast = useToast();
+const collectionName = ref("");
+
+const onUpload = async (event: FileUploadUploaderEvent) => {
+  const files = Array.isArray(event.files) ? event.files : [event.files];
+  if (collectionName.value.trim().length === 0) {
+    toast.error({
+      title: "Collection name missing",
+      message: "Please enter a valid collection name.",
+    });
+    return;
+  }
+  for (const file of files) {
+    const formData = new FormData();
+    formData.append("image", file);
+    formData.append("name", toTitleCaseWithSpaces(parseImageName(file.name)));
+    formData.append("collection_name", collectionName.value);
+
+    try {
+      await $fetch("/api/cards/", {
+        method: "POST",
+        body: formData,
+        baseURL: useApiBase(),
+      });
+      toast.success({
+        title: "Success!",
+        message: "Files uploaded successfully",
+      });
+    } catch (e) {
+      console.error(e);
+      toast.error({
+        title: "Upload failed!",
+        message: "Something went wrong.",
+      });
+    }
+  }
+};
+</script>