| 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 | |