replace spinner with a little game

pdb-ui/src/main/resources/resources/css/invaders.css

@@ -0,0 +1,34 @@
+.invader {
+	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAYAAACTQC2+AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kKGRAxBENShygAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAbUlEQVRIx9WVQQrAMAgEM6X///L2FCihYvRg7F416LCsQdKo0DWKZA4CBGzjev1lRHgezS0lkan3IYr485ZFdo5oJZkbWoRWfSWrJ8p6suvZucsgCS8THsHX+zKiO5uLaO763bpobvoS/e6HfQBzIE0PhAsDxgAAAABJRU5ErkJggg==);
+	width: 26px;
+	height: 20px;
+}
+
+#invaders_area {
+	position:fixed;
+	display:none;
+	z-index: 9999;
+	cursor:crosshair;
+	background: url("../img/city_silhouette.png");
+	background-repeat-y: no-repeat;
+    background-position-y: bottom;
+}
+
+#invaders_points {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#invaders_game_over {
+	display: none;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+.invader_notify {
+	border: solid 2px black;
+	padding: 1em;
+	background: #ccc;
+	z-index: 9999
+}

pdb-ui/src/main/resources/resources/js/invaders.js

@@ -0,0 +1,130 @@
+
+var invaders_game_move;
+var invaders_game_new;
+var invaders_max = 50;
+var invaders_count = 0;
+var invaders_stepSize = 5;
+var invaders_margin = 30;
+var invaders_city_height = 75;
+var invaders_pause = true;
+var invaders_parentDivId = 'invaders_area';
+var invaders_points_kill = 10;
+var invaders_points_lost = -50;
+var invaders_game_over = false;
+
+function initInvaders(parentDivId) {
+
+	// create a copy of the parentDiv
+	// and set it at the exact same position
+	var parent = $('#'+parentDivId);
+    var height = parent.height();
+    var width = parent.width();
+    $('body').append('<div id="'+invaders_parentDivId+'"><div id="invaders_points">0</div><div id="invaders_game_over"><div class="invader_notify">Game Over</div></div></div>');
+    $('#'+invaders_parentDivId).offset({ top: parent.offset().top, left: parent.offset().left})
+    $('#'+invaders_parentDivId).height(parent.height());
+    $('#'+invaders_parentDivId).width(parent.width());
+}
+
+function gameOver() {
+	invaders_game_over = true;
+	clearIntervals();
+	$('.invader').off();
+	$('#invaders_game_over').show().css('display', 'flex');
+}
+
+function pauseInvaders() {
+	$('#'+invaders_parentDivId).hide();
+	clearIntervals();
+}
+
+function clearIntervals() {
+	clearInterval(invaders_game_move);
+	clearInterval(invaders_game_new);
+}
+
+function startInvaders() {
+	if (!invaders_game_over) {
+		if (invaders_count == 0) {
+			addInvader(invaders_parentDivId);
+		}
+		$('#'+invaders_parentDivId).show();
+	
+		invaders_game_move=window.setInterval("moveRandomly('"+invaders_parentDivId+"')",400);
+		invaders_game_new=window.setInterval("addInvader()", 1000);
+	}
+}
+
+
+function addInvader()
+{
+    var id = 'invader_' + invaders_count++;
+    var parent = $('#'+invaders_parentDivId);
+    var height = parent.height();
+    var width = parent.width();
+    var top =  10; // start at the top
+    var left = invaders_margin + random(width-2*invaders_margin); // spread horizontally, but keep margin to left and right
+    
+    parent.append('<div id="'+id+'" class="invader" style="position:absolute;top:'+top+'px;left:'+left+'px;"/>');
+
+    $("#"+id).click(function()
+    {
+    	addPoints(invaders_points_kill);
+        $(this).remove();
+    });
+}
+
+function addPoints(increment){
+	var currentPoints = $('#invaders_points').text();
+	var newPoints = parseInt(currentPoints) + increment;
+	if (newPoints >= 0) {
+		$('#invaders_points').text(newPoints);
+	} else {
+		gameOver();
+	}
+}
+
+function moveRandomly(parentDivId)
+{
+	$('.invader').each(function(index) {
+		var invader = $(this);
+	    var top = invader.position().top;
+	    var left = invader.position().left;
+	
+		var parent = $('#'+parentDivId);
+		var minTop = parent.position().top;
+	    var maxTop = parent.height();
+	    var width = parent.width();
+	
+		var newTop = top +  invaders_stepSize;
+		var newLeft = left + moveIncrement(0, width, left);
+		
+		if (newTop > (maxTop - invaders_city_height)) {
+			// reached the city, you are loosing points
+			addPoints(invaders_points_lost);
+			$(this).remove();
+		}
+		else {
+		    invader.css({
+		            "top" : (newTop) + "px",
+		            "left": (newLeft)  + "px"
+		    });
+	    }
+	});
+}
+
+function moveIncrement(minValue, maxValue, currentValue)
+{
+	if (currentValue < minValue+ invaders_margin) {
+		return invaders_stepSize;
+	}
+	if (currentValue + invaders_margin > maxValue) {
+		return -invaders_stepSize;
+	}
+	return random(2) == 0 ? invaders_stepSize : -invaders_stepSize;
+}
+
+function random(modulus)
+{
+        var value = Math.round(((Math.random() *1000 + Math.random())*1000 + Math.random())*1000 + Math.random() );
+        return value % modulus;
+}

pdb-ui/src/main/resources/resources/js/search.js

@@ -41,6 +41,9 @@ $(document).ready(function(){
 			return result;
 		}
 	});
+	
+	initInvaders('result-view');
+	startInvaders();
 });
 
 function zoomIn() 
@@ -249,7 +252,9 @@ function initSearchGroupBy(selector, response)
 
 function showLoadingIcon()
 {
-	$('#result-view').html("<div class='center'><div class='uil-cube-css' style='-webkit-transform:scale(0.41)'><div /><div></div><div></div><div></div></div></div>");
+	//$('#result-view').html("<div class='center'><div class='uil-cube-css' style='-webkit-transform:scale(0.41)'><div /><div></div><div></div><div></div></div></div>");
+	$('#result-view').html("");
+	startInvaders();
 }
 
 function plot(event){
@@ -273,11 +278,9 @@ function plot(event){
 	
 	
 	var success = function(response){
-			
 		$('#result-view').html('<img src=\"'+response.imageUrls+'" />');
 	};
 	var error = function(e) {
-		
 		if (e.status == 404){
 			$('#result-view').text("No data points found.");
 		}
@@ -313,7 +316,8 @@ function postJson(url, requestData, successCallback, errorCallback) {
 			contentType: 'application/json'
 		})
 		.done(successCallback)
-		.fail(errorCallback);
+		.fail(errorCallback)
+		.always(pauseInvaders);
 }
 
 function getJson(url, requestData, successCallback, errorCallback) {

pdb-ui/src/main/resources/templates/main.html

@@ -5,11 +5,13 @@
 <script type="text/javascript" src="js/search.js"></script>
 <script type="text/javascript" src="js/autocomplete.js"></script>
 <script type="text/javascript" src="js/date.js"></script>
+<script type="text/javascript" src="js/invaders.js"></script>
 <link rel="stylesheet" type="text/css" href="css/typography.css">
 <link rel="stylesheet" type="text/css" href="css/design.css">
 <link rel="stylesheet" type="text/css" href="css/loading.css">
 <link rel="stylesheet" type="text/css" href="css/autocomplete.min.css">
 <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
+<link rel="stylesheet" type="text/css" href="css/invaders.css">
 </head>
 <body>