Special SVG for berolina pawns
[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)")
50bd1184 12 span.name {{ chat.name || "@nonymous" }} :&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
8be8238c 24 props: ["players", "pastChats"],
cf2343ce
BA
25 data: function() {
26 return {
5c8e044f 27 st: store.state,
6808d7a1 28 chats: [] //chat messages after human game
cf2343ce
BA
29 };
30 },
5c8e044f
BA
31 methods: {
32 classObject: function(chat) {
33 return {
50bd1184
BA
34 "my-chatmsg": (
35 !!chat.name && chat.name == this.st.user.name ||
36 !!chat.sid && chat.sid == this.st.user.sid
37 ),
6808d7a1
BA
38 "opp-chatmsg":
39 !!this.players &&
40 this.players.some(
50bd1184
BA
41 p => {
42 return (
43 (
44 !!p.name &&
45 p.name == chat.name &&
46 p.name != this.st.user.name
47 )
48 ||
49 (
50 !!p.sid &&
51 p.sid == chat.sid &&
52 p.sid != this.st.user.sid
53 )
54 );
55 }
6808d7a1 56 )
5c8e044f
BA
57 };
58 },
59 sendChat: function() {
60 let chatInput = document.getElementById("inputChat");
b1ea2149 61 const chatTxt = chatInput.value.trim();
95a66034 62 chatInput.focus(); //required on smartphones
6808d7a1 63 if (chatTxt == "") return; //nothing to send
5c8e044f 64 chatInput.value = "";
50bd1184
BA
65 const chat = {
66 msg: chatTxt,
67 name: this.st.user.name,
68 // SID is required only for anonymous users (in live games)
2508a5c0 69 sid: this.st.user.id == 0 ? this.st.user.sid : null
50bd1184 70 };
ac8f441c 71 this.$emit("mychat", chat);
9ca1e26b 72 this.chats.unshift(chat);
db1f1f9a 73 },
8be8238c 74 newChat: function(chat) {
50bd1184 75 if (chat.msg != "") this.chats.unshift(chat);
8be8238c 76 },
db1f1f9a
BA
77 clearHistory: function() {
78 this.chats = [];
79 this.$emit("chatcleared");
6808d7a1
BA
80 }
81 }
5c8e044f
BA
82};
83</script>
84
4f887105 85<style lang="sass" scoped>
9a3049f3 86.name
5fbc0680 87 color: #839192
910d631b 88
5c8e044f 89.my-chatmsg
5fbc0680 90 color: #6c3483
5c8e044f 91.opp-chatmsg
5fbc0680 92 color: #1f618d
5c8e044f 93</style>