Update game

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

@@ -50,6 +50,10 @@ angular.module('Interactive.game.tapdance.game', [
         controller: function($scope, $element, $attrs, $document, $window) {
             var stage = new PIXI.Container();
             var graphics = new PIXI.Graphics();
+            var runtime = game.played === 0 ? 5000 : 10000;
+            var loader_speed = game.played === 0 ? 0.9 : 0.45;
+
+            game.clicks = 0;
 
             var stage_objects = {
                 bg_white: PIXI.Sprite.fromImage('/assets/jeans_bg_white.png'),
@@ -71,7 +75,7 @@ angular.module('Interactive.game.tapdance.game', [
 
                 stage_objects.loader.y = 0;
                 stage_objects.loader.x = 0;
-                stage_objects.loader.height = 21;
+                stage_objects.loader.height = 17;
                 //stage_objects.water.y = renderer.height / 2;
 
                 stage.addChild(stage_objects.bg_white);
@@ -88,12 +92,17 @@ angular.module('Interactive.game.tapdance.game', [
                 return renderer;
             };
 
+
             var animate = function()  {
                 if ($scope.game) {
+                    // dont move it too far
+                    if (stage_objects.water.position.y >= -50) {
                         stage_objects.water.position.y -= 0.2;
-                    stage_objects.loader.position.x += 0.55;
+                    }
+
+                    stage_objects.loader.position.x -= loader_speed;
 
-                    if((Date.now() - $scope.start_time) > 10000 ) {
+                        if((Date.now() - $scope.start_time) > runtime) {
                         $scope.game = false;
                         $scope.$apply();
 
@@ -116,10 +125,10 @@ angular.module('Interactive.game.tapdance.game', [
             };
 
             $element = $element[0];
-            var game_div = document.getElementsByClassName('container')[0];
 
-            var width = game_div.scrollWidth;
-            var height = 569;
+            var game_div = document.getElementsByClassName('container')[0];
+            var width = 260;
+            var height = 462;
 
             renderer = init(stage, width, height, stage_objects);
             graphics.beginFill();
@@ -132,14 +141,13 @@ angular.module('Interactive.game.tapdance.game', [
             graphics.interactive = true;
 
             var buttonsClick = function(event) {
-                var inc = stage_objects.water.position <= 0 ? 0 : 5;
+                var inc = stage_objects.water.position <= 0 ? 0 : 3;
                 stage_objects.water.position.y += inc;
-                game.clicks += 2;
+                game.clicks += 1;
             };
 
             graphics.on('mousedown', buttonsClick);
             graphics.on('touchstart', buttonsClick);
-
             stage.addChild(graphics);
 
             animate();

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

@@ -2,8 +2,10 @@
     <img ng-show='trial' class="bg-image" src="/assets/jeans_bg.jpg" alt='bg'/>
     <div ng-show='trial' class="popup gold">
         <h1 class="text-center">TRYOUT</h1>
+        <div class="popup-content">
             <p class="text-center">Before you start dancing</p>
             <p class="text-center">try out how it's done</p>
+        </div>
 
         <div class="button-modal button-go">
             <a ng-click="start_button.click($event)" class="button">LET'S GO</a>
@@ -13,8 +15,10 @@
     <img ng-show='play' class="bg-image" src="/assets/jeans_bg.jpg" alt='bg'/>
     <div ng-show='play' class="popup gold">
         <h1 class="text-center">TAP DANCE</h1>
+        <div class="popup-content">
             <p class="text-center">Now it's time to show your</p>
             <p class="text-center">moves and win some points</p>
+        </div>
 
         <div class="button-modal button-go">
             <a  ng-click="start_button.click($event)"

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

@@ -2,8 +2,10 @@
     <img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
     <div class="popup white">
         <h1 class="text-center">TAP DANCE</h1>
+        <div class="popup-content">
             <p class="text-center">Help your conscience</p>
             <p class="text-center">and save water</p>
+        </div>
 
         <div class="button-modal button-play">
             <a ui-sref='game-tapdance-how2play' class="button">PLAY NOW</a>

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

@@ -26,6 +26,7 @@ angular.module('Interactive.game.tapdance.info', [
     $scope.info_popup.click = function(event) {
         $scope.show_info = false;
         $scope.show_bg = true;
+
         setTimeout(function() {
             $scope.show_bye = true;
             $scope.$apply();

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

@@ -5,25 +5,25 @@
             <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> In 2014 H&M launched its first Conscious Denim collection that on
+            average uses 56% less water and 58% less energy
+            than comparable denim.
             </p>
         </div>
     </div>
     <img ng-show="show_bg" class="bg-image" src="/assets/bg_better.jpg" alt='bg'/>
-    <div ng-show="show_bye" ng-click="bye_button.click($event)" class="popup-info" >
+    <div ng-show="show_bye" ng-click="bye_button.click($event)" class="see-later popup-info" >
         <div class="popup-info-header">
             <h1>SEE YOU LATER</h1>
         </div>
         <div class="popup-info-content">
-            <p> You helped your conscience and it now lives in a greener
-            environment.Tomorrow you will have anotherchance to improve it even
+            <p>You helped your conscience and it now lives in a greener
+            environment.Tomorrow you will have another chance to improve it even
             more and get a happier conscience.
             </p>
 
-            <div class="">
-                <a class="button">BYE BYE</a>
+            <div class="button-modal">
+                <a ui-sref='game-tapdance' class="button">BYE BYE</a>
             </div>
         </div>
     </div>

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

@@ -21,9 +21,28 @@ angular.module('Interactive.game.tapdance.result', [
     );
 })
 
-.controller( 'resultCtrl', function IndexController($scope, game) {
+.controller( 'resultCtrl', function IndexController($scope, game, $state) {
+    var transition_time = Date.now();
+    $scope.result_popup = {};
+
+    var result_info = {
+        0: "",
+        3: "You didn't use that much water in the production of your jeans, which saved some natural resources.",
+        5: "You didn't use a lot of water in the production of your jeans, which saved some natural resources.",
+        7: "You almost didn't use any water in the production of your jeans, which saved a lot of natural resources.",
+        10: "You didn't use any water in the production of your jeans, which saved a lot of natural resources."
+    };
+
+
+    $scope.result_popup.click = function(event) {
+        // may only transition after 3seconds
+        if ((Date.now() - transition_time) > 3000) {
+            $state.go('game-tapdance-info');
+        }
+    };
+
     var points = [0, 3, 5, 7, 10];
-    var max_clicks = 600;
+    var max_clicks = 160;
     var clicks = game.clicks;
 
     // cap it to max clicks
@@ -31,10 +50,9 @@ angular.module('Interactive.game.tapdance.result', [
 
     var ratio = points.length / (max_clicks / calc_clicks);
     var result = points[Math.ceil(ratio) - 1];
-
-    console.log(clicks);
-    console.log(ratio);
+    result = 3;
 
     $scope.points = result;
     $scope.clicks = clicks;
+    $scope.result_info = result_info[result];
 });

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

 <div class="game-background">
     <img class="bg-image" src="/assets/bg_tapdance_plain.jpg" alt='bg'/>
-    <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>
+    <a ng-click="result_popup.click($event)">
+        <img class="popup-image" src="/assets/result_overlay.png" alt='bg'/>
+    </a>
+    <div class="popup-image-content">
+        <h1 class="points">+ <span class="number">{{points}}</span> POINTS</span></h1>
+        <p>{{result_info}} </p>
     <div>
 </div>

src/index.html

@@ -4,9 +4,6 @@
     <title ng-bind="pageTitle"></title>
     <meta name="viewport" content="width=device-width, minimal-ui, initial-scale=1, maximum-scale=1, user-scalable=no">
 
-    <!-- font awesome from BootstrapCDN -->
-    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
-
     <!-- compiled CSS --><% styles.forEach( function ( file ) { %>
     <link rel="stylesheet" type="text/css" href="<%= file %>" /><% }); %>
 

src/less/main.less

@@ -20,7 +20,12 @@
 
 @import 'variables.less';
 
-@container-width: 320px;
+@container-width: 260px;
+@popup-width: @container-width - 20px;
+
+p {
+    margin: 0 !important;
+}
 
 * {
     margin: 0;
@@ -83,56 +88,6 @@ h2 {
   color: #666;
 }
 
-
-/**
- * Navigation
- */
-
-.navbar {
-  margin-top: 20px;
-  
-  small {
-    font-size: 60%;
-  }
-}
-
-
-/**
- * Footer
- */
-
-.footer {
-  margin-top: 80px;
-
-  .footer-inner {
-    padding: 40px 0;
-    border-top: 1px solid #DDD;
-  }
-
-  .social {
-    float: right;
-    margin: 0;
-    list-style: none;
-
-    li {
-      float: left;
-      margin-left: 20px;
-
-      a, a:visited {
-        color: @gray-light;
-        text-decoration: none;
-        font-size: 40px;
-        .transition( 250ms ease-in-out );
-
-        &:hover {
-          color: @gray;
-        }
-      }
-    }
-  }
-}
-
-
 /**
  * Now that all app-wide styles have been applied, we can load the styles for
  * all the submodules and components we are using. 
@@ -155,6 +110,7 @@ h2 {
 }
 
 .container {
+
 }
 
 .game-background {
@@ -164,7 +120,7 @@ h2 {
 img.bg-image {
     position: absolute;
     left: 0;
-    width: 320px;
+    width: @container-width;
     z-index: -1;
 }
 
@@ -182,7 +138,7 @@ img.bg-image {
     padding: 0.5em 1em 0.5em 1em;
     position: relative;
     top: 80px;
-    width: 250px;
+    width: @popup-width
 }
 
 
@@ -191,13 +147,22 @@ img.bg-image {
     font-size: 2.0em;
 }
 
+.popup p {
+    font-weight: 500;
+}
+
+
 .gold {
-    -moz-border-radius: 30px;
-    -webkit-border-radius: 30px;
+    -webkit-border-top-left-radius: 20px;
+    -webkit-border-top-right-radius: 20px;
+    -moz-border-radius-topleft: 20px;
+    -moz-border-radius-topright: 20px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    border-radius: 20px;
     background: #e7d878;
-    border-radius: 30px;
-
     color: white;
+    padding: 1em;
 }
 
 .gold a.button {
@@ -205,20 +170,41 @@ img.bg-image {
 }
 
 .button-modal {
-    margin: 3em 0em 1.6em 0em;
+    margin: 1.8em 0em 1em 0em;
 }
 
 .popup a.button {
     margin-top: 2em;
     margin-bottom: 2em;
-    padding: 0.3em 1em 0.3em 1em;
+    padding: 0.4em 1em 0.3em 1em;
+    color: white;
+    font-weight: 600;
+}
+
+.popup-image-content {
+    top: 150px;
+    margin-left: auto;
+    margin-right: auto;
+    position: absolute;
+    left: 13%;
+}
+
+.popup-image-content p {
+    color: white;
+    margin-top: 1.3em;
+    width: 191px;
+    position: relative;
+    font-family: Helvetica;
+    font-size: 1em;
+    font-weight: 600;
+    line-height: 1.3em;
 }
 
 .popup-info {
     margin-left: auto;
     margin-right: auto;
     padding: 1em 1em 0.3em 1em;
-    top: 55px;
+    top: 40px;
     position: relative;
     width: @container-width - 20px;
 }
@@ -231,55 +217,91 @@ img.bg-image {
     font-weight: 600;
 }
 
+.see-later {
+    top: 25px;
+}
+
+.see-later .popup-info-header h1 {
+    font-size: 1.7em;
+}
+
+.see-later .popup-info-content {
+    font-size: 0.9em;
+    padding-bottom: 1em;
+}
+
+.see-later .popup-info-content p {
+    padding-bottom: 0.5em;
+}
+
+
 .popup-info-header h1 {
     background-color: #d0b745;
     color: white;
-    font-size: 1.9em;
+    font-size: 1.8em;
     font-weight: 900;
     line-height: 1em;
     margin: 0;
+    padding: 0.8em 0.2em 0.5em 0.2em;
 
-    padding: 0.8em 0.2em 0.2em 0.2em;
-
-    -webkit-border-top-left-radius: 30px;
-    -webkit-border-top-right-radius: 30px;
-    -moz-border-radius-topleft: 30px;
-    -moz-border-radius-topright: 30px;
+    -webkit-border-top-left-radius: 20px;
+    -webkit-border-top-right-radius: 20px;
+    -moz-border-radius-topleft: 20px;
+    -moz-border-radius-topright: 20px;
 
-    border-top-left-radius: 30px;
-    border-top-right-radius: 30px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
 }
 
 .popup-info-content {
-    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;
-    padding: 1em;
-    font-size: 1.1em;
-}
+    -moz-border-radius-bottomleft: 20px;
+    -moz-border-radius-bottomright: 20px;
+    -webkit-border-bottom-left-radius: 20px;
+    -webkit-border-bottom-right-radius: 20px;
 
+    background: #e7d878;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    color: white;
+    font-size: 1em;
+    font-weight: 600;
+    line-height: 1.2em;
 
+    padding: 1em 1em 1.2em 1em;
+}
 
 .white {
-    -moz-border-radius: 30px;
-    -webkit-border-radius: 30px;
+    -webkit-border-bottom-right-radius: 20px;
+    -webkit-border-bottom-left-radius: 20px;
+    -moz-border-radius-bottomright: 20px;
+    -moz-border-radius-bottomleft: 20px;
+    border-bottom-right-radius: 20px;
+    border-bottom-left-radius: 20px;
+    border-radius: 20px;
     background: white;
-    border-radius: 30px;
     color: #d0b745;
+    padding: 1em;
+}
+
+.popup-content {
+    padding: 0.5em;
+}
+
+.popup-content p {
+    line-height: 1.3em;
 }
 
-.white h1 {
-    font-weight: bold;
+.white h1, .popup h1 {
+    font-weight: 600;
+    margin-bottom: 0;
+    margin-top: 0.2em;
+    font-size: 2em;
 }
 
 .white .button {
     background-color: #e7d878;
     color: white;
+    font-weight: 600;
 }
 
 @media only screen
@@ -297,17 +319,17 @@ canvas.tapdance {
     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;
+    font-size: 1.3em;
+    font-weight: 500;
+    margin-top: 0.5em;
+    margin-bottom: 1.5em;
+
 }
 
 span.number {
     font-weight: 900;
+    font-size: 1.2em;
 }

src/less/variables.less

@@ -6,6 +6,3 @@
 /**
  * Typography-related.
  */
-
-@sansFontFamily: 'Roboto', sans-serif;
-