add menu tips and auto set the language based on the browser lang

frontend/src/App.vue

@@ -13,7 +13,7 @@
 			<input type="button" class="btn" :value="(showHelp?'X':'?')" style="min-width:28pt;border-radius:100%;cursor:pointer;" @click="getHelp"/>
 			<select id="theme" class="btn" v-model="theme">
 				<option
-					v-for="(theme, i) in ['light.☀️.Light', 'dark.🌙️.Dark', 'sepia..Sepia', 'grayscale..Grayscale']"
+					v-for="(theme, i) in ['light.☀️.Light', 'dark.🌙️.Dark', 'sepia.🌇️.Sepia', 'grayscale.📰️.Grayscale']"
 					:key="`theme-${i}`"
 					:value="theme.split('.')[0]">
 						{{theme.split('.')[1]}} {{theme.split('.')[2]}}
@@ -111,6 +111,11 @@ export default {
 		if (localStorage.getItem('lang')) {
 			this.$i18n.locale = localStorage.getItem('lang');
 			document.documentElement.lang = this.$i18n.locale;
+		} else {
+			let userLang = navigator.language || navigator.userLanguage; 
+			if (['it', 'en'].indexOf(userLang) == -1)
+				userLang = 'en';
+			this.$i18n.locale = userLang.split('-')[0]
 		}
 		this.detectColorScheme()
 	},

frontend/src/components/Menu.vue

@@ -2,10 +2,11 @@
 	<div id="app" class="dark-mode">
 		<div v-if="!isInLobby" id="logo" class="center-stuff" style="margin-bottom:10pt">
 			<h1 style="margin-bottom:0pt;">PewPew!</h1>
+			<p id="tip" style="margin-top: auto; color:darkorange">{{$t(randomTip)}}</p>
 			<p style="transform: scale(0.7);margin-top: auto;">v-{{version}}</p>
 			<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;"/>
+				<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>
@@ -69,6 +70,7 @@ export default {
 		lobbyName: '',
 		isInLobby: false,
 		onlinePlayers: 0,
+		randomTip: '',
 	}),
 	computed: {
 		noLobbyAvailable() {
@@ -145,6 +147,7 @@ export default {
 		},
 	},
 	mounted() {
+		this.randomTip = `tip_${1+Math.floor(Math.random() * 6)}`
 		if (localStorage.getItem('username'))
 			this.username = localStorage.getItem('username')
 		else {
@@ -168,4 +171,20 @@ export default {
 		font-size: 20pt;
 	}
 }
+#tip {
+	animation-name: zoom;
+	animation-duration: 2s;
+	animation-iteration-count: infinite;
+}
+@keyframes zoom {
+	0% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(0.95);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
 </style>

frontend/src/i18n/en.json

@@ -1,5 +1,11 @@
 {
   "trademark": "Bang! is a trademark owned by DVGiochi",
+  "tip_1": "Better with friends!",
+  "tip_2": "The 🤖️ icon means that a player is a bot!",
+  "tip_3": "You can click on the cards of characters and equipments of the other players if you wish to know more!",
+  "tip_4": "Dodge City, High Noon, Fistful Of Cards included!",
+  "tip_5": "Found a bug? Message us on discord!",
+  "tip_6": "Now with a discord server!",
   "online_players": "Online players: ",
   "choose_username": "Pick an username:",
   "available_lobbies": "Available Lobbies:",

frontend/src/i18n/it.json

@@ -1,5 +1,11 @@
 {
   "trademark": "Bang! è un marchio registrato DVGiochi",
+  "tip_1": "Con gli amici è meglio!",
+  "tip_2": "Il simbolo 🤖️ vuol dire che il giocatore è un bot!",
+  "tip_3": "Puoi cliccare sulle carte dei personaggi o equipaggiamento degli altri per vedere cosa fanno!",
+  "tip_4": "Dodge City, High Noon, Fistful Of Cards inclusi!",
+  "tip_5": "Se trovi un bug comunicacelo su discord!",
+  "tip_6": "Adesso con un server discord!",
   "online_players": "Giocatori online: ",
   "choose_username": "Scegli un username:",
   "available_lobbies": "Stanze disponibili:",