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