This commit is contained in:
Cryptkeeper!
2017-03-11 17:44:21 -06:00
committed by GitHub
parent b973968eca
commit 2c4f3e0865
11 changed files with 104 additions and 94 deletions

View File

@ -6,7 +6,7 @@
}
body {
background: #2E2B2C;
background: #212021;
color: #FFF;
font-family: "Open Sans", sans-serif;
font-size: 18px;
@ -27,13 +27,18 @@ a {
min-height: 100%;
}
/* Constants */
#header, #footer, #tagline {
width: 1540px;
margin: 0 auto;
}
/* Header */
#header {
background: #EBEBEB;
color: #3B3738;
padding: 20px 0;
overflow: auto;
margin-top: 44px;
}
#header .slogan {
@ -47,8 +52,8 @@ a {
#header a, #footer a {
text-decoration: none;
color: inherit;
border-bottom: 1px dashed #3B3738;
}
border-bottom: 1px dashed #3B3738;
}
#header a:hover, #footer a:hover {
border-bottom: 1px dashed transparent;
@ -66,13 +71,11 @@ a {
/* Footer */
#footer {
width: 1540px;
font-size: 16px;
text-transform: uppercase;
background: #EBEBEB;
color: #3B3738;
padding: 15px 0;
margin: 0 auto;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
text-align: center;
@ -81,16 +84,9 @@ a {
/* Tagline */
#tagline {
padding: 10px 0;
width: 100%;
z-index: 999999; /* I'm so sorry. */
position: fixed;
left: 0;
top: 0;
}
#tagline-center {
width: 1520px;
margin: 0 auto;
text-align: center;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
/* Colors used by the Mojang service's status bar */
@ -142,10 +138,6 @@ a {
padding-top: 4px;
}
.server > .column > .url {
font-size: 16px;
}
.server > .column > h3 > .type {
padding: 1px 5px;
border-radius: 2px;
@ -154,16 +146,8 @@ a {
margin-bottom: 2px;
}
.server > .column > .versions {
min-height: 23px;
padding-bottom: 1px;
}
.server > .column > .versions > .version {
padding: 1px 5px;
border-radius: 2px;
border: 1px solid #636363;
font-size: 12px;
font-size: 16px;
}
.category-header {
@ -256,4 +240,5 @@ h3 {
.button:hover {
background: #ecf0f1;
color: #3498db;
cursor: pointer;
}

View File

@ -18,29 +18,25 @@
<div id="push">
<div id="tagline" class="status-connecting">
<div id="tagline-center">
<span id="tagline-text" class="text-uppercase">Connecting...</span>
</div>
</div>
<div id="header">
<div id="column-center">
<img src="/images/compass.png" width="28" height="28" style="display: inline-block; margin-right: 5px;">
<h1 style="display: inline-block;" class="text-uppercase">Minetrack</h1>
<p class="subslogan text-uppercase">Watching <span id="stat_totalPlayers">0</span> players on <span id="stat_networks">0</span> networks.</p>
</div>
</div>
<div id="tagline" class="status-connecting">
<span id="tagline-text" class="text-uppercase">Connecting...</span>
</div>
<div id="big-graph"></div>
<div id="big-graph-controls" style="display: none;">
@ -50,7 +46,7 @@
<a onclick="toggleControlsDrawer();">Click to toggle graph controls</a>
</span>
<div id="big-graph-controls-drawer" style="display: none;">
<div id="big-graph-checkboxes"></div>
@ -74,19 +70,14 @@
<div id="footer">
<p>
Made with <span style="color: #e74c3c;">&#9829;</span> by <a href="http://cryptkpr.me">Cryptkeeper</a> &middot; Source code available on <a href="https://github.com/Cryptkeeper/Minetrack">Github</a>
</p>
Made with <span style="color: #e74c3c;">&#9829;</span> by <a href="http://cryptkpr.me">Cryptkeeper</a>. Read the source code on <a href="https://github.com/Cryptkeeper/Minetrack">Github</a>.<br />
*Older records may not be reflected due to tracking behavior.
</div>
<!-- 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/socket.io/1.3.7/socket.io.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<!-- Internal JS assets -->

View File

@ -5,17 +5,6 @@ var historyPlot;
var displayedGraphData;
var hiddenGraphData = [];
var mcVersions = {
'PC': {
4: '1.7.2',
5: '1.7.10',
47: '1.8',
107: '1.9',
210: '1.10',
315: '1.11'
}
};
var isConnected = false;
var mojangServicesUpdater;
@ -31,7 +20,7 @@ function updateServerStatus(lastEntry) {
var versions = '';
for (var i = 0; i < lastEntry.versions.length; i++) {
versions += '<span class="version">' + mcVersions[lastEntry.info.type][lastEntry.versions[i]] + '</span>&nbsp;';
versions += '<span class="version">' + publicConfig.minecraftVersions[lastEntry.info.type][lastEntry.versions[i]] + '</span>&nbsp;';
}
versionDiv.html(versions);
@ -81,6 +70,10 @@ function updateServerStatus(lastEntry) {
$("#stat_totalPlayers").text(formatNumber(totalPlayers));
$("#stat_networks").text(formatNumber(keys.length));
if (lastEntry.record) {
$('#record_' + safeName(info.name)).html('Record: ' + formatNumber(lastEntry.record));
}
}
function sortServers() {
@ -220,7 +213,7 @@ $(document).ready(function() {
socket.on('disconnect', function() {
if (mojangServicesUpdater) clearInterval(mojangServicesUpdater);
if (sortServersTask) clearInterval(sortServersTask);
lastMojangServiceUpdate = undefined;
$('#tagline').attr('class', 'status-offline');
@ -346,22 +339,26 @@ $(document).ready(function() {
lastPlayerEntries[info.name] = lastEntry.result.players.online;
}
var typeString = publicConfig.serverTypesVisible ? '<span class="type">' + info.type + '</span>' : '';
var safeNameCopy = safeName(info.name);
$('<div/>', {
id: safeName(info.name),
id: safeNameCopy,
class: 'server',
html: '<div id="server-' + safeName(info.name) + '" class="column" style="width: 80px;">\
<img id="favicon_' + safeName(info.name) + '">\
html: '<div id="server-' + safeNameCopy + '" class="column" style="width: 80px;">\
<img id="favicon_' + safeNameCopy + '" title="' + info.ip + printPort(info.port) + '">\
<br />\
<p class="text-center-align rank" id="ranking_' + safeName(info.name) + '"></p>\
<p class="text-center-align rank" id="ranking_' + safeNameCopy + '"></p>\
</div>\
<div class="column" style="width: 220px;">\
<h3>' + info.name + '&nbsp;<span class="type">' + info.type + '</span></h3>\
<span class="color-gray url">' + info.ip + printPort(info.port) + '</span>\
<div id="version_' + safeName(info.name) + '" class="versions"><span class="version"></span></div>\
<span id="status_' + safeName(info.name) + '">Waiting</span>\
<h3>' + info.name + '&nbsp;' + typeString + '</h3>\
<span id="status_' + safeNameCopy + '">Waiting</span>\
<div id="version_' + safeNameCopy + '" class="color-gray versions"><span class="version"></span></div>\
<span id="record_' + safeNameCopy + '" class="color-gray"></span>\
</div>\
<div class="column" style="float: right;">\
<div class="chart" id="chart_' + safeName(info.name) + '"></div>\
<div class="chart" id="chart_' + safeNameCopy + '"></div>\
</div>'
}).appendTo("#server-container-" + getServerByIp(info.ip).category);
@ -375,12 +372,12 @@ $(document).ready(function() {
graphs[lastEntry.info.name] = {
listing: listing,
plot: $.plot('#chart_' + safeName(info.name), [listing], smallChartOptions)
plot: $.plot('#chart_' + safeNameCopy, [listing], smallChartOptions)
};
updateServerStatus(lastEntry);
$('#chart_' + safeName(info.name)).bind('plothover', handlePlotHover);
$('#chart_' + safeNameCopy).bind('plothover', handlePlotHover);
}
sortServers();

View File

@ -109,7 +109,8 @@ function updateMojangServices(currentUpdate) {
var entry = lastMojangServiceUpdate[keys[i]];
if (entry.startTime) {
newStatus += entry.name + ' ' + entry.title.toLowerCase() + ' for ' + msToTime((new Date()).getTime() - entry.startTime + ' ');
newStatus += entry.name + ' ' + entry.title.toLowerCase() + ' for ' + msToTime((new Date()).getTime() - entry.startTime);
if (i < keys.length - 1) newStatus += ', ';
}
}
}
@ -218,4 +219,4 @@ function msToTime(timer) {
}
return string;
}
}