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

master
ALI Hamza 2019-09-26 07:44:45 +07:00
parent 24918bf1e2
commit 25d57c6844
No known key found for this signature in database
GPG Key ID: BCA8A46C87798C4C
2 changed files with 38 additions and 8 deletions

@ -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%;

@ -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);
}
/*