use the invaders game as 'loading screen'

pdb-js/src/app/visualization-page/visualization-page.component.ts

@@ -107,16 +107,19 @@ export class VisualizationPageComponent implements OnInit {
     
     that.plotView.imageUrl = '';
     that.galleryView.show=false;
+    document.dispatchEvent(new Event("invadersStart", {}));
     
     const request = this.createPlotRequest();
     
     this.plotService.sendPlotRequest(request).subscribe(function(plotResponse){
       console.log("response: " + JSON.stringify(plotResponse));
       that.plotView.imageUrl = "http://"+window.location.hostname+':8080/'+plotResponse.imageUrl;
+      document.dispatchEvent(new Event("invadersPause", {}));
     },
     error => {
       that.plotView.imageUrl = '';
       that.showError(error.error.message);
+      document.dispatchEvent(new Event("invadersPause", {}));
     });
   }
   

pdb-js/src/assets/css/invaders.css

@@ -0,0 +1,30 @@
+.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: repeat-x;
+    background-position-y: bottom;
+}
+
+
+#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;
+	cursor:pointer;
+}

pdb-js/src/assets/js/invaders.js

@@ -0,0 +1,153 @@
+
+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_kills = 0;
+var invaders_points = 0;
+var invaders_points_kill = 10;
+var invaders_points_lost = -50;
+var invaders_game_over = false;
+var invaders_loop_count = 0;
+
+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">Points: 0</div><div id="invaders_kills">Kills: 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());
+    
+    $('.invader_notify').click(function() {
+    	// restart the game
+    	$('#'+invaders_parentDivId).remove();
+    	initInvaders(parentDivId);
+    	invaders_game_over = false;
+    	invaders_kills = 0;
+		invaders_points = 0;
+		
+    	startInvaders();
+    });
+}
+
+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() {
+	
+	$('#'+invaders_parentDivId).show();
+
+	if (!invaders_game_over) {
+		if (invaders_count == 0) {
+			addInvader(invaders_parentDivId);
+		}
+	
+		clearIntervals();
+		invaders_game_move=window.setInterval("moveRandomly('"+invaders_parentDivId+"')",100);
+		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);
+    	invaders_kills++;
+    	$('#invaders_kills').text('Kills: ' + invaders_kills);
+        $(this).remove();
+    });
+}
+
+function addPoints(increment){
+	invaders_points += increment;
+	$('#invaders_points').text('Points: ' + invaders_points);
+	
+	if (invaders_points < 0) {
+		gameOver();
+	}
+}
+
+function moveRandomly(parentDivId)
+{
+	invaders_loop_count++;
+	$('.invader').each(function(index) {
+		var invader = $(this);
+		var invaderNumber = parseInt(invader.attr('id').replace(/^\D+/g, ''))
+		if (invaderNumber % 5 == invaders_loop_count % 5)
+		{
+		    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-js/src/index.html

@@ -10,7 +10,9 @@
   <script type="text/javascript" src="/assets/js/jquery-3.4.1.min.js"></script>
   <script type="text/javascript" src="/assets/js/moment-2.24.0.min.js"></script>
   <script type="text/javascript" src="/assets/js/daterangepicker-3.0.5.js"></script>
+  <script type="text/javascript" src="/assets/js/invaders.js"></script>
   <link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker-3.0.5.css" />
+  <link rel="stylesheet" type="text/css" href="/assets/css/invaders.css" />
 </head>
 <body>
   <app-root></app-root>
@@ -42,6 +44,15 @@
               'Last Year': [moment().subtract(1, 'year').startOf('year'),moment().subtract(1, 'year').endOf('year')],
           },
         });
+        
+        
+        initInvaders('results');
+        document.addEventListener("invadersPause", function(event) {
+          pauseInvaders();
+        });
+        document.addEventListener("invadersStart", function(event) {
+          startInvaders();
+        });
     });
   </script>
 </body>