Fix reactive with new system

components/CardPreview.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
+import type { Card } from '~/netcode/Card';
+
 
 export interface Props {
-    data?: string
+    data?: Card | null
     locked?: boolean
 }
 
 const props = defineProps<Props>()
 
-const cards = useState<{ [key: string]: any }>('cards')
-
 const buttonsElement = ref<HTMLElement | null>(null)
 const rightClicked = ref(false)
 
 function cardClick() {
-    if (!props.data) return
-    console.log(JSON.parse(JSON.stringify(cards.value[props.data].effects)))
+    if (props.data == null) return
+    console.log(JSON.parse(JSON.stringify(props.data.effects)))
 }
 
 function contextmenu(e: MouseEvent) {
@@ -27,12 +27,11 @@ function contextmenu(e: MouseEvent) {
 <template>
     <div :class="`card ${Number(buttonsElement?.childElementCount) > 0 ? 'active' : ''}`" @contextmenu.prevent="false"
         @click.left="cardClick" @click.right="contextmenu">
-
         <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="props.data"
-            :src="'/cards/' + cards[props.data]?.card_id.toString().padStart(3, '0') + '.jpg'">
+            :src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.jpg'">
 
-        <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`"
-            v-if="props.data === null" :src="'/cards/background.jpg'">
+        <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="!props.data"
+            :src="'/cards/background.jpg'">
 
     </div>