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