cancel selction

This commit is contained in:
Alberto Xamin 2020-11-22 18:25:37 +01:00
parent 12b84a7ab9
commit d88dbb6c26
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
2 changed files with 28 additions and 1 deletions

View File

@ -4,6 +4,7 @@
<div> <div>
<Card v-for="c in cards" v-bind:key="c" :card="c" @click.native="select(c)" @mouseover.native="showDesc(c)" @mouseleave.native="desc=''"/> <Card v-for="c in cards" v-bind:key="c" :card="c" @click.native="select(c)" @mouseover.native="showDesc(c)" @mouseleave.native="desc=''"/>
</div> </div>
<div class="button center-stuff" v-if="showCancelBtn" @click="cancel"><span>ANNULLA</span></div>
<p v-if="desc" style="bottom:10pt;position:absolute;margin:16pt;">{{desc}}</p> <p v-if="desc" style="bottom:10pt;position:absolute;margin:16pt;">{{desc}}</p>
</div> </div>
</template> </template>
@ -19,11 +20,19 @@ export default {
props: { props: {
cards: Array, cards: Array,
select: Function, select: Function,
cancel: Function,
text: String, text: String,
}, },
data: () => ({ data: () => ({
desc: '' desc: ''
}), }),
computed: {
showCancelBtn() {
if (this.cancel)
return true
return false
}
},
methods: { methods: {
showDesc(card) { showDesc(card) {
this.desc = card.desc this.desc = card.desc
@ -63,4 +72,19 @@ export default {
.card:hover { .card:hover {
transform: translate(0, -5px) scale(1.05, 1.05); transform: translate(0, -5px) scale(1.05, 1.05);
} }
.button {
background-color: #0000;
color: white;
border: 2px solid white;
transition-duration: 0.2s;
width: 100pt;
height: 24pt;
border-radius: 12pt;
cursor: pointer;
}
.button:hover {
background-color: white; /* Green */
color: black;
}
</style> </style>

View File

@ -22,7 +22,7 @@
</transition-group> </transition-group>
</div> </div>
<p>{{hint}}</p> <p>{{hint}}</p>
<Chooser v-if="card_against" text="Contro chi vuoi giocare la carta" :cards="visiblePlayers" :select="selectAgainst"/> <Chooser v-if="card_against" text="Contro chi vuoi giocare la carta" :cards="visiblePlayers" :select="selectAgainst" :cancel="cancelCardAgainst"/>
<Chooser v-if="pending_action == 3" text="Scegli come rispondere" :cards="respondCards" :select="respond"/> <Chooser v-if="pending_action == 3" text="Scegli come rispondere" :cards="respondCards" :select="respond"/>
<Chooser v-if="shouldChooseCard" text="Scegli che carta pescare" :cards="available_cards" :select="choose"/> <Chooser v-if="shouldChooseCard" text="Scegli che carta pescare" :cards="available_cards" :select="choose"/>
<Chooser v-if="lives <= 0 && max_lives > 0" text="SEI MORTO" /> <Chooser v-if="lives <= 0 && max_lives > 0" text="SEI MORTO" />
@ -146,6 +146,9 @@ export default {
this.really_play_card(this.card_against, player.name) this.really_play_card(this.card_against, player.name)
this.card_against = null this.card_against = null
}, },
cancelCardAgainst() {
this.card_against = null
},
really_play_card(card, against) { really_play_card(card, against) {
let card_data = { let card_data = {
index: this.hand.indexOf(card), index: this.hand.indexOf(card),