techwire/bang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show turn arrows

Browse Source
This commit is contained in:
Alberto Xamin 2022-12-28 16:20:16 +00:00
parent cc8cd52c6b
commit 0d73ec86b7
1 changed files with 81 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/Lobby.vue
View File

@ -38,6 +38,8 @@
<p v-if="players.length < 3" class="center-stuff" style="min-height: 19px;">{{$t('minimum_players')}}</p>
<p v-else style="min-height: 19px;"> </p>
</div>
<div style="position:relative;">
<div v-if="showTurnFlow" id="turn-indicator" :class="{reversed:turnReversed}"/>
<transition-group name="list" tag="div" class="players-table">
<Card v-if="startGameCard" key="_start_game_" :donotlocalize="true" :card="startGameCard" @click.native="startGame"/>
<div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;">
@ -69,6 +71,7 @@
</div>
</div>
</transition-group>
</div>
<div v-if="started">
<deck :endTurnAction="()=>{wantsToEndTurn = true}"/>
<player :isEndingTurn="wantsToEndTurn" :cancelEndingTurn="()=>{wantsToEndTurn = false}" :chooseCardFromPlayer="choose" :cancelChooseCardFromPlayer="()=>{hasToChoose=false}"/>
@ -129,6 +132,9 @@ export default {
is_competitive: false,
disconnect_bot: false,
debug_mode: false,
showTurnFlow: false,
turnReversed: false,
turn: -1,
}),
sockets: {
room(data) {
@ -347,8 +353,19 @@ export default {
privateRoom(old, _new) {
if (this.isRoomOwner && old !== _new)
this.$socket.emit('private')
},
players(_, _new) {
let x = _new.findIndex(x => x.is_my_turn);
if (x !== -1 && x !== this.turn) {
this.turnReversed = (x+1 === this.turn)
this.showTurnFlow = true;
setTimeout(() => {
this.showTurnFlow = false
}, 1000);
this.turn = x;
}
},
},
mounted() {
if (Vue.config.devtools)
console.log('mounted lobby')
@ -409,6 +426,39 @@ export default {
justify-content: space-evenly;
margin-bottom: 12pt;
}
#turn-indicator{
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(135deg, #cbcbcb33 25%, transparent 25%), linear-gradient(45deg, #cbcbcb33 25%, transparent 25%);
background-size: 80px 200px;
background-position: 0 100px;
background-position-x: 0;
opacity: 0;
background-repeat: repeat;
animation-name: next-turn-animation;
animation-duration: 1s;
animation-iteration-count: 3;
animation-timing-function: linear;
}
#turn-indicator.reversed {
background-image: linear-gradient(225deg, #cbcbcb33 25%, transparent 25%), linear-gradient(315deg, #cbcbcb33 25%, transparent 25%);
}
@keyframes next-turn-animation {
0% {
background-position-x: 0;
opacity: 1;
}
50% {
background-position-x: 80px;
}
100% {
opacity: 0;
background-position-x: 160px;
}
}
.lobby {
display: flex;
flex-direction: column;