Add private messaging (closes #12).

www/css/main.css

@@ -167,7 +167,7 @@ body {
     font-weight: bold;
 }
 
-#namedisp {
+#namecontainer {
     float: left;
 }
 
@@ -233,16 +233,10 @@ body {
 }
 
 .chat-username {
-    color: green;
+    color: white;
     font-weight: bold;
 }
 
-.chat-username-admin {
-    color: red;
-    font-weight: bold;
-    font-style: italic;
-}
-
 #buttons {
     position: absolute;
     right: 0px;
@@ -296,6 +290,29 @@ body {
     width: fit-content;
 }
 
+#privmsg-header {
+    padding-top: 5px;
+    border-top: 1px solid white;
+    border-right: 1px solid white;
+}
+
+#privmsgs {
+    padding-top: 10px;
+    margin-top: -10px;
+}
+
+#loading-privmsgs {
+    border-right: 1px solid white;
+    padding-top: 10px;
+    margin-top: -10px;
+}
+
+#privmsg-container {
+    border-right: 1px solid white;
+    padding-top: 10px;
+    margin-top: -10px;
+}
+
 #badge-header {
     padding-top: 5px;
     border-top: 1px solid white;

www/js/user.js

@@ -62,17 +62,36 @@ function getChat() {
             data = sortResults(data, 'time', true);
             var content = "";
             data.forEach(function (msg) {
-                var usernameclass = "chat-username";
+                var usernamecolor = "green";
-                if (msg.nickname === 'skylarmt') {
+                var usernamecss = "";
-                    usernameclass = "chat-username-admin";
+                if (msg.color) {
+                    usernamecolor = msg.color;
                 }
-                content += "<span class='" + usernameclass + "' onclick='openProfile(\"" + msg.nickname + "\");'>" + msg.nickname + "</span> " + msg.message + "<br />";
+                if (msg.css) {
+                    usernamecss = msg.css;
+                }
+                content += "<span class='chat-username' style='color: " + usernamecolor + "; " + usernamecss + "' onclick='openProfile(\"" + msg.nickname + "\");'>" + msg.nickname + "</span> " + msg.message + "<br />";
             });
             $('#chatmsgs').html(content);
         });
     }
 }
 
+function privMsgSync() {
+    $.getJSON(
+            mkApiUrl('privmsgs') + "?filter=unread",
+            function (data) {
+                if (data.status === 'OK') {
+                    if (data.msgs.length > 0) {
+                        $('#gotprivmsg').css('display', '');
+                    } else {
+                        $('#gotprivmsg').css('display', 'none');
+                    }
+                }
+            }
+    );
+}
+
 var skycons = new Skycons({"color": "black", "resizeClear": true});
 skycons.add("weathericon", "clear-day");
 
@@ -116,12 +135,16 @@ function weatherLoadWait() {
 }
 
 syncStats();
+privMsgSync();
 setInterval(function () {
     syncStats();
 }, 10 * 1000);
 setInterval(function () {
     getChat();
-}, 3000);
+}, 3 * 1000);
+setInterval(function () {
+    privMsgSync();
+}, 15 * 1000);
 setInterval(function () {
     getWeather();
     getTerrain();

www/screens/home.html

@@ -42,7 +42,14 @@
 
 <div id="overlay-top">
     <p id="topbar">
-        <span id="namedisp" onclick="openMenu('profile')"></span>
+        <span id="namecontainer" onclick="openMenu('profile')">
+            <span id="namedisp">
+
+            </span>
+            <span id="gotprivmsg" style='display: none;'>
+                <i class="fa fa-envelope" style="color: red;"></i>
+            </span>
+        </span>
         <span id="worldinfo" onclick="popDiagData()">
             <canvas id="weathericon" width="22" height="22"></canvas> 
             <img id="terrainicon" src="assets/terrain/-1.png" />

www/screens/profile.html

@@ -26,6 +26,17 @@
 
     </div>
 </div>
+<div style="display: none;" id="privmsg-box">
+    <div class="h5" id="privmsg-header">Messages</div>
+    <div id="loading-privmsgs">
+        <i class="fa fa-spinner fa-pulse"></i> Loading...
+    </div>
+    <div class="container" id="privmsg-container">
+        <div class="list-group" id="privmsgs">
+
+        </div>
+    </div>
+</div>
 <script>
     function popBadge(name, desc) {
         navigator.notification.alert(desc, null, name, "Close");
@@ -35,6 +46,9 @@
         $('#player-name').text(user);
         loadBadges(user);
         loadPlayerStats(user);
+        if (user == username) {
+            loadPrivmsgs();
+        }
     }
 
     function loadPlayerStats(user) {
@@ -53,6 +67,9 @@
                 $('#badge-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
                 $('#badges').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
                 $('.badge-img').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
+                $('#privmsg-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
+                $('#privmsg-container').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
+                $('#loading-privmsgs').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
             } else {
                 $('#player-level').text('Cannot load player stats.');
             }
@@ -82,7 +99,58 @@
                 }
         ).fail(
                 function (err) {
-                    $('#loading-badges').html('Loading failed.  <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
+                    $('#loading-badges').html('Loading failed, <a onclick="loadProfile(\'' + user + '\')">reload</a>"');
+                }
+        );
+    }
+
+    function loadPrivmsgs() {
+        $('#loading-privmsgs').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
+        $('#loading-privmsgs').css('display', 'block');
+        $('#privmsg-box').css('display', 'block');
+        $('#privmsgs').css('display', 'block');
+        $.getJSON(
+                mkApiUrl('privmsgs'),
+                function (data) {
+                    if (data.status === 'OK') {
+                        $('#privmsgs').html("");
+                        data.msgs.forEach(function (item) {
+                            var privmsghtml = '<div class="list-group-item" '
+                                    + (item.msg_read == 0 ? 'onclick="markMsgRead(\'' + item.id + '\')"' : '') + '>'
+                                    + '<button class="btn btn-danger pull-right" onclick="deleteMsg(\'' + item.id + '\')"><i class="fa fa-trash"></i></button>'
+                                    + (item.msg_read == 0 ? '<b>' : '') + item.message + (item.msg_read == 0 ? '</b>' : '')
+                                    + '<br />' + (item.msg_read == 0 ? '<b>' : '') + "From: " + item.nickname + (item.msg_read == 0 ? '</b>' : '')
+                                    + '</div>';
+                            $('#privmsgs').append(privmsghtml);
+                        });
+                        $('#loading-privmsgs').css('display', 'none');
+                    } else {
+                        $('#loading-privmsgs').html('Loading failed.  <a onclick="loadPrivmsgs()">Reload</a>');
+                    }
+                }
+        ).fail(
+                function (err) {
+                    $('#loading-privmsgs').html('Loading failed, <a onclick="loadPrivmsgs()">reload</a>"');
+                }
+        );
+    }
+
+    function markMsgRead(id) {
+        $.getJSON(
+                mkApiUrl('privmsgs') + "?markread=" + id,
+                function () {
+                    loadPrivmsgs();
+                    privMsgSync();
+                }
+        );
+    }
+
+    function deleteMsg(id) {
+        $.getJSON(
+                mkApiUrl('privmsgs') + "?delete=" + id,
+                function () {
+                    loadPrivmsgs();
+                    privMsgSync();
                 }
         );
     }