Commit | Line | Data |
---|---|---|
81da2786 BA |
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 |