button for getting help and animated chat

frontend/src/App.vue

@@ -7,14 +7,18 @@
 			<h2>{{$t("warning")}}</h2>
 			<p>{{$t("connection_error")}}</p>
 		</div>
-		<select id="lang" style="position:fixed;bottom:4pt;right:4pt;" v-model="$i18n.locale" @change="storeLangPref">
-			<option
-				v-for="(lang, i) in ['it.🇮🇹.Italiano', 'en.🇬🇧.English']"
-				:key="`lang-${i}`"
-				:value="lang.split('.')[0]">
-					{{lang.split('.')[1]}} {{lang.split('.')[2]}}
-			</option>
-		</select>
+		<help v-if="showHelp"/>
+		<div style="position:fixed;bottom:4pt;right:4pt;display:flex;">
+			<input type="button" :value="(showHelp?'X':'?')" style="min-width:28pt;border-radius:100%;cursor:pointer;" @click="getHelp"/>
+			<select id="lang" v-model="$i18n.locale" @change="storeLangPref">
+				<option
+					v-for="(lang, i) in ['it.🇮🇹.Italiano', 'en.🇬🇧.English']"
+					:key="`lang-${i}`"
+					:value="lang.split('.')[0]">
+						{{lang.split('.')[1]}} {{lang.split('.')[2]}}
+				</option>
+			</select>
+		</div>
 		<label for="lang" style="opacity:0" >Language</label>
 		<div v-if="showUpdateUI" style="position: fixed;bottom: 0;z-index: 1;background: rgba(0,0,0,0.5);padding: 20pt;" class="center-stuff">
 			<p class="update-dialog__content">
@@ -29,14 +33,17 @@
 </template>
 
 <script>
+import Help from './components/Help.vue';
 // import Vue from 'vue'
 
 export default {
+  components: { Help },
 	name: 'App',
 	data: () => ({
 		isConnected: false,
 		c: false,
 		showUpdateUI: false,
+		showHelp:false,
 	}),
 	computed: {
 	},
@@ -57,6 +64,10 @@ export default {
 		},
 	},
 	methods: {
+		getHelp() {
+			this.showHelp = !this.showHelp
+			// window.open(`${window.location.origin}/help`, '_blank')
+		},
 		storeLangPref() {
 			localStorage.setItem('lang', this.$i18n.locale)
 		},
@@ -81,6 +92,9 @@ export default {
 
 <style>
 @import '../node_modules/pretty-checkbox/dist/pretty-checkbox.css';
+html {
+	scroll-behavior: smooth;
+}
 #app {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;

frontend/src/components/Chat.vue

@@ -2,10 +2,12 @@
 	<div class="chat">
 		<h4 v-if="spectators > 0">{{$tc("chat.spectators", spectators)}}</h4>
 		<h3>{{$t("chat.chat")}}</h3>
-		<div id="chatbox">
+		<transition-group name="message" tag="div" id="chatbox">
+		<!-- <div id="chatbox"> -->
 			<p style="margin:1pt;" class="chat-message selectable" v-for="(msg, i) in messages" v-bind:key="`${i}-c`" :style="`color:${msg.color}`">{{msg.text}}</p>
 			<p class="end">.</p>
-		</div>
+		<!-- </div> -->
+		</transition-group>
 		<form @submit="sendChatMessage" id="msg-form">
 			<input v-model="text" style="flex-grow:2;"/>
 			<input type="submit" :value="$t('submit')"/>
@@ -109,6 +111,13 @@ input {
 	padding:0;
 	display:flex;
 }
+.message-enter-active, .message-leave-active {
+  transition: all 1s;
+}
+.message-enter, .message-leave-to /* .list-leave-active below version 2.1.8 */ {
+  opacity: 0;
+  transform: translateX(30px);
+}
 @media only screen and (min-width:1000px) {
 	.chat { 
 		height: 90vh;

frontend/src/components/Help.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h1>{{$t('help.title')}}</h1>
+		<h1 id="help">{{$t('help.title')}}</h1>
 		<h2>{{$t('help.character')}}</h2>
 		<p>{{$t('help.characters_special')}}</p>
 		<a href="#basecharacters"><p>{{$t('help.gotoallcharacters')}}</p></a>
@@ -114,6 +114,7 @@ export default {
 	mounted() {
 		this.$socket.emit('get_cards')
 		this.$socket.emit('get_characters')
+		document.getElementById('help').scrollIntoView();
 	}
 }
 </script>