Client now running. Toward fully 1-page (with filters for variants)
[vchess.git] / client / next_src / components / chat.js
CommitLineData
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",
4Vue.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)"}
60d9063f 25 v-html="chat.msg"
214dfe16 26 >
60d9063f 27 TODO: why chat.msg fails here?
214dfe16
BA
28 </p>
29 <input id="input-chat" type="text" placeholder="translate('Type here')"
30 @keyup.enter="sendChat"/>
31 <button id="sendChatBtn" @click="sendChat">{{ translate("Send") }}</button>
32 </div>
33 </div>
34 </div>
35 `,
36 created: function() {
37 const socketMessageListener = msg => {
38 const data = JSON.parse(msg.data);
39 switch (data.code)
40 {
81da2786 41 case "newchat":
214dfe16
BA
42 // TODO: new chat just arrived: data contain all informations
43 // (uid, name, message; no need for timestamp, we can use local time here)
81da2786
BA
44 this.chats.push({msg:data.msg, author:this.oppid});
45 break;
214dfe16
BA
46 // TODO: distinguish these (dis)connect events from their analogs in game.js
47 // TODO: implement and harmonize: opponents and people are arrays, not objects ?!
48 case "connect":
49 this.players.push({name:data.name, id:data.uid});
81da2786 50 break;
214dfe16
BA
51 case "disconnect":
52 const pIdx = this.players.findIndex(p => p.id == data.uid);
53 this.players.splice(pIdx);
54 break;
55 }
56 };
57 const socketCloseListener = () => {
58 this.conn.addEventListener('message', socketMessageListener);
59 this.conn.addEventListener('close', socketCloseListener);
60 };
61 this.conn.onmessage = socketMessageListener;
62 this.conn.onclose = socketCloseListener;
63 },
64 methods: {
60d9063f 65 translate: translate,
214dfe16 66 // TODO: complete this component
81da2786
BA
67 sendChat: function() {
68 let chatInput = document.getElementById("input-chat");
69 const chatTxt = chatInput.value;
70 chatInput.value = "";
71 this.chats.push({msg:chatTxt, author:this.myid});
72 this.conn.send(JSON.stringify({
73 code:"newchat", oppid: this.oppid, msg: chatTxt}));
74 },
214dfe16
BA
75// startChat: function(e) {
76// document.getElementById("modal-chat").checked = true;
77// },
78 },
79});