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