code/static: display user join/leave messages in chat

code/static/css/style.css

@@ -85,6 +85,15 @@ body {
 	color: #C9CEB1;
 }
 
+.message .server-message {
+	padding: 4px 0 4px 20px;
+	margin: 6px 0;
+	font-weight: bold;
+	color: #AAB3FF;
+	border-left: 4px solid #EAF0CE;
+	background-color: #EAF0CE22;
+}
+
 .users {
 	width: 15%;
 	height: 80%;

code/static/js/index.js

@@ -55,10 +55,10 @@ ws.onmessage = function(info) {
 function newMessage(data) {
 	switch(data.type) {
 		case "join":
-			userJoin(data.content);
+			userJoin(data.content, data.date);
 			break;
 		case "leave":
-			userLeave(data.content);
+			userLeave(data.content, data.date);
 			break;
 		case "message":
 			chatMessage(data.sender, data.content, data.date)
@@ -79,29 +79,50 @@ function chatMessage(sender, content, date) {
 	text.innerText = content;
 
 	msg.append(hr, author, timestamp, text);
+	insertMessage(msg);
+}
+
+function serverMessage(content, date) {
+	let msg = create("div", "message");
+	let hr = create("hr", "seperator");
+
+	let timestamp = create("div", "timestamp");
+	timestamp.innerText = dateToString(new Date(date));
 
+	let text = create("div", "server-message");
+	text.innerText = content;
+
+	msg.append(hr, timestamp, text);
+	insertMessage(msg);
+}
+
+function insertMessage(div) {
 	//If message scrolling at the bottom, move to bottom again to update
 	let scroller = document.getElementsByClassName("messages")[0];
 	let currentScroll = scroller.scrollTop;
 	let maxScroll = scroller.scrollHeight - scroller.clientHeight;
 
-	document.getElementById("messages").append(msg);
+	document.getElementById("messages").append(div);
 
 	if (currentScroll === maxScroll) {
-		msg.scrollIntoView();
+		div.scrollIntoView();
 	}
 }
-
-function userJoin(user) {
+/**
+ * Join/leave events
+ */
+function userJoin(user, date) {
 	let p = document.createElement("p");
 	p.className = user;
 	p.innerText = user;
 	document.getElementById("users").appendChild(p);
+	serverMessage(user + " has joined the server", date);
 }
 
-function userLeave(user) {
+function userLeave(user, date) {
 	users = document.getElementById("users");
 	users.removeChild(users.getElementsByClassName(user)[0]);
+	serverMessage(user + " has left the server", date);
 }
 
 /*