1 // TODO: myname, opppnents (optional, different style), people
2 // --> also show messages like "X offers draw ?" (probably not)
5 myname: localStorage
["username"] || "anonymous",
6 oppName: "anonymous", //opponent name, revealed after a game (if provided)
7 chats: [], //chat messages after human game
15 attrs: { "id": "close-chat", "for": "modal-chat" },
16 "class": { "modal-close": true },
21 attrs: { "id": "titleChat" },
22 "class": { "section": true },
23 domProps: { innerHTML: translations
["Chat with "] + this.oppName
},
27 for (let chat
of this.chats
)
33 "my-chatmsg": chat
.author
==this.myid
,
34 "opp-chatmsg": chat
.author
==this.oppid
,
36 domProps: { innerHTML: chat
.msg
}
41 chatEltsArray
= chatEltsArray
.concat([
47 placeholder: translations
["Type here"],
49 on: { keyup: this.trySendChat
}, //if key is 'enter'
54 attrs: { id: "sendChatBtn"},
55 on: { click: this.sendChat
},
56 domProps: { innerHTML: translations
["Send"] },
63 attrs: { "id": "modal-chat", type: "checkbox" },
64 "class": { "modal": true },
68 attrs: { "role": "dialog", "aria-labelledby": "titleChat" },
73 "class": { "card": true, "smallpad": true },
80 elementArray
= elementArray
.concat(modalChat
);
85 this.chats
.push({msg:data
.msg
, author:this.oppid
});
88 // Receive opponent's name
89 this.oppName
= data
.name
;
93 // TODO: complete this component
94 trySendChat: function(e
) {
95 if (e
.keyCode
== 13) //'enter' key
98 sendChat: function() {
99 let chatInput
= document
.getElementById("input-chat");
100 const chatTxt
= chatInput
.value
;
101 chatInput
.value
= "";
102 this.chats
.push({msg:chatTxt
, author:this.myid
});
103 this.conn
.send(JSON
.stringify({
104 code:"newchat", oppid: this.oppid
, msg: chatTxt
}));
106 startChat: function(e
) {
107 this.getRidOfTooltip(e
.currentTarget
);
108 document
.getElementById("modal-chat").checked
= true;