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