From 4f78811c32cf145e5c56a87adad3920d4d114e02 Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Wed, 10 Feb 2021 13:53:01 +0100
Subject: [PATCH] small visual improvements

---
 frontend/src/components/Lobby.vue |  8 +++++---
 frontend/src/components/Menu.vue  | 13 ++++++++++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index fe19241..af8e71c 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -12,9 +12,10 @@
 				<input type="button" style="margin-left: 10pt;" v-clipboard:copy="inviteLink" :value="$t('copy')"/>
 			</div>
 			
-			<div class="players-table">
-				<Card v-if="startGameCard" :donotlocalize="true" :card="startGameCard" @click.native="startGame"/>
+			<!-- <div class="players-table"> -->
 				<!-- <div style="position: relative;width:260pt;height:400pt;"> -->
+			<transition-group name="list" tag="div" class="players-table">
+				<Card v-if="startGameCard" key="_start_game_" :donotlocalize="true" :card="startGameCard" @click.native="startGame"/>
 				<div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;">
 					<transition-group v-if="p.max_lives && !p.is_ghost" name="list" tag="div" class="tiny-health">
 						<span v-for="(n, i) in p.lives" v-bind:key="i" :alt="i">❤️</span>
@@ -37,9 +38,10 @@
 						<span>🤖</span>
 					</div>
 				</div>
+			</transition-group>
 					<!-- :style="p.style"/> -->
 				<!-- </div> -->
-			</div>
+			<!-- </div> -->
 			<div v-if="!started">
 				<p v-if="players.length < 3" class="center-stuff">{{$t('minimum_players')}}</p>
 				<h3>{{$t("expansions")}}</h3>
diff --git a/frontend/src/components/Menu.vue b/frontend/src/components/Menu.vue
index db5699c..006ff9c 100644
--- a/frontend/src/components/Menu.vue
+++ b/frontend/src/components/Menu.vue
@@ -1,7 +1,12 @@
 <template>
 	<div id="app" class="dark-mode">
-		<div v-if="!isInLobby" id="logo" class="center-stuff" style="margin-bottom:10pt;">
+		<div v-if="!isInLobby" id="logo" class="center-stuff" style="margin-bottom:10pt">
 			<h1 style="margin-bottom:0pt;">PewPew!</h1>
+			<div style="display:flex;justify-content: space-evenly;;min-height:140pt;">
+				<span style="font-size:48pt;transform:scaleX(-1) translateY(25%);">🔫️</span>
+				<TinyHand :ncards="5" ismyturn="true" style="position:none;transform:scale(1);bottom:none;width:120pt;"/>
+				<span style="font-size:48pt;transform:translateY(25%);">🔫️</span>
+			</div>
 			<i style="font-size: x-small;">{{$t("trademark")}}</i>
 		</div>
 		<div>
@@ -17,8 +22,8 @@
 				<div v-if="!isInLobby" >
 					<p>{{$t("online_players")}}{{onlinePlayers}}</p>
 					<Card :card="getSelfCard" :donotlocalize="true" style="position:absolute; top:10pt; left: 10pt;"/>
-					<form @submit="createLobby">
-						<h2>{{$t("create_lobby")}}</h2>
+					<h2>{{$t("create_lobby")}}</h2>
+					<form @submit="createLobby" style="display:flex">
 						<p>{{$t("lobby_name")}}</p>
 						<input id="lobbyname" v-model="lobbyName"/>
 						<input type="submit" :value="$t('submit')"/>
@@ -44,12 +49,14 @@
 <script>
 // import Vue from 'vue'
 import Card from '@/components/Card.vue'
+import TinyHand from '@/components/TinyHand.vue'
 // import Lobby from './components/Lobby.vue'
 
 export default {
 	name: 'App',
 	components: {
 		Card,
+		TinyHand,
 		// Lobby,
 	},
 	data: () => ({