Add chat feature

www/css/home.css

@@ -86,4 +86,21 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 #player-level-badge {
     margin-bottom: 4px;
     margin-left: auto;
+}
+
+#messagebar {
+    background-color: rgba(23, 23, 23, 0.75);
+}
+
+#messagebar #messages-content {
+    max-height: 33vh;
+    overflow-y: auto;
+}
+
+#messagebar #chatbox {
+    overflow-y: hidden;
+}
+
+#messagebar .toggle-messages {
+    width: 64px;
 }

www/js/home.js

@@ -6,6 +6,8 @@
 
 var playerProfile = [];
 
+var messages = null;
+
 function loadHomePage(callback) {
     callAPI("getprofile", {
         username: localStorage.getItem("username"),
@@ -13,6 +15,9 @@ function loadHomePage(callback) {
     }, function (data) {
         playerProfile = data.profile;
         setupProfile();
+        initChat();
+        refreshChat();
+        setInterval(refreshChat, 1000 * 15);
         callback();
     });
 }
@@ -69,4 +74,172 @@ function scanCode() {
                 disableSuccessBeep: true
             }
     );
-}
+}
+
+function initChat() {
+    messages = app.messages.create({
+        el: '.messages',
+        pageContentEl: '#messagebar',
+
+        // First message rule
+        firstMessageRule: function (message, previousMessage, nextMessage) {
+            // Skip if title
+            if (message.isTitle)
+                return false;
+            /* if:
+             - there is no previous message
+             - or previous message type (send/received) is different
+             - or previous message sender name is different
+             */
+            if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name)
+                return true;
+            return false;
+        },
+        // Last message rule
+        lastMessageRule: function (message, previousMessage, nextMessage) {
+            // Skip if title
+            if (message.isTitle)
+                return false;
+            /* if:
+             - there is no next message
+             - or next message type (send/received) is different
+             - or next message sender name is different
+             */
+            if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name)
+                return true;
+            return false;
+        },
+        // Last message rule
+        tailMessageRule: function (message, previousMessage, nextMessage) {
+            // Skip if title
+            if (message.isTitle)
+                return false;
+            /* if (bascially same as lastMessageRule):
+             - there is no next message
+             - or next message type (send/received) is different
+             - or next message sender name is different
+             */
+            if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name)
+                return true;
+            return false;
+        }
+    });
+}
+
+function scrollToBottom(id) {
+    var div = document.getElementById(id);
+    $('#' + id).animate({
+        scrollTop: div.scrollHeight - div.clientHeight
+    }, 500);
+}
+
+function refreshChat(forcescroll) {
+    if (typeof forcescroll == 'undefined') {
+        forcescroll = false;
+    }
+    var vars = {
+        username: localStorage.getItem("username"),
+        password: localStorage.getItem("password")
+    };
+    if (!(map.getCenter().lng == 0 && Math.abs(map.getCenter().lat) > 0.000001)) {
+        vars["latitude"] = map.getCenter().lat;
+        vars["longitude"] = map.getCenter().lng;
+    }
+
+    // https://stackoverflow.com/a/21067431
+    var out = document.getElementById("messages-content");
+    // allow 1px inaccuracy by adding 1
+    var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
+
+    var messagebox = messages;
+    callAPI("getchat", vars, function (success) {
+        for (var i = 0; i < success.messages.length; i++) {
+            var msg = success.messages[i];
+            if ($(".message[data-id=" + msg.id + "]").length > 0) {
+                continue;
+            }
+            if (msg.me) {
+                messagebox.addMessage({
+                    text: msg.message,
+                    attrs: {
+                        'data-id': msg.id
+                    }
+                });
+            } else {
+                messagebox.addMessage({
+                    text: msg.message,
+                    type: 'received',
+                    name: msg.nickname,
+                    attrs: {
+                        'data-id': msg.id
+                    }
+                });
+            }
+        }
+        if (isScrolledToBottom || forcescroll) {
+            scrollToBottom("messages-content");
+        }
+    }, function (error) {});
+}
+
+function sendChat() {
+    var message = $("#chatbox").val().trim();
+    var chatfailure = function (error, message) {
+        $("#chatbox").prop("disabled", true);
+        $("#chatbox").val(error);
+        $("#chatbox").addClass("text-color-red");
+        setTimeout(function () {
+            $("#chatbox").prop("disabled", false);
+            $("#chatbox").val(message);
+            $("#chatbox").removeClass("text-color-red");
+        }, 1000 * 2);
+    }
+    if (message == "") {
+        chatfailure("Message empty.", "");
+        return false;
+    }
+    if (map.getCenter().lng == 0 && Math.abs(map.getCenter().lat) < 0.000001) {
+        chatfailure("Can't chat without valid location.", message);
+        return false;
+    }
+    callAPI("sendchat", {
+        username: localStorage.getItem("username"),
+        password: localStorage.getItem("password"),
+        latitude: map.getCenter().lat,
+        longitude: map.getCenter().lng,
+        message: message
+    }, function (success) {
+        $("#chatbox").val("");
+        refreshChat(true);
+    }, function (error) {
+        chatfailure(error, message);
+    });
+}
+
+var messagebar = app.messagebar.create({
+    el: '#messagebar',
+    textareaEl: '#chatbox'
+});
+
+$('a.toggle-messages').on('click', function () {
+    var contentbox = $("#messagebar #messages-content");
+    if (contentbox.hasClass("display-none")) {
+        $("#chattoggle-closed").addClass("display-none");
+        $("#chattoggle-opened").removeClass("display-none");
+        contentbox.removeClass("display-none");
+    } else {
+        $("#chattoggle-opened").addClass("display-none");
+        $("#chattoggle-closed").removeClass("display-none");
+        contentbox.addClass("display-none");
+    }
+});
+
+$("#sendmsgbtn").click(function () {
+    sendChat();
+});
+
+$("#chatbox").on("keyup", function (evt) {
+    if (evt.keyCode == 13) {
+        sendChat();
+    }
+})

www/pages/home.html

@@ -3,11 +3,12 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <div class="page" data-name="home">
-
     <div class="page-content">
+        <!-- Game map -->
         <div id="mapbox">
         </div>
 
+        <!-- Player info (top-left) -->
         <div id="playerinfo">
             <div class="display-flex align-items-center">
                 <div class="usericon">
@@ -22,6 +23,27 @@
             </div>
         </div>
 
+        <!-- Chat UI (bottom) -->
+        <div class="toolbar messagebar" id="messagebar" style="position: absolute; bottom: 0; left: 0; right: 0;">
+            <div class="margin messages-content display-none" id="messages-content">
+                <div class="messages" id="messages">
+                    <!-- Messages go here -->
+                </div>
+            </div>
+            <div class="toolbar-inner">
+                <a class="link toggle-messages">
+                    <span>
+                        <i class="fas fa-comments"></i>
+                        <i class="fas fa-caret-up" id="chattoggle-closed"></i>
+                        <i class="fas fa-caret-down display-none" id="chattoggle-opened"></i>
+                    </span>
+                </a>
+                <div class="messagebar-area">
+                    <textarea id="chatbox" placeholder="Chat"></textarea>
+                </div>
+                <a class="link" id="sendmsgbtn">Send</a>
+            </div>
+        </div>
 
     </div>