From 05d711644d7fb91cb3a9c0c30a52f6df5db08698 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 5 Apr 2024 18:48:37 +0200
Subject: [PATCH] basic card display

---
 app.vue                    | 6 +++---
 components/CardPreview.vue | 8 ++++----
 components/CardSlot.vue    | 8 ++++----
 components/GameBoard.vue   | 6 ++++--
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app.vue b/app.vue
index 458c945..30acad6 100644
--- a/app.vue
+++ b/app.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
-const cards = reactive<{ [key: string]: any }>({})
+import { ref } from 'vue';
+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 },
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index cd2d4d4..780d60a 100644
--- a/components/CardPreview.vue
+++ b/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>
\ No newline at end of file
diff --git a/components/CardSlot.vue b/components/CardSlot.vue
index eacec5d..8085396 100644
--- a/components/CardSlot.vue
+++ b/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>
\ No newline at end of file
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index ab82bd3..76a74f3 100644
--- a/components/GameBoard.vue
+++ b/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 }}