load players

components/CardPreview.vue

@@ -1,9 +1,23 @@
 <script setup lang="ts">
 const props = defineProps(['data'])
 const cards = useState<{ [key: string]: any }>('cards')
+
+function cardClick() {
+    console.log(JSON.parse(JSON.stringify(cards.value[props.data].effects)))
+}
 </script>
 
 <template>
-    {{ cards[props.data].name }}
+    <span @click="cardClick">
+        {{ cards[props.data].name }}
+    </span>
+
     |
-</template>
+</template>
+
+<style scoped>
+span {
+    border: 1px solid black;
+    cursor: pointer
+}
+</style>

components/GameBoard.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 const props = defineProps(['game'])
-
+const self = useState<any>('self')
+const gameObject = useState<{ [key: string]: any }>('gameObject')
 </script>
 
 <template>
     <div>
         <div>
+            self = {{ self?.username }}
+            <br>
             market_amount = {{ props.game.market_stack?.length }}
             <br>
             market =
@@ -15,7 +18,7 @@ const props = defineProps(['game'])
             <CardSlot :stack="props.game.gem_stack" />
         </div>
         <div>
-            players = {{ props.game.players }}
+            players = {{ props.game.players?.map((e: any) => gameObject[e].username) }}
         </div>
     </div>
 </template>