From 3b7613b8b022c29ec5426cda17515ec980962e1e Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Sun, 5 May 2019 00:35:35 -0600 Subject: [PATCH] Add chat feature --- www/css/home.css | 17 +++++ www/js/home.js | 175 +++++++++++++++++++++++++++++++++++++++++++- www/pages/home.html | 24 +++++- 3 files changed, 214 insertions(+), 2 deletions(-) diff --git a/www/css/home.css b/www/css/home.css index cd08774..5cf6a59 100644 --- a/www/css/home.css +++ b/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; } \ No newline at end of file diff --git a/www/js/home.js b/www/js/home.js index 0092a54..62efeb1 100644 --- a/www/js/home.js +++ b/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 } ); -} \ No newline at end of file +} + +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(); + } +}) \ No newline at end of file diff --git a/www/pages/home.html b/www/pages/home.html index f383954..7a6bc06 100644 --- a/www/pages/home.html +++ b/www/pages/home.html @@ -3,11 +3,12 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-
+
+
@@ -22,6 +23,27 @@
+ +
+ +
+ + + + + + + +
+ +
+ Send +
+