Tweak design, numerous fixes

This commit is contained in:
Cryptkeeper 2015-11-09 01:03:03 -06:00
parent e310891e8d
commit 56233745e0
7 changed files with 114 additions and 19 deletions

5
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.
Deploy to actual website.
Add new API.

@ -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 {

@ -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>

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
},
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);
});

@ -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": {

@ -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));