chat/www/js/main.js

const socket = io();

$(() => {
    socket.on('serverHandshake', onServerHandshake);
    socket.on('serverLogin', onServerLogin);
    socket.on('serverKick', onServerKick);
});

function onServerHandshake() {
    resetChatListeners();
    resetLoginListeners();

    var template = $('#chat-login-template').html();
    $('#chat-host').empty();
    $('#chat-host').append(template);

    $('#chat-login-form').submit((e) => {
        e.preventDefault();

        console.debug('submit login form', e);

        socket.emit('login', $('#chat-login-form .username').val(), $('#chat-login-form .password').val());

        return false;
    });

    socket.on('usernameInvalid', () => {
        $('#chat-login-form .username').focus();
        $('#chat-host .loginError').text('Username invalid.');
    });

    socket.on('usernameTaken', () => {
        $('#chat-login-form .username').focus();
        $('#chat-host .loginError').text('Username already in use.');
    });

    socket.on('passwordRequired', () => {
        $('#chat-login-form .passwordWrapper').css('display', '');
        $('#chat-login-form .password').focus();
        $('#chat-host .loginError').text('Für diesen reservierten Benutzer ist ein Passwort erforderlich.');
    });

    socket.on('passwordWrong', () => {
        $('#chat-login-form .passwordWrapper').css('display', '');
        $('#chat-login-form .password').focus();
        $('#chat-host .loginError').text('Das eingegebene Passwort ist ungültig.');
    });
}

function onServerLogin(user) {
    resetChatListeners();
    resetLoginListeners();

    var template;
    if (user.admin) {
        template = $('#chat-admin-template').html()
    } else {
        template = $('#chat-template').html()
    }

    $('#chat-host').empty();
    $('#chat-host').append(template);

    $('#chat-host .messageField').focus();

    socket.on('usersUpdated', (userList) => {
        $('#chat-host .main .userlist').empty();

        userList.sort((userA, userB) => userA.name.localeCompare(userB.name));
        userList.sort((userA, userB) => {
            if (userA.admin && !userB.admin) {
                return Number.MIN_SAFE_INTEGER;
            } else if (!userA.admin && userB.admin) {
                return Number.MAX_SAFE_INTEGER;
            }

            return 0;
        });

        for (let listUser of userList) {
            let userString = listUser.name;
            if (listUser.admin) {
                userString = '👑 ' + userString;
            }

            const userListEl = $('<li>');
            userListEl.text(userString);
            if (user.admin) {
                const kickBtn = $('<button class="kickBtn">🥾</button>');
                kickBtn.click(() => onKickUser(listUser));
                userListEl.append(kickBtn);
            }
            $('#chat-host .main .userlist').append(userListEl);
        }
    });

    if (user.admin) {
        socket.on('bannedUpdated', (bannedList) => {
            $('#chat-host .main .bannedlist').empty();

            for (let bannedItem of bannedList) {
                const bannedListEl = $('<li>');

                bannedListEl.text(bannedItem.ip + ' (' + bannedItem.user.name + ')');

                const removeBtn = $('<button class="removeBtn">✖</button>');
                removeBtn.click(() => onLiftBan(bannedItem.ip));
                bannedListEl.append(removeBtn);

                $('#chat-host .main .bannedlist').append(bannedListEl);
            }
        });
    }

    socket.on('message', (msg, user, timestamp) => {
        const messageWrapper = $('<li class="userMsg">');

        const timeEl = $('<span class="time">');
        timeEl.text(new Date(timestamp).toLocaleTimeString());
        timeEl.prop('title', new Date(timestamp).toLocaleString());
        messageWrapper.append(timeEl);

        const userEl = $('<span class="user">');
        let userString = user.name + ':';
        if (user.admin) {
            userString = '👑 ' + userString;
        }
        userEl.text(userString);
        messageWrapper.append(userEl);

        const messageEl = $('<span class="message">');
        messageEl.text(msg)
        messageWrapper.append(messageEl);

        appendMessage(messageWrapper);
    });

    socket.on('userJoined', (msg) => {
        appendMessage($('<li class="systemMsg user joined">').text(msg + ' hat den Chat betreten.'));
    });

    socket.on('userLeft', (msg) => {
        appendMessage($('<li class="systemMsg user left">').text(msg + ' hat den Chat verlassen.'));
    });

    $('#chat-host .messageForm').submit((e) => {
        e.preventDefault();
        socket.emit('message', $('#chat-host .messageForm .messageField').val());
        $('#chat-host .messageForm .messageField').val('');
        $('#chat-host .messageForm .messageField').focus();
        return false;
    });

    $("#chat-host .messageField").keypress((e) => {
        if(e.key == 'Enter' && !e.shiftKey) {
            e.preventDefault();
            $('#chat-host .messageForm').submit();
            return false;
        }
    });
}

function onServerKick() {
    resetChatListeners();
    resetLoginListeners();

    var template = $('#chat-kick-template').html();
    $('#chat-host').empty();
    $('#chat-host').append(template);
}

function resetChatListeners() {
    socket.removeAllListeners('usersUpdated');
    socket.removeAllListeners('message');
    socket.removeAllListeners('userJoined');
    socket.removeAllListeners('userLeft');
}

function resetLoginListeners() {
    socket.removeAllListeners('usernameInvalid');
    socket.removeAllListeners('usernameTaken');
    socket.removeAllListeners('passwordRequired');
    socket.removeAllListeners('passwordWrong');
}

function appendMessage(element) {
    const messagesListEl = $('#chat-host .main .messages')[0];
    const scrollMax = messagesListEl.scrollHeight - messagesListEl.clientHeight;
    const scrolled = messagesListEl.scrollTop != scrollMax;

    $('#chat-host .main .messages').append(element);

    if (!scrolled) {
        messagesListEl.scrollTop = messagesListEl.scrollHeight - messagesListEl.clientHeight;
    }
}

function onKickUser(user) {
    if (confirm('Möchten Sie den Benutzer "' + user.name + '" wirklich bannen?\nDies wird sich auf alle Benutzer mit der gleichen IP-Adresse auswirken.')) {
        socket.emit('requestKick', user);
    }
}

function onLiftBan(ip) {
    socket.emit('requestLiftBan', ip);
}