X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fchat.js;fp=public%2Fjavascripts%2Fcomponents%2Fchat.js;h=a14899090feb1b92fa0c79482d10bb2999a3d098;hb=81da2786f2f497b4416e0488c34a48fb794c28df;hp=0000000000000000000000000000000000000000;hpb=c5fa5762dc441fb1cb669908fae01d0d128e372d;p=vchess.git

diff --git a/public/javascripts/components/chat.js b/public/javascripts/components/chat.js
new file mode 100644
index 00000000..a1489909
--- /dev/null
+++ b/public/javascripts/components/chat.js
@@ -0,0 +1,106 @@
+			myname: localStorage["username"] || "anonymous",
+			oppName: "anonymous", //opponent name, revealed after a game (if provided)
+			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);
+	
+	
+				case "newchat":
+					// Receive new chat
+					this.chats.push({msg:data.msg, author:this.oppid});
+					break;
+				case "oppname":
+					// Receive opponent's name
+					this.oppName = data.name;
+					break;
+	
+	
+	// TODO: complete this component
+		trySendChat: function(e) {
+			if (e.keyCode == 13) //'enter' key
+				this.sendChat();
+		},
+		sendChat: function() {
+			let chatInput = document.getElementById("input-chat");
+			const chatTxt = chatInput.value;
+			chatInput.value = "";
+			this.chats.push({msg:chatTxt, author:this.myid});
+			this.conn.send(JSON.stringify({
+				code:"newchat", oppid: this.oppid, msg: chatTxt}));
+		},
+		startChat: function(e) {
+			this.getRidOfTooltip(e.currentTarget);
+			document.getElementById("modal-chat").checked = true;
+		},
+