rename discard to make_discard; put all effects buttons inside their card

components/CardPreview.vue

@@ -38,16 +38,15 @@ watch(
 </script>
 
 <template>
-    <div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''}`" @contextmenu.prevent="false"
+    <div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''} ${props.locked ? 'locked' : ''}`"
-        @click.left="cardClick" :style="`rotate:${rotation}deg;`">
+        @contextmenu.prevent="false" @click.left="cardClick" :style="`rotate:${rotation}deg;`">
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
-        <img :class="`card_image ${props.locked ? 'locked' : ''}`" v-if="props.data"
+        <img :class="`card_image`" v-if="props.data"
             :src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'" draggable="false">
 
-        <img :class="`card_image ${props.locked ? 'locked' : ''}`" v-if="!props.data" :src="'/cards/background.png'"
+        <img :class="`card_image`" v-if="!props.data" :src="'/cards/background.png'" draggable="false">
-            draggable="false">
 
     </div>
 
@@ -84,7 +83,7 @@ watch(
     outline-offset: -2px;
 }
 
-.card_image.locked {
+.card.locked {
     /* filter: brightness(0.5); */
     filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
 }
@@ -111,5 +110,6 @@ watch(
 #contextMenuButtons>* {
     flex: 1;
     border-radius: 10px;
+    min-height: 50px;
 }
 </style>

components/PlayerSlot.vue

@@ -39,7 +39,7 @@ function run_effect(
 }
 
 const make_discard = (target: Player) =>
-    run_effect(CardEffects.DISCARD, target);
+    run_effect(CardEffects.MAKE_DISCARD, target);
 const sacrifice = (target: Card) => run_effect(CardEffects.SACRIFICE, target);
 const stun = (target: Card) => run_effect(CardEffects.STUN, target)
 
@@ -68,16 +68,9 @@ const stun = (target: Card) => run_effect(CardEffects.STUN, target)
                 Damage
             </button>
             <button v-if="isSelfTurn && isPlayerEnemy" @click="make_discard(props.player)"
-                :disabled="!goStore.self?.turn.find_effect(CardEffects.DISCARD)">
+                :disabled="!goStore.self?.turn.find_effect(CardEffects.MAKE_DISCARD)">
                 make Discard
             </button>
-            <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 }}
-                    </button>
-                </div>
-            </span>
             <br />
 
             <div class="cards_container">
@@ -90,30 +83,36 @@ const stun = (target: Card) => run_effect(CardEffects.STUN, target)
                 <!-- BOARD -->
                 <CardPreview :data="c" v-for="c in props.player.board" @click="lockCard(c)"
                     :locked="c.uuid in props.player.turn.cards_locked">
+
                     <template v-if="c && isSelf && isPlayerTurn">
-                        <button v-if="props.player.turn.discard_markers > 0" @click="discard(c)">
+                        <template v-if="c.uuid in props.player.turn.cards_locked"
-                            DISCARD
+                            v-for="e in props.player.turn.effects_availables">
+                            <button v-if="e.card == c" @click="useEffect(e)" :disabled="!e.usable">
+                                EFFECT<br>
+                                {{ e.effect + " " + (e.effect_type ?? '') }}
+                            </button>
+                        </template>
+                        <template v-if="!(c.uuid in props.player.turn.cards_locked)">
+                            <button v-if="props.player.turn.discard_markers > 0" @click="discard(c)">
+                                DISCARD
+                            </button>
+                            <button v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE)" @click="sacrifice(c)">
+                                SACRIFICE
+                            </button>
+                            <button @click="lockCard(c)">
+                                LOCK
+                            </button>
+                        </template>
+                    </template>
+                    <template v-if="isPlayerEnemy && isSelfTurn && (c.health_as_champion ?? 0) > 0">
+                        <button :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0" @click="damage_champion(c)">
+                            DAMAGE
                         </button>
-                        <button
+                        <button v-if="goStore.self?.turn.find_effect(CardEffects.STUN)" @click="stun(c)">
-                            v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE) && !(c.uuid in props.player.turn.cards_locked)"
+                            STUN
-                            @click="sacrifice(c)">
-                            SACRIFICE
-                        </button>
-                        <button
-                            v-if="c && isSelf && isPlayerTurn && !(c.uuid in (goStore.self?.turn.cards_locked ?? []))"
-                            @click="lockCard(c)">
-                            LOCK
                         </button>
                     </template>
-                    <button v-if="isPlayerEnemy && isSelfTurn && (c.health_as_champion ?? 0) > 0"
+
-                        :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0" @click="damage_champion(c)">
-                        DAMAGE
-                    </button>
-                    <button
-                        v-if="isPlayerEnemy && isSelfTurn && goStore.self?.turn.find_effect(CardEffects.STUN) && (c.health_as_champion ?? 0) > 0"
-                        @click="stun(c)">
-                        STUN
-                    </button>
                 </CardPreview>
             </div>
         </div>

components/SelfView.vue

@@ -9,8 +9,8 @@ const isTurn = computed(() => goStore.self?.team == goStore.game?.current_turn)
 <template>
     <div :class="'player ' + (isTurn ? 'turn' : '')">
         <button v-if="goStore.self && goStore.self?.team != goStore.self?.team"
-            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.DISCARD)!, goStore.self)"
+            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.MAKE_DISCARD)!, goStore.self)"
-            :disabled="!goStore.self!.turn.find_effect(CardEffects.DISCARD)">
+            :disabled="!goStore.self!.turn.find_effect(CardEffects.MAKE_DISCARD)">
             make Discard</button>
         <div id="turn_data">
             <button id="end_turn" v-if="isTurn" @click="endTurn">END TURN</button>

netcode/Effect.ts

@@ -1,4 +1,5 @@
 import { GameObjectRegister } from "."
+import type { Card } from "./Card"
 import type { GameObjectNetcode } from "./GameObject"
 
 export enum CardEffects {
@@ -10,7 +11,7 @@ export enum CardEffects {
     SACRIFICE = "sacrifice",
     DRAW = "draw",
     DRAW_AND_DISCARD = "draw_and_discard",
-    DISCARD = "discard",
+    MAKE_DISCARD = "make_discard",
     RESTACK_DISCARDED_CHAMPION = "restack_discarded_champion",
     RESTACK_DISCARDED_CARD = "restack_discarded_card",
     STACK_NEXT_ACTION_BOUGHT = "stack_next_action_bought",
@@ -36,13 +37,15 @@ export interface EffectNetcode extends GameObjectNetcode {
     amount: number
     sub_effects: Array<EffectNetcode>
     mutex: Array<string>
+    card: string
     effect_type?: EffectType
     times?: EffectTimes
 }
 
-export type Effect = Omit<EffectNetcode, 'sub_effects' | 'mutex'> & {
+export type Effect = Omit<EffectNetcode, 'sub_effects' | 'mutex' | 'card' > & {
     sub_effects: { [key: string]: Effect }
     mutex: { [key: string]: Effect }
+    card: Card
     usable: boolean
 }
 
@@ -70,6 +73,9 @@ export function create_effect(input: EffectNetcode, register: GameObjectRegister
                     }
                     return true
                 }
+                if (prop == "card"){
+                    return register.cards.get(target.card)
+                }
                 return Reflect.get(target, prop, reciever);
             },
             set(target, prop, val, receiver) {