Tweak design, numerous fixes

TODO

@@ -1,6 +1,5 @@
 Fix icons not updating when a network that was offline comes online.
-Show offline server messages on frontend.
 Add auto-reconnect to frontend.
-Add sorting.
 Finish design.
 Deploy to actual website.
+Add new API.

assets/css/main.css

@@ -34,6 +34,19 @@ body {
     border-bottom: 1px dashed transparent;
 }
 
+#header > .slogan {
+    letter-spacing: 2px;
+    font-size: 20px;
+}
+
+#header > .info {
+    font-size: 17px;
+}
+
+#header > h1 {
+    font-size: 42px;
+}
+
 /* Tagline */
 #tagline {
     padding: 10px 0;
@@ -66,7 +79,7 @@ body {
 /* Server listing */
 #server-container {
     width: 800px;
-    margin: 10px auto;
+    margin: 10px auto 20px auto;
 }
 
 #server-container .server:nth-child(2n) {
@@ -77,6 +90,7 @@ body {
 .server {
     overflow: auto;
     padding: 10px;
+    margin: 5px;
 }
 
 .server > .column > img {
@@ -116,7 +130,7 @@ h3 {
 }
 
 .color-red {
-    color: #c0392b;
+    color: #e74c3c;
 }
 
 .text-uppercase {

assets/html/index.html

@@ -17,9 +17,8 @@
 		<div id="header">
 
 			<h1 class="text-uppercase">Minetrack</h1>
-
-			<p class="text-uppercase">All your favorite Minecraft servers, right now.</p>
-			<p class="text-uppercase">Made by <a href="http://cryptkpr.me">Cryptkeeper</a> | Source code on <a href="https://github.com/Cryptkeeper/Minetrack">Github</a></p>
+			<p class="slogan text-uppercase">All your favorite Minecraft servers, right now.</p>
+			<p class="info text-uppercase">Made with <span style="color: #e74c3c;">&#9829;</span> by <a href="http://cryptkpr.me">Cryptkeeper</a> &middot; Open source'd on <a href="https://github.com/Cryptkeeper/Minetrack">Github</a></p>
 
 		</div>
 

assets/js/site.js

@@ -11,7 +11,7 @@ var smallChartOptions = {
         show: false
     },
     yaxis: {
-        minTickSize: 100,
+        minTickSize: 75,
         tickDecimals: 0,
         show: true,
         tickLength: 10,
@@ -25,7 +25,7 @@ var smallChartOptions = {
     },
     grid: {
         hoverable: true,
-        color: "#C4C4C4"
+        color: "#696969"
     },
     colors: [
         "#E9E581"
@@ -38,6 +38,10 @@ var lastPlayerEntries = {};
 
 // Generate (and set) the HTML that displays Mojang status.
 function updateMojangServices() {
+    if (!lastMojangServiceUpdate) {
+        return;
+    }
+
 	var keys = Object.keys(lastMojangServiceUpdate);
     var newStatus = 'Mojang Services: ';
     var serviceCountByType = {
@@ -75,18 +79,28 @@ function updateMojangServices() {
 	$('#tagline-text').text(newStatus);
 }
 
+function findErrorMessage(error) {
+    if (error.description) {
+        return error.description;
+    } else if (error.errno) {
+        return error.errno;
+    }
+}
+
 function updateServerStatus(lastEntry) {
     var info = lastEntry.info;
     var div = $('#status_' + safeName(info.name));
 
     if (lastEntry.result) {
         var result = lastEntry.result;
-        var newStatus = formatNumber(result.players.online) + '/' + formatNumber(result.players.max);
+        var newStatus = 'Players: ' + formatNumber(result.players.online);
 
-        if (lastPlayerEntries[info.name]) {
+        var listing = graphs[lastEntry.info.name].listing;
+
+        if (listing.length > 0) {
             newStatus += '<span class="color-gray"> (';
 
-            var playerDifference = lastPlayerEntries[info.name] - result.players.online;
+            var playerDifference = listing[listing.length - 1][1] - listing[0][1];
 
             if (playerDifference >= 0) {
                 newStatus += '+';
@@ -111,6 +125,31 @@ function updateServerStatus(lastEntry) {
         lastLatencyEntries[info.name] = result.latency;
 
         div.html(newStatus);
+    } else {
+        var newStatus = '<span class="color-red">Failed to ping!';
+
+        if (findErrorMessage(lastEntry.error)) {
+            newStatus += '<br />' + findErrorMessage(lastEntry.error);
+        }
+
+        div.html(newStatus + '</span>');
+    }
+}
+
+function sortServers() {
+    var keys = Object.keys(lastPlayerEntries);
+    var nameList = [];
+
+    keys.sort(function(a, b) {
+        return lastPlayerEntries[b] - lastPlayerEntries[a];
+    });
+
+    keys.reverse();
+
+    for (var i = 0; i < keys.length; i++) {
+        $('#' + safeName(keys[i])).prependTo('#server-container');
+
+        $('#ranking_' + safeName(keys[i])).text('#' + (keys.length - i));
     }
 }
 
@@ -131,8 +170,8 @@ $(document).ready(function() {
             clearInterval(mojangServicesUpdater);
         }
 
-        $('#tagline').attr('class', 'status-connecting');
-        $('#tagline-text').text('Attempting reconnnect...');
+        $('#tagline').attr('class', 'status-offline');
+        $('#tagline-text').text('Disconnected! Refresh?');
 
         lastPlayerEntries = {};
         lastLatencyEntries = {};
@@ -159,11 +198,21 @@ $(document).ready(function() {
             var lastEntry = history[history.length - 1];
             var info = lastEntry.info;
 
+            if (lastEntry.error) {
+                lastPlayerEntries[info.name] = 0;
+                lastLatencyEntries[info.name] = 0;
+            } else if (lastEntry.result) {
+                lastPlayerEntries[info.name] = lastEntry.result.players.online;
+                lastLatencyEntries[info.name] = lastEntry.result.latency;
+            }
+
             $('<div/>', {
                 id: safeName(info.name),
                 class: 'server',
                 html: '<div class="column" style="width: 80px;">\
                             <img style="padding-top: 5px;" id="favicon_' + safeName(info.name) + '">\
+                            <br />\
+                            <span id="ranking_' + safeName(info.name) + '"></span>\
                         </div>\
                         <div class="column" style="width: 280px;"><h3>' + info.name + '</h3>\
                             <span class="color-gray">' + info.ip + '</span>\
@@ -183,13 +232,13 @@ $(document).ready(function() {
 
             $('#favicon_' + safeName(info.name)).attr('src', favicon);
 
-            updateServerStatus(lastEntry);
-
             graphs[lastEntry.info.name] = {
                 listing: listing,
                 plot: $.plot('#chart_' + safeName(info.name), [listing], smallChartOptions)
             };
 
+            updateServerStatus(lastEntry);
+
             $('#chart_' + safeName(info.name)).bind('plothover', function(event, pos, item) {
                 if (item) {
                     renderTooltip(item.pageX + 5, item.pageY + 5, getTimestamp(item.datapoint[0] / 1000) + '\
@@ -200,9 +249,21 @@ $(document).ready(function() {
                 }
             });
         }
+
+        sortServers();
 	});
 
 	socket.on('update', function(update) {
+        // Prevent weird race conditions.
+        if (!graphs[update.info.name]) {
+            return;
+        }
+
+        // We have a new favicon, update the old one.
+        if (update.result && update.result.favicon) {
+            $('#favicon_' + safeName(update.info.name)).attr('src', update.result.favicon);
+        }
+
         var graph = graphs[update.info.name];
 
         updateServerStatus(update);
@@ -230,4 +291,8 @@ $(document).ready(function() {
 	mojangServicesUpdater = setInterval(function() {
 		updateMojangServices();
 	}, 1000);
+
+    setInterval(function() {
+        sortServers();
+    }, 30 * 1000);
 });

config.json

@@ -86,9 +86,19 @@
 			"type": "PC"
 		},
 		{
-			"name": "Shock",
+			"name": "Shock Network",
 			"ip": "play.snw.io",
 			"type": "PC"
+		},
+		{
+			"name": "MCBrawl",
+			"ip": "mcbrawl.com",
+			"type": "PC"
+		},
+		{
+			"name": "SaicoPvP",
+			"ip": "saicopvp.com",
+			"type": "PC"
 		}
 	],
 	"routes": {

lib/server.js

@@ -25,7 +25,15 @@ exports.start = function(callback) {
 
 		logger.log('info', '%s requested: %s', req.connection.remoteAddress, requestUrl);
 
-		if (requestUrl in urlMapping) {
+		if (requestUrl === '/status.json') {
+			res.setHeader('Content-Type', 'text/plain');
+			res.write(JSON.stringify({
+				error: true,
+				message: 'API deprecated.'
+			}));
+
+			res.end();
+		} else if (requestUrl in urlMapping) {
 			var file = urlMapping[requestUrl];
 
 			res.setHeader('Content-Type', mime.lookup(file));