From 6ca5dd23ed0d5238342ec70d2975879cb84b76bb Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Sun, 22 Nov 2020 13:59:41 +0100
Subject: [PATCH] animations and fix layout bugs

---
 frontend/src/components/Deck.vue   | 42 +++++++++++++++++++++++++++---
 frontend/src/components/Player.vue |  2 +-
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Deck.vue b/frontend/src/components/Deck.vue
index a6f9cf9..bc8f729 100644
--- a/frontend/src/components/Deck.vue
+++ b/frontend/src/components/Deck.vue
@@ -1,10 +1,14 @@
 <template>
 	<div class="deck">
-		<card v-if="lastScrap" :card="lastScrap" />
 		<div style="position:relative">
-			<div class="card back" style="position:absolute; bottom:-3pt;right:-2pt;"/>
-			<div class="card back" style="position:absolute; bottom:-1pt;right:-1pt;"/>
-			<card :card="card" class="back" @click.native="action"/>
+			<div class="card back" style="position:absolute; bottom:-3pt;right:-3pt;"/>
+			<div class="card back" style="position:absolute; bottom:-1.5pt;right:-1.5pt;"/>
+			<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>
 </template>
@@ -23,6 +27,7 @@ export default {
 			icon: '💥',
 		},
 		lastScrap: null,
+		previousScrap: null,
 		pending_action: false,
 	}),
 	sockets: {
@@ -44,6 +49,12 @@ export default {
 					this.$socket.emit('draw')
 			}
 		}
+	},
+	watch: {
+		lastScrap(newVal, old) {
+			this.previousScrap = old
+			newVal;
+		}
 	}
 }
 </script>
@@ -53,5 +64,28 @@ export default {
   margin:0;
   align-items: 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>
\ No newline at end of file
diff --git a/frontend/src/components/Player.vue b/frontend/src/components/Player.vue
index 714b0ed..2a7b743 100644
--- a/frontend/src/components/Player.vue
+++ b/frontend/src/components/Player.vue
@@ -5,7 +5,7 @@
 		<div class="equipment-slot">
 			<Card v-if="my_role" :card="my_role" class="back"/>
 			<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" />
 			</transition-group>
 		</div>