compose elt v0.1

app/components/Card.vue

@@ -71,22 +71,25 @@ import type { Track } from '~~/types/types'
 import { usePlayerStore } from '~/store/player'
 import { useDataStore } from '~/store/data';
 
-const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
-  isFaceUp: false
+const props = withDefaults(defineProps<{
+  track?: Track;
+  isFaceUp?: boolean;
+}>(), {
+  track: () => {
+    const dataStore = useDataStore();
+    return dataStore.getRandomPlaylistTrack() || {} as Track;
+  },
+  isFaceUp: true,
 })
+
 const playerStore = usePlayerStore()
 const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
 const isOrder = computed(() => props.track.order && !isManifesto)
 const isPlaylistTrack = computed(() => props.track.type === 'playlist')
-const isRedCard = computed(() => props.track.card?.suit === '♥' || props.track.card?.suit === '♦')
+const isRedCard = computed(() => (props.track.card?.suit === '♥' || props.track.card?.suit === '♦'))
 const dataStore = useDataStore()
 const cardColor = computed(() => dataStore.getYearColor(props.track.year || 0))
-const coverUrl = computed(() => {
-  if (!props.track.coverId) return ''
-  return props.track.coverId.startsWith('http')
-    ? props.track.coverId
-    : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
-})
+const coverUrl = computed(() => props.track.coverId || '/card-dock.svg')
 
 const dragStart = (event: DragEvent) => {
   if (event.dataTransfer) {