From 56cbe9bab45b9add940d47c58ddd11f40440e28a Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Thu, 25 Apr 2024 00:32:40 +0200
Subject: [PATCH] card locking and event triggering WIP

---
 app.vue                     | 10 +++++
 components/CardPreview.vue  | 18 ++++++---
 components/CardSlot.vue     | 17 +++++----
 components/GameBoard.vue    | 32 ++++------------
 components/PlayerSlot.vue   | 73 +++++++++++++++++++------------------
 public/cards/background.jpg |  3 ++
 6 files changed, 81 insertions(+), 72 deletions(-)
 create mode 100644 public/cards/background.jpg

diff --git a/app.vue b/app.vue
index ae87610..1d03985 100644
--- a/app.vue
+++ b/app.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 const cards = useState<{ [key: string]: any }>('cards', () => ({}))
+const effects = useState<{ [key: string]: any }>('effects', () => ({}))
 const players = useState<{ [key: string]: any }>('players', () => ({}))
 const teams = useState<{ [key: string]: any }>('teams', () => ({}))
+const turns = useState<{ [key: string]: any }>('turns', () => ({}))
 const self = useState<string>('self')
 const gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
 
@@ -14,6 +16,10 @@ let username = ref<string>('legonzaur')
 
 
 const createObject = {
+  "effect": (data: any) => {
+    effects.value[data.uuid] = data
+    gameObjects.value[data.uuid] = data
+  },
   "card": (data: any) => {
     cards.value[data.uuid] = data
     gameObjects.value[data.uuid] = data
@@ -29,6 +35,10 @@ const createObject = {
   "team": (data: any) => {
     teams.value[data.uuid] = data
     gameObjects.value[data.uuid] = data
+  },
+  "turn": (data: any) => {
+    turns.value[data.uuid] = data
+    gameObjects.value[data.uuid] = data
   }
 } as { [id: string]: (data: Object) => any }
 
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 7f9cf39..44cb9b3 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -2,6 +2,7 @@
 
 export interface Props {
     data?: string
+    locked?: boolean
 }
 
 const props = defineProps<Props>()
@@ -24,15 +25,15 @@ function contextmenu(e: MouseEvent) {
 </script>
 
 <template>
-
     <div :class="`card ${Number(buttonsElement?.childElementCount) > 0 ? 'active' : ''}`" @contextmenu.prevent="false"
         @click.left="cardClick" @click.right="contextmenu">
 
-        <img :class="`card_image ${rightClicked ? 'outlined' : ''}`" v-if="props.data"
-            :src="'/cards/' + cards[props.data].card_id.toString().padStart(3, '0') + '.jpg'">
-        <span v-if="props.data === null">
-            HIDDEN
-        </span>
+        <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="props.data"
+            :src="'/cards/' + cards[props.data]?.card_id.toString().padStart(3, '0') + '.jpg'">
+
+        <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`"
+            v-if="props.data === null" :src="'/cards/background.jpg'">
+
     </div>
 
     <div :class="rightClicked ? '' : 'hidden'" id="contextMenu" @click.self.prevent="rightClicked = false">
@@ -53,6 +54,11 @@ function contextmenu(e: MouseEvent) {
     outline-offset: -2px;
 }
 
+.card_image.locked {
+    outline: 2px solid green;
+    outline-offset: -2px;
+}
+
 .card_image {
     max-height: 150px;
 }
diff --git a/components/CardSlot.vue b/components/CardSlot.vue
index d338add..892be42 100644
--- a/components/CardSlot.vue
+++ b/components/CardSlot.vue
@@ -14,16 +14,19 @@ const wrapped = ref(false)
 <template>
     {{ props.stack?.length }}
     <input type="checkbox" v-model="wrapped" />
+    <div class="cards_container">
 
-    <CardPreview v-if="!wrapped" :data="props.stack.at(-1)">
-        <slot></slot>
-    </CardPreview>
-
-    <template v-if="wrapped" v-for="c in props.stack">
-        <CardPreview :data="c">
+        <CardPreview v-if="!wrapped" :data="props.stack.at(-1)">
             <slot></slot>
         </CardPreview>
-    </template>
+
+        <template v-if="wrapped" v-for="c in props.stack">
+            <CardPreview :data="c">
+                <slot></slot>
+            </CardPreview>
+        </template>
+    </div>
+
 
 
 </template>
\ No newline at end of file
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 359e46f..ea90f7f 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -2,9 +2,10 @@
 const props = defineProps(['game'])
 const self = useState<string>('self')
 const gameObject = useState<{ [key: string]: any }>('gameObject')
+const cards = useState<{ [key: string]: any }>('cards')
 const socket = useState<WebSocket>('socket')
 
-const isTurn = computed(() => self.value && props.game?.started && (gameObject.value[self.value]?.team == props.game.turn))
+const isTurn = computed(() => self.value && props.game?.started && (gameObject.value[self.value]?.team == props.game.current_turn))
 
 async function buy(cardId: string) {
     socket.value.send(JSON.stringify({
@@ -14,22 +15,6 @@ async function buy(cardId: string) {
     }))
 }
 
-async function buy_in_hand(cardId: string) {
-    socket.value.send(JSON.stringify({
-        type: "temp_action",
-        data_type: "buy_in_hand",
-        data: cardId
-    }))
-}
-
-async function buy_on_stack(cardId: string) {
-    socket.value.send(JSON.stringify({
-        type: "temp_action",
-        data_type: "buy_on_stack",
-        data: cardId
-    }))
-}
-
 async function endTurn() {
     socket.value.send(JSON.stringify({
         type: "action",
@@ -41,8 +26,7 @@ async function endTurn() {
 </script>
 
 <template>
-
-    <div>
+    <div @contextmenu.prevent="false">
         <button v-if="isTurn" @click="endTurn">END TURN</button>
         <div v-if="!self"><b>SPECTATOR MODE</b></div>
         <div>
@@ -54,12 +38,12 @@ async function endTurn() {
                 <CardPreview :data="c" v-for="c in props.game.market">
                     <template v-if="isTurn && c">
                         <button @click="buy(c)">BUY</button>
-                        <button @click="buy_in_hand(c)">
+                        <!-- <button @click="buy_in_hand(c)">
                             BUY IN HAND
                         </button>
                         <button @click="buy_on_stack(c)">
                             BUY ON STACK
-                        </button>
+                        </button> -->
                     </template>
                 </CardPreview>
             </div>
@@ -71,17 +55,17 @@ async function endTurn() {
                     <button @click="buy(props.game.gem_stack.at(-1))">
                         BUY
                     </button>
-                    <button @click="buy_in_hand(props.game.gem_stack.at(-1))">
+                    <!-- <button @click="buy_in_hand(props.game.gem_stack.at(-1))">
                         BUY IN HAND
                     </button>
                     <button @click="buy_on_stack(props.game.gem_stack.at(-1))">
                         BUY ON STACK
-                    </button>
+                    </button> -->
                 </template>
             </CardSlot>
         </div>
         <div>
-            <PlayerList :players="props.game?.players" :current_team="game.turn"></PlayerList>
+            <PlayerList :players="props.game?.players" :current_team="game.current_turn"></PlayerList>
         </div>
     </div>
 </template>
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index c16ac17..1e6a53f 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 const props = defineProps(['player', 'current_team'])
 const teams = useState<{ [key: string]: any }>('teams')
+const effects = useState<{ [key: string]: any }>('effects')
 const self = useState<string>('self')
+const turns = useState<{ [key: string]: any }>('turns')
 const socket = useState<WebSocket>('socket')
 const isTurn = computed(() => props.player.team == props.current_team)
 const isSelf = computed(() => props.player.uuid == self.value)
 
+const selfTurn = computed(() => turns.value[props.player?.turn as string])
+
 const discard_wrapped = ref(false)
 
 
@@ -19,27 +23,27 @@ function playAllCards() {
 function playCard(cardId: string) {
     socket.value.send(JSON.stringify({
         type: "action",
-        data_type: "play_cards",
+        data_type: "play_card",
         data: cardId
     }))
 }
 
-function draw() {
+function lockCard(cardId: string) {
     socket.value.send(JSON.stringify({
         type: "action",
-        data_type: "draw",
-        data: 1
-    }))
-}
-
-function play_from_discard(cardId: string) {
-    socket.value.send(JSON.stringify({
-        type: "temp_action",
-        data_type: "play_from_discard",
+        data_type: "lock_card",
         data: cardId
     }))
 }
 
+function useEffect(effectId: string, target?: string) {
+    console.log({ effect_id: effectId, target })
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "use_effect",
+        data: { effect_id: effectId, target }
+    }))
+}
 function discard(cardId: string) {
     socket.value.send(JSON.stringify({
         type: "action",
@@ -48,21 +52,6 @@ function discard(cardId: string) {
     }))
 }
 
-function sacrifice(cardId: any) {
-    socket.value.send(JSON.stringify({
-        type: "action",
-        data_type: "sacrifice",
-        data: cardId
-    }))
-}
-
-function put_on_stack_from_discard(cardId: any) {
-    socket.value.send(JSON.stringify({
-        type: "temp_action",
-        data_type: "put_on_stack_from_discard",
-        data: cardId
-    }))
-}
 function setHealth(event: Event) {
     socket.value.send(JSON.stringify({
         type: "temp_action",
@@ -74,6 +63,19 @@ function setHealth(event: Event) {
 
 <template>
     <div :class="'player ' + (isTurn ? 'turn' : '')">
+        <div id="turn" v-if="turns[props.player?.turn]">
+            champions_health = {{ turns[props.player?.turn].champions_health }} <br>
+            heal_reserve = {{ turns[props.player?.turn].heal_reserve }} <br>
+            damage_reserve = {{ turns[props.player?.turn].damage_reserve }} <br>
+            gold_reserve = {{ turns[props.player?.turn].gold_reserve }} <br>
+            discard_markers = {{ turns[props.player?.turn].discard_markers }} <br>
+            effects_availables = <div v-for="e in turns[props.player?.turn].effects_availables" :key="e"
+                @click="useEffect(e)">
+                {{ effects[e].effect + '*' + 1 }}
+            </div>
+        </div>
+
+
         <div v-if="isSelf"><b>YOU</b></div>
         username = <b>{{ props.player.username }}</b>
         <br>
@@ -85,7 +87,7 @@ function setHealth(event: Event) {
         <div class="cards_container">
             <CardPreview :data="c" v-for="c in props.player.hand">
                 <button v-if="isSelf && isTurn" @click="playCard(c)">PLAY</button>
-                <button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
+                <button v-if="isSelf && isTurn && selfTurn.discard_markers > 0" @click="discard(c)">DISCARD</button>
             </CardPreview>
         </div>
         <button v-if="isSelf && isTurn && props.player.hand.length > 1" @click="playAllCards">PLAY
@@ -93,15 +95,16 @@ function setHealth(event: Event) {
         <br>
         board =
         <div class="cards_container">
-            <CardPreview :data="c" v-for="c in props.player.board">
-                <button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
-                <button v-if="isSelf && isTurn" @click="sacrifice(c)">SACRIFICE</button>
+            <CardPreview :data="c" v-for="c in props.player.board"
+                :locked="turns[props.player?.turn].cards_locked.includes(c)">
+                <button v-if="isSelf && isTurn && selfTurn.discard_markers > 0" @click="discard(c)">DISCARD</button>
+                <button v-if="isSelf && isTurn && selfTurn.discard_markers == 0" @click="lockCard(c)">LOCK</button>
             </CardPreview>
         </div>
         <br>
         stack =
         <CardSlot :stack="props.player.stack_pile">
-            <button v-if="isSelf && isTurn" @click="draw">DRAW</button>
+            <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
         </CardSlot>
         <br>
         discard =
@@ -110,17 +113,17 @@ function setHealth(event: Event) {
         <input type="checkbox" v-model="discard_wrapped" />
 
         <CardPreview v-if="!discard_wrapped" :data="props.player.discard_pile.at(-1)">
-            <button v-if="isSelf && isTurn" @click="play_from_discard(props.player.discard_pile.at(-1))">DRAW</button>
+            <!-- <button v-if="isSelf && isTurn" @click="play_from_discard(props.player.discard_pile.at(-1))">DRAW</button>
             <button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
                 STACK</button>
-            <button v-if="isSelf && isTurn" @click="sacrifice(props.player.discard_pile.at(-1))">SACRIFICE</button>
+            <button v-if="isSelf && isTurn" @click="sacrifice(props.player.discard_pile.at(-1))">SACRIFICE</button> -->
         </CardPreview>
 
         <template v-if="discard_wrapped" v-for="c in props.player.discard_pile">
             <CardPreview :data="c">
-                <button v-if="isSelf && isTurn" @click="play_from_discard(c)">DRAW</button>
+                <!-- <button v-if="isSelf && isTurn" @click="play_from_discard(c)">DRAW</button>
                 <button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(c)">PUT ON STACK</button>
-                <button v-if="isSelf && isTurn" @click="sacrifice(c)">SACRIFICE</button>
+                <button v-if="isSelf && isTurn" @click="sacrifice(c)">SACRIFICE</button> -->
             </CardPreview>
         </template>
 
diff --git a/public/cards/background.jpg b/public/cards/background.jpg
new file mode 100644
index 0000000..42009ac
--- /dev/null
+++ b/public/cards/background.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e71eb9a03721936250ea0d273b5ec82cc16dfb1b1aa3bc62b346404e6c060e4e
+size 17239