basic card display

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>
-        {{ data.name }}
-    </div>
+    {{ cards[props.data].name }}
+    |
 </template>

components/CardSlot.vue

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