"Quick Jump" feature along with some European servers

app.js

@@ -42,11 +42,11 @@ function pingAll() {
 				server.io.sockets.emit('update', networkSnapshot);
 
 				// Log our response.
-				if (!networkHistory[network.ip]) {
-					networkHistory[network.ip] = [];
+				if (!networkHistory[network.name]) {
+					networkHistory[network.name] = [];
 				}
 
-				var _networkHistory = networkHistory[network.ip];
+				var _networkHistory = networkHistory[network.name];
 
 				// Remove our previous data that we don't need anymore.
 				for (var i = 0; i < _networkHistory.length; i++) {
@@ -111,6 +111,8 @@ server.start(function() {
 			// Remap our associative array into just an array.
 			var networkHistoryKeys = Object.keys(networkHistory);
 
+			networkHistoryKeys.sort();
+
 			// Send each individually, this should look cleaner than waiting for one big array to transfer.
 			for (var i = 0; i < networkHistoryKeys.length; i++) {
 				client.emit('add', [networkHistory[networkHistoryKeys[i]]]);

assets/css/main.css

@@ -140,3 +140,23 @@ h3 {
 .text-center-align {
     text-align: center;
 }
+
+/* Icon Quick jump */
+#quick-jump-container {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    overflow: auto;
+}
+
+.quick-jump-icon {
+    height: 24px;
+    width: 24px;
+    display: block;
+    margin-bottom: 2px;
+    border-radius: 2px;
+}
+
+.quick-jump-icon:hover {
+    cursor: pointer;
+}

assets/html/index.html

@@ -32,6 +32,8 @@
 
         <div id="server-container" class="container"></div>
 
+        <div id="quick-jump-container"></div>
+
         <!-- External JS assets -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 

assets/js/site.js

@@ -1,5 +1,3 @@
-var lastMojangServiceUpdate;
-
 var smallChartOptions = {
     series: {
         shadowSize: 0
@@ -32,6 +30,8 @@ var smallChartOptions = {
     ]
 };
 
+var lastMojangServiceUpdate;
+
 var graphs = {};
 var lastLatencyEntries = {};
 var lastPlayerEntries = {};
@@ -156,12 +156,14 @@ function sortServers() {
 }
 
 function safeName(name) {
-    return name.replace(' ', '');
+    return name.replace(/ /g, '');
 }
 
 $(document).ready(function() {
 	var socket = io.connect();
+
     var mojangServicesUpdater;
+    var sortServersTask;
 
 	socket.on('connect', function() {
         $('#tagline-text').text('Loading...');
@@ -172,6 +174,10 @@ $(document).ready(function() {
             clearInterval(mojangServicesUpdater);
         }
 
+        if (sortServersTask) {
+            clearInterval(sortServersTask);
+        }
+
         $('#tagline').attr('class', 'status-offline');
         $('#tagline-text').text('Disconnected! Refresh?');
 
@@ -180,6 +186,7 @@ $(document).ready(function() {
         graphs = {};
 
         $('#server-container').html('');
+        $('#quick-jump-container').html('');
     });
 
 	socket.on('add', function(servers) {
@@ -211,7 +218,7 @@ $(document).ready(function() {
             $('<div/>', {
                 id: safeName(info.name),
                 class: 'server',
-                html: '<div class="column" style="width: 80px;">\
+                html: '<div id="server-' + safeName(info.name) + '" class="column" style="width: 80px;">\
                             <img style="padding-top: 5px;" id="favicon_' + safeName(info.name) + '">\
                             <br />\
                             <p class="text-center-align" style="width: 64px; padding-top: 3px;" id="ranking_' + safeName(info.name) + '"></p>\
@@ -234,6 +241,8 @@ $(document).ready(function() {
 
             $('#favicon_' + safeName(info.name)).attr('src', favicon);
 
+            $('#quick-jump-container').append('<img id="quick-jump-' + safeName(info.name) + '" data-target-network="' + safeName(info.name) + '" class="quick-jump-icon" src="' + favicon + '">');
+
             graphs[lastEntry.info.name] = {
                 listing: listing,
                 plot: $.plot('#chart_' + safeName(info.name), [listing], smallChartOptions)
@@ -264,6 +273,7 @@ $(document).ready(function() {
         // 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);
+            $('#quick-jump-' + safeName(update.info.name)).attr('src', update.result.favicon);
         }
 
         var graph = graphs[update.info.name];
@@ -296,7 +306,17 @@ $(document).ready(function() {
 		updateMojangServices();
 	}, 1000);
 
-    setInterval(function() {
+    sortServersTask = setInterval(function() {
         sortServers();
     }, 30 * 1000);
+
+    // Our super fancy scrolly thing!
+    $(document).on('click', '.quick-jump-icon', function(e) {
+        var serverName = $(this).attr('data-target-network');
+        var target = $('#server-' + serverName);
+
+        $('html, body').animate({
+            scrollTop: target.offset().top
+        }, 100);
+    });
 });

config.json

@@ -91,8 +91,8 @@
 			"type": "PC"
 		},
 		{
-			"name": "MCBrawl",
-			"ip": "mcbrawl.com",
+			"name": "Brawl",
+			"ip": "brawl.com",
 			"type": "PC"
 		},
 		{
@@ -111,8 +111,8 @@
 			"type": "PC"
 		},
 		{
-			"name": "DestinyMC",
-			"ip": "play.thedestinymc.com",
+			"name": "MCLegends",
+			"ip": "play.mc-legends.com",
 			"type": "PC"
 		},
 		{
@@ -121,14 +121,34 @@
 			"type": "PC"
 		},
 		{
-			"name": "Minetime",
-			"ip": "minetime.com",
+			"name": "Arkham",
+			"ip": "mc.arkhamnetwork.org",
 			"type": "PC"
 		},
 		{
 			"name": "VikkCraft",
 			"ip": "hub.vikkcraft.com",
 			"type": "PC"
+		},
+		{
+			"name": "GommeHD",
+			"ip": "gommehd.net",
+			"type": "PC"
+		},
+		{
+			"name": "Jerry and Harry",
+			"ip": "play.itsjerryandharry.com",
+			"type": "PC"
+		},
+		{
+			"name": "Rewinside",
+			"ip": "mc.rewinside.tv",
+			"type": "PC"
+		},
+		{
+			"name": "Playminity",
+			"ip": "mc.playminity.com",
+			"type": "PC"
 		}
 	],
 	"routes": {