X-Git-Url: https://git.auder.net/doc/current/git-logo.png?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fchat.js;h=b9bc798640db4be0634ecdea0f3480f6b02e9126;hb=214dfe16b01836fb19291ebf209bb7035993bafe;hp=5dce30775430f0d72f4509bf10602d046094c82e;hpb=3ca7a846ae7bc5d8f7c628417418534f3c92593a;p=vchess.git diff --git a/public/javascripts/components/chat.js b/public/javascripts/components/chat.js index 5dce3077..b9bc7986 100644 --- a/public/javascripts/components/chat.js +++ b/public/javascripts/components/chat.js @@ -1,100 +1,67 @@ // TODO: myname, opppnents (optional, different style), people // --> also show messages like "X offers draw ?" (probably not) - - -myname: localStorage["username"] || "anonymous", - oppName: "anonymous", //opponent name, revealed after a game (if provided) +// myname: localStorage["username"] || "anonymous", +Vue.component("my-chat", { + props: ["conn","myname","opponents","people"], + data: function() { + return { chats: [], //chat messages after human game - - - - let chatEltsArray = - [ - h('label', - { - attrs: { "id": "close-chat", "for": "modal-chat" }, - "class": { "modal-close": true }, - } - ), - h('h3', - { - attrs: { "id": "titleChat" }, - "class": { "section": true }, - domProps: { innerHTML: translations["Chat with "] + this.oppName }, - } - ) - ]; - for (let chat of this.chats) - { - chatEltsArray.push( - h('p', - { - "class": { - "my-chatmsg": chat.author==this.myid, - "opp-chatmsg": chat.author==this.oppid, - }, - domProps: { innerHTML: chat.msg } - } - ) - ); - } - chatEltsArray = chatEltsArray.concat([ - h('input', - { - attrs: { - "id": "input-chat", - type: "text", - placeholder: translations["Type here"], - }, - on: { keyup: this.trySendChat }, //if key is 'enter' - } - ), - h('button', - { - attrs: { id: "sendChatBtn"}, - on: { click: this.sendChat }, - domProps: { innerHTML: translations["Send"] }, - } - ) - ]); - const modalChat = [ - h('input', - { - attrs: { "id": "modal-chat", type: "checkbox" }, - "class": { "modal": true }, - }), - h('div', - { - attrs: { "role": "dialog", "aria-labelledby": "titleChat" }, - }, - [ - h('div', - { - "class": { "card": true, "smallpad": true }, - }, - chatEltsArray - ) - ] - ) - ]; - elementArray = elementArray.concat(modalChat); - - + }; + }, + // TODO: Chat modal sur petit écran, dans la page pour grand écran + template: ` +
o.id == chat.uid)"} + > + {{ chat.msg }} +
+ + +