Update app

makefile

@@ -9,7 +9,7 @@ build:
 	docker build -t pixi-game .
 
 run:
-	docker run --rm -ti -p 8282:80 -v $(DIR)/src/:/app/src/ -v $(DIR)/build/:/app/build/ pixi-game
+	docker run --rm -ti -p 8282:80 -v $(DIR)/src/:/app/src/ pixi-game
 
 # inside docker
 install:

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

@@ -72,7 +72,7 @@ angular.module('Interactive.game.tapdance.game', [
                 stage_objects.loader.y = 0;
                 stage_objects.loader.x = 0;
                 stage_objects.loader.height = 21;
-                stage_objects.water.y = renderer.height / 2;
+                //stage_objects.water.y = renderer.height / 2;
 
                 stage.addChild(stage_objects.bg_white);
                 stage.addChild(stage_objects.jeans);
@@ -90,7 +90,7 @@ angular.module('Interactive.game.tapdance.game', [
 
             var animate = function()  {
                 if ($scope.game) {
-                    stage_objects.water.position.y -= 1;
+                    stage_objects.water.position.y -= 0.2;
                     stage_objects.loader.position.x += 0.55;
 
                     if((Date.now() - $scope.start_time) > 10000 ) {
@@ -134,7 +134,7 @@ angular.module('Interactive.game.tapdance.game', [
             var buttonsClick = function(event) {
                 var inc = stage_objects.water.position <= 0 ? 0 : 5;
                 stage_objects.water.position.y += inc;
-                game.clicks += 1;
+                game.clicks += 2;
             };
 
             graphics.on('mousedown', buttonsClick);

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

@@ -21,7 +21,6 @@ angular.module('Interactive.game.tapdance', [
 })
 
 .controller( 'tapdanceCtrl', function IndexController($scope, $modal) {
-    console.log('tapdance_ctrl');
     //$modal.open(
     //    {
     //        templateUrl:'game/tapdance/tapdance-play-modal.tpl.html'

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

+angular.module('Interactive.game.tapdance.info', [
+    'ui.router',
+    'Interactive.game.tapdance.game'
+])
+
+.config(function($stateProvider) {
+    $stateProvider
+        .state('game-tapdance-info', {
+            url: '/tapdance-info',
+            views: {
+                'main': {
+                    controller: 'infoCtrl',
+                    templateUrl: 'game/tapdance/tapdance-info.tpl.html'
+                }
+            },
+
+            data: { pageTitle: 'Tapdance Result' }
+        }
+    );
+})
+
+.controller( 'infoCtrl', function IndexController($scope, game) {
+
+});

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

+<div class="game-background">
+    <img class="bg-image" src="/assets/bg_better.jpg" alt='bg'/>
+    <div class="popup-info">
+        <div class="popup-info-header">
+            <h1 >DID YOU KNOW</h1>
+        </div>
+        <div class="popup-info-content">
+            <p>In 2014 H&M launched its first Conscious Denim collection that
+            on average uses 56% less water and 58% less engery than comparable
+            denim.</p>
+        </div>
+    </div>
+</div>

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

 angular.module('Interactive.game.tapdance.result', [
     'ui.router',
     'ui.bootstrap',
-    'Interactive.game.tapdance.game'
+    'Interactive.game.tapdance.game',
+    'Interactive.game.tapdance.info'
 ])
 
 .config(function($stateProvider) {
@@ -21,5 +22,19 @@ angular.module('Interactive.game.tapdance.result', [
 })
 
 .controller( 'resultCtrl', function IndexController($scope, game) {
-    console.log(game.clicks);
+    var points = [0, 3, 5, 7, 10];
+    var max_clicks = 600;
+    var clicks = game.clicks;
+
+    // cap it to max clicks
+    var calc_clicks = clicks > max_clicks ? max_clicks: clicks;
+
+    var ratio = points.length / (max_clicks / calc_clicks);
+    var result = points[Math.ceil(ratio) - 1];
+
+    console.log(clicks);
+    console.log(ratio);
+
+    $scope.points = result;
+    $scope.clicks = clicks;
 });

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

 <div class="game-background">
     <img class="bg-image" src="/assets/bg_tapdance_plain.jpg" alt='bg'/>
-    <a><img class="popup-image" src="/assets/result_overlay.png" alt='bg'/></a>
+    <div>
+        <h1 class="points">+<span class="number">{{points}}</span> points</span></h1>
+        <a ui-sref="game-tapdance-info"><img class="popup-image" src="/assets/result_overlay.png" alt='bg'/></a>
+        <h1 class="">+<span class="number">{{clicks}}</span></span></h1>
+    <div>
 </div>

src/less/main.less

@@ -172,6 +172,7 @@ img.bg-image {
     width: @container-width;
     margin-left: auto;
     margin-right: auto;
+    z-index: 0;
 }
 
 .popup {
@@ -195,6 +196,7 @@ img.bg-image {
     -webkit-border-radius: 30px;
     background: #e7d878;
     border-radius: 30px;
+
     color: white;
 }
 
@@ -212,6 +214,50 @@ img.bg-image {
     padding: 0.3em 1em 0.3em 1em;
 }
 
+.popup-info {
+    margin-left: auto;
+    margin-right: auto;
+    width: 250px;
+    padding: 1em 1em 0.3em 1em;
+}
+
+.popup-info-content {
+    border-radius: 30px;
+    color: white;
+    background: #e7d878;
+    -webkit-border-bottom-right-radius: 30px;
+    -webkit-border-bottom-left-radius: 30px;
+    -moz-border-radius-bottomright: 30px;
+    -moz-border-radius-bottomleft: 30px;
+    border-bottom-right-radius: 30px;
+    border-bottom-left-radius: 30px;
+    width: 250px;
+    position: relative;
+    top: 80px;
+    margin: 0;
+}
+
+.popup-info-header h1 {
+    background-color: #d0b745;
+    color: white;
+    font-size: 1.9em;
+    font-weight: 900;
+    line-height: 1em;
+
+    position: relative;
+    padding: 1em 1em 0.3em 1em;
+    top: 80px;
+    width: 250px;
+
+    -webkit-border-top-left-radius: 30px;
+    -webkit-border-top-right-radius: 30px;
+    -moz-border-radius-topleft: 30px;
+    -moz-border-radius-topright: 30px;
+
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+}
+
 .white {
     -moz-border-radius: 30px;
     -webkit-border-radius: 30px;
@@ -229,13 +275,13 @@ img.bg-image {
     color: white;
 }
 
-
 @media only screen
 and (min-device-width : 375px)
 and (max-device-width : 667px)
 and (orientation : portrait) { /* STYLES GO HERE */ }
 
 canvas {
+
 }
 
 canvas.tapdance {
@@ -243,3 +289,18 @@ canvas.tapdance {
     left: 0px;
     z-index: 2;
 }
+
+.points {
+    color: white;
+    top: 180px;
+    margin-left: auto;
+    margin-right: auto;
+    position: absolute;
+    width: @container-width;
+    font-size: 2em;
+    font-weight: 100;
+}
+
+span.number {
+    font-weight: 900;
+}