Commit | Line | Data |
---|---|---|
3ca7a846 BA |
1 | // TODO: myname, opppnents (optional, different style), people |
2 | // --> also show messages like "X offers draw ?" (probably not) | |
214dfe16 BA |
3 | // myname: localStorage["username"] || "anonymous", |
4 | Vue.component("my-chat", { | |
5 | props: ["conn","myname","opponents","people"], | |
6 | data: function() { | |
7 | return { | |
81da2786 | 8 | chats: [], //chat messages after human game |
214dfe16 BA |
9 | }; |
10 | }, | |
11 | // TODO: Chat modal sur petit écran, dans la page pour grand écran | |
12 | template: ` | |
13 | <div> | |
14 | <input id="modal-chat" type="checkbox" class="modal"> | |
15 | <div role="dialog" aria-labelledby="titleChat"> | |
16 | <div class="card smallpad"> | |
17 | <label id="close-chat" for="modal-chat" class="modal-close"></label> | |
18 | <h3 v-if="!!opponents" id="titleChat" class="section"> | |
19 | <span>{{ translate("Chat with ") }}</span> | |
20 | <span v-for="o in opponents">{{ o.name }}</span> | |
21 | </h3> | |
22 | <p v-for="chat in chats" :class={ | |
23 | "my-chatmsg": "chat.uid==user.id", | |
24 | "opp-chatmsg": "opponents.any(o => o.id == chat.uid)"} | |
25 | > | |
26 | {{ chat.msg }} | |
27 | </p> | |
28 | <input id="input-chat" type="text" placeholder="translate('Type here')" | |
29 | @keyup.enter="sendChat"/> | |
30 | <button id="sendChatBtn" @click="sendChat">{{ translate("Send") }}</button> | |
31 | </div> | |
32 | </div> | |
33 | </div> | |
34 | `, | |
35 | created: function() { | |
36 | const socketMessageListener = msg => { | |
37 | const data = JSON.parse(msg.data); | |
38 | switch (data.code) | |
39 | { | |
81da2786 | 40 | case "newchat": |
214dfe16 BA |
41 | // TODO: new chat just arrived: data contain all informations |
42 | // (uid, name, message; no need for timestamp, we can use local time here) | |
81da2786 BA |
43 | this.chats.push({msg:data.msg, author:this.oppid}); |
44 | break; | |
214dfe16 BA |
45 | // TODO: distinguish these (dis)connect events from their analogs in game.js |
46 | // TODO: implement and harmonize: opponents and people are arrays, not objects ?! | |
47 | case "connect": | |
48 | this.players.push({name:data.name, id:data.uid}); | |
81da2786 | 49 | break; |
214dfe16 BA |
50 | case "disconnect": |
51 | const pIdx = this.players.findIndex(p => p.id == data.uid); | |
52 | this.players.splice(pIdx); | |
53 | break; | |
54 | } | |
55 | }; | |
56 | const socketCloseListener = () => { | |
57 | this.conn.addEventListener('message', socketMessageListener); | |
58 | this.conn.addEventListener('close', socketCloseListener); | |
59 | }; | |
60 | this.conn.onmessage = socketMessageListener; | |
61 | this.conn.onclose = socketCloseListener; | |
62 | }, | |
63 | methods: { | |
64 | // TODO: complete this component | |
81da2786 BA |
65 | sendChat: function() { |
66 | let chatInput = document.getElementById("input-chat"); | |
67 | const chatTxt = chatInput.value; | |
68 | chatInput.value = ""; | |
69 | this.chats.push({msg:chatTxt, author:this.myid}); | |
70 | this.conn.send(JSON.stringify({ | |
71 | code:"newchat", oppid: this.oppid, msg: chatTxt})); | |
72 | }, | |
214dfe16 BA |
73 | // startChat: function(e) { |
74 | // document.getElementById("modal-chat").checked = true; | |
75 | // }, | |
76 | }, | |
77 | }); |