Merge pull request 'feat-discard-unwrap' (#41) from feat-discard-unwrap into main

Reviewed-on: legonzaur/heron-realms-front#41

components/GameBoard.vue

@@ -17,8 +17,7 @@ const discard_unwrapped = ref<boolean>(false)
             </PlayerListElement>
         </div>
         <div id="current_player">
-            <input type="checkbox" v-model="discard_unwrapped">
+            <PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
-            <PlayerSlot v-for="p in current_players" :player="p" :discard_unwrapped="discard_unwrapped"></PlayerSlot>
         </div>
         <SelfView></SelfView>
     </div>
@@ -38,6 +37,8 @@ const discard_unwrapped = ref<boolean>(false)
 #player_list,
 #current_player {
     overflow: auto;
+    position: relative;
+    isolation: isolate;
 }
 
 #market {

components/PlayerSlot.vue

@@ -17,14 +17,13 @@ import { CardEffects, type Effect } from "@/netcode/Effect";
 export interface Props {
     player: Player;
     hide_stack_and_discard?: boolean;
-    discard_unwrapped?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     hide_stack_and_discard: () => false,
-    discard_unwrapped: () => false,
 })
 
+const discard_unwrapped = ref(false)
 const isPlayerTurn = computed(() => props.player.team === goStore.current_game?.current_turn);
 const isSelf = computed(() => props.player.uuid === goStore.self?.uuid);
 const isSelfTurn = computed(() => goStore.self?.team === goStore.current_game?.current_turn)
@@ -64,13 +63,17 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
                 </CardsGrouped>
                 <span>stack =</span>
             </div>
+            <div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"
+                @click="() => discard_unwrapped = false"></div>
             <div :class="`discard ${discard_unwrapped ? 'unwrapped' : ''}`">
-                <CardsGrouped :stack="props.player.discard_pile" v-if="!props.discard_unwrapped"> </CardsGrouped>
+                <div class="discard_container" @click="() => discard_unwrapped = true">
-                <CardPreview :tilted="false" v-if="props.discard_unwrapped" :card_id="c.card_id"
+                    <CardsGrouped :stack="props.player.discard_pile" v-if="!discard_unwrapped"> </CardsGrouped>
+                    <CardPreview :tilted="false" v-if="discard_unwrapped" :card_id="c.card_id"
                         v-for="c in props.player.discard_pile">
                         <template v-if="goStore.self?.turn && c && isSelf && isPlayerTurn">
 
-                        <button v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE)" @click.stop="sacrifice(c)">
+                            <button v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE)"
+                                @click.stop="sacrifice(c)">
                                 SACRIFICE
                             </button>
                             <button v-if="goStore.self?.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION)"
@@ -85,6 +88,8 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
                         </template>
                     </CardPreview>
                 </div>
+
+            </div>
         </template>
         <div id="player_banner">
             <div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore prêt...</div>
@@ -188,6 +193,35 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
     margin-top: 50px;
     grid-area: discard;
     justify-content: start;
+    cursor: pointer;
+    pointer-events: none;
+}
+
+.discard.unwrapped {
+    z-index: 9;
+    cursor: default;
+    position: absolute;
+}
+
+.discard_container {
+    display: flex;
+    /* background: blue; */
+    pointer-events: all;
+}
+
+#discard_unwrapped_bg {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 8;
+    background: rgba(0, 0, 0, 0.5)
+}
+
+#discard_unwrapped_bg.unwrapped {
+    display: block;
 }
 
 .player {