notify turn
This commit is contained in:
parent
6ca5dd23ed
commit
89a3a4e4d6
@ -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;
|
||||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user