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

animations and fix layout bugs

Browse Source
This commit is contained in:
Alberto Xamin 2020-11-22 13:59:41 +01:00
parent d44a42cc69
commit 6ca5dd23ed
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
2 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/Deck.vue
View File

@ -1,10 +1,14 @@
<template> <template>
<div class="deck"> <div class="deck">
<card v-if="lastScrap" :card="lastScrap" />
<div style="position:relative"> <div style="position:relative">
<div class="card back" style="position:absolute; bottom:-3pt;right:-2pt;"/> <div class="card back" style="position:absolute; bottom:-3pt;right:-3pt;"/>
<div class="card back" style="position:absolute; bottom:-1pt;right:-1pt;"/> <div class="card back" style="position:absolute; bottom:-1.5pt;right:-1.5pt;"/>
<card :card="card" class="back" @click.native="action"/> <card :card="card" :class="{back:true, pick:pending_action === 0, draw:pending_action === 1}" @click.native="action"/>
</div>
<div style="position:relative;">
<card v-if="previousScrap" :card="previousScrap"/>
<card v-else :card="card" class="back" style="opacity:0"/>
<card v-if="lastScrap" :card="lastScrap" :key="lastScrap" class="last-scrap"/>
</div> </div>
</div> </div>
</template> </template>
@ -23,6 +27,7 @@ export default {
icon: '💥', icon: '💥',
}, },
lastScrap: null, lastScrap: null,
previousScrap: null,
pending_action: false, pending_action: false,
}), }),
sockets: { sockets: {
@ -44,6 +49,12 @@ export default {
this.$socket.emit('draw') this.$socket.emit('draw')
} }
} }
},
watch: {
lastScrap(newVal, old) {
this.previousScrap = old
newVal;
}
} }
} }
</script> </script>
@ -53,5 +64,28 @@ export default {
margin:0; margin:0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: row-reverse;
}
.last-scrap {
position: absolute;
top: 0;
animation-duration: 0.8s;
animation-name: slidein;
}
@keyframes slidein {
from {
transform: translate(-100px, 10px) scale(1.3) rotate(-10deg);
}
to {
transform: translate(0, 0) scale(1);
}
}
.pick:hover {
transform: translate(-10px,0);
z-index: 1;
}
.draw:hover {
transform: translate(0,10px);
z-index: 1;
} }
</style> </style>

2
frontend/src/components/Player.vue
View File

@ -5,7 +5,7 @@
<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"/>
<Card v-if="character" :card="character"/> <Card v-if="character" :card="character"/>
<transition-group name="list" tag="div" > <transition-group name="list" tag="div" style="margin: 0 0 0 10pt;">
<Card v-for="card in equipment" v-bind:key="card.name+card.number" :card="card" /> <Card v-for="card in equipment" v-bind:key="card.name+card.number" :card="card" />
</transition-group> </transition-group>
</div> </div>