From 571bcd14d3fd3a11f0a2d7fb9d44f9ec23527c0e Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sat, 20 Apr 2024 00:36:27 +0200
Subject: [PATCH] Hand player update

---
 app.vue                    |  9 ++++-----
 components/CardPreview.vue | 14 ++++++++++++--
 components/CardSlot.vue    |  2 +-
 components/GameBoard.vue   |  4 +++-
 components/PlayerSlot.vue  | 17 +++++++++++++++++
 5 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 components/PlayerSlot.vue

diff --git a/app.vue b/app.vue
index 761d3f3..5f82ade 100644
--- a/app.vue
+++ b/app.vue
@@ -2,9 +2,9 @@
 import { ref } from 'vue';
 const cards = useState<{ [key: string]: any }>('cards', () => ({}))
 const players = useState<{ [key: string]: any }>('players', () => ({}))
-const self = useState<any>('self', () => (null))
+const self = useState<string>('self')
 let gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
-let game = ref<any>({})
+let game = ref<any>({ started: true })
 let context = ref<string>('login')
 const socket = new WebSocket("ws://127.0.0.1:8765")
 
@@ -61,8 +61,7 @@ socket.onmessage = function (event) {
     context.value = data.data
     console.log(context.value)
   } else if (data.type === "set" && data.data_type == "self") {
-    self.value = players.value[data.data]
-    console.log(self.value)
+    self.value = data.data
   } else {
     console.log(data.type, data.data_type, data.data);
   }
@@ -91,7 +90,7 @@ async function setReady(value: Event) {
 </script>
 
 <template>
-  <button v-if="!self" @click="register('legonzaur')">LOGIN</button>
+  <button v-if="!self && !game.started" @click="register('legonzaur')">LOGIN</button>
   <input @change="setReady" v-if="self && !game.started" type="checkbox" id="ready">
   <label v-if="self && !game.started" for="scales">Ready</label>
   <div>
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 2cf5d2c..29f6079 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -1,17 +1,27 @@
 <script setup lang="ts">
-const props = defineProps(['data'])
+const props = defineProps({
+    data: {
+        type: String as PropType<string>,
+        required: false,
+    },
+})
 const cards = useState<{ [key: string]: any }>('cards')
 
 function cardClick() {
+    if (!props.data) return
     console.log(JSON.parse(JSON.stringify(cards.value[props.data].effects)))
 }
 </script>
 
 <template>
-    <span @click="cardClick">
+    <span v-if="props.data" @click="cardClick">
         {{ cards[props.data].name }}
     </span>
 
+    <span v-if="!props.data">
+        HIDDEN
+    </span>
+
     |
 </template>
 
diff --git a/components/CardSlot.vue b/components/CardSlot.vue
index 8085396..d4f8533 100644
--- a/components/CardSlot.vue
+++ b/components/CardSlot.vue
@@ -4,6 +4,6 @@ const props = defineProps(['stack'])
 
 <template>
     <span>
-        <CardPreview v-for="c in props.stack" :data="c" :key="c.uuid" />
+        <CardPreview v-for="c in props.stack" :data="c" />
     </span>
 </template>
\ No newline at end of file
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 288bbda..39f5ef7 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -7,7 +7,7 @@ const gameObject = useState<{ [key: string]: any }>('gameObject')
 <template>
     <div>
         <div>
-            self = {{ self?.username }}
+            self = {{ gameObject[self]?.username }}
             <br>
             market_amount = {{ props.game.market_stack?.length }}
             <br>
@@ -18,6 +18,8 @@ const gameObject = useState<{ [key: string]: any }>('gameObject')
             <CardSlot :stack="props.game.gem_stack" />
         </div>
         <div>
+            <PlayerSlot :player="self"></PlayerSlot>
+            <br>
             players = {{ props.game.players?.map((e: any) => gameObject[e].username) }}
         </div>
     </div>
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
new file mode 100644
index 0000000..8e1f687
--- /dev/null
+++ b/components/PlayerSlot.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps(['player'])
+const gameObject = useState<{ [key: string]: any }>('gameObject')
+</script>
+
+<template>
+    <span>
+        hand =
+        <CardSlot :stack="gameObject[props.player]?.hand" />
+        <br>
+        stack =
+        <CardSlot :stack="gameObject[props.player]?.stack_pile" />
+        <br>
+        discard =
+        <CardSlot :stack="gameObject[props.player]?.discard_pile" />
+    </span>
+</template>
\ No newline at end of file