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>