heronfief/front
3
1
Fork 0
Code Issues 44 Pull Requests 1 Actions Packages Projects Releases 1 Activity

Feat : various CSS Changes
release-tag / release-image (push) Successful in 31s
Details

Browse Source
This commit is contained in:
legonzaur
2024-05-17 17:25:37 +02:00
parent 56a62789c1
commit 07bacfa8e3
3 changed files with 54 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CardsGrouped.vue
+9 -2
View File
@@ -20,7 +20,10 @@ const props = withDefaults(defineProps<Props>(), {
</CardPreview>
</template>
<template v-if="props.stack.length == 0">
<img :class="`card_image empty`" :src="'/cards/background.png'" draggable="false">
<div class="empty">
<img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
</div>
</template>
</div>
</div>
@@ -42,7 +45,11 @@ const props = withDefaults(defineProps<Props>(), {
justify-content: center;
}
.card_image.empty {
.empty {
max-width: 10px;
}
.empty>.card_image {
filter: brightness(0.5);
max-height: 250px;
}
components/GameBoard.vue
-1
View File
@@ -86,7 +86,6 @@ function showWinnerScreen() {
#current_player {
grid-area: current_player;
background-image: url("/images/bg-darkgrass.png");
padding-bottom: 75px;
}
components/PlayerSlot.vue
+45 -38
View File
@@ -100,34 +100,36 @@ function check_for_guard(player: Player) {
<!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
</CardsGrouped>
</div>
<div :class="`discard ${discard_unwrapped ? 'unwrapped' : ''}`">
<div class="discard_container" @click="() => discard_unwrapped = true">
<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="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.SACRIFICE) && e.usable)"
@click.stop="sacrifice(c)">
SACRIFICE
</button>
<button
v-if="c.card_type == CardType.CHAMPION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
@click.stop="restack_discarded_champion(c)">
RESTACK_DISCARDED_CHAMPION
</button>
<button
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
@click.stop="restack_discarded_card(c)">
RESTACK_DISCARDED_CARD
</button>
</template>
</CardPreview>
</div>
<div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"
@click="() => discard_unwrapped = false"></div>
<div class="discard" :class="{ invisible: discard_unwrapped }" @click="() => discard_unwrapped = true">
<CardsGrouped :stack="props.player.discard_pile" :visible="!discard_unwrapped"> </CardsGrouped>
</div>
<div class="discard_overlay" v-if="discard_unwrapped">
<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="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.SACRIFICE) && e.usable)"
@click.stop="sacrifice(c)">
SACRIFICE
</button>
<button
v-if="c.card_type == CardType.CHAMPION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
@click.stop="restack_discarded_champion(c)">
RESTACK_DISCARDED_CHAMPION
</button>
<button
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
@click.stop="restack_discarded_card(c)">
RESTACK_DISCARDED_CARD
</button>
</template>
</CardPreview>
</div>
<div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"
@click="() => discard_unwrapped = false"></div>
</template>
<div id="player_banner" :class="hide_stack_and_discard ? 'small' : 'big'">
<div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore
@@ -293,26 +295,30 @@ function check_for_guard(player: Player) {
justify-content: start;
cursor: pointer;
pointer-events: none;
margin-left: 75px;
}
.discard.unwrapped {
margin-top: 0px;
cursor: default;
position: absolute;
padding-bottom: 100px;
height: 100%;
.discard.invisible {
visibility: hidden;
}
.discard_container {
.discard_overlay {
z-index: 9;
display: flex;
/* background: blue; */
pointer-events: none;
gap: 2px;
padding-left: 40px;
flex-wrap: wrap-reverse;
align-content: flex-end;
cursor: default;
position: absolute;
padding-bottom: inherit;
padding-left: 40px;
height: calc(100% - 64px);
padding-top: 64px;
width: calc(100% -40px);
margin-left: 0;
}
#discard_unwrapped_bg {
@@ -325,6 +331,7 @@ function check_for_guard(player: Player) {
z-index: 8;
background: rgba(0, 0, 0, 0.5);
pointer-events: all;
padding: inherit;
}
#discard_unwrapped_bg.unwrapped {
@@ -341,14 +348,14 @@ function check_for_guard(player: Player) {
"stack player"
"discard player";
transition: all 1s;
margin-bottom: -75px;
padding-bottom: 75px;
}
.player.discard_unwrapped {
.discard_overlay {
grid-template-areas:
"player_stats player_stats"
"stack player";
position: relative;
isolation: isolate;
}
#current_player_board {