Fix computer mode in rules tab
[vchess.git] / 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