public/javascripts/components/chat.js

   1             myname: localStorage["username"] || "anonymous",
   2             oppName: "anonymous", //opponent name, revealed after a game (if provided)
   3             chats: [], //chat messages after human game
   4
   5
   6
   7         let chatEltsArray =
   8         [
   9             h('label',
  10                 {
  11                     attrs: { "id": "close-chat", "for": "modal-chat" },
  12                     "class": { "modal-close": true },
  13                 }
  14             ),
  15             h('h3',
  16                 {
  17                     attrs: { "id": "titleChat" },
  18                     "class": { "section": true },
  19                     domProps: { innerHTML: translations["Chat with "] + this.oppName },
  20                 }
  21             )
  22         ];
  23         for (let chat of this.chats)
  24         {
  25             chatEltsArray.push(
  26                 h('p',
  27                     {
  28                         "class": {
  29                             "my-chatmsg": chat.author==this.myid,
  30                             "opp-chatmsg": chat.author==this.oppid,
  31                         },
  32                         domProps: { innerHTML: chat.msg }
  33                     }
  34                 )
  35             );
  36         }
  37         chatEltsArray = chatEltsArray.concat([
  38             h('input',
  39                 {
  40                     attrs: {
  41                         "id": "input-chat",
  42                         type: "text",
  43                         placeholder: translations["Type here"],
  44                     },
  45                     on: { keyup: this.trySendChat }, //if key is 'enter'
  46                 }
  47             ),
  48             h('button',
  49                 {
  50                     attrs: { id: "sendChatBtn"},
  51                     on: { click: this.sendChat },
  52                     domProps: { innerHTML: translations["Send"] },
  53                 }
  54             )
  55         ]);
  56         const modalChat = [
  57             h('input',
  58                 {
  59                     attrs: { "id": "modal-chat", type: "checkbox" },
  60                     "class": { "modal": true },
  61                 }),
  62             h('div',
  63                 {
  64                     attrs: { "role": "dialog", "aria-labelledby": "titleChat" },
  65                 },
  66                 [
  67                     h('div',
  68                         {
  69                             "class": { "card": true, "smallpad": true },
  70                         },
  71                         chatEltsArray
  72                     )
  73                 ]
  74             )
  75         ];
  76         elementArray = elementArray.concat(modalChat);
  77
  78
  79                 case "newchat":
  80                     // Receive new chat
  81                     this.chats.push({msg:data.msg, author:this.oppid});
  82                     break;
  83                 case "oppname":
  84                     // Receive opponent's name
  85                     this.oppName = data.name;
  86                     break;
  87
  88
  89     // TODO: complete this component
  90         trySendChat: function(e) {
  91             if (e.keyCode == 13) //'enter' key
  92                 this.sendChat();
  93         },
  94         sendChat: function() {
  95             let chatInput = document.getElementById("input-chat");
  96             const chatTxt = chatInput.value;
  97             chatInput.value = "";
  98             this.chats.push({msg:chatTxt, author:this.myid});
  99             this.conn.send(JSON.stringify({
 100                 code:"newchat", oppid: this.oppid, msg: chatTxt}));
 101         },
 102         startChat: function(e) {
 103             this.getRidOfTooltip(e.currentTarget);
 104             document.getElementById("modal-chat").checked = true;
 105         },
 106