416 lines
11 KiB
JavaScript
416 lines
11 KiB
JavaScript
var smallChartOptions = {
|
|
series: {
|
|
shadowSize: 0
|
|
},
|
|
xaxis: {
|
|
font: {
|
|
color: "#E3E3E3"
|
|
},
|
|
show: false
|
|
},
|
|
yaxis: {
|
|
minTickSize: 75,
|
|
tickDecimals: 0,
|
|
show: true,
|
|
tickLength: 10,
|
|
tickFormatter: function(value) {
|
|
return formatNumber(value);
|
|
},
|
|
font: {
|
|
color: "#E3E3E3"
|
|
},
|
|
labelWidth: -10
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
color: "#696969"
|
|
},
|
|
colors: [
|
|
"#E9E581"
|
|
]
|
|
};
|
|
|
|
var bigChartOptions = {
|
|
series: {
|
|
shadowSize: 0
|
|
},
|
|
xaxis: {
|
|
font: {
|
|
color: "#E3E3E3"
|
|
},
|
|
show: false
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
tickLength: 10,
|
|
tickFormatter: function(value) {
|
|
return formatNumber(value);
|
|
},
|
|
font: {
|
|
color: "#E3E3E3"
|
|
},
|
|
labelWidth: -5
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
color: "#696969"
|
|
},
|
|
legend: {
|
|
show: false
|
|
}
|
|
};
|
|
|
|
var lastMojangServiceUpdate;
|
|
|
|
var graphs = {};
|
|
var lastLatencyEntries = {};
|
|
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 = {
|
|
Online: 0,
|
|
Unstable: 0,
|
|
Offline: 0
|
|
};
|
|
|
|
for (var i = 0; i < keys.length; i++) {
|
|
var entry = lastMojangServiceUpdate[keys[i]];
|
|
|
|
serviceCountByType[entry.title] += 1;
|
|
}
|
|
|
|
if (serviceCountByType['Online'] === keys.length) {
|
|
$('#tagline').attr('class', 'status-online');
|
|
|
|
newStatus += 'All systems operational.';
|
|
} else {
|
|
if (serviceCountByType['Unstable'] > serviceCountByType['Offline']) {
|
|
$('#tagline').attr('class', 'status-unstable');
|
|
} else {
|
|
$('#tagline').attr('class', 'status-offline');
|
|
}
|
|
|
|
for (var i = 0; i < keys.length; i++) {
|
|
var entry = lastMojangServiceUpdate[keys[i]];
|
|
|
|
if (entry.startTime) {
|
|
newStatus += entry.name + ' ' + entry.title.toLowerCase() + ' for ' + msToTime((new Date()).getTime() - entry.startTime + ' ');
|
|
}
|
|
}
|
|
}
|
|
|
|
$('#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 = '<br />Players: ' + formatNumber(result.players.online);
|
|
|
|
var listing = graphs[lastEntry.info.name].listing;
|
|
|
|
if (listing.length > 0) {
|
|
newStatus += '<span class="color-gray"> (';
|
|
|
|
var playerDifference = listing[listing.length - 1][1] - listing[0][1];
|
|
|
|
if (playerDifference >= 0) {
|
|
newStatus += '+';
|
|
}
|
|
|
|
newStatus += playerDifference + ')</span>';
|
|
}
|
|
|
|
/*if (lastLatencyEntries[info.name]) {
|
|
newStatus += '<br />';
|
|
|
|
var latencyDifference = lastLatencyEntries[info.name] - result.latency;
|
|
|
|
if (latencyDifference >= 0) {
|
|
newStatus += '+';
|
|
}
|
|
|
|
newStatus += latencyDifference + 'ms';
|
|
}*/
|
|
|
|
lastPlayerEntries[info.name] = result.players.online;
|
|
lastLatencyEntries[info.name] = result.latency;
|
|
|
|
div.html(newStatus);
|
|
} else {
|
|
var newStatus = '<br /><span class="color-red">';
|
|
|
|
if (findErrorMessage(lastEntry.error)) {
|
|
newStatus += findErrorMessage(lastEntry.error);
|
|
} else {
|
|
newStatus += 'Failed to ping!';
|
|
}
|
|
|
|
div.html(newStatus + '</span>');
|
|
}
|
|
|
|
var keys = Object.keys(lastPlayerEntries);
|
|
var totalPlayers = 0;
|
|
|
|
for (var i = 0; i < keys.length; i++) {
|
|
totalPlayers += lastPlayerEntries[keys[i]];
|
|
}
|
|
|
|
$("#stat_totalPlayers").text(formatNumber(totalPlayers));
|
|
$("#stat_networks").text(formatNumber(keys.length));
|
|
}
|
|
|
|
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));
|
|
}
|
|
}
|
|
|
|
function safeName(name) {
|
|
return name.replace(/ /g, '');
|
|
}
|
|
|
|
function handlePlotHover(event, pos, item) {
|
|
if (item) {
|
|
var text = getTimestamp(item.datapoint[0] / 1000) + '\
|
|
<br />\
|
|
' + formatNumber(item.datapoint[1]) + ' Players';
|
|
|
|
if (item.series && item.series.label) {
|
|
text = item.series.label + '<br />' + text;
|
|
}
|
|
|
|
renderTooltip(item.pageX + 5, item.pageY + 5, text);
|
|
} else {
|
|
hideTooltip();
|
|
}
|
|
}
|
|
|
|
function convertGraphData(rawData) {
|
|
var data = [];
|
|
|
|
var keys = Object.keys(rawData);
|
|
|
|
for (var i = 0; i < keys.length; i++) {
|
|
data.push({
|
|
data: rawData[keys[i]],
|
|
yaxis: 1,
|
|
label: keys[i]
|
|
});
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
var socket = io.connect({
|
|
reconnect: true,
|
|
reconnectDelay: 1000,
|
|
reconnectionAttempts: 10
|
|
});
|
|
|
|
var mojangServicesUpdater;
|
|
var sortServersTask;
|
|
|
|
var historyPlot;
|
|
var historyData;
|
|
|
|
socket.on('connect', function() {
|
|
$('#tagline-text').text('Loading...');
|
|
});
|
|
|
|
socket.on('disconnect', function() {
|
|
if (mojangServicesUpdater) {
|
|
clearInterval(mojangServicesUpdater);
|
|
}
|
|
|
|
if (sortServersTask) {
|
|
clearInterval(sortServersTask);
|
|
}
|
|
|
|
$('#tagline').attr('class', 'status-offline');
|
|
$('#tagline-text').text('Disconnected! Refresh?');
|
|
|
|
lastPlayerEntries = {};
|
|
lastLatencyEntries = {};
|
|
graphs = {};
|
|
|
|
$('#server-container').html('');
|
|
$('#quick-jump-container').html('');
|
|
});
|
|
|
|
socket.on('historyGraph', function(rawData) {
|
|
historyData = rawData;
|
|
|
|
historyPlot = $.plot('#big-graph', convertGraphData(rawData), bigChartOptions);
|
|
|
|
$('#big-graph').bind('plothover', handlePlotHover);
|
|
});
|
|
|
|
socket.on('updateHistoryGraph', function(rawData) {
|
|
if (historyData[rawData.ip].length > 24 * 60) {
|
|
historyData[rawData.ip].shift();
|
|
}
|
|
|
|
historyData[rawData.ip].push([rawData.timestamp, rawData.players]);
|
|
|
|
historyPlot.setData(convertGraphData(historyData));
|
|
historyPlot.setupGrid();
|
|
|
|
historyPlot.draw();
|
|
});
|
|
|
|
socket.on('add', function(servers) {
|
|
for (var i = 0; i < servers.length; i++) {
|
|
var history = servers[i];
|
|
var listing = [];
|
|
|
|
for (var x = 0; x < history.length; x++) {
|
|
var point = history[x];
|
|
|
|
if (point.result) {
|
|
listing.push([point.timestamp, point.result.players.online]);
|
|
} else if (point.error) {
|
|
listing.push([point.timestamp, 0]);
|
|
}
|
|
}
|
|
|
|
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 id="server-' + safeName(info.name) + '" class="column" style="width: 80px;">\
|
|
<img id="favicon_' + safeName(info.name) + '">\
|
|
<br />\
|
|
<p class="text-center-align rank" id="ranking_' + safeName(info.name) + '"></p>\
|
|
</div>\
|
|
<div class="column" style="width: 280px;">\
|
|
<h3>' + info.name + ' <span class="type">' + info.type + '</span></h3>\
|
|
<span class="color-gray">' + info.ip + '</span>\
|
|
<br />\
|
|
<span id="status_' + safeName(info.name) + '">Waiting</span>\
|
|
</div>\
|
|
<div class="column" style="float: right;">\
|
|
<div class="chart" id="chart_' + safeName(info.name) + '"></div>\
|
|
</div>'
|
|
}).appendTo("#server-container");
|
|
|
|
var favicon = MISSING_FAVICON_BASE64;
|
|
|
|
if (lastEntry.result && lastEntry.result.favicon) {
|
|
favicon = lastEntry.result.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) + '" title="' + info.name + '" alt="' + info.name + '" class="quick-jump-icon" src="' + favicon + '">');
|
|
|
|
graphs[lastEntry.info.name] = {
|
|
listing: listing,
|
|
plot: $.plot('#chart_' + safeName(info.name), [listing], smallChartOptions)
|
|
};
|
|
|
|
updateServerStatus(lastEntry);
|
|
|
|
$('#chart_' + safeName(info.name)).bind('plothover', handlePlotHover);
|
|
}
|
|
|
|
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);
|
|
$('#quick-jump-' + safeName(update.info.name)).attr('src', update.result.favicon);
|
|
}
|
|
|
|
var graph = graphs[update.info.name];
|
|
|
|
updateServerStatus(update);
|
|
|
|
if (update.result) {
|
|
graph.listing.push([update.info.timestamp, update.result ? update.result.players.online : 0]);
|
|
|
|
if (graph.listing.length > 72) {
|
|
graph.listing.shift();
|
|
}
|
|
|
|
graph.plot.setData([graph.listing]);
|
|
graph.plot.setupGrid();
|
|
|
|
graph.plot.draw();
|
|
}
|
|
});
|
|
|
|
socket.on('updateMojangServices', function(data) {
|
|
// Store the update and force an update.
|
|
lastMojangServiceUpdate = data;
|
|
|
|
updateMojangServices();
|
|
});
|
|
|
|
// Start any special updating tasks.
|
|
mojangServicesUpdater = setInterval(function() {
|
|
updateMojangServices();
|
|
}, 1000);
|
|
|
|
sortServersTask = setInterval(function() {
|
|
sortServers();
|
|
}, 10 * 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);
|
|
});
|
|
});
|