From 31508dbb94ceafe80acd9d8df61a995c3be07266 Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Fri, 20 Nov 2020 23:21:52 +0100
Subject: [PATCH] animations tweak

---
 frontend/src/App.vue                | 37 +++++++++++++++++
 frontend/src/components/Card.vue    | 62 ++++++++++++++---------------
 frontend/src/components/Chooser.vue |  9 +++++
 frontend/src/components/Lobby.vue   |  4 +-
 4 files changed, 80 insertions(+), 32 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c3b81d6..0f0feef 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -139,4 +139,41 @@ h1,h2,h3,h4,p,span{
   opacity: 0;
   transform: translateY(30px);
 }
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.25s ease-out;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.bounce-enter-active, .bounce-leave-active {
+  animation: bounce-in .5s;
+}
+
+.fade-enter, .bounce-leave-to {
+  animation: bounce-out .5s;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes bounce-out {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
 </style>
diff --git a/frontend/src/components/Card.vue b/frontend/src/components/Card.vue
index b887ef0..b6ec7ff 100644
--- a/frontend/src/components/Card.vue
+++ b/frontend/src/components/Card.vue
@@ -26,19 +26,19 @@ export default {
 
 <style>
 .card {
-  cursor: pointer;
-  width: 60pt;
-  min-width:60pt;
-  height: 100pt;
+	cursor: pointer;
+	width: 60pt;
+	min-width:60pt;
+	height: 100pt;
 	margin: 12pt;
-  background: white;
-  box-shadow: 
-    0 0 0 3pt #987e51,
-    0 0 0 6pt white,
-    0 0 5pt 6pt #aaa;
-  border-radius: 6pt;
-  position: relative;
-  transition: all 0.5s ease-in-out;
+	background: white;
+	box-shadow: 
+		0 0 0 3pt #987e51,
+		0 0 0 6pt white,
+		0 0 5pt 6pt #aaa;
+	border-radius: 6pt;
+	position: relative;
+	transition: all 0.5s ease-in-out;
 	color: #333;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -46,8 +46,8 @@ export default {
 	/* word-wrap: break-word; */
 }
 .card.back{
-  color:white;
-  background: repeating-linear-gradient(
+	color:white;
+	background: repeating-linear-gradient(
 		45deg,
 		#987e51,
 		#987e51 5px,
@@ -57,33 +57,33 @@ export default {
 }
 
 .card.equipment {
-  box-shadow: 
-    0 0 0 3pt #5c5e83,
-    0 0 0 6pt white,
-    0 0 5pt 6pt #aaa;
+	box-shadow: 
+		0 0 0 3pt #5c5e83,
+		0 0 0 6pt white,
+		0 0 5pt 6pt #aaa;
 }
 .card.character {
-  box-shadow: 
-    0 0 0 3pt #7c795b,
-    0 0 0 6pt white,
-    0 0 5pt 6pt #aaa;
+	box-shadow: 
+		0 0 0 3pt #7c795b,
+		0 0 0 6pt white,
+		0 0 5pt 6pt #aaa;
 }
 .card h4 {
 	position: absolute;
-  text-align: center;
-  width: 100%;
-  top: -10pt;
+	text-align: center;
+	width: 100%;
+	top: -10pt;
 } 
 .card .emoji {
 	position: absolute;
-  text-align: center;
-  width: 100%;
-  font-size:26pt;
-  top: 35%;
+	text-align: center;
+	width: 100%;
+	font-size:26pt;
+	top: 35%;
 } 
 .card .suit {
 	position: absolute;
-  bottom: 3pt;
-  left:3pt;
+	bottom: 3pt;
+	left:3pt;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Chooser.vue b/frontend/src/components/Chooser.vue
index 58ee59c..6aeddcf 100644
--- a/frontend/src/components/Chooser.vue
+++ b/frontend/src/components/Chooser.vue
@@ -45,4 +45,13 @@ export default {
 	align-items: center;
 	justify-content: center;
 }
+
+.card {
+	width: 72pt;
+	min-width:72pt;
+	height: 120pt;
+}
+.card:hover {
+	transform: translate(0, -5px) scale(1.05, 1.05);
+}
 </style>
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 4d116ca..db2b821 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -14,7 +14,9 @@
 			<player/>
 		</div>
 		<chat/>
-		<Chooser v-if="showChooser" text="Scegli il tuo personaggio" :cards="availableCharacters" :select="setCharacter"/>
+		<transition name="bounce">
+			<Chooser v-if="showChooser" text="Scegli il tuo personaggio" :cards="availableCharacters" :select="setCharacter"/>
+		</transition>
 	</div>
 </template>