From cace5cf87464c38f0bf9b48317a509e311f9febc Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sat, 27 Apr 2024 23:33:59 +0200
Subject: [PATCH 01/19] stuff wip

---
 components/CardSlot.vue   | 11 +++++++--
 components/PlayerSlot.vue | 49 ++++++++++++++++++++++++++++-----------
 2 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/components/CardSlot.vue b/components/CardSlot.vue
index 848c265..29ae28d 100644
--- a/components/CardSlot.vue
+++ b/components/CardSlot.vue
@@ -18,7 +18,7 @@ const wrapped = ref(false)
     <input type="checkbox" v-model="wrapped" />
     <div class="cards_container">
 
-        <CardPreview v-if="!wrapped" :data="props.stack.at(-1) ?? null">
+        <CardPreview v-if="!wrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
             <slot></slot>
         </CardPreview>
 
@@ -31,4 +31,11 @@ const wrapped = ref(false)
 
 
 
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.cards_container {
+    display: flex;
+    flex-direction: row;
+}
+</style>
\ No newline at end of file
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 33a1991..0114857 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -33,17 +33,32 @@ const discard_unwrapped = ref(false)
             @click="useEffect(goStore.self?.turn.effects_availables.find(e => (e.effect == CardEffects.DISCARD) && e.usable)!, props.player)"
             :disabled="!goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.DISCARD) && e.usable)">
             make Discard</button>
-        <div id="turn" v-if="props.player.turn">
-            heal_reserve = {{ props.player.turn.heal_reserve }} <br>
-            damage_reserve = {{ props.player.turn.damage_reserve }} <br>
-            gold_reserve = {{ props.player.turn.gold_reserve }} <br>
-            discard_markers = {{ props.player.turn.discard_markers }} <br>
-            effects_availables = <div v-for="e in props.player.turn.effects_availables">
-                <button v-if="e" @click="useEffect(e)">
-                    {{ e.effect + ' ' + e.effect_type }}
-                </button>
+        <div id="turn_data" v-if="props.player.turn && isTurn && isSelf">
+            <span id="turn_heal">{{ props.player.turn.heal_reserve }} </span>
+            <span id="turn_damage">{{ props.player.turn.damage_reserve }} </span>
+            <span>{{ props.player.turn.gold_reserve }}</span>
+            <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
+            <span>effects_availables = <div v-for="e in props.player.turn.effects_availables">
+                    <button v-if="e && ![CardEffects.DAMAGE, CardEffects.GOLD, CardEffects.HEAL].includes(e.effect)"
+                        @click="useEffect(e)" :disabled="!e.usable">
+                        {{ e.effect + ' ' + e.effect_type }}
+                    </button>
 
-            </div>
+                </div></span>
+        </div>
+
+        <div id="turn_data" v-if="props.player.turn">
+            <span id=" turn_heal">heal_reserve = {{ props.player.turn.heal_reserve }} <br></span>
+            <span id="turn_damage">damage_reserve = {{ props.player.turn.damage_reserve }} <br></span>
+            <span>gold_reserve = {{ props.player.turn.gold_reserve }} <br></span>
+            <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
+            <span>effects_availables = <div v-for=" e  in  props.player.turn.effects_availables ">
+                    <button v-if="e && ![CardEffects.DAMAGE, CardEffects.GOLD, CardEffects.HEAL].includes(e.effect)"
+                        @click="useEffect(e)" :disabled="!e.usable">
+                        {{ e.effect + ' ' + e.effect_type }}
+                    </button>
+
+                </div></span>
         </div>
 
 
@@ -54,7 +69,7 @@ const discard_unwrapped = ref(false)
         <br>
         hand =
         <div class="cards_container">
-            <CardPreview :data="c" v-for=" c in props.player.hand " @click="c && playCard(c)">
+            <CardPreview :data="c" v-for="  c  in  props.player.hand  " @click="c && playCard(c)">
                 <button v-if="c && isSelf && isTurn" @click="playCard(c)">PLAY</button>
                 <button v-if="c && isSelf && isTurn && props.player.turn.discard_markers > 0"
                     @click="discard(c)">DISCARD</button>
@@ -66,7 +81,7 @@ const discard_unwrapped = ref(false)
         <br>
         board =
         <div class="cards_container">
-            <CardPreview :data="c" v-for=" c  in  props.player.board " @click="lockCard(c)"
+            <CardPreview :data="c" v-for="  c   in   props.player.board  " @click="lockCard(c)"
                 :locked="c.uuid in props.player.turn.cards_locked">
                 <button v-if="isSelf && isTurn && props.player.turn.discard_markers > 0"
                     @click="discard(c)">DISCARD</button>
@@ -111,7 +126,7 @@ const discard_unwrapped = ref(false)
                 @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, props.player.discard_pile.at(-1))">SACRIFICE</button>
         </CardPreview>
 
-        <template v-if="discard_unwrapped" v-for="c in props.player.discard_pile ">
+        <template v-if="discard_unwrapped" 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="put_on_stack_from_discard(c)">PUT ON STACK</button>
@@ -143,4 +158,12 @@ const discard_unwrapped = ref(false)
 .turn {
     background: lightgreen;
 }
+
+#turn_data {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: row;
+}
 </style>
\ No newline at end of file

From a6925887dfe513037881f17085b535a99f9c7c96 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Tue, 30 Apr 2024 19:52:25 +0200
Subject: [PATCH 02/19] fix regression : optionally activated effects not
 showing

---
 components/PlayerSlot.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 0114857..49f6a84 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -39,8 +39,7 @@ const discard_unwrapped = ref(false)
             <span>{{ props.player.turn.gold_reserve }}</span>
             <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
             <span>effects_availables = <div v-for="e in props.player.turn.effects_availables">
-                    <button v-if="e && ![CardEffects.DAMAGE, CardEffects.GOLD, CardEffects.HEAL].includes(e.effect)"
-                        @click="useEffect(e)" :disabled="!e.usable">
+                    <button @click="useEffect(e)" :disabled="!e.usable">
                         {{ e.effect + ' ' + e.effect_type }}
                     </button>
 

From 7c18b6f257c9f5799af0dec0dc810eab120ac3d2 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Wed, 1 May 2024 11:49:44 +0200
Subject: [PATCH 03/19] Fix market not showing for spectators

---
 app.vue          |  4 ++--
 netcode/index.ts | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/app.vue b/app.vue
index bd15972..7baa09e 100644
--- a/app.vue
+++ b/app.vue
@@ -2,7 +2,7 @@
 
 import { ref } from 'vue';
 
-import goStore, { GameObjectRegister, register, setReady } from '@/netcode';
+import goStore, { register, setReady } from '@/netcode';
 
 let username = ref<string>('legonzaur')
 
@@ -15,6 +15,6 @@ let username = ref<string>('legonzaur')
     type="checkbox" id="ready">
   <label v-if="goStore.self && !goStore.game?.started" for="scales">Ready</label>
   <div>
-    <GameBoard :game="goStore.game"></GameBoard>
+    <GameBoard></GameBoard>
   </div>
 </template>
diff --git a/netcode/index.ts b/netcode/index.ts
index c6e34dd..aaedf26 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -6,6 +6,8 @@ import { type Player, create_player, type PlayerNetcode } from "./Player"
 import { type Team, create_team, type TeamNetcode } from "./Team"
 import { type Turn, create_turn } from "./Turn"
 
+import { type Ref } from "vue"
+
 export const socket = new WebSocket("ws://127.0.0.1:8765")
 
 export class GameObjectRegister {
@@ -18,8 +20,8 @@ export class GameObjectRegister {
 
     context: 'login' | 'pregame' | 'game' = "login"
     private readonly objects: Map<string, GameObjectNetcode>
-    game?: Game
-    self?: Player
+    game: Ref<Game | null>
+    self: Ref<Player | null>
     constructor() {
         this.effects = reactive(new Map())
         this.cards = reactive(new Map())
@@ -28,6 +30,9 @@ export class GameObjectRegister {
         this.turns = reactive(new Map())
 
         this.objects = reactive(new Map())
+
+        this.game = ref(null)
+        this.self = ref(null)
     }
 
     update_object(obj: GameObjectNetcode) {
@@ -57,8 +62,8 @@ export class GameObjectRegister {
             this.objects.set(data.uuid, team)
         },
         "game": (data: GameNetcode) => {
-            this.game = create_game(data, this)
-            this.objects.set(data.uuid, this.game)
+            this.game.value = create_game(data, this)
+            this.objects.set(data.uuid, this.game.value)
         },
         "turn": (data: any) => {
             const turn = create_turn(data, this)
@@ -68,7 +73,7 @@ export class GameObjectRegister {
     } as { [id: string]: (data: any) => any }
 
     set_self(uuid: string) {
-        this.self = this.players.get(uuid)
+        this.self.value = this.players.get(uuid) ?? null
     }
 }
 

From 7b4d6551eecc24fd5b369055f2143c2f401e1dc2 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Wed, 1 May 2024 12:01:24 +0200
Subject: [PATCH 04/19] regression: cannot set self.value

---
 netcode/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/netcode/index.ts b/netcode/index.ts
index aaedf26..14ecc43 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -72,7 +72,7 @@ export class GameObjectRegister {
         }
     } as { [id: string]: (data: any) => any }
 
-    set_self(uuid: string) {
+    set_self = (uuid: string) => {
         this.self.value = this.players.get(uuid) ?? null
     }
 }

From 7536f0e3d5d90e8764effad20509daad95bfe2f9 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Wed, 1 May 2024 13:59:50 +0200
Subject: [PATCH 05/19] fixed elements

---
 components/GameBoard.vue                |  12 +-
 components/PlayerList.vue               |  14 +-
 components/PlayerSlot.vue               | 119 ++++++--------
 components/SelfView.vue                 | 209 ++++++++++++++++++++++++
 public/images/champion-shield-guard.png |   3 +
 public/images/champion-shield.png       |   3 +
 public/images/damage.png                |   3 +
 public/images/gold.png                  |   3 +
 public/images/heal.png                  |   3 +
 9 files changed, 283 insertions(+), 86 deletions(-)
 create mode 100644 components/SelfView.vue
 create mode 100644 public/images/champion-shield-guard.png
 create mode 100644 public/images/champion-shield.png
 create mode 100644 public/images/damage.png
 create mode 100644 public/images/gold.png
 create mode 100644 public/images/heal.png

diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 726a849..bdf5d81 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -19,18 +19,18 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
                 <CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
                     <template v-if="isTurn && c">
                         <button @click="buy(c)"
-                            :disabled="goStore.self === undefined || c.cost === undefined || goStore.self?.turn.gold_reserve < c.cost">BUY</button>
+                            :disabled="goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost">BUY</button>
                         <button
                             @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)!, c)"
-                            :disabled="(goStore.self === undefined || c.cost === undefined || goStore.self.turn.gold_reserve < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
+                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
                             BUY IN HAND</button>
                         <button
                             @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)!, c)"
-                            :disabled="(goStore.self === undefined || c.cost === undefined || goStore.self.turn.gold_reserve < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
+                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
                             BUY IN STACK (generic)</button>
                         <button v-if="c.card_type == CardType.ACTION"
                             @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)!, c)"
-                            :disabled="(goStore.self === undefined || c.cost === undefined || goStore.self.turn.gold_reserve < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
+                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
                             BUY IN STACK (actions)</button>
                     </template>
                 </CardPreview>
@@ -45,11 +45,11 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
                     </button>
                     <button
                         @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
-                        :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)!.cost === undefined || goStore.self.turn.gold_reserve < goStore.game.gem_stack.at(-1)!.cost!) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
+                        :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)!.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < goStore.game.gem_stack.at(-1)!.cost!) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
                         BUY IN HAND</button>
                     <button
                         @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
-                        :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)?.cost === undefined || goStore.self.turn.gold_reserve < (goStore.game.gem_stack.at(-1)?.cost ?? Infinity)) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
+                        :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)?.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < (goStore.game.gem_stack.at(-1)?.cost ?? Infinity)) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
                         BUY IN STACK (generic)</button>
                     <!-- <button @click="buy_in_hand(props.game.gem_stack.at(-1))">
                         BUY IN HAND
diff --git a/components/PlayerList.vue b/components/PlayerList.vue
index 6309878..d995439 100644
--- a/components/PlayerList.vue
+++ b/components/PlayerList.vue
@@ -1,19 +1,11 @@
 <script setup lang="ts">
 import goStore from '@/netcode';
 
-const players = useState<{ [key: string]: any }>('players')
-
-const player = computed(() => Array.from(goStore.players.keys()).sort((k) => {
-    if (goStore.self?.uuid === k) {
-        return -1
-    } else {
-        return 1
-    }
-}))
 </script>
 
 <template>
-    <div v-for="k in player">
-        <PlayerSlot :player="goStore.players.get(k)!" />
+    <div v-for="[k, l] in goStore.players">
+        <PlayerSlot :player="l" v-if="l !== goStore.self" :key="k" />
     </div>
+    <SelfView v-if="goStore.self" :player="goStore.self"></SelfView>
 </template>
\ No newline at end of file
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 49f6a84..dff1e15 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -33,39 +33,46 @@ const discard_unwrapped = ref(false)
             @click="useEffect(goStore.self?.turn.effects_availables.find(e => (e.effect == CardEffects.DISCARD) && e.usable)!, props.player)"
             :disabled="!goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.DISCARD) && e.usable)">
             make Discard</button>
-        <div id="turn_data" v-if="props.player.turn && isTurn && isSelf">
-            <span id="turn_heal">{{ props.player.turn.heal_reserve }} </span>
-            <span id="turn_damage">{{ props.player.turn.damage_reserve }} </span>
-            <span>{{ props.player.turn.gold_reserve }}</span>
-            <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
-            <span>effects_availables = <div v-for="e in props.player.turn.effects_availables">
-                    <button @click="useEffect(e)" :disabled="!e.usable">
-                        {{ e.effect + ' ' + e.effect_type }}
-                    </button>
 
-                </div></span>
+        <div id="turn_data">
+            <div class="turn_icon">
+                <img src="/images/champion-shield.png" />
+                <span class="turn_icon_number">
+                    {{ props.player.team.health }}
+                </span>
+            </div>
+            <div class="turn_icon">
+                <img src="/images/heal.png" />
+                <span class="turn_icon_number">
+                    {{ props.player.turn.heal_reserve }}
+                </span>
+            </div>
+            <div class="turn_icon">
+                <img src="/images/damage.png" />
+                <span class="turn_icon_number">
+                    {{ props.player.turn.damage_reserve }}
+                </span>
+            </div>
+            <div class="turn_icon">
+                <img src="/images/gold.png" />
+                <span class="turn_icon_number">
+                    {{ props.player.turn.gold_reserve }}
+                </span>
+            </div>
+            <span>discard_markers = {{ props.player.turn.discard_markers }} </span>
         </div>
 
-        <div id="turn_data" v-if="props.player.turn">
-            <span id=" turn_heal">heal_reserve = {{ props.player.turn.heal_reserve }} <br></span>
-            <span id="turn_damage">damage_reserve = {{ props.player.turn.damage_reserve }} <br></span>
-            <span>gold_reserve = {{ props.player.turn.gold_reserve }} <br></span>
-            <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
-            <span>effects_availables = <div v-for=" e  in  props.player.turn.effects_availables ">
-                    <button v-if="e && ![CardEffects.DAMAGE, CardEffects.GOLD, CardEffects.HEAL].includes(e.effect)"
-                        @click="useEffect(e)" :disabled="!e.usable">
-                        {{ e.effect + ' ' + e.effect_type }}
-                    </button>
+        <span>effects_availables = <div v-for=" e  in  props.player.turn.effects_availables ">
+                <button v-if="e && ![CardEffects.DAMAGE, CardEffects.GOLD, CardEffects.HEAL].includes(e.effect)"
+                    @click="useEffect(e)" :disabled="!e.usable">
+                    {{ e.effect + ' ' + e.effect_type }}
+                </button>
 
-                </div></span>
-        </div>
-
-
-        <div v-if="isSelf"><b>YOU</b></div>
+            </div></span>
+        <br>
         username = <b>{{ props.player.username }}</b>
         <br>
-        health = {{ props.player.team.health }}
-        <br>
+
         hand =
         <div class="cards_container">
             <CardPreview :data="c" v-for="  c  in  props.player.hand  " @click="c && playCard(c)">
@@ -104,46 +111,7 @@ const discard_unwrapped = ref(false)
                     @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STUN) && e.usable)!, c)">STUN</button>
             </CardPreview>
         </div>
-        <br>
-        stack =
-        <CardSlot :stack="props.player.stack_pile">
-            <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
-        </CardSlot>
-        <br>
-        discard =
 
-        {{ props.player.discard_pile.length }}
-        <input type="checkbox" v-model="discard_unwrapped" />
-
-        <CardPreview v-if="!discard_unwrapped" :data="props.player.discard_pile.at(-1) ?? null">
-            <!-- <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"
-                :disabled="!goStore.self || !props.player.discard_pile.at(-1) || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable) || props.player.discard_pile.at(-1)!.uuid in props.player.turn.cards_locked"
-                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, props.player.discard_pile.at(-1))">SACRIFICE</button>
-        </CardPreview>
-
-        <template v-if="discard_unwrapped" 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="put_on_stack_from_discard(c)">PUT ON STACK</button>
-                -->
-                <button v-if="isSelf && isTurn && c.card_type == CardType.CHAMPION"
-                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)!, c)">RESTACK
-                    (champion)</button>
-
-                <button v-if="isSelf && isTurn"
-                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)!, c)">RESTACK
-                    (card)</button>
-                <button v-if="isSelf && isTurn"
-                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
-            </CardPreview>
-        </template>
 
 
     </div>
@@ -158,11 +126,24 @@ const discard_unwrapped = ref(false)
     background: lightgreen;
 }
 
+.turn_icon {
+    position: relative;
+}
+
 #turn_data {
-    position: fixed;
-    bottom: 0;
-    right: 0;
     display: flex;
     flex-direction: row;
+    align-items: flex-start;
+}
+
+.turn_icon img {
+    height: 50px;
+}
+
+.turn_icon_number {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 </style>
\ No newline at end of file
diff --git a/components/SelfView.vue b/components/SelfView.vue
new file mode 100644
index 0000000..f304269
--- /dev/null
+++ b/components/SelfView.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team } from '~/netcode';
+import type { Card } from '~/netcode/Card';
+import type { Player } from '~/netcode/Player';
+import { CardEffects } from '@/netcode/Effect'
+import { CardType } from '~/netcode/Card';
+
+export interface Props {
+    player: Player
+}
+const props = defineProps<Props>()
+
+const isTurn = computed(() => props.player.team == goStore.game?.current_turn)
+const isSelf = computed(() => props.player.uuid == goStore.self?.uuid)
+
+const discard_unwrapped = ref(false)
+
+
+
+</script>
+
+<template>
+    <div :class="'player ' + (isTurn ? 'turn' : '')">
+        <button @click="heal" v-if="props.player.team == goStore.self?.team"
+            :disabled="(goStore.self?.turn.heal_reserve ?? 0) <= 0">
+            Heal
+        </button>
+        <button @click="damage_team(props.player.team)" v-if="props.player.team != goStore.self?.team"
+            :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
+            Damage
+        </button>
+        <button v-if="props.player.team != goStore.self?.team"
+            @click="useEffect(goStore.self?.turn.effects_availables.find(e => (e.effect == CardEffects.DISCARD) && e.usable)!, props.player)"
+            :disabled="!goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.DISCARD) && e.usable)">
+            make Discard</button>
+        <div id="turn_data">
+
+            <div class="turn_icon">
+                <img src="/images/heal.png" />
+                <span class="turn_icon_number">
+                    {{ props.player.turn.heal_reserve }}
+                </span>
+            </div>
+            <div class="turn_icon">
+                <img src="/images/damage.png" />
+                <span class="turn_icon_number">
+                    {{ props.player.turn.damage_reserve }}
+                </span>
+            </div>
+            <div class="turn_icon">
+                <img src="/images/gold.png" />
+                <span class="turn_icon_number">
+                    {{ props.player.turn.gold_reserve }}
+                </span>
+            </div>
+            <div class="turn_icon">
+                <img src="/images/champion-shield.png" />
+                <span class="turn_icon_number">
+                    {{ props.player.team.health }}
+                </span>
+            </div>
+        </div>
+        <div class="cards_container" id="self_hand">
+            <CardPreview :data="c" v-for="  c  in  props.player.hand  " @click="c && playCard(c)">
+                <button v-if="c && isSelf && isTurn" @click="playCard(c)">PLAY</button>
+                <button v-if="c && isSelf && isTurn && props.player.turn.discard_markers > 0"
+                    @click="discard(c)">DISCARD</button>
+            </CardPreview>
+
+            <button v-if="isSelf && isTurn && props.player.hand.length > 1"
+                @click="playAllCards(props.player.hand as Card[])">
+                PLAY ALL
+            </button>
+        </div>
+
+        <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
+        <span>effects_availables = <div v-for="e in props.player.turn.effects_availables">
+                <button @click="useEffect(e)" :disabled="!e.usable">
+                    {{ e.effect + ' ' + e.effect_type }}
+                </button>
+
+            </div></span>
+        <br>
+        board =
+        <div class="cards_container">
+            <CardPreview :data="c" v-for="  c   in   props.player.board  " @click="lockCard(c)"
+                :locked="c.uuid in props.player.turn.cards_locked">
+                <button v-if="isSelf && isTurn && props.player.turn.discard_markers > 0"
+                    @click="discard(c)">DISCARD</button>
+                <button v-if="isSelf && isTurn && props.player.turn.discard_markers == 0" @click="lockCard(c)"
+                    :disabled="c.uuid in props.player.turn.cards_locked">
+                    LOCK
+                </button>
+                <button
+                    v-if="isSelf && isTurn && props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
+                    :disabled="!goStore.self || !c || c.uuid in props.player.turn.cards_locked"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
+
+
+                <div>{{ c.health_as_champion }}</div>
+                <button
+                    v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && (c.health_as_champion ?? 0) > 0"
+                    :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0"
+                    @click="damage_champion(c)">DAMAGE</button>
+                <button
+                    v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.STUN) && e.usable) && (c.health_as_champion ?? 0) > 0"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STUN) && e.usable)!, c)">STUN</button>
+            </CardPreview>
+        </div>
+        <br>
+        stack =
+        <CardSlot :stack="props.player.stack_pile">
+            <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
+        </CardSlot>
+        <br>
+        discard =
+
+        {{ props.player.discard_pile.length }}
+        <input type="checkbox" v-model="discard_unwrapped" />
+
+        <CardPreview v-if="!discard_unwrapped" :data="props.player.discard_pile.at(-1) ?? null">
+            <!-- <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"
+                :disabled="!goStore.self || !props.player.discard_pile.at(-1) || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable) || props.player.discard_pile.at(-1)!.uuid in props.player.turn.cards_locked"
+                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, props.player.discard_pile.at(-1))">SACRIFICE</button>
+        </CardPreview>
+
+        <template v-if="discard_unwrapped" 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="put_on_stack_from_discard(c)">PUT ON STACK</button>
+                -->
+                <button v-if="isSelf && isTurn && c.card_type == CardType.CHAMPION"
+                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)!, c)">RESTACK
+                    (champion)</button>
+
+                <button v-if="isSelf && isTurn"
+                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)!, c)">RESTACK
+                    (card)</button>
+                <button v-if="isSelf && isTurn"
+                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
+            </CardPreview>
+        </template>
+
+
+    </div>
+</template>
+
+<style scoped>
+.player {
+    border-top: 5px solid black;
+}
+
+.turn {
+    background: lightgreen;
+}
+
+#turn_data {
+    position: fixed;
+    bottom: 0;
+    right: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.turn_icon {
+    position: relative;
+}
+
+.turn_icon img {
+    height: 50px;
+}
+
+.turn_icon_number {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#self_hand {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    position: fixed;
+    right: 60px;
+    bottom: -50px;
+    max-width: 100vw;
+}
+</style>
+
+<style>
+#self_hand .card {
+    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+    overflow: visible;
+}
+
+#self_hand .card:hover {
+    transform: translateY(-40px);
+
+}
+</style>
\ No newline at end of file
diff --git a/public/images/champion-shield-guard.png b/public/images/champion-shield-guard.png
new file mode 100644
index 0000000..7890312
--- /dev/null
+++ b/public/images/champion-shield-guard.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b584a5e946ee1b737c6650519e9150acddf7210f6f87bd5f50c990bbfc1b23a2
+size 7617
diff --git a/public/images/champion-shield.png b/public/images/champion-shield.png
new file mode 100644
index 0000000..876f7c5
--- /dev/null
+++ b/public/images/champion-shield.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c21a323e4ea6bd1df5cb44decaf5560db9c03726e43d5e1d51910341336edc56
+size 6100
diff --git a/public/images/damage.png b/public/images/damage.png
new file mode 100644
index 0000000..b6d2790
--- /dev/null
+++ b/public/images/damage.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:865b731d41081ac3a2e30a04487f58f59729531426efbf95269a34cd0203f56f
+size 2703
diff --git a/public/images/gold.png b/public/images/gold.png
new file mode 100644
index 0000000..7379d71
--- /dev/null
+++ b/public/images/gold.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:acc4c1cb7e40b57dd85d8459f078f3c45a976cbc654d01f9b506420105d9ffc7
+size 3077
diff --git a/public/images/heal.png b/public/images/heal.png
new file mode 100644
index 0000000..f42d816
--- /dev/null
+++ b/public/images/heal.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5f72f57e668e758675f6c0ce6ab1bfe2e9a8725f3fa03592749e4d261552f30f
+size 2195

From 55c6b47767f43e42e200859004cfe453f5138eed Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Wed, 1 May 2024 14:26:20 +0200
Subject: [PATCH 06/19] experimental css changes

---
 app.vue                    |  6 ++++++
 components/CardPreview.vue |  4 ++--
 components/CardSlot.vue    | 18 +++++------------
 components/GameBoard.vue   |  1 +
 components/PlayerSlot.vue  | 40 ++++++++++++++++++++++++++++++++++++++
 components/SelfView.vue    | 13 ++++++-------
 6 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/app.vue b/app.vue
index 7baa09e..a38bd91 100644
--- a/app.vue
+++ b/app.vue
@@ -18,3 +18,9 @@ let username = ref<string>('legonzaur')
     <GameBoard></GameBoard>
   </div>
 </template>
+
+<style>
+html {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 92a4566..4a894a0 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -3,7 +3,7 @@ import type { Card } from '~/netcode/Card';
 
 
 export interface Props {
-    data?: Card | null
+    data: Card | null | undefined
     locked?: boolean
 }
 
@@ -15,7 +15,7 @@ const buttonsElement = ref<HTMLElement | null>(null)
 const rightClicked = ref(false)
 
 function cardClick() {
-    if (props.data == null) return
+    if (!props.data) return
     emit("click")
 }
 
diff --git a/components/CardSlot.vue b/components/CardSlot.vue
index 29ae28d..fbb986b 100644
--- a/components/CardSlot.vue
+++ b/components/CardSlot.vue
@@ -9,20 +9,19 @@ const props = withDefaults(defineProps<Props>(), {
     stack: () => [],
 })
 
-const wrapped = ref(false)
+const unwrapped = ref(false)
 
 </script>
 
 <template>
     {{ props.stack?.length }}
-    <input type="checkbox" v-model="wrapped" />
+    <input type="checkbox" v-model="unwrapped" />
     <div class="cards_container">
-
-        <CardPreview v-if="!wrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
+        <CardPreview v-if="!unwrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
             <slot></slot>
         </CardPreview>
 
-        <template v-if="wrapped" v-for="c in props.stack">
+        <template v-if="unwrapped" v-for="c in props.stack">
             <CardPreview :data="c">
                 <slot></slot>
             </CardPreview>
@@ -31,11 +30,4 @@ const wrapped = ref(false)
 
 
 
-</template>
-
-<style scoped>
-.cards_container {
-    display: flex;
-    flex-direction: row;
-}
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index bdf5d81..031c0f2 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -71,5 +71,6 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
 .cards_container {
     display: flex;
     flex-direction: row;
+    justify-content: center;
 }
 </style>
\ No newline at end of file
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index dff1e15..08e983d 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -112,7 +112,46 @@ const discard_unwrapped = ref(false)
             </CardPreview>
         </div>
 
+        stack =
+        <CardSlot :stack="props.player.stack_pile">
+            <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
+        </CardSlot>
+        <br>
+        discard =
 
+        {{ props.player.discard_pile.length }}
+        <input type="checkbox" v-model="discard_unwrapped" />
+
+        <CardPreview v-if="!discard_unwrapped && props.player.discard_pile.length > 0"
+            :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="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
+                STACK</button> -->
+
+            <button v-if="isSelf && isTurn"
+                :disabled="!goStore.self || !props.player.discard_pile.at(-1) || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable) || props.player.discard_pile.at(-1)!.uuid in props.player.turn.cards_locked"
+                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, props.player.discard_pile.at(-1))">SACRIFICE</button>
+        </CardPreview>
+
+        <template v-if="discard_unwrapped" 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="put_on_stack_from_discard(c)">PUT ON STACK</button>
+                -->
+                <button v-if="isSelf && isTurn && c.card_type == CardType.CHAMPION"
+                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)!, c)">RESTACK
+                    (champion)</button>
+
+                <button v-if="isSelf && isTurn"
+                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)!, c)">RESTACK
+                    (card)</button>
+                <button v-if="isSelf && isTurn"
+                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
+            </CardPreview>
+        </template>
 
     </div>
 </template>
@@ -134,6 +173,7 @@ const discard_unwrapped = ref(false)
     display: flex;
     flex-direction: row;
     align-items: flex-start;
+    justify-content: center;
 }
 
 .turn_icon img {
diff --git a/components/SelfView.vue b/components/SelfView.vue
index f304269..724ae91 100644
--- a/components/SelfView.vue
+++ b/components/SelfView.vue
@@ -61,16 +61,15 @@ const discard_unwrapped = ref(false)
             </div>
         </div>
         <div class="cards_container" id="self_hand">
+            <button v-if="isSelf && isTurn && props.player.hand.length > 1"
+                @click="playAllCards(props.player.hand as Card[])">
+                PLAY ALL
+            </button>
             <CardPreview :data="c" v-for="  c  in  props.player.hand  " @click="c && playCard(c)">
                 <button v-if="c && isSelf && isTurn" @click="playCard(c)">PLAY</button>
                 <button v-if="c && isSelf && isTurn && props.player.turn.discard_markers > 0"
                     @click="discard(c)">DISCARD</button>
             </CardPreview>
-
-            <button v-if="isSelf && isTurn && props.player.hand.length > 1"
-                @click="playAllCards(props.player.hand as Card[])">
-                PLAY ALL
-            </button>
         </div>
 
         <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
@@ -118,7 +117,7 @@ const discard_unwrapped = ref(false)
         {{ props.player.discard_pile.length }}
         <input type="checkbox" v-model="discard_unwrapped" />
 
-        <CardPreview v-if="!discard_unwrapped" :data="props.player.discard_pile.at(-1) ?? null">
+        <CardPreview v-if="!discard_unwrapped" :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="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
                 STACK</button> -->
@@ -128,7 +127,7 @@ const discard_unwrapped = ref(false)
                 @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, props.player.discard_pile.at(-1))">SACRIFICE</button>
         </CardPreview>
 
-        <template v-if="discard_unwrapped" v-for=" c  in  props.player.discard_pile  ">
+        <template v-if="discard_unwrapped" 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="put_on_stack_from_discard(c)">PUT ON STACK</button>

From 85aef50750d477094bf39fb2712fb1b1ae098d52 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Wed, 1 May 2024 15:41:13 +0200
Subject: [PATCH 07/19] Remove automatic effect trigger

---
 netcode/index.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/netcode/index.ts b/netcode/index.ts
index 14ecc43..15ce32a 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -181,14 +181,6 @@ export function lockCard(card: Card) {
         data_type: "lock_card",
         data: card.uuid
     }))
-    card.effects.forEach(e => {
-        if (e.effect_type !== EffectType.SUICIDE && e.usable && [CardEffects.DAMAGE, CardEffects.GOLD, CardEffects.HEAL].includes(e.effect)) {
-            for (let i = 0; i < e.amount; i++) {
-                useEffect(e)
-            }
-
-        }
-    })
 }
 
 export function useEffect(effect: Effect, target?: Effect | Card | Player | Team) {

From c5380ea89c54bad40431323ab9e5a3bf107d83c9 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Wed, 1 May 2024 15:41:42 +0200
Subject: [PATCH 08/19] fix regression for effects with game update for
 spectator

---
 netcode/Effect.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/netcode/Effect.ts b/netcode/Effect.ts
index 84fcc64..c81be5f 100644
--- a/netcode/Effect.ts
+++ b/netcode/Effect.ts
@@ -60,13 +60,10 @@ export function create_effect(input: EffectNetcode, register: GameObjectRegister
                     if (target.effect_type == EffectType.FACTION_COMBO) {
                         if (!register.self) { return false }
                         // ugly bastard
-                        const card = register.self.board.find(c => c.effects.map(e => e.uuid).includes(effect.uuid))
+                        const card = register.self.value?.board.find(c => c.effects.map(e => e.uuid).includes(effect.uuid))
 
                         if (!card) { return false }
-                        console.log(
-                            register.self.board.some(c => c !== card && c.faction === card.faction)
-                        )
-                        return register.self.board.some(c => c !== card && c.faction === card.faction)
+                        return register.self.value?.board.some(c => c !== card && c.faction === card.faction)
                     }
                     return true
                 }

From b56e11f509410a404662fb58703faafcaf62158b Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Wed, 1 May 2024 15:41:57 +0200
Subject: [PATCH 09/19] Better cards stacks and discard view

---
 components/CardPreview.vue |  32 +++++++-
 components/CardSlot.vue    |  24 +++---
 components/GameBoard.vue   |  53 ++++++-------
 components/PlayerList.vue  |   2 +-
 components/PlayerSlot.vue  |  40 +---------
 components/SelfView.vue    | 147 ++++++++++++++++---------------------
 6 files changed, 134 insertions(+), 164 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 4a894a0..7195e0e 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -5,9 +5,13 @@ import type { Card } from '~/netcode/Card';
 export interface Props {
     data: Card | null | undefined
     locked?: boolean
+    wrapped?: boolean
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+    wrapped: () => false,
+})
+
 
 const emit = defineEmits(["click"])
 
@@ -24,17 +28,23 @@ function contextmenu(e: MouseEvent) {
     buttonsElement.value?.setAttribute("style", `top:${e.clientY + 10}px;left:${e.clientX + 10}px`)
     rightClicked.value = true
 }
+
+const rotation = ref(0)
+
+onBeforeUpdate(() => {
+    rotation.value = Math.random() > .5 ? 2 : -2
+})
 </script>
 
 <template>
-    <div :class="`card ${Number(buttonsElement?.childElementCount) > 0 ? 'active' : ''}`" @contextmenu.prevent="false"
-        @click.left="cardClick" @click.right="contextmenu">
+    <div :class="`card ${Number(buttonsElement?.childElementCount) > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''}`"
+        @contextmenu.prevent="false" @click.left="cardClick" @click.right="contextmenu"
+        :style="`rotate:${rotation}deg;`">
         <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="props.data"
             :src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'">
 
         <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="!props.data"
             :src="'/cards/background.png'">
-
     </div>
 
     <div :class="rightClicked ? '' : 'hidden'" id="contextMenu" @click.self.prevent="rightClicked = false">
@@ -46,6 +56,12 @@ function contextmenu(e: MouseEvent) {
 </template>
 
 <style scoped>
+.card {
+    transition: 0.025s rotate linear;
+    transition: max-width .125s linear;
+    max-width: 256px;
+}
+
 .card.active {
     cursor: pointer
 }
@@ -59,6 +75,14 @@ function contextmenu(e: MouseEvent) {
     filter: brightness(0.5);
 }
 
+.card.wrapped {
+    max-width: 10px;
+}
+
+.card.wrapped:last-child {
+    max-width: 256px;
+}
+
 .card_image {
     max-height: 250px;
 }
diff --git a/components/CardSlot.vue b/components/CardSlot.vue
index fbb986b..4d73951 100644
--- a/components/CardSlot.vue
+++ b/components/CardSlot.vue
@@ -14,20 +14,18 @@ const unwrapped = ref(false)
 </script>
 
 <template>
-    {{ props.stack?.length }}
-    <input type="checkbox" v-model="unwrapped" />
-    <div class="cards_container">
-        <CardPreview v-if="!unwrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
-            <slot></slot>
-        </CardPreview>
-
-        <template v-if="unwrapped" v-for="c in props.stack">
-            <CardPreview :data="c">
-                <slot></slot>
-            </CardPreview>
-        </template>
+    <div>
+        <input type="checkbox" v-model="unwrapped" class="checkbox" />
+        <div class="cards_container">
+            <template v-if="props.stack.length > 0" v-for="c in props.stack">
+                <CardPreview :data="c" :wrapped="!unwrapped">
+                    <slot></slot>
+                </CardPreview>
+            </template>
+        </div>
     </div>
 
 
+</template>
 
-</template>
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 031c0f2..1b91544 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -14,8 +14,29 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
         <div>
             market_amount = {{ goStore.game?.market_stack?.length }}
             <br>
-            market =
             <div class="cards_container">
+                <CardSlot :stack="goStore.game?.gem_stack">
+                    <template v-if="isTurn && goStore.game?.gem_stack.length && goStore.game?.gem_stack.length > 0">
+                        <button @click="buy(goStore.game.gem_stack.at(-1)!)">
+                            BUY
+                        </button>
+                        <button
+                            @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
+                            :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)!.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < goStore.game.gem_stack.at(-1)!.cost!) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
+                            BUY IN HAND</button>
+                        <button
+                            @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
+                            :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)?.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < (goStore.game.gem_stack.at(-1)?.cost ?? Infinity)) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
+                            BUY IN STACK (generic)</button>
+                        <!-- <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> -->
+                    </template>
+                </CardSlot>
+                <div class="separator"></div>
                 <CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
                     <template v-if="isTurn && c">
                         <button @click="buy(c)"
@@ -34,31 +55,9 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
                             BUY IN STACK (actions)</button>
                     </template>
                 </CardPreview>
+
             </div>
 
-            <br>
-            gems =
-            <CardSlot :stack="goStore.game?.gem_stack">
-                <template v-if="isTurn && goStore.game?.gem_stack.length && goStore.game?.gem_stack.length > 0">
-                    <button @click="buy(goStore.game.gem_stack.at(-1)!)">
-                        BUY
-                    </button>
-                    <button
-                        @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
-                        :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)!.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < goStore.game.gem_stack.at(-1)!.cost!) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
-                        BUY IN HAND</button>
-                    <button
-                        @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
-                        :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)?.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < (goStore.game.gem_stack.at(-1)?.cost ?? Infinity)) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
-                        BUY IN STACK (generic)</button>
-                    <!-- <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> -->
-                </template>
-            </CardSlot>
         </div>
         <div>
             <PlayerList>
@@ -70,7 +69,11 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
 <style>
 .cards_container {
     display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
     justify-content: center;
 }
+
+.separator {
+    margin-left: 100px;
+}
 </style>
\ No newline at end of file
diff --git a/components/PlayerList.vue b/components/PlayerList.vue
index d995439..630c519 100644
--- a/components/PlayerList.vue
+++ b/components/PlayerList.vue
@@ -7,5 +7,5 @@ import goStore from '@/netcode';
     <div v-for="[k, l] in goStore.players">
         <PlayerSlot :player="l" v-if="l !== goStore.self" :key="k" />
     </div>
-    <SelfView v-if="goStore.self" :player="goStore.self"></SelfView>
+    <SelfView v-if="goStore.self"></SelfView>
 </template>
\ No newline at end of file
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 08e983d..1ded9b9 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -63,8 +63,7 @@ const discard_unwrapped = ref(false)
         </div>
 
         <span>effects_availables = <div v-for=" e  in  props.player.turn.effects_availables ">
-                <button v-if="e && ![CardEffects.DAMAGE, CardEffects.GOLD, CardEffects.HEAL].includes(e.effect)"
-                    @click="useEffect(e)" :disabled="!e.usable">
+                <button v-if="e" @click="useEffect(e)" :disabled="!e.usable">
                     {{ e.effect + ' ' + e.effect_type }}
                 </button>
 
@@ -112,46 +111,15 @@ const discard_unwrapped = ref(false)
             </CardPreview>
         </div>
 
-        stack =
+
         <CardSlot :stack="props.player.stack_pile">
             <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
         </CardSlot>
-        <br>
-        discard =
 
-        {{ props.player.discard_pile.length }}
-        <input type="checkbox" v-model="discard_unwrapped" />
 
-        <CardPreview v-if="!discard_unwrapped && props.player.discard_pile.length > 0"
-            :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="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
-                STACK</button> -->
+        <CardSlot :stack="props.player.discard_pile">
 
-            <button v-if="isSelf && isTurn"
-                :disabled="!goStore.self || !props.player.discard_pile.at(-1) || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable) || props.player.discard_pile.at(-1)!.uuid in props.player.turn.cards_locked"
-                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, props.player.discard_pile.at(-1))">SACRIFICE</button>
-        </CardPreview>
-
-        <template v-if="discard_unwrapped" 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="put_on_stack_from_discard(c)">PUT ON STACK</button>
-                -->
-                <button v-if="isSelf && isTurn && c.card_type == CardType.CHAMPION"
-                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)!, c)">RESTACK
-                    (champion)</button>
-
-                <button v-if="isSelf && isTurn"
-                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)!, c)">RESTACK
-                    (card)</button>
-                <button v-if="isSelf && isTurn"
-                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
-            </CardPreview>
-        </template>
+        </CardSlot>
 
     </div>
 </template>
diff --git a/components/SelfView.vue b/components/SelfView.vue
index 724ae91..dc3cc56 100644
--- a/components/SelfView.vue
+++ b/components/SelfView.vue
@@ -1,36 +1,23 @@
 <script setup lang="ts">
 import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team } from '~/netcode';
 import type { Card } from '~/netcode/Card';
-import type { Player } from '~/netcode/Player';
 import { CardEffects } from '@/netcode/Effect'
 import { CardType } from '~/netcode/Card';
 
-export interface Props {
-    player: Player
-}
-const props = defineProps<Props>()
-
-const isTurn = computed(() => props.player.team == goStore.game?.current_turn)
-const isSelf = computed(() => props.player.uuid == goStore.self?.uuid)
+const isTurn = computed(() => goStore.self?.team == goStore.game?.current_turn)
 
 const discard_unwrapped = ref(false)
 
-
-
 </script>
 
 <template>
     <div :class="'player ' + (isTurn ? 'turn' : '')">
-        <button @click="heal" v-if="props.player.team == goStore.self?.team"
+        <button @click="heal" v-if="goStore.self?.team == goStore.self?.team"
             :disabled="(goStore.self?.turn.heal_reserve ?? 0) <= 0">
             Heal
         </button>
-        <button @click="damage_team(props.player.team)" v-if="props.player.team != goStore.self?.team"
-            :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
-            Damage
-        </button>
-        <button v-if="props.player.team != goStore.self?.team"
-            @click="useEffect(goStore.self?.turn.effects_availables.find(e => (e.effect == CardEffects.DISCARD) && e.usable)!, props.player)"
+        <button v-if="goStore.self && goStore.self?.team != goStore.self?.team"
+            @click="useEffect(goStore.self?.turn.effects_availables.find(e => (e.effect == CardEffects.DISCARD) && e.usable)!, goStore.self)"
             :disabled="!goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.DISCARD) && e.usable)">
             make Discard</button>
         <div id="turn_data">
@@ -38,42 +25,42 @@ const discard_unwrapped = ref(false)
             <div class="turn_icon">
                 <img src="/images/heal.png" />
                 <span class="turn_icon_number">
-                    {{ props.player.turn.heal_reserve }}
+                    {{ goStore.self?.turn.heal_reserve }}
                 </span>
             </div>
             <div class="turn_icon">
                 <img src="/images/damage.png" />
                 <span class="turn_icon_number">
-                    {{ props.player.turn.damage_reserve }}
+                    {{ goStore.self?.turn.damage_reserve }}
                 </span>
             </div>
             <div class="turn_icon">
                 <img src="/images/gold.png" />
                 <span class="turn_icon_number">
-                    {{ props.player.turn.gold_reserve }}
+                    {{ goStore.self?.turn.gold_reserve }}
                 </span>
             </div>
             <div class="turn_icon">
                 <img src="/images/champion-shield.png" />
                 <span class="turn_icon_number">
-                    {{ props.player.team.health }}
+                    {{ goStore.self?.team.health }}
                 </span>
             </div>
         </div>
         <div class="cards_container" id="self_hand">
-            <button v-if="isSelf && isTurn && props.player.hand.length > 1"
-                @click="playAllCards(props.player.hand as Card[])">
+            <button v-if="isTurn && (goStore.self?.hand.length ?? 0) > 1"
+                @click="playAllCards(goStore.self?.hand as Card[])">
                 PLAY ALL
             </button>
-            <CardPreview :data="c" v-for="  c  in  props.player.hand  " @click="c && playCard(c)">
-                <button v-if="c && isSelf && isTurn" @click="playCard(c)">PLAY</button>
-                <button v-if="c && isSelf && isTurn && props.player.turn.discard_markers > 0"
-                    @click="discard(c)">DISCARD</button>
+            <CardPreview :data="c" v-for="  c  in  goStore.self?.hand  " @click="c && playCard(c)">
+                <button v-if="c && isTurn" @click="playCard(c)">PLAY</button>
+                <button v-if="c && isTurn && (goStore.self?.turn.discard_markers ?? 0) > 0"
+                    @click="discard(c!)">DISCARD</button>
             </CardPreview>
         </div>
 
-        <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
-        <span>effects_availables = <div v-for="e in props.player.turn.effects_availables">
+        <span>discard_markers = {{ goStore.self?.turn.discard_markers }} <br></span>
+        <span>effects_availables = <div v-for="e in goStore.self?.turn.effects_availables">
                 <button @click="useEffect(e)" :disabled="!e.usable">
                     {{ e.effect + ' ' + e.effect_type }}
                 </button>
@@ -82,76 +69,73 @@ const discard_unwrapped = ref(false)
         <br>
         board =
         <div class="cards_container">
-            <CardPreview :data="c" v-for="  c   in   props.player.board  " @click="lockCard(c)"
-                :locked="c.uuid in props.player.turn.cards_locked">
-                <button v-if="isSelf && isTurn && props.player.turn.discard_markers > 0"
+            <CardPreview :data="c" v-for="  c in goStore.self?.board  " @click="lockCard(c)"
+                :locked="c.uuid in (goStore.self?.turn.cards_locked ?? [])">
+                <button v-if="isTurn && (goStore.self?.turn.discard_markers ?? 0) > 0"
                     @click="discard(c)">DISCARD</button>
-                <button v-if="isSelf && isTurn && props.player.turn.discard_markers == 0" @click="lockCard(c)"
-                    :disabled="c.uuid in props.player.turn.cards_locked">
+                <button v-if="isTurn && goStore.self?.turn.discard_markers == 0" @click="lockCard(c)"
+                    :disabled="c.uuid in goStore.self?.turn.cards_locked">
                     LOCK
                 </button>
                 <button
-                    v-if="isSelf && isTurn && props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
-                    :disabled="!goStore.self || !c || c.uuid in props.player.turn.cards_locked"
+                    v-if="isTurn && goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
+                    :disabled="!goStore.self || !c || c.uuid in goStore.self?.turn.cards_locked"
                     @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
 
 
                 <div>{{ c.health_as_champion }}</div>
-                <button
-                    v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && (c.health_as_champion ?? 0) > 0"
-                    :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0"
-                    @click="damage_champion(c)">DAMAGE</button>
-                <button
-                    v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.STUN) && e.usable) && (c.health_as_champion ?? 0) > 0"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STUN) && e.usable)!, c)">STUN</button>
+
             </CardPreview>
         </div>
         <br>
-        stack =
-        <CardSlot :stack="props.player.stack_pile">
-            <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
-        </CardSlot>
-        <br>
-        discard =
 
-        {{ props.player.discard_pile.length }}
-        <input type="checkbox" v-model="discard_unwrapped" />
+        <div class="stack_and_discard">
+            <div>
+                <input type="checkbox" v-model="discard_unwrapped" />
+                <div class="cards_container">
 
-        <CardPreview v-if="!discard_unwrapped" :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="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
-                STACK</button> -->
+                    <template v-for="c in goStore.self?.discard_pile  ">
+                        <CardPreview :data="c" :wrapped="!discard_unwrapped">
+                            <!-- <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="isTurn && c.card_type == CardType.CHAMPION"
+                                :disabled="!goStore.self || !c || !goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
+                                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)!, c)">RESTACK
+                                (champion)</button>
 
-            <button v-if="isSelf && isTurn"
-                :disabled="!goStore.self || !props.player.discard_pile.at(-1) || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable) || props.player.discard_pile.at(-1)!.uuid in props.player.turn.cards_locked"
-                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, props.player.discard_pile.at(-1))">SACRIFICE</button>
-        </CardPreview>
+                            <button v-if="isTurn"
+                                :disabled="!goStore.self || !c || !goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
+                                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)!, c)">RESTACK
+                                (card)</button>
+                            <button v-if="isTurn"
+                                :disabled="!goStore.self || !c || !goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
+                                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
+                        </CardPreview>
+                    </template>
+                </div>
+            </div>
 
-        <template v-if="discard_unwrapped" 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="put_on_stack_from_discard(c)">PUT ON STACK</button>
-                -->
-                <button v-if="isSelf && isTurn && c.card_type == CardType.CHAMPION"
-                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)!, c)">RESTACK
-                    (champion)</button>
+            <div class="separator"></div>
+            <div class="separator"></div>
 
-                <button v-if="isSelf && isTurn"
-                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)!, c)">RESTACK
-                    (card)</button>
-                <button v-if="isSelf && isTurn"
-                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
-            </CardPreview>
-        </template>
+            <CardSlot :stack="goStore.self?.stack_pile">
+                <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
+            </CardSlot>
+        </div>
 
 
     </div>
 </template>
 
 <style scoped>
+.stack_and_discard {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+
+}
+
 .player {
     border-top: 5px solid black;
 }
@@ -181,14 +165,7 @@ const discard_unwrapped = ref(false)
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-#self_hand {
-    display: flex;
-    flex-direction: row-reverse;
-    flex-wrap: nowrap;
-    position: fixed;
+    const stack_unwrapped=ref(false) position: fixed;
     right: 60px;
     bottom: -50px;
     max-width: 100vw;

From 9b711cd4c6734a5f53f28e0216861308b75d546c Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Wed, 1 May 2024 15:42:11 +0200
Subject: [PATCH 10/19] Fix typo

---
 components/SelfView.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/SelfView.vue b/components/SelfView.vue
index dc3cc56..4c6264b 100644
--- a/components/SelfView.vue
+++ b/components/SelfView.vue
@@ -165,7 +165,15 @@ const discard_unwrapped = ref(false)
     position: absolute;
     top: 50%;
     left: 50%;
-    const stack_unwrapped=ref(false) position: fixed;
+    transform: translate(-50%, -50%);
+}
+
+#self_hand {
+    z-index: 1;
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    position: fixed;
     right: 60px;
     bottom: -50px;
     max-width: 100vw;

From 9121f097c40cd9daff26e772768f0f8d6bd8676d Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Thu, 2 May 2024 23:05:50 +0200
Subject: [PATCH 11/19] Fix Prepare typo

---
 netcode/Effect.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/netcode/Effect.ts b/netcode/Effect.ts
index c81be5f..de68fd4 100644
--- a/netcode/Effect.ts
+++ b/netcode/Effect.ts
@@ -5,7 +5,7 @@ export enum CardEffects {
     GOLD = "gold",
     DAMAGE = "damage",
     HEAL = "heal",
-    PERPARE = "prepare",
+    PREPARE = "prepare",
     STUN = "stun",
     SACRIFICE = "sacrifice",
     DRAW = "draw",

From d15058fbadbb1769dd0a56b3896bb30c65604f5c Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Thu, 2 May 2024 23:26:42 +0200
Subject: [PATCH 12/19] Add Prepare button

---
 components/SelfView.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/SelfView.vue b/components/SelfView.vue
index 4c6264b..756376d 100644
--- a/components/SelfView.vue
+++ b/components/SelfView.vue
@@ -82,6 +82,11 @@ const discard_unwrapped = ref(false)
                     :disabled="!goStore.self || !c || c.uuid in goStore.self?.turn.cards_locked"
                     @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
 
+                <button
+                    v-if="isTurn && goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.PREPARE) && e.usable) && c.card_type == CardType.CHAMPION"
+                    :disabled="!goStore.self || !c || !(c.uuid in goStore.self?.turn.cards_locked)"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PREPARE) && e.usable)!, c)">PREPARE</button>
+
 
                 <div>{{ c.health_as_champion }}</div>
 
@@ -116,9 +121,6 @@ const discard_unwrapped = ref(false)
                 </div>
             </div>
 
-            <div class="separator"></div>
-            <div class="separator"></div>
-
             <CardSlot :stack="goStore.self?.stack_pile">
                 <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
             </CardSlot>
@@ -190,4 +192,8 @@ const discard_unwrapped = ref(false)
     transform: translateY(-40px);
 
 }
+
+.cards_container {
+    min-width: 250px;
+}
 </style>
\ No newline at end of file

From c13f9de65ec01341196e4addf92e0ccb04d0b46e Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Thu, 2 May 2024 23:27:00 +0200
Subject: [PATCH 13/19] new layout for stack and discard

---
 components/PlayerSlot.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 1ded9b9..de4b183 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -111,20 +111,30 @@ const discard_unwrapped = ref(false)
             </CardPreview>
         </div>
 
+        <div class="stack_and_discard">
+            <CardSlot :stack="props.player.stack_pile">
+                <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
+            </CardSlot>
+            <div class="separator"></div>
+            <div class="separator"></div>
 
-        <CardSlot :stack="props.player.stack_pile">
-            <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
-        </CardSlot>
+            <CardSlot :stack="props.player.discard_pile">
 
+            </CardSlot>
+        </div>
 
-        <CardSlot :stack="props.player.discard_pile">
-
-        </CardSlot>
 
     </div>
 </template>
 
 <style scoped>
+.stack_and_discard {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+
+}
+
 .player {
     border-top: 5px solid black;
 }

From 8eb6cc3e776d22b7d0f478b1c1f4f47ce733ea10 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 3 May 2024 00:35:07 +0200
Subject: [PATCH 14/19] add shadow to card

---
 components/CardPreview.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 7195e0e..9f4547d 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -66,13 +66,25 @@ onBeforeUpdate(() => {
     cursor: pointer
 }
 
+.card_image {
+    max-height: 250px;
+    transition: filter .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: margin .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: transform .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+    margin-top: 15px;
+    margin-bottom: 0px
+}
+
 .card_image.outlined {
     outline: 2px solid red;
     outline-offset: -2px;
 }
 
 .card_image.locked {
-    filter: brightness(0.5);
+    /* filter: brightness(0.5); */
+    filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
+    margin-top: 0px;
+    margin-bottom: 15px;
 }
 
 .card.wrapped {

From 716f3cf018c0bf09c1a28dd5f733c87e056ec82e Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 3 May 2024 00:37:09 +0200
Subject: [PATCH 15/19] factorization : turn find_effect

---
 components/GameBoard.vue  | 31 +++++++++++++------------------
 components/PlayerSlot.vue | 13 ++++++-------
 components/SelfView.vue   | 29 ++++++++++++++---------------
 netcode/Turn.ts           | 11 +++++++++--
 4 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 1b91544..06a550e 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -21,37 +21,32 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
                             BUY
                         </button>
                         <button
-                            @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
-                            :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)!.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < goStore.game.gem_stack.at(-1)!.cost!) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
+                            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
+                            :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)!.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < goStore.game.gem_stack.at(-1)!.cost!) || !goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
                             BUY IN HAND</button>
                         <button
-                            @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
-                            :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)?.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < (goStore.game.gem_stack.at(-1)?.cost ?? Infinity)) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
-                            BUY IN STACK (generic)</button>
-                        <!-- <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> -->
+                            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
+                            :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)?.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < (goStore.game.gem_stack.at(-1)?.cost ?? Infinity)) || !goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
+                            BUY IN STACK(generic)
+                        </button>
                     </template>
                 </CardSlot>
                 <div class="separator"></div>
-                <CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
+                <CardPreview :data="c" v-for=" c  in  goStore.game?.market " @click="c && buy(c)">
                     <template v-if="isTurn && c">
                         <button @click="buy(c)"
                             :disabled="goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost">BUY</button>
                         <button
-                            @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)!, c)"
-                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
+                            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, c)"
+                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
                             BUY IN HAND</button>
                         <button
-                            @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)!, c)"
-                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
+                            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, c)"
+                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
                             BUY IN STACK (generic)</button>
                         <button v-if="c.card_type == CardType.ACTION"
-                            @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)!, c)"
-                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
+                            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_ACTION_BOUGHT)!, c)"
+                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_ACTION_BOUGHT)">
                             BUY IN STACK (actions)</button>
                     </template>
                 </CardPreview>
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index de4b183..b66372c 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -30,8 +30,8 @@ const discard_unwrapped = ref(false)
             Damage
         </button>
         <button v-if="props.player.team != goStore.self?.team"
-            @click="useEffect(goStore.self?.turn.effects_availables.find(e => (e.effect == CardEffects.DISCARD) && e.usable)!, props.player)"
-            :disabled="!goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.DISCARD) && e.usable)">
+            @click="useEffect(props.player.turn.find_effect(CardEffects.DISCARD)!, props.player)"
+            :disabled="!props.player.turn.find_effect(CardEffects.DISCARD)">
             make Discard</button>
 
         <div id="turn_data">
@@ -94,10 +94,9 @@ const discard_unwrapped = ref(false)
                     :disabled="c.uuid in props.player.turn.cards_locked">
                     LOCK
                 </button>
-                <button
-                    v-if="isSelf && isTurn && props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
+                <button v-if="isSelf && isTurn && props.player.turn.find_effect(CardEffects.SACRIFICE)"
                     :disabled="!goStore.self || !c || c.uuid in props.player.turn.cards_locked"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
+                    @click="useEffect(props.player.turn.find_effect(CardEffects.SACRIFICE)!, c)">SACRIFICE</button>
 
 
                 <div>{{ c.health_as_champion }}</div>
@@ -106,8 +105,8 @@ const discard_unwrapped = ref(false)
                     :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0"
                     @click="damage_champion(c)">DAMAGE</button>
                 <button
-                    v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.STUN) && e.usable) && (c.health_as_champion ?? 0) > 0"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STUN) && e.usable)!, c)">STUN</button>
+                    v-if="!isSelf && !isTurn && goStore.self?.team == props.player.turn.find_effect(CardEffects.STUN) && (c.health_as_champion ?? 0) > 0"
+                    @click="useEffect(props.player.turn.find_effect(CardEffects.STUN)!, c)">STUN</button>
             </CardPreview>
         </div>
 
diff --git a/components/SelfView.vue b/components/SelfView.vue
index 756376d..64f0874 100644
--- a/components/SelfView.vue
+++ b/components/SelfView.vue
@@ -17,8 +17,8 @@ const discard_unwrapped = ref(false)
             Heal
         </button>
         <button v-if="goStore.self && goStore.self?.team != goStore.self?.team"
-            @click="useEffect(goStore.self?.turn.effects_availables.find(e => (e.effect == CardEffects.DISCARD) && e.usable)!, goStore.self)"
-            :disabled="!goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.DISCARD) && e.usable)">
+            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.DISCARD)!, goStore.self)"
+            :disabled="!goStore.self!.turn.find_effect(CardEffects.DISCARD)">
             make Discard</button>
         <div id="turn_data">
 
@@ -62,7 +62,7 @@ const discard_unwrapped = ref(false)
         <span>discard_markers = {{ goStore.self?.turn.discard_markers }} <br></span>
         <span>effects_availables = <div v-for="e in goStore.self?.turn.effects_availables">
                 <button @click="useEffect(e)" :disabled="!e.usable">
-                    {{ e.effect + ' ' + e.effect_type }}
+                    {{ e.effect + ' ' + e.effect_type + ' ' + e.amount }}
                 </button>
 
             </div></span>
@@ -77,15 +77,14 @@ const discard_unwrapped = ref(false)
                     :disabled="c.uuid in goStore.self?.turn.cards_locked">
                     LOCK
                 </button>
-                <button
-                    v-if="isTurn && goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
+                <button v-if="isTurn && goStore.self!.turn.find_effect(CardEffects.SACRIFICE)"
                     :disabled="!goStore.self || !c || c.uuid in goStore.self?.turn.cards_locked"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
+                    @click="useEffect(goStore.self!.turn.find_effect(CardEffects.SACRIFICE)!, c)">SACRIFICE</button>
 
                 <button
-                    v-if="isTurn && goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.PREPARE) && e.usable) && c.card_type == CardType.CHAMPION"
+                    v-if="isTurn && goStore.self!.turn.find_effect(CardEffects.PREPARE) && c.card_type == CardType.CHAMPION"
                     :disabled="!goStore.self || !c || !(c.uuid in goStore.self?.turn.cards_locked)"
-                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PREPARE) && e.usable)!, c)">PREPARE</button>
+                    @click="useEffect(goStore.self!.turn.find_effect(CardEffects.PREPARE)!, c)">PREPARE</button>
 
 
                 <div>{{ c.health_as_champion }}</div>
@@ -99,23 +98,23 @@ const discard_unwrapped = ref(false)
                 <input type="checkbox" v-model="discard_unwrapped" />
                 <div class="cards_container">
 
-                    <template v-for="c in goStore.self?.discard_pile  ">
+                    <template v-for="c in  goStore.self?.discard_pile   ">
                         <CardPreview :data="c" :wrapped="!discard_unwrapped">
                             <!-- <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="isTurn && c.card_type == CardType.CHAMPION"
-                                :disabled="!goStore.self || !c || !goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
-                                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)!, c)">RESTACK
+                                :disabled="!goStore.self || !c || !goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION)"
+                                @click="useEffect(goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION)!, c)">RESTACK
                                 (champion)</button>
 
                             <button v-if="isTurn"
-                                :disabled="!goStore.self || !c || !goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
-                                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)!, c)">RESTACK
+                                :disabled="!goStore.self || !c || !goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CARD)"
+                                @click="useEffect(goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CARD)!, c)">RESTACK
                                 (card)</button>
                             <button v-if="isTurn"
-                                :disabled="!goStore.self || !c || !goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
-                                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
+                                :disabled="!goStore.self || !c || !goStore.self!.turn.find_effect(CardEffects.SACRIFICE)"
+                                @click="useEffect(goStore.self!.turn.find_effect(CardEffects.SACRIFICE)!, c)">SACRIFICE</button>
                         </CardPreview>
                     </template>
                 </div>
diff --git a/netcode/Turn.ts b/netcode/Turn.ts
index 5d745f3..2b72b7b 100644
--- a/netcode/Turn.ts
+++ b/netcode/Turn.ts
@@ -1,6 +1,6 @@
 import { type GameObjectRegister } from "."
 import type { Card } from "./Card"
-import { type Effect } from "./Effect"
+import { type Effect, CardEffects } from "./Effect"
 import type { GameObjectNetcode } from "./GameObject"
 export interface TurnNetcode extends GameObjectNetcode {
     cards_locked: Array<string>
@@ -17,9 +17,10 @@ export type Turn = Omit<TurnNetcode, 'cards_locked' | 'effects_availables' | 'ch
     cards_locked: { [key: string]: Card }
     effects_availables: Array<Effect>
     champions_health: Map<string, number>
+    find_effect: (card_effect: CardEffects) => Effect | undefined
 }
 export function create_turn(input: TurnNetcode, register: GameObjectRegister) {
-    return new Proxy<any>(input, {
+    const turn = new Proxy<any>(input, {
         get(target: TurnNetcode, prop, reciever) {
             if (prop == "cards_locked") {
                 return Object.fromEntries(target.cards_locked.map(e => [e, register.cards.get(e)]))
@@ -34,10 +35,16 @@ export function create_turn(input: TurnNetcode, register: GameObjectRegister) {
                 }
                 return healths
             }
+            if (prop == "find_effect") {
+                return (card_effect: CardEffects) => {
+                    return turn.effects_availables.find(e => (e.effect == card_effect) && e.usable)
+                }
+            }
             return Reflect.get(target, prop, reciever);
         },
         set(target, prop, val, receiver) {
             return Reflect.set(target, prop, val, receiver);
         }
     }) as Turn
+    return turn
 }

From 4485b6b81008a78f5a144520a17f43e1d2694561 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 3 May 2024 00:38:52 +0200
Subject: [PATCH 16/19] Do not rotate cards at each update

---
 components/CardPreview.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 9f4547d..1d8bf7d 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -31,9 +31,17 @@ function contextmenu(e: MouseEvent) {
 
 const rotation = ref(0)
 
-onBeforeUpdate(() => {
+// onBeforeUpdate(() => {
+//     rotation.value = Math.random() > .5 ? 2 : -2
+// })
+
+
+watch(
+    () => props.data,
+    () => {
     rotation.value = Math.random() > .5 ? 2 : -2
-})
+    },
+    { immediate: true })
 </script>
 
 <template>

From cfe7750abe9190ce8aa9fce35b88fc786eb158aa Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 3 May 2024 00:52:01 +0200
Subject: [PATCH 17/19] Fix card animation

---
 components/CardPreview.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 1d8bf7d..e348a72 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -39,7 +39,7 @@ const rotation = ref(0)
 watch(
     () => props.data,
     () => {
-    rotation.value = Math.random() > .5 ? 2 : -2
+        rotation.value = Math.random() > .5 ? 2 : -2
     },
     { immediate: true })
 </script>
@@ -76,9 +76,7 @@ watch(
 
 .card_image {
     max-height: 250px;
-    transition: filter .125s cubic-bezier(0.075, 0.82, 0.165, 1);
-    transition: margin .125s cubic-bezier(0.075, 0.82, 0.165, 1);
-    transition: transform .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
     margin-top: 15px;
     margin-bottom: 0px
 }

From 823baa403412b34fdf74fa1c8d356ff6366acd3a Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 3 May 2024 16:59:40 +0200
Subject: [PATCH 18/19] closes #2, closes #1; fix make discard and stun not
 working

---
 components/PlayerSlot.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index b66372c..392d52b 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -30,10 +30,9 @@ const discard_unwrapped = ref(false)
             Damage
         </button>
         <button v-if="props.player.team != goStore.self?.team"
-            @click="useEffect(props.player.turn.find_effect(CardEffects.DISCARD)!, props.player)"
-            :disabled="!props.player.turn.find_effect(CardEffects.DISCARD)">
+            @click="useEffect(goStore.self?.turn.find_effect(CardEffects.DISCARD)!, props.player)"
+            :disabled="!goStore.self?.turn.find_effect(CardEffects.DISCARD)">
             make Discard</button>
-
         <div id="turn_data">
             <div class="turn_icon">
                 <img src="/images/champion-shield.png" />
@@ -59,9 +58,10 @@ const discard_unwrapped = ref(false)
                     {{ props.player.turn.gold_reserve }}
                 </span>
             </div>
-            <span>discard_markers = {{ props.player.turn.discard_markers }} </span>
         </div>
 
+        <span>discard_markers = {{ props.player.turn.discard_markers }} </span>
+
         <span>effects_availables = <div v-for=" e  in  props.player.turn.effects_availables ">
                 <button v-if="e" @click="useEffect(e)" :disabled="!e.usable">
                     {{ e.effect + ' ' + e.effect_type }}
@@ -105,8 +105,8 @@ const discard_unwrapped = ref(false)
                     :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0"
                     @click="damage_champion(c)">DAMAGE</button>
                 <button
-                    v-if="!isSelf && !isTurn && goStore.self?.team == props.player.turn.find_effect(CardEffects.STUN) && (c.health_as_champion ?? 0) > 0"
-                    @click="useEffect(props.player.turn.find_effect(CardEffects.STUN)!, c)">STUN</button>
+                    v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && goStore.self?.turn.find_effect(CardEffects.STUN) && (c.health_as_champion ?? 0) > 0"
+                    @click="useEffect(goStore.self.turn.find_effect(CardEffects.STUN)!, c)">STUN</button>
             </CardPreview>
         </div>
 

From 77f44ec1db3395d27c5228540fe3a9eea785406f Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Fri, 3 May 2024 17:00:31 +0200
Subject: [PATCH 19/19] small css changes

---
 app.vue                    |  4 ++
 components/CardPreview.vue |  1 +
 components/CardSlot.vue    |  8 +++-
 components/GameBoard.vue   |  6 +--
 components/PlayerStats.vue | 58 +++++++++++++++++++++++++
 components/SelfView.vue    | 86 ++++++++++++++++----------------------
 6 files changed, 108 insertions(+), 55 deletions(-)
 create mode 100644 components/PlayerStats.vue

diff --git a/app.vue b/app.vue
index a38bd91..7aba6ec 100644
--- a/app.vue
+++ b/app.vue
@@ -23,4 +23,8 @@ let username = ref<string>('legonzaur')
 html {
   text-align: center;
 }
+
+body {
+  margin: 0;
+}
 </style>
\ No newline at end of file
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index e348a72..866cf39 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -110,6 +110,7 @@ watch(
 }
 
 #contextMenu {
+    z-index: 5;
     position: fixed;
     height: 100%;
     width: 100%;
diff --git a/components/CardSlot.vue b/components/CardSlot.vue
index 4d73951..ba3b025 100644
--- a/components/CardSlot.vue
+++ b/components/CardSlot.vue
@@ -28,4 +28,10 @@ const unwrapped = ref(false)
 
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+.cards_container {
+    position: relative;
+    max-width: 30vw;
+    grid-auto-columns: auto;
+}
+</style>
\ No newline at end of file
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 06a550e..30a7db8 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import goStore, { buy, endTurn, useEffect } from '@/netcode';
+import goStore, { buy, useEffect } from '@/netcode';
 import { CardEffects } from '@/netcode/Effect'
 import { CardType } from '@/netcode/Card'
 
@@ -9,7 +9,6 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
 
 <template>
     <div @contextmenu.prevent="false">
-        <button v-if="isTurn" @click="endTurn">END TURN</button>
         <div v-if="!goStore.self"><b>SPECTATOR MODE</b></div>
         <div>
             market_amount = {{ goStore.game?.market_stack?.length }}
@@ -31,8 +30,7 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
                         </button>
                     </template>
                 </CardSlot>
-                <div class="separator"></div>
-                <CardPreview :data="c" v-for=" c  in  goStore.game?.market " @click="c && buy(c)">
+                <CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
                     <template v-if="isTurn && c">
                         <button @click="buy(c)"
                             :disabled="goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost">BUY</button>
diff --git a/components/PlayerStats.vue b/components/PlayerStats.vue
new file mode 100644
index 0000000..658356c
--- /dev/null
+++ b/components/PlayerStats.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { Player } from '~/netcode/Player';
+
+
+export interface Props {
+    player: Player
+}
+
+const props = defineProps<Props>()
+
+</script>
+
+<template>
+
+    <div class="turn_icon">
+        <img src="/images/heal.png" />
+        <span class="turn_icon_number">
+            {{ player.turn.heal_reserve }}
+        </span>
+    </div>
+    <div class="turn_icon">
+        <img src="/images/damage.png" />
+        <span class="turn_icon_number">
+            {{ player.turn.damage_reserve }}
+        </span>
+    </div>
+    <div class="turn_icon">
+        <img src="/images/gold.png" />
+        <span class="turn_icon_number">
+            {{ player.turn.gold_reserve }}
+        </span>
+    </div>
+    <div class="turn_icon">
+        <img src="/images/champion-shield.png" />
+        <span class="turn_icon_number">
+            {{ player.team.health }}
+        </span>
+    </div>
+
+</template>
+
+<style scoped>
+.turn_icon {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.turn_icon img {
+    height: 50px;
+}
+
+.turn_icon_number {
+    position: absolute;
+    text-shadow: white 0 0 1px;
+}
+</style>
diff --git a/components/SelfView.vue b/components/SelfView.vue
index 64f0874..a8e330b 100644
--- a/components/SelfView.vue
+++ b/components/SelfView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team } from '~/netcode';
+import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team, endTurn } from '~/netcode';
 import type { Card } from '~/netcode/Card';
 import { CardEffects } from '@/netcode/Effect'
 import { CardType } from '~/netcode/Card';
@@ -21,39 +21,12 @@ const discard_unwrapped = ref(false)
             :disabled="!goStore.self!.turn.find_effect(CardEffects.DISCARD)">
             make Discard</button>
         <div id="turn_data">
-
-            <div class="turn_icon">
-                <img src="/images/heal.png" />
-                <span class="turn_icon_number">
-                    {{ goStore.self?.turn.heal_reserve }}
-                </span>
-            </div>
-            <div class="turn_icon">
-                <img src="/images/damage.png" />
-                <span class="turn_icon_number">
-                    {{ goStore.self?.turn.damage_reserve }}
-                </span>
-            </div>
-            <div class="turn_icon">
-                <img src="/images/gold.png" />
-                <span class="turn_icon_number">
-                    {{ goStore.self?.turn.gold_reserve }}
-                </span>
-            </div>
-            <div class="turn_icon">
-                <img src="/images/champion-shield.png" />
-                <span class="turn_icon_number">
-                    {{ goStore.self?.team.health }}
-                </span>
-            </div>
+            <button id="end_turn" v-if="isTurn" @click="endTurn">END TURN</button>
+            <PlayerStats v-if="goStore.self" :player='goStore.self'></PlayerStats>
         </div>
+
         <div class="cards_container" id="self_hand">
-            <button v-if="isTurn && (goStore.self?.hand.length ?? 0) > 1"
-                @click="playAllCards(goStore.self?.hand as Card[])">
-                PLAY ALL
-            </button>
             <CardPreview :data="c" v-for="  c  in  goStore.self?.hand  " @click="c && playCard(c)">
-                <button v-if="c && isTurn" @click="playCard(c)">PLAY</button>
                 <button v-if="c && isTurn && (goStore.self?.turn.discard_markers ?? 0) > 0"
                     @click="discard(c!)">DISCARD</button>
             </CardPreview>
@@ -145,53 +118,66 @@ const discard_unwrapped = ref(false)
     background: lightgreen;
 }
 
+#play_all {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 10em;
+}
+
 #turn_data {
     position: fixed;
-    bottom: 0;
-    right: 10px;
+    bottom: 10px;
+    left: 10px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }
 
-.turn_icon {
-    position: relative;
-}
-
-.turn_icon img {
-    height: 50px;
-}
-
-.turn_icon_number {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
 
 #self_hand {
+    position: fixed;
     z-index: 1;
     display: flex;
-    flex-direction: row-reverse;
+    align-items: stretch;
+    flex-direction: row;
     flex-wrap: nowrap;
-    position: fixed;
-    right: 60px;
+    left: 70px;
     bottom: -50px;
     max-width: 100vw;
+    justify-content: flex-start;
+    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+    transform: translateY(150px)
+}
+
+#self_hand:hover {
+    transform: translateY(0px);
+}
+
+#end_turn {
+    width: 50px;
+    height: 50px;
 }
 </style>
 
 <style>
+#turn_data * {
+    margin: 2.5px 0 2.5px 0;
+}
+
 #self_hand .card {
     transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
     overflow: visible;
 }
 
+
 #self_hand .card:hover {
     transform: translateY(-40px);
 
 }
 
+
+
 .cards_container {
     min-width: 250px;
 }