From e40d10ad8064c56b7ddb2cfc93d5e251de664c24 Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Sun, 22 Nov 2020 23:09:25 +0100
Subject: [PATCH] show goal and chat fix

---
 frontend/src/components/Chat.vue    | 29 ++++++++++++++++++++---------
 frontend/src/components/Chooser.vue |  8 +++++++-
 frontend/src/components/Player.vue  |  6 +++++-
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Chat.vue b/frontend/src/components/Chat.vue
index b410b2b..1e77dec 100644
--- a/frontend/src/components/Chat.vue
+++ b/frontend/src/components/Chat.vue
@@ -1,12 +1,13 @@
 <template>
-	<div>
+	<div style="max-width: 350pt;">
 		<h3>Chat</h3>
 		<div id="chatbox">
-			<p style="margin:1pt;" v-for="msg in messages" v-bind:key="msg">{{msg}}</p>
+			<p style="margin:1pt;" class="chat-message" v-for="msg in messages" v-bind:key="msg">{{msg}}</p>
+			<p class="end">.</p>
 		</div>
-		<form @submit="sendChatMessage" style="width:100%; padding:0">
-			<input v-model="text" style="width:80%;"/>
-			<input type="submit" style="width:18%;"/>
+		<form @submit="sendChatMessage" style="width:100%; padding:0; display:flex;">
+			<input v-model="text" style="flex-grow:2;"/>
+			<input type="submit"/>
 		</form>
 	</div>
 </template>
@@ -21,8 +22,12 @@ export default {
 	sockets: {
 		chat_message(msg) {
 			this.messages.push(msg)
-			let container = this.$el.querySelector("#chatbox");
-			container.scrollTop = container.scrollHeight;
+			// let container = this.$el.querySelector("#chatbox");
+			// container.scrollTop = container.scrollHeight;
+			const el = this.$el.getElementsByClassName('end')[0];
+			if (el) {
+				el.scrollIntoView();
+			}
 		},
 	},
 	methods: {
@@ -36,12 +41,18 @@ export default {
 	},
 }
 </script>
-<style >
+<style scoped>
 #chatbox {
 	width:100%;
 	max-height:150px;
-	overflow:auto;
+	overflow-y: auto;
+	overflow-x: hidden;
+	overflow-wrap: break-word;
+	overflow-wrap: normal;
 	border: 1pt solid #ccc;
 	border-radius: 2pt;
 }
+/* .chat-message:nth-last-of-type(1) {
+	margin-bottom: 50pt !important;
+} */
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Chooser.vue b/frontend/src/components/Chooser.vue
index 11a9745..6afbf0e 100644
--- a/frontend/src/components/Chooser.vue
+++ b/frontend/src/components/Chooser.vue
@@ -4,7 +4,8 @@
 		<div>
 			<Card v-for="c in cards" v-bind:key="c" :card="c" @click.native="select(c)"	@mouseover.native="showDesc(c)" @mouseleave.native="desc=''"/>
 		</div>
-		<div class="button center-stuff" v-if="showCancelBtn" @click="cancel"><span>ANNULLA</span></div>
+		<p v-if="hintText">{{hintText}}</p>
+		<div class="button center-stuff" v-if="showCancelBtn" @click="cancel"><span>{{cancelText}}</span></div>
 		<p v-if="desc" style="bottom:10pt;position:absolute;margin:16pt;">{{desc}}</p>
 	</div>
 </template>
@@ -21,7 +22,12 @@ export default {
 		cards: Array,
 		select: Function,
 		cancel: Function,
+		cancelText: {
+			type: String,
+			default: 'ANNULLA',
+		},
 		text: String,
+		hintText: String,
 	},
 	data: () => ({
 		desc: ''
diff --git a/frontend/src/components/Player.vue b/frontend/src/components/Player.vue
index e2c5360..a0c202e 100644
--- a/frontend/src/components/Player.vue
+++ b/frontend/src/components/Player.vue
@@ -27,7 +27,8 @@
 		<Chooser v-if="shouldChooseCard" text="Scegli che carta pescare" :cards="available_cards" :select="choose"/>
 		<Chooser v-if="lives <= 0 && max_lives > 0" text="SEI MORTO" />
 		<Chooser v-if="win_status !== undefined" :text="win_status?'HAI VINTO':'HAI PERSO'" />
-		<Chooser v-if="is_my_turn" text="GIOCA IL TUO TURNO" :key="is_my_turn" class="turn-notify" />
+		<Chooser v-if="show_role" text="Tu sei" :cards="[my_role]" :hintText="my_role.goal" :cancel="() => {show_role=false}" cancelText="OK" />
+		<Chooser v-if="!show_role && is_my_turn" text="GIOCA IL TUO TURNO" :key="is_my_turn" class="turn-notify" />
 		<Chooser v-if="hasToPickResponse" text="ESTRAI UNA CARTA" :key="hasToPickResponse" class="turn-notify" />
 	</div>
 </template>
@@ -64,10 +65,13 @@ export default {
 		win_status: undefined,
 		range: 1,
 		sight: 1,
+		show_role: false,
 	}),
 	sockets: {
 		role(role) {
 			this.my_role = JSON.parse(role)
+			this.my_role.is_back = true
+			this.show_role = true
 		},
 		self(self) {
 			self = JSON.parse(self)