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

add animations for cards against someone

Browse Source
This commit is contained in:
Alberto Xamin 2023-01-25 18:33:57 +00:00
parent 33f90901de
commit 4f08874c9a
3 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/bang/cards.py
View File

@ -85,6 +85,7 @@ class Card(ABC):
player.equipment.append(self)
self.can_be_used_now = False
if against:
G.sio.emit('card_against', room=player.game.name, data={'player': player.name, 'target': against, 'card': self.__dict__})
G.sio.emit('chat_message', room=player.game.name,
data=f'_play_card_against|{player.name}|{self.name}|{against}')
else:

19
frontend/src/components/AnimatedCard.vue
View File

@ -13,6 +13,7 @@ export default {
props: {
card: Object,
startPosition: Object,
midPosition: Object,
endPosition: Object,
},
data: () => ({
@ -24,12 +25,22 @@ export default {
},
mounted() {
this.style = `position: absolute;top:${this.startPosition.top}px;left: ${this.startPosition.left}px`
setTimeout(() => {
this.style = `position: absolute;top:${this.endPosition.top}px;left: ${this.endPosition.left}px;transform: scale(0.5);`
}, 200)
if (this.midPosition) {
setTimeout(() => {
this.style = `position: absolute;top:${this.midPosition.top}px;left: ${this.midPosition.left}px;transform: scale(0.5);`
}, 200)
setTimeout(() => {
this.style = `position: absolute;top:${this.endPosition.top}px;left: ${this.endPosition.left}px;transform: scale(0.5);`
}, 800)
}
else {
setTimeout(() => {
this.style = `position: absolute;top:${this.endPosition.top}px;left: ${this.endPosition.left}px;transform: scale(0.5);`
}, 200)
}
setTimeout(() => {
this.style = `display:none;`
}, 800)
}, this.midPosition ? 1600 : 800)
}
}
</script>

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

@ -74,7 +74,7 @@
<Card v-if="startGameCard" key="_shuffle_players_" :donotlocalize="true" :card="shufflePlayersCard" @click.native="shufflePlayers" class="fistful-of-cards"/>
</transition-group>
</div>
<AnimatedCard v-for="c in cardsToAnimate" v-bind:key="c.key" :card="c.card" :startPosition="c.startPosition" :endPosition="c.endPosition"/>
<AnimatedCard v-for="c in cardsToAnimate" v-bind:key="c.key" :card="c.card" :startPosition="c.startPosition" :midPosition="c.midPosition" :endPosition="c.endPosition"/>
<div v-if="started">
<deck :endTurnAction="()=>{wantsToEndTurn = true}"/>
<player :isEndingTurn="wantsToEndTurn" :cancelEndingTurn="()=>{wantsToEndTurn = false}" :chooseCardFromPlayer="choose" :cancelChooseCardFromPlayer="()=>{hasToChoose=false}"/>
@ -233,8 +233,9 @@ export default {
let playerOffset = cumulativeOffset(phand)
playerOffset.top -= 30
playerOffset.left += 10
let key = Math.random()
this.cardsToAnimate.push({
key: Math.random(),
key: key,
card: {
name: 'PewPew!',
icon: '💥',
@ -242,9 +243,27 @@ export default {
}, startPosition: decelOffset, endPosition: playerOffset
})
setTimeout(() => {
this.cardsToAnimate.shift()
this.cardsToAnimate = this.cardsToAnimate.filter(x => x.key !== key)
}, 900);
},
card_against(data) {
let target = document.getElementById(`${data.target}-hand`)
let targetOffset = cumulativeOffset(target.parentElement)
let decel = document.getElementById('actual-scrap')
let decelOffset = cumulativeOffset(decel)
let phand = document.getElementById(`${data.player}-hand`)
let playerOffset = cumulativeOffset(phand)
playerOffset.top -= 30
playerOffset.left += 10
let key = data.card.name+data.card.number+data.player
this.cardsToAnimate.push({
key: key,
card: data.card, startPosition: playerOffset, midPosition: targetOffset, endPosition: decelOffset
})
setTimeout(() => {
this.cardsToAnimate = this.cardsToAnimate.filter(x => x.key !== key)
}, 1800);
},
card_scrapped(data) {
let decel = document.getElementById('actual-scrap')
if (!decel) {
@ -260,13 +279,14 @@ export default {
let playerOffset = cumulativeOffset(phand)
playerOffset.top -= 30
playerOffset.left += 10
console.log('card_scrapped'+decelOffset + ' '+ playerOffset)
console.log('card_scrapped' + decelOffset + ' ' + playerOffset)
let key = data.card.name+data.card.number+data.player
this.cardsToAnimate.push({
key: data.card.name+data.card.number+data.player,
key: key,
card: data.card, startPosition: playerOffset, endPosition: decelOffset
})
setTimeout(() => {
this.cardsToAnimate.shift()
this.cardsToAnimate = this.cardsToAnimate.filter(x => x.key !== key)
}, 900);
},
mount_status() {