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