Change CardPreview component to use only card ID

components/CardPreview.vue

@@ -3,7 +3,7 @@ import type { Card } from '~/netcode/Card';
 
 
 export interface Props {
-    data: Card | null | undefined
+    card_id: number | undefined
     locked?: boolean
     wrapped?: boolean
 }
@@ -18,7 +18,7 @@ const emit = defineEmits(["click"])
 const childCount = ref<number>(0)
 
 function cardClick() {
-    if (!props.data) return
+    if (!props.card_id) return
     emit("click")
 }
 
@@ -30,7 +30,7 @@ const rotation = ref(0)
 
 
 watch(
-    () => props.data,
+    () => props.card_id,
     () => {
         rotation.value = Math.random() > .5 ? 2 : -2
     },
@@ -43,10 +43,10 @@ watch(
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
-        <img :class="`card_image`" v-if="props.data"
-            :src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'" draggable="false">
+        <img :class="`card_image`" v-if="props.card_id"
+            :src="'/cards/' + props.card_id.toString().padStart(3, '0') + '.png'" draggable="false">
 
-        <img :class="`card_image`" v-if="!props.data" :src="'/cards/background.png'" draggable="false">
+        <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false">
 
     </div>