eS v1

app/components/card.vue

@@ -8,7 +8,7 @@
         <div class="flex items-center justify-center size-7 absolute top-7 right-7" v-if="isPlaylistTrack">
           <div class="suit text-7xl absolute"
             :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
-            {{ props.track.card?.suit }}
+            <img :src="`/${props.track.card?.suit}.svg`" />
           </div>
           <div class="rank text-white font-bold absolute -mt-1">
             {{ props.track.card?.rank }}
@@ -58,9 +58,9 @@ const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(),
   isFaceUp: false
 })
 const playerStore = usePlayerStore()
-const isManifesto = computed(() => props.track.compilationId.startsWith('ES00'))
+const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
 const isOrder = computed(() => props.track.order && !isManifesto)
-const isPlaylistTrack = computed(() => props.track.compilationId.length === 6)
+const isPlaylistTrack = computed(() => props.track.type === 'playlist')
 const isRedCard = computed(() => props.track.card?.suit === '♥' || props.track.card?.suit === '♦')
 const coverUrl = props.track.coverId.startsWith('http')
   ? props.track.coverId
@@ -111,20 +111,11 @@ const coverUrl = props.track.coverId.startsWith('http')
     transform: rotateY(180deg);
   }
 
-  .♠ {
-    @apply -mt-2;
-  }
-
-  .♣ {
-    @apply text-7xl -mt-2;
-  }
-
-  .♦ {
-    @apply -mt-3;
-  }
-
+  .♠,
+  .♣,
+  .♦,
   .♥ {
-    @apply text-5xl
+    @apply text-5xl size-14;
   }
 }
 </style>