"Quick Jump" feature along with some European servers

This commit is contained in:
Cryptkeeper 2015-11-25 16:40:13 -06:00
parent 1daa20d5ab
commit f516bc9f15
5 changed files with 78 additions and 14 deletions

8
app.js

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

@ -139,4 +139,24 @@ h3 {
.text-center-align { .text-center-align {
text-align: center; 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;
} }

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

@ -1,5 +1,3 @@
var lastMojangServiceUpdate;
var smallChartOptions = { var smallChartOptions = {
series: { series: {
shadowSize: 0 shadowSize: 0
@ -32,6 +30,8 @@ var smallChartOptions = {
] ]
}; };
var lastMojangServiceUpdate;
var graphs = {}; var graphs = {};
var lastLatencyEntries = {}; var lastLatencyEntries = {};
var lastPlayerEntries = {}; var lastPlayerEntries = {};
@ -156,12 +156,14 @@ function sortServers() {
} }
function safeName(name) { function safeName(name) {
return name.replace(' ', ''); return name.replace(/ /g, '');
} }
$(document).ready(function() { $(document).ready(function() {
var socket = io.connect(); var socket = io.connect();
var mojangServicesUpdater; var mojangServicesUpdater;
var sortServersTask;
socket.on('connect', function() { socket.on('connect', function() {
$('#tagline-text').text('Loading...'); $('#tagline-text').text('Loading...');
@ -172,6 +174,10 @@ $(document).ready(function() {
clearInterval(mojangServicesUpdater); clearInterval(mojangServicesUpdater);
} }
if (sortServersTask) {
clearInterval(sortServersTask);
}
$('#tagline').attr('class', 'status-offline'); $('#tagline').attr('class', 'status-offline');
$('#tagline-text').text('Disconnected! Refresh?'); $('#tagline-text').text('Disconnected! Refresh?');
@ -180,6 +186,7 @@ $(document).ready(function() {
graphs = {}; graphs = {};
$('#server-container').html(''); $('#server-container').html('');
$('#quick-jump-container').html('');
}); });
socket.on('add', function(servers) { socket.on('add', function(servers) {
@ -211,7 +218,7 @@ $(document).ready(function() {
$('<div/>', { $('<div/>', {
id: safeName(info.name), id: safeName(info.name),
class: 'server', 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) + '">\ <img style="padding-top: 5px;" id="favicon_' + safeName(info.name) + '">\
<br />\ <br />\
<p class="text-center-align" style="width: 64px; padding-top: 3px;" id="ranking_' + safeName(info.name) + '"></p>\ <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); $('#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] = { graphs[lastEntry.info.name] = {
listing: listing, listing: listing,
plot: $.plot('#chart_' + safeName(info.name), [listing], smallChartOptions) plot: $.plot('#chart_' + safeName(info.name), [listing], smallChartOptions)
@ -264,6 +273,7 @@ $(document).ready(function() {
// We have a new favicon, update the old one. // We have a new favicon, update the old one.
if (update.result && update.result.favicon) { if (update.result && update.result.favicon) {
$('#favicon_' + safeName(update.info.name)).attr('src', 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]; var graph = graphs[update.info.name];
@ -296,7 +306,17 @@ $(document).ready(function() {
updateMojangServices(); updateMojangServices();
}, 1000); }, 1000);
setInterval(function() { sortServersTask = setInterval(function() {
sortServers(); sortServers();
}, 30 * 1000); }, 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);
});
}); });

@ -91,8 +91,8 @@
"type": "PC" "type": "PC"
}, },
{ {
"name": "MCBrawl", "name": "Brawl",
"ip": "mcbrawl.com", "ip": "brawl.com",
"type": "PC" "type": "PC"
}, },
{ {
@ -111,8 +111,8 @@
"type": "PC" "type": "PC"
}, },
{ {
"name": "DestinyMC", "name": "MCLegends",
"ip": "play.thedestinymc.com", "ip": "play.mc-legends.com",
"type": "PC" "type": "PC"
}, },
{ {
@ -121,14 +121,34 @@
"type": "PC" "type": "PC"
}, },
{ {
"name": "Minetime", "name": "Arkham",
"ip": "minetime.com", "ip": "mc.arkhamnetwork.org",
"type": "PC" "type": "PC"
}, },
{ {
"name": "VikkCraft", "name": "VikkCraft",
"ip": "hub.vikkcraft.com", "ip": "hub.vikkcraft.com",
"type": "PC" "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": { "routes": {