-
-
-
- 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: `
+ <div>
+ <input id="modal-chat" type="checkbox" class="modal">
+ <div role="dialog" aria-labelledby="titleChat">
+ <div class="card smallpad">
+ <label id="close-chat" for="modal-chat" class="modal-close"></label>
+ <h3 v-if="!!opponents" id="titleChat" class="section">
+ <span>{{ translate("Chat with ") }}</span>
+ <span v-for="o in opponents">{{ o.name }}</span>
+ </h3>
+ <p v-for="chat in chats" :class={
+ "my-chatmsg": "chat.uid==user.id",
+ "opp-chatmsg": "opponents.any(o => o.id == chat.uid)"}
+ >
+ {{ chat.msg }}
+ </p>
+ <input id="input-chat" type="text" placeholder="translate('Type here')"
+ @keyup.enter="sendChat"/>
+ <button id="sendChatBtn" @click="sendChat">{{ translate("Send") }}</button>
+ </div>
+ </div>
+ </div>
+ `,
+ created: function() {
+ const socketMessageListener = msg => {
+ const data = JSON.parse(msg.data);
+ switch (data.code)
+ {