swipe game with overlay

store/Card.ts

@@ -1,20 +1,35 @@
 import { defineStore } from "pinia";
 import type { Card } from "~/types/Card";
+import type { Collection } from "~/types/Collection";
 
 export const useCardStore = defineStore("cardStore", {
   state: () => ({
-    collections: [] as string[],
+    collections: [] as Collection[],
     cards: [] as Card[],
+    smashList: [] as Card[],
+    passList: [] as Card[],
   }),
   actions: {
     async fetchCollections() {
-      const { data: collections } =
-        await useFetch<string[]>("/api/collections");
-      this.collections = collections.value ?? [];
+      const data = await $fetch<Collection[]>("/api/collections/", {
+        baseURL: useApiBase(),
+      });
+      this.collections = data ?? [];
     },
     async fetchCardsByCollection(collectionName: string) {
-      const response = useFetch<Card[]>(`/api/cards/${collectionName}`);
-      this.cards = response.data.value ?? [];
+      const data = await $fetch<Card[]>(
+        `/api/cards/?collection__name=${collectionName}`,
+        {
+          baseURL: useApiBase(),
+        },
+      );
+
+      this.cards =
+        data.map((card, index) => ({
+          ...card,
+          id: index,
+        })) ?? [];
+      console.log(this.cards);
     },
     removeCard(id: number) {
       const index = this.cards.findIndex((card) => card.id === id);