Add new percentage bar feature

assets/css/main.css

@@ -37,12 +37,22 @@ a {
 #header {
     background: #EBEBEB;
     color: #3B3738;
-    padding: 20px 0;
     overflow: auto;
 }
 
+#header .column {
+    display: inline-block;
+    float: left;
+    padding: 20px;
+}
+
+#header .column h1 {
+    margin: -6px 0;
+}
+
 #header .slogan {
     font-size: 20px;
+    text-align: left;
 }
 
 #header .subslogan {
@@ -242,3 +252,22 @@ h3 {
     color: #3498db;
     cursor: pointer;
 }
+
+/* Percentage bar */
+#perc-bar {
+    margin-top: 6px;
+    width: 650px;
+    height: 50px;
+    position: relative;
+}
+
+#perc-bar-text {
+
+}
+
+#perc-bar > .perc-bar-part {
+    height: 100%;
+    display: inline-block;
+    position: absolute;
+
+}

assets/html/index.html

@@ -20,15 +20,21 @@
 
 			<div id="header">
 
-				<div id="column-center">
+				<div class="column">
 
 					<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 class="column" style="float: right;">
+
+					<div id="perc-bar"></div>
+					<div id="perc-bar-text"></div>
+
+				</div>
+
 			</div>
 
 			<div id="tagline" class="status-connecting">

assets/js/site.js

@@ -10,6 +10,8 @@ var isConnected = false;
 var mojangServicesUpdater;
 var sortServersTask;
 
+var currentServerHover;
+
 function updateServerStatus(lastEntry) {
     var info = lastEntry.info;
 
@@ -74,6 +76,8 @@ function updateServerStatus(lastEntry) {
     if (lastEntry.record) {
         $('#record_' + safeName(info.name)).html('Record: ' + formatNumber(lastEntry.record));
     }
+
+    updatePercentageBar();
 }
 
 function sortServers() {
@@ -124,6 +128,86 @@ function sortServers() {
     }
 }
 
+function renderPercentageBarText(server) {
+    var totalPlayers = getCurrentTotalPlayers();
+    var playerCount = lastPlayerEntries[server];
+
+    $('#perc-bar-text').html('<strong>' + server + '</strong><br />' + roundToPoint(playerCount / totalPlayers * 100, 10) + '% of ' + formatNumber(totalPlayers) + ' tracked players.');
+}
+
+function updatePercentageBar() {
+    var keys = Object.keys(lastPlayerEntries);
+
+    keys.sort(function(a, b) {
+        return lastPlayerEntries[a] - lastPlayerEntries[b];
+    });
+
+    var totalPlayers = getCurrentTotalPlayers();
+
+    var parent = $('#perc-bar');
+    var leftPadding = 0;
+
+    for (var i = 0; i < keys.length; i++) {
+        (function(pos, server, length) {
+            var safeNameCopy = safeName(server);
+            var playerCount = lastPlayerEntries[server];
+
+            var div = $('#perc_bar_part_' + safeNameCopy);
+
+            // Setup the base
+            if (!div.length) {
+                $('<div/>', {
+                    id: 'perc_bar_part_' + safeNameCopy,
+                    class: 'perc-bar-part',
+                    html: '',
+                    style: 'background: ' + stringToColor(server) + ';'
+                }).appendTo(parent);
+
+                div = $('#perc_bar_part_' + safeNameCopy);
+
+                div.mouseover(function(e) {
+                    renderPercentageBarText(server);
+
+                    var text = $('#perc-bar-text');
+
+                    text.stop(true, false);
+                    text.slideDown(100);
+
+                    currentServerHover = server;
+                });
+
+                div.mouseout(function(e) {
+                    $('#perc-bar-text').slideUp(100);
+                    currentServerHover = undefined;
+                });
+            }
+
+            // Update our position/width
+            var width = (playerCount / totalPlayers) * parent.width();
+
+            div.css({
+                width: width + 'px',
+                left: leftPadding + 'px',
+                'border-top-left-radius': (pos === 0 ? '2px' : 0),
+                'border-bottom-left-radius': (pos === 0 ? '2px' : 0),
+                'border-top-right-radius': (pos === keys.length - 1 ? '2px' : 0),
+                'border-bottom-right-radius': (pos === keys.length ? '2px' : 0)
+            });
+
+            leftPadding += width;
+        })(i, keys[i], keys.length);
+    }
+
+    if (currentServerHover) renderPercentageBarText(currentServerHover);
+}
+
+function getCurrentTotalPlayers() {
+    var totalPlayers = 0;
+    var keys = Object.keys(lastPlayerEntries);
+    for (var i = 0; i < keys.length; i++) totalPlayers += lastPlayerEntries[keys[i]]
+    return totalPlayers;
+}
+
 function setAllGraphVisibility(visible) {
     if (visible) {
         var keys = Object.keys(hiddenGraphData);
@@ -381,6 +465,7 @@ $(document).ready(function() {
         }
 
         sortServers();
+        updatePercentageBar();
 	});
 
 	socket.on('update', function(update) {

assets/js/util.js

@@ -196,6 +196,10 @@ function stringToColor(base) {
     return '#' + Array(6 - color.length + 1).join('0') + color;
 }
 
+function roundToPoint(val, scale) {
+    return Math.round(val * scale) / scale;
+}
+
 function msToTime(timer) {
 	var milliseconds = timer % 1000;
 	timer = (timer - milliseconds) / 1000;