client/src/components/Chat.vue

   1 <template lang="pug">
   2 div
   3   div
   4     .card.smallpad
   5       h4 Chat
   6       p(v-for="chat in chats" :class={
   7         "my-chatmsg": "chat.uid==user.id",
   8         "opp-chatmsg": "opponents.any(o => o.id == chat.uid)"}
   9         v-html="chat.msg")
  10       input#inputChat(type="text" placeholder="st.tr['Type here']"
  11         @keyup.enter="sendChat")
  12       button#sendChatBtn(@click="sendChat") {{ st.tr["Send"] }}
  13 </template>
  14
  15 <script>
  16 // TODO: myname, opponents (optional, different style), people
  17 // --> also show messages like "X offers draw" ?
  18 export default {
  19   name: "my-chat",
  20   props: ["opponents","people"],
  21   data: function() {
  22     return {
  23       chats: [], //chat messages after human game
  24     };
  25   },
  26 //  // TODO: Chat modal sur petit écran, dans la page pour grand écran
  27 //  created: function() {
  28 //    const socketMessageListener = msg => {
  29 //      const data = JSON.parse(msg.data);
  30 //      switch (data.code)
  31 //      {
  32 //        case "newchat":
  33 //          // TODO: new chat just arrived: data contain all informations
  34 //          // (uid, name, message; no need for timestamp, we can use local time here)
  35 //          this.chats.push({msg:data.msg, author:this.oppid});
  36 //          break;
  37 //        // TODO: distinguish these (dis)connect events from their analogs in game.js
  38 //        // TODO: implement and harmonize: opponents and people are arrays, not objects ?!
  39 //        case "connect":
  40 //          this.players.push({name:data.name, id:data.uid});
  41 //          break;
  42 //        case "disconnect":
  43 //          const pIdx = this.players.findIndex(p => p.id == data.uid);
  44 //          this.players.splice(pIdx);
  45 //          break;
  46 //      }
  47 //    };
  48 //    const socketCloseListener = () => {
  49 //      this.conn.addEventListener('message', socketMessageListener);
  50 //      this.conn.addEventListener('close', socketCloseListener);
  51 //    };
  52 //    this.conn.onmessage = socketMessageListener;
  53 //    this.conn.onclose = socketCloseListener;
  54 //  },
  55 //  methods: {
  56 //    // TODO: complete this component
  57 //    sendChat: function() {
  58 //      let chatInput = document.getElementById("input-chat");
  59 //      const chatTxt = chatInput.value;
  60 //      chatInput.value = "";
  61 //      this.chats.push({msg:chatTxt, author:this.myid});
  62 //      this.conn.send(JSON.stringify({
  63 //        code:"newchat", oppid: this.oppid, msg: chatTxt}));
  64 //    },
  65 ////    startChat: function(e) {
  66 ////      document.getElementById("modal-chat").checked = true;
  67 ////    },
  68   },
  69 });