Add loadbar

src/app/game/tapdance/tapdance-game.js

@@ -39,7 +39,7 @@ angular.module('Interactive.game.tapdance.game', [
             var game_div = document.getElementsByClassName('game-background')[0];
 
             var width = game_div.scrollWidth;
-           var height = 600;
+            var height = 660;
 
             console.log(width, height);
 
@@ -51,21 +51,37 @@ angular.module('Interactive.game.tapdance.game', [
                                                     {view: $element,
                                                     transparent: true});
 
+            var bg_white = PIXI.Sprite.fromImage('/assets/jeans_bg_white.png');
             var jeans = PIXI.Sprite.fromImage('/assets/jeans_plane.png');
             var bg = PIXI.Sprite.fromImage('/assets/jeans_cutout.png');
             var water = PIXI.Sprite.fromImage('/assets/water.png');
+            var loader = PIXI.Sprite.fromImage('/assets/loader.png');
+
+            bg_white.width = renderer.width;
+            bg_white.height = renderer.height;
 
             bg.width = renderer.width;
             bg.height = renderer.height;
+
             jeans.width = renderer.width;
             jeans.height = renderer.height;
+
             water.width = renderer.width;
             water.height = renderer.height;
 
+            loader.y = 0;
+            loader.x = 0;
+            loader.height = 24;
+
+            stage.addChild(bg_white);
             stage.addChild(jeans);
+
             stage.addChild(water);
             stage.addChild(bg);
 
+            stage.addChild(bg_white);
+            stage.addChild(loader);
+
             animate();
 
             function animate() {
@@ -74,7 +90,9 @@ angular.module('Interactive.game.tapdance.game', [
 
                 if ($scope.game) {
                     water.position.y += 1;
-                    if (water.position.y > 500) {
+                    loader.position.x += 0.5;
+
+                    if (water.position.y > 520) {
                         $scope.$apply(function() {
                             $scope.game = false;
                             $state.go('game-tapdance-result');

src/app/game/tapdance/tapdance-game.tpl.html

 <div class="game-background">
     <img ng-show='!game' class="bg-image" src="/assets/jeans_bg.jpg" alt='bg'/>
-
     <div ng-show='!game' class="popup gold">
         <h1 class="text-center">TRYOUT</h1>
         <p class="text-center">Before you start dancing</p>
@@ -13,8 +12,6 @@
     </div>
 
     <div ng-show='game' class="game">
-        <img  class="bg-image" src="/assets/jeans_bg_white.jpg" alt='bg'/>
-
         <canvas pixi="stage" class="tapdance" pixi-render="pixiRender"
             pixi-transparent="true" pixi-renderer="'webgl'"></canvas>
     </div>

src/less/main.less

@@ -238,7 +238,6 @@ canvas {
 
 canvas.tapdance {
     position: absolute;
-    top: 20px;
     left: 0px;
     z-index: 2;
 }