add animations for cards against someone

backend/bang/cards.py

@@ -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:

frontend/src/components/AnimatedCard.vue

@@ -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`
+		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>

frontend/src/components/Lobby.vue

@@ -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) {
@@ -261,12 +280,13 @@ export default {
 			playerOffset.top -= 30
 			playerOffset.left += 10
 			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() {