From 6309a9c8ffc69e1c48aa8559504125c43b44edfb Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Sun, 13 Dec 2020 15:21:07 +0100
Subject: [PATCH] ui enhancements

---
 frontend/src/components/Deck.vue     |  6 +++++-
 frontend/src/components/Lobby.vue    | 16 +++++++++++-----
 frontend/src/components/Player.vue   |  2 +-
 frontend/src/components/TinyHand.vue | 24 +++++++++++++++++++++---
 frontend/src/i18n/en.json            |  1 +
 frontend/src/i18n/it.json            |  1 +
 frontend/src/router/index.js         |  2 +-
 7 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Deck.vue b/frontend/src/components/Deck.vue
index 9ce7062..649cb1a 100644
--- a/frontend/src/components/Deck.vue
+++ b/frontend/src/components/Deck.vue
@@ -8,7 +8,7 @@
 				<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-if="previousScrap" :card="previousScrap" style="top: 1.5pt;right: -1.5pt;"/>
 				<card v-else :card="card" class="back" style="opacity:0"/>
 				<card v-if="lastScrap" :card="lastScrap" :key="lastScrap" class="last-scrap" @click.native="action('scrap')"
 							@pointerenter.native="desc=($i18n.locale=='it'?lastScrap.desc:lastScrap.desc_eng)" @pointerleave.native="desc=''" />
@@ -93,6 +93,10 @@ export default {
 	animation-duration: 0.8s;
 	animation-name: slidein;
 }
+.last-scrap:hover {
+	opacity: 0.8;
+	transform: translateY(-10px);
+}
 @keyframes slidein {
 	from {
 		transform: translate(-100px, 10px) scale(1.3) rotate(-10deg);
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 6a46426..f548abb 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -1,7 +1,10 @@
 <template>
 	<div class="lobby">
 		<div style="flex-grow: 4;">
-			<h2 v-if="!started">{{$t('room')}}{{ lobbyName }}</h2>
+			<div style="position:relative;">
+				<h2 v-if="!started">{{$t('room')}}{{ lobbyName }}</h2>
+				<input style="position:absolute;top:0;right:0;max-height:100pt" v-if="!started" type="button" @click="leaveRoom" :value="$t('leave_room')"/>
+			</div>
 			<h3>{{$t('room_players', {username:username})}}</h3>
 			<div v-if="!started">
 				<PrettyCheck v-if="isRoomOwner" class="p-switch p-fill" v-model="privateRoom" style="margin-top:5px; margin-bottom:3px;">{{$t("private_room")}}</PrettyCheck>
@@ -19,7 +22,7 @@
 					</transition-group>
 					<Card :card="p.card" :class="{is_my_turn:p.is_my_turn}"/>
 					<Card v-if="p.character" :card="p.character" class="character tiny-character" @click.native="selectedInfo = [p.character]"/>
-					<tiny-hand :ncards="p.ncards" @click.native="drawFromPlayer(p.name)"/>
+					<tiny-hand :ncards="p.ncards" @click.native="drawFromPlayer(p.name)" :ismyturn="p.pending_action === 2"/>
 					<span style="position:absolute;top:10pt;" class="center-stuff">{{getActionEmoji(p)}}</span>
 					<div class="tiny-equipment">
 						<Card v-for="card in p.equipment" v-bind:key="card.name+card.number" :card="card" @click.native="selectedInfo = p.equipment"/>
@@ -165,6 +168,9 @@ export default {
 		}
 	},
 	methods: {
+		leaveRoom() {
+			window.location.replace(window.location.origin)
+		},
 		toggleExpansions(name) {
 			if (!this.isRoomOwner) return;
 			this.$socket.emit('toggle_expansion', name)
@@ -257,8 +263,8 @@ export default {
 .is_my_turn {
 	box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt white, 0 0 5pt 6pt #aaa !important;
 	animation-name: turn-animation;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
+	animation-duration: 2s;
+	animation-iteration-count: infinite;
 }
 @media (prefers-color-scheme: dark) {
 	.is_my_turn {
@@ -270,7 +276,7 @@ export default {
     transform: scale(1);
   }
   50% {
-    transform: scale(1.05);
+    transform: scale(1.02);
   }
   100% {
     transform: scale(1);
diff --git a/frontend/src/components/Player.vue b/frontend/src/components/Player.vue
index fb2cb50..2bdb9f7 100644
--- a/frontend/src/components/Player.vue
+++ b/frontend/src/components/Player.vue
@@ -334,7 +334,7 @@ export default {
 	padding: 10pt 40pt 0pt 40pt;
 	overflow:auto;
 	border-radius: 4pt;
-	min-height: 20pt;
+	min-height: 40pt;
 }
 .hand>.card{
 	margin-left: -30pt;
diff --git a/frontend/src/components/TinyHand.vue b/frontend/src/components/TinyHand.vue
index 7b82c7e..f3c3c90 100644
--- a/frontend/src/components/TinyHand.vue
+++ b/frontend/src/components/TinyHand.vue
@@ -1,6 +1,8 @@
 <template>
 	<div style="position:absolute;transform:scale(0.4);bottom:52pt;">
-		<div class="card back" v-for="(n, i) in ncards" :style="`position:absolute; transform:rotate(${(i-ncards/2)*2}deg) translate(${i*15}px,0);`" v-bind:key="n" :alt="i">
+		<div :class="{card:true, back:true, delay:ismyturn}" v-for="(n, i) in ncards" 
+		:style="`position:absolute; transform:rotate(${(i-ncards/2)*2}deg) translate(${i*15}px,0); animation-delay:${0.1*i}s`"
+		v-bind:key="n" :alt="i">
 			<h4 v-if="n==ncards">PewPew!</h4>
 			<div class="emoji" v-if="n==ncards">💥</div>
 		</div>
@@ -12,9 +14,25 @@ export default {
 	name: 'TinyHand',
 	props: {
 		ncards: Number,
+		ismyturn: Boolean
 	},
 }
 </script>
-<style>
-
+<style scoped>
+.delay {
+	animation-name: updown;
+	animation-duration: 2s;
+	animation-iteration-count: infinite;
+}
+@keyframes updown {
+	0% {
+		top: 0;
+	}
+	50% {
+		top:10pt;
+	}
+	100% {
+		top: 0;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 5670df6..a47424a 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -6,6 +6,7 @@
 	"no_lobby_available": "No lobbies available",
 	"create_lobby": "Open a lobby:",
 	"lobby_name": "Name:",
+	"leave_room": "Leave lobby",
 	"warning": "Warning!",
 	"connection_error": "Cannot connect to server.",
 	"end_turn": "End Turn!",
diff --git a/frontend/src/i18n/it.json b/frontend/src/i18n/it.json
index 9161c0d..986b153 100644
--- a/frontend/src/i18n/it.json
+++ b/frontend/src/i18n/it.json
@@ -6,6 +6,7 @@
 	"no_lobby_available": "Nessuna stanza disponibile",
 	"create_lobby": "Crea una stanza:",
 	"lobby_name": "Nome:",
+	"leave_room": "Esci dalla stanza",
 	"warning": "Attenzione!",
 	"connection_error": "Connessione al server assente.",
 	"end_turn": "Termina turno!",
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index d9500d1..0ce5d3b 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -12,7 +12,7 @@ const routes = [
 	{
 		path: '/',
 		name: 'Home',
-		component: () => import(/* webpackChunkName: "game" */ '../components/Menu.vue')
+		component: () => import(/* webpackChunkName: "home" */ '../components/Menu.vue')
 	},
 ]