From 5948a7ad7445294f4b12e88cc7bb220b6d507622 Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Sat, 19 Jun 2021 19:56:10 +0200
Subject: [PATCH] more mobile safari fixes + username suggestions

---
 frontend/src/App.vue             |  3 +++
 frontend/src/components/Chat.vue |  1 +
 frontend/src/components/Menu.vue | 21 ++++++++++++++++++---
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d556899..86a09e3 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -253,6 +253,9 @@ html, #app, input, select {
 	border-radius: 12pt;
 	cursor: pointer;
 	transition: all 0.13s ease-in-out;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
 }
 .btn:hover:not([disabled]) {
 	background-color: var(--font-color); /* Green */
diff --git a/frontend/src/components/Chat.vue b/frontend/src/components/Chat.vue
index 5f9372e..2d1e63e 100644
--- a/frontend/src/components/Chat.vue
+++ b/frontend/src/components/Chat.vue
@@ -166,6 +166,7 @@ input {
 @media only screen and (max-width:1000px) {
 	#msg-form {
 		flex-direction: column;
+		margin-bottom: 50pt;
 	}
 	#submit-message {
 		margin-top: 6pt;
diff --git a/frontend/src/components/Menu.vue b/frontend/src/components/Menu.vue
index 03e970a..29982e3 100644
--- a/frontend/src/components/Menu.vue
+++ b/frontend/src/components/Menu.vue
@@ -12,8 +12,8 @@
 		</div>
 		<div>
 			<div v-if="!didSetUsername">
-				<p>{{$t("choose_username")}}</p>
-				<form @submit="setUsername">
+				<p id="choose_username">{{$t("choose_username")}}</p>
+				<form @submit="setUsername" class="form" style="display:flex">
 					<input id="username" v-model="username" />
 					<input type="submit" class="btn" :value="$t('submit')"/>
 				</form>
@@ -24,7 +24,7 @@
 					<p>{{$t("online_players")}}{{onlinePlayers}}</p>
 					<Card :card="getSelfCard" :donotlocalize="true" style="position:absolute; top:10pt; left: 10pt;"/>
 					<h2>{{$t("create_lobby")}}</h2>
-					<form @submit="createLobby" style="display:flex">
+					<form @submit="createLobby" class="form" style="display:flex">
 						<p>{{$t("lobby_name")}}</p>
 						<input id="lobbyname" v-model="lobbyName"/>
 						<input type="submit" class="btn" :value="$t('submit')"/>
@@ -147,10 +147,25 @@ export default {
 	mounted() {
 		if (localStorage.getItem('username'))
 			this.username = localStorage.getItem('username')
+		else {
+			let names = ['player', 'cowboy', 'madman', 'horseshoe', 'mustang', '🤠️', 'dog lover', 'random', 'cows', 'seagull', 'pewneer', 'pioneer', 'django', 'tarantined', 'horse', 'cinnamom', 'toast', 'notPewDiePie', 'username', 'caveman', 'cat', 'gold', 'chicken', 'nugget', 'bullet', 'fire', 'scott', 'emiliano', 'apple', 'pear', 'pencil', 'youtuber', 'hi mom', 'discord guy', '🥰️', 'somebody', 'AAAAA', 'BBBB', 'pain', 'help?', 'gg', 'gigi', 'lmao', 'yikes', 'you?', 'kid', 'cowgirl', 'bite', 'hungry', 'joe', 'limbo', 'leeeroy', 'jenkins', 'batman', 'spiderman', 'luke skywalker', 'nemo', 'zemo', 'ironman', 'butterman', 'postman', 'father', 'son', 'sven', 'mike', 'straw', 'saaay', 'whaaaat', 'rick', 'morty', 'wubbalubbadubdub']
+			this.username = names[Math.floor(Math.random() * names.length)]
+		}
 		this.$socket.emit('get_online_players')
 	},
 }
 </script>
 
 <style>
+@media only screen and (max-width:1000px) {
+	.form {
+		flex-direction: column;
+	}
+	.form > input, .form>p{
+		font-size: 20pt;
+	}
+	#choose_username{
+		font-size: 20pt;
+	}
+}
 </style>