notify turn

This commit is contained in:
Alberto Xamin 2020-11-22 14:20:54 +01:00
parent 6ca5dd23ed
commit 89a3a4e4d6
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
2 changed files with 21 additions and 5 deletions

View File

@ -4,7 +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>
<p v-if="desc" style="bottom:20%;position:absolute;margin:16pt;">{{desc}}</p> <p v-if="desc" style="bottom:10pt;position:absolute;margin:16pt;">{{desc}}</p>
</div> </div>
</template> </template>
@ -53,8 +53,8 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap;
} }
.card { .card {
width: 72pt; width: 72pt;
min-width:72pt; min-width:72pt;

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<p v-if="instruction"> {{instruction}}</p> <p v-if="instruction" class="center-stuff">{{instruction}}</p>
<button v-if="canEndTurn" @click="end_turn">Termina Turno</button> <button v-if="canEndTurn" @click="end_turn">Termina Turno</button>
<div class="equipment-slot"> <div class="equipment-slot">
<Card v-if="my_role" :card="my_role" class="back"/> <Card v-if="my_role" :card="my_role" class="back"/>
@ -25,6 +25,7 @@
<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"/>
<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="lives <= 0 && max_lives > 0" text="SEI MORTO" /> <Chooser v-if="lives <= 0 && max_lives > 0" text="SEI MORTO" />
<Chooser v-if="is_my_turn" text="GIOCA IL TUO TURNO" :key="is_my_turn" class="turn-notify" />
</div> </div>
</template> </template>
@ -52,7 +53,8 @@ export default {
pending_action: null, pending_action: null,
card_against: null, card_against: null,
has_played_bang: false, has_played_bang: false,
visiblePlayers: [] visiblePlayers: [],
is_my_turn: false,
}), }),
sockets: { sockets: {
role(role) { role(role) {
@ -68,6 +70,7 @@ export default {
this.lives = self.lives this.lives = self.lives
this.max_lives = self.max_lives this.max_lives = self.max_lives
this.has_played_bang = self.has_played_bang this.has_played_bang = self.has_played_bang
this.is_my_turn = self.is_my_turn
if (this.pending_action == 5) { if (this.pending_action == 5) {
this.chooseCardFromPlayer(self.target_p) this.chooseCardFromPlayer(self.target_p)
} }
@ -88,7 +91,7 @@ export default {
instruction() { instruction() {
if (this.pending_action == null) if (this.pending_action == null)
return '' return ''
let x = ['Estrai una carta', 'Pesca le tue carte', 'Gioca le tue carte', 'Rispondi alla carta', 'Attendi', 'Scegli una carta'] let x = ['▶️ Estrai una carta', '▶️ Pesca le tue carte', '▶️ Gioca le tue carte', '▶️ Rispondi alla carta', 'Attendi', '▶️ Scegli una carta']
return x[this.pending_action] return x[this.pending_action]
}, },
canEndTurn() { canEndTurn() {
@ -172,4 +175,17 @@ export default {
display:flex; display:flex;
margin: 10pt 0pt; margin: 10pt 0pt;
} }
.turn-notify {
pointer-events: none;
animation: disappear 2s ease-in forwards;
}
@keyframes disappear {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
</style> </style>