diff --git a/pdb-ui/src/main/resources/resources/css/invaders.css b/pdb-ui/src/main/resources/resources/css/invaders.css new file mode 100644 index 0000000..1f3c64f --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/pdb-ui/src/main/resources/resources/img/city_silhouette.png b/pdb-ui/src/main/resources/resources/img/city_silhouette.png new file mode 100644 index 0000000..5354da5 Binary files /dev/null and b/pdb-ui/src/main/resources/resources/img/city_silhouette.png differ diff --git a/pdb-ui/src/main/resources/resources/js/invaders.js b/pdb-ui/src/main/resources/resources/js/invaders.js new file mode 100644 index 0000000..f9fc748 --- /dev/null +++ b/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('
0
Game Over
'); + $('#'+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('
'); + + $("#"+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; +} diff --git a/pdb-ui/src/main/resources/resources/js/search.js b/pdb-ui/src/main/resources/resources/js/search.js index d4c384e..1855032 100644 --- a/pdb-ui/src/main/resources/resources/js/search.js +++ b/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("
"); + //$('#result-view').html("
"); + $('#result-view').html(""); + startInvaders(); } function plot(event){ @@ -273,11 +278,9 @@ function plot(event){ var success = function(response){ - $('#result-view').html(''); }; 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) { diff --git a/pdb-ui/src/main/resources/templates/main.html b/pdb-ui/src/main/resources/templates/main.html index cdf41a3..50a3c9a 100644 --- a/pdb-ui/src/main/resources/templates/main.html +++ b/pdb-ui/src/main/resources/templates/main.html @@ -5,11 +5,13 @@ + +