basic card display

app.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
-const cards = reactive<{ [key: string]: any }>({})
+const cards = useState<{ [key: string]: any }>('cards', () => ({}))
 let game = ref<any>({})
 const socket = new WebSocket("ws://127.0.0.1:8765")
 
 const createObject = {
   "card": (data: any) => {
-    cards[data.uuid] = data
+    cards.value[data.uuid] = data
   },
   "player": () => { },
   "game": (data: any) => { game.value = data },

components/CardPreview.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-defineProps(['data'])
+const props = defineProps(['data'])
+const cards = useState<{ [key: string]: any }>('cards')
 </script>
 
 <template>
-    <div>
+    {{ cards[props.data].name }}
-        {{ data.name }}
+    |
-    </div>
 </template>

components/CardSlot.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-defineProps(['cards'])
+const props = defineProps(['stack'])
 </script>
 
 <template>
-    <div>
+    <span>
-        <CardPreview v-for="c in cards" :data="c" :key="c.uuid" />
+        <CardPreview v-for="c in props.stack" :data="c" :key="c.uuid" />
-    </div>
+    </span>
 </template>

components/GameBoard.vue

@@ -8,9 +8,11 @@ const props = defineProps(['game'])
         <div>
             market_amount = {{ props.game.market_stack?.length }}
             <br>
-            market = {{ props.game.market }}
+            market =
+            <CardPreview v-for="c in props.game.market" :data="c" :key="c.uuid" />
             <br>
-            gems = {{ props.game.gem_stack }}
+            gems =
+            <CardSlot :stack="props.game.gem_stack" />
         </div>
         <div>
             players = {{ props.game.players }}