Improve style
[vchess.git] / client / src / components / Chat.vue
1 <template lang="pug">
2 div
3 input#inputChat(
4 type="text"
5 :placeholder="st.tr['Chat here']"
6 @keyup.enter="sendChat()"
7 )
8 button(@click="sendChat()") {{ st.tr["Send"] }}
9 p(v-for="chat in chats.concat(pastChats)")
10 span.name {{ chat.name }} :&nbsp;
11 span(
12 :class="classObject(chat)"
13 v-html="chat.msg"
14 )
15 </template>
16
17 <script>
18 import { store } from "@/store";
19 export default {
20 name: "my-chat",
21 // Prop 'pastChats' for corr games where chats are on server
22 props: ["players", "pastChats", "newChat"],
23 data: function() {
24 return {
25 st: store.state,
26 chats: [] //chat messages after human game
27 };
28 },
29 watch: {
30 newChat: function(chat) {
31 if (chat.msg != "")
32 this.chats.unshift({ msg: chat.msg, name: chat.name || "@nonymous" });
33 }
34 },
35 methods: {
36 classObject: function(chat) {
37 return {
38 "my-chatmsg": chat.name == this.st.user.name,
39 "opp-chatmsg":
40 !!this.players &&
41 this.players.some(
42 p => p.name == chat.name && p.name != this.st.user.name
43 )
44 };
45 },
46 sendChat: function() {
47 let chatInput = document.getElementById("inputChat");
48 const chatTxt = chatInput.value.trim();
49 if (chatTxt == "") return; //nothing to send
50 chatInput.value = "";
51 const chat = { msg: chatTxt, name: this.st.user.name || "@nonymous" };
52 this.$emit("mychat", chat);
53 this.chats.unshift(chat);
54 }
55 }
56 };
57 </script>
58
59 <style lang="sass" scoped>
60 .name
61 color: #abb2b9
62
63 .my-chatmsg
64 color: #7d3c98
65 .opp-chatmsg
66 color: #2471a3
67 </style>