client/src/components/Chat.vue

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