From 1370efc98a8a29aaf9defae73f2801828726bd48 Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Sat, 28 Nov 2020 11:41:11 +0100
Subject: [PATCH] show hint for scrapped card

---
 frontend/src/components/Deck.vue   | 29 ++++++++++++++++++-----------
 frontend/src/components/Player.vue | 16 ++++++++++------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Deck.vue b/frontend/src/components/Deck.vue
index eeeb2ec..dec366f 100644
--- a/frontend/src/components/Deck.vue
+++ b/frontend/src/components/Deck.vue
@@ -1,16 +1,22 @@
 <template>
-	<div class="deck">
-		<card v-if="endTurnAction && isPlaying" v-show="pending_action == 2" :card="endTurnCard" class="end-turn" @click.native="endTurnAction"/>
-		<div style="position:relative">
-			<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" @click.native="action('scrap')"/>
+	<div>
+		<div class="deck">
+			<card v-if="endTurnAction && isPlaying" v-show="pending_action == 2" :card="endTurnCard" class="end-turn" @click.native="endTurnAction"/>
+			<div style="position:relative">
+				<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" @click.native="action('scrap')"
+							@pointerenter.native="desc=lastScrap.desc" @pointerleave.native="desc=''" />
+			</div>
 		</div>
+		<transition name="list">
+			<p v-if="desc" class="center-stuff"><i>{{desc}}</i></p>
+		</transition>
 	</div>
 </template>
 
@@ -35,6 +41,7 @@ export default {
 		previousScrap: null,
 		pending_action: false,
 		isPlaying: true,
+		desc: '',
 	}),
 	sockets: {
 		self(self){
diff --git a/frontend/src/components/Player.vue b/frontend/src/components/Player.vue
index f996dba..6048977 100644
--- a/frontend/src/components/Player.vue
+++ b/frontend/src/components/Player.vue
@@ -7,15 +7,17 @@
 					@pointerenter.native="desc=my_role.goal" @pointerleave.native="desc=''"/>
 			<Card v-if="character" :card="character" style="margin-left: -30pt;margin-right: 0pt;"
 					@pointerenter.native="desc=character.desc" @pointerleave.native="desc=''"/>
+			<transition-group name="list" tag="div" style="display: flex;flex-direction:column; justify-content: space-evenly; margin-left: 12pt;margin-right:-10pt;">
+				<span v-for="(n, i) in lives" v-bind:key="n" :alt="i">❤️</span>
+				<span v-for="(n, i) in (max_lives-lives)" v-bind:key="n" :alt="i">💀</span>
+			</transition-group>
 			<transition-group v-if="lives > 0" name="list" tag="div" style="margin: 0 0 0 10pt; display:flex;">
 				<Card v-for="card in equipment" v-bind:key="card.name+card.number" :card="card" @pointerenter.native="desc=card.desc" @pointerleave.native="desc=''" />
 			</transition-group>
 		</div>
-		<p v-if="desc">{{desc}}</p>
-		<transition-group name="list" tag="div" style="display: flex; justify-content: space-evenly; margin-bottom:2pt;">
-			<span v-for="(n, i) in lives" v-bind:key="n" :alt="i">❤️</span>
-			<span v-for="(n, i) in (max_lives-lives)" v-bind:key="n" :alt="i">💀</span>
-		</transition-group>
+		<transition name="list">
+			<p v-if="desc"><i>{{desc}}</i></p>
+		</transition>
 		<div v-if="lives > 0">
 			<span>{{$t('hand')}}</span>
 			<transition-group name="list" tag="div" class="hand">
@@ -24,7 +26,9 @@
 					@pointerenter.native="hint=card.desc" @pointerleave.native="hint=''"/>
 			</transition-group>
 		</div>
-		<p>{{hint}}</p>
+		<transition name="list">
+			<p v-if="hint"><i>{{hint}}</i></p>
+		</transition>
 		<Chooser v-if="card_against" :text="$t('card_against')" :cards="visiblePlayers" :select="selectAgainst" :cancel="cancelCardAgainst"/>
 		<Chooser v-if="pending_action == 3" :text="respondText" :cards="respondCards" :select="respond"/>
 		<Chooser v-if="shouldChooseCard" :text="$t('choose_card_to_get')" :cards="available_cards" :select="choose"/>