Tweak design, numerous fixes
This commit is contained in:
parent
e310891e8d
commit
56233745e0
5
TODO
5
TODO
@ -1,6 +1,5 @@
|
|||||||
Fix icons not updating when a network that was offline comes online.
|
Fix icons not updating when a network that was offline comes online.
|
||||||
Show offline server messages on frontend.
|
|
||||||
Add auto-reconnect to frontend.
|
Add auto-reconnect to frontend.
|
||||||
Add sorting.
|
|
||||||
Finish design.
|
Finish design.
|
||||||
Deploy to actual website.
|
Deploy to actual website.
|
||||||
|
Add new API.
|
@ -34,6 +34,19 @@ body {
|
|||||||
border-bottom: 1px dashed transparent;
|
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 */
|
||||||
#tagline {
|
#tagline {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
@ -66,7 +79,7 @@ body {
|
|||||||
/* Server listing */
|
/* Server listing */
|
||||||
#server-container {
|
#server-container {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
margin: 10px auto;
|
margin: 10px auto 20px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#server-container .server:nth-child(2n) {
|
#server-container .server:nth-child(2n) {
|
||||||
@ -77,6 +90,7 @@ body {
|
|||||||
.server {
|
.server {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.server > .column > img {
|
.server > .column > img {
|
||||||
@ -116,7 +130,7 @@ h3 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.color-red {
|
.color-red {
|
||||||
color: #c0392b;
|
color: #e74c3c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-uppercase {
|
.text-uppercase {
|
||||||
|
@ -17,9 +17,8 @@
|
|||||||
<div id="header">
|
<div id="header">
|
||||||
|
|
||||||
<h1 class="text-uppercase">Minetrack</h1>
|
<h1 class="text-uppercase">Minetrack</h1>
|
||||||
|
<p class="slogan text-uppercase">All your favorite Minecraft servers, right now.</p>
|
||||||
<p class="text-uppercase">All your favorite Minecraft servers, right now.</p>
|
<p class="info text-uppercase">Made with <span style="color: #e74c3c;">♥</span> by <a href="http://cryptkpr.me">Cryptkeeper</a> · Open source'd on <a href="https://github.com/Cryptkeeper/Minetrack">Github</a></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>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 6.7 KiB |
@ -11,7 +11,7 @@ var smallChartOptions = {
|
|||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
yaxis: {
|
yaxis: {
|
||||||
minTickSize: 100,
|
minTickSize: 75,
|
||||||
tickDecimals: 0,
|
tickDecimals: 0,
|
||||||
show: true,
|
show: true,
|
||||||
tickLength: 10,
|
tickLength: 10,
|
||||||
@ -25,7 +25,7 @@ var smallChartOptions = {
|
|||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
hoverable: true,
|
hoverable: true,
|
||||||
color: "#C4C4C4"
|
color: "#696969"
|
||||||
},
|
},
|
||||||
colors: [
|
colors: [
|
||||||
"#E9E581"
|
"#E9E581"
|
||||||
@ -38,6 +38,10 @@ var lastPlayerEntries = {};
|
|||||||
|
|
||||||
// Generate (and set) the HTML that displays Mojang status.
|
// Generate (and set) the HTML that displays Mojang status.
|
||||||
function updateMojangServices() {
|
function updateMojangServices() {
|
||||||
|
if (!lastMojangServiceUpdate) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var keys = Object.keys(lastMojangServiceUpdate);
|
var keys = Object.keys(lastMojangServiceUpdate);
|
||||||
var newStatus = 'Mojang Services: ';
|
var newStatus = 'Mojang Services: ';
|
||||||
var serviceCountByType = {
|
var serviceCountByType = {
|
||||||
@ -75,18 +79,28 @@ function updateMojangServices() {
|
|||||||
$('#tagline-text').text(newStatus);
|
$('#tagline-text').text(newStatus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function findErrorMessage(error) {
|
||||||
|
if (error.description) {
|
||||||
|
return error.description;
|
||||||
|
} else if (error.errno) {
|
||||||
|
return error.errno;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function updateServerStatus(lastEntry) {
|
function updateServerStatus(lastEntry) {
|
||||||
var info = lastEntry.info;
|
var info = lastEntry.info;
|
||||||
var div = $('#status_' + safeName(info.name));
|
var div = $('#status_' + safeName(info.name));
|
||||||
|
|
||||||
if (lastEntry.result) {
|
if (lastEntry.result) {
|
||||||
var result = 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"> (';
|
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) {
|
if (playerDifference >= 0) {
|
||||||
newStatus += '+';
|
newStatus += '+';
|
||||||
@ -111,6 +125,31 @@ function updateServerStatus(lastEntry) {
|
|||||||
lastLatencyEntries[info.name] = result.latency;
|
lastLatencyEntries[info.name] = result.latency;
|
||||||
|
|
||||||
div.html(newStatus);
|
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);
|
clearInterval(mojangServicesUpdater);
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#tagline').attr('class', 'status-connecting');
|
$('#tagline').attr('class', 'status-offline');
|
||||||
$('#tagline-text').text('Attempting reconnnect...');
|
$('#tagline-text').text('Disconnected! Refresh?');
|
||||||
|
|
||||||
lastPlayerEntries = {};
|
lastPlayerEntries = {};
|
||||||
lastLatencyEntries = {};
|
lastLatencyEntries = {};
|
||||||
@ -159,11 +198,21 @@ $(document).ready(function() {
|
|||||||
var lastEntry = history[history.length - 1];
|
var lastEntry = history[history.length - 1];
|
||||||
var info = lastEntry.info;
|
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/>', {
|
$('<div/>', {
|
||||||
id: safeName(info.name),
|
id: safeName(info.name),
|
||||||
class: 'server',
|
class: 'server',
|
||||||
html: '<div class="column" style="width: 80px;">\
|
html: '<div 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 />\
|
||||||
|
<span id="ranking_' + safeName(info.name) + '"></span>\
|
||||||
</div>\
|
</div>\
|
||||||
<div class="column" style="width: 280px;"><h3>' + info.name + '</h3>\
|
<div class="column" style="width: 280px;"><h3>' + info.name + '</h3>\
|
||||||
<span class="color-gray">' + info.ip + '</span>\
|
<span class="color-gray">' + info.ip + '</span>\
|
||||||
@ -183,13 +232,13 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
$('#favicon_' + safeName(info.name)).attr('src', favicon);
|
$('#favicon_' + safeName(info.name)).attr('src', favicon);
|
||||||
|
|
||||||
updateServerStatus(lastEntry);
|
|
||||||
|
|
||||||
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)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
updateServerStatus(lastEntry);
|
||||||
|
|
||||||
$('#chart_' + safeName(info.name)).bind('plothover', function(event, pos, item) {
|
$('#chart_' + safeName(info.name)).bind('plothover', function(event, pos, item) {
|
||||||
if (item) {
|
if (item) {
|
||||||
renderTooltip(item.pageX + 5, item.pageY + 5, getTimestamp(item.datapoint[0] / 1000) + '\
|
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) {
|
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];
|
var graph = graphs[update.info.name];
|
||||||
|
|
||||||
updateServerStatus(update);
|
updateServerStatus(update);
|
||||||
@ -230,4 +291,8 @@ $(document).ready(function() {
|
|||||||
mojangServicesUpdater = setInterval(function() {
|
mojangServicesUpdater = setInterval(function() {
|
||||||
updateMojangServices();
|
updateMojangServices();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
|
setInterval(function() {
|
||||||
|
sortServers();
|
||||||
|
}, 30 * 1000);
|
||||||
});
|
});
|
12
config.json
12
config.json
@ -86,9 +86,19 @@
|
|||||||
"type": "PC"
|
"type": "PC"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Shock",
|
"name": "Shock Network",
|
||||||
"ip": "play.snw.io",
|
"ip": "play.snw.io",
|
||||||
"type": "PC"
|
"type": "PC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "MCBrawl",
|
||||||
|
"ip": "mcbrawl.com",
|
||||||
|
"type": "PC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "SaicoPvP",
|
||||||
|
"ip": "saicopvp.com",
|
||||||
|
"type": "PC"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"routes": {
|
"routes": {
|
||||||
|
@ -25,7 +25,15 @@ exports.start = function(callback) {
|
|||||||
|
|
||||||
logger.log('info', '%s requested: %s', req.connection.remoteAddress, requestUrl);
|
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];
|
var file = urlMapping[requestUrl];
|
||||||
|
|
||||||
res.setHeader('Content-Type', mime.lookup(file));
|
res.setHeader('Content-Type', mime.lookup(file));
|
||||||
|
Loading…
Reference in New Issue
Block a user