Update game - now interactive

bower.json

@@ -7,7 +7,7 @@
     "bootstrap": "~3.1",
     "angular-bootstrap": "~0.10.0",
     "angular-ui-router": "~0.2",
-    "pixi.js": "~2.2.7"
+    "pixi.js": "~3.0.6"
   },
   "dependencies": {}
 }

build.config.js

@@ -67,7 +67,7 @@ module.exports = {
       'vendor/placeholders/angular-placeholders-0.0.1-SNAPSHOT.min.js',
       'vendor/angular-ui-router/release/angular-ui-router.js',
       'vendor/angular-ui-utils/modules/route/route.js',
-      'vendor/pixi.js/bin/pixi.dev.js'
+      'vendor/pixi.js/bin/pixi.js'
     ],
     css: [
     ],

makefile

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

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

+<div class="game-background">
+    <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>
+        <p class="text-center">Before you start dancing</p>
+        <p class="text-center">try out how it's done</p>
+
+        <div class="button-modal button-go">
+            <a  ng-click="start_button.click($event)"
+                class="button">LET'S GO</a>
+        </div>
+    </div>
+
+    <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>
+        <p class="text-center">Now it's time to show your</p>
+        <p class="text-center">moves and win some points</p>
+
+        <div class="button-modal button-go">
+            <a  ng-click="start_button.click($event)"
+                class="button">LET'S GO</a>
+        </div>
+    </div>
+
+    <div ng-show='game' class="game">
+        <canvas pixi="stage" class="tapdance" pixi-render="pixiRender"
+            pixi-transparent="true" pixi-renderer="'webgl'"></canvas>
+    </div>
+</div>

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

@@ -20,89 +20,140 @@ angular.module('Interactive.game.tapdance.game', [
     );
 })
 
-.controller( 'gameCtrl', function IndexController($scope) {
+.controller( 'gameCtrl', function IndexController($scope, game) {
     $scope.start_button = {};
+
     $scope.game = false;
+    $scope.trial = false;
+    $scope.play = false;
+
+    // show trail screen if not played yet.
+    if (game.played === 0) {
+        $scope.trial = true;
+    } else if(game.played === 1) {
+        $scope.trial = false;
+        $scope.play = true;
+    }
 
     $scope.start_button.click = function(event) {
         $scope.game = true;
+        $scope.trial = false;
+        $scope.play = false;
+        $scope.start_time = Date.now();
     };
 })
 
-.directive('pixi', function($parse, $state) {
+.directive('pixi', function($parse, $state, game) {
     return {
         restrict: 'A',
         scope: true,
         controller: function($scope, $element, $attrs, $document, $window) {
-            // init the first element
-            $element = $element[0];
-            var game_div = document.getElementsByClassName('game-background')[0];
+            var stage = new PIXI.Container();
+            var graphics = new PIXI.Graphics();
+
+            var stage_objects = {
+                bg_white: PIXI.Sprite.fromImage('/assets/jeans_bg_white.png'),
+                jeans: PIXI.Sprite.fromImage('/assets/jeans_plane.png'),
+                bg: PIXI.Sprite.fromImage('/assets/jeans_cutout.png'),
+                water: PIXI.Sprite.fromImage('/assets/water.png'),
+                loader: PIXI.Sprite.fromImage('/assets/loader.png')
+            };
+
+            var init = function(stage, width, height, stage_objects) {
+                // create the root of the scene graph
+                var renderer = PIXI.autoDetectRenderer(width, height,
+                                    {view: $element, transparent: true});
+
+                for (var key in stage_objects ) {
+                    stage_objects[key].width = renderer.width;
+                    stage_objects[key].height = renderer.height;
+                }
 
-            var width = game_div.scrollWidth;
-            var height = 660;
+                stage_objects.loader.y = 0;
+                stage_objects.loader.x = 0;
+                stage_objects.loader.height = 21;
+                stage_objects.water.y = renderer.height / 2;
 
-            console.log(width, height);
+                stage.addChild(stage_objects.bg_white);
+                stage.addChild(stage_objects.jeans);
 
-            // TODO: set color from options
-            var stage = new PIXI.Stage();
+                stage.addChild(stage_objects.water);
+                stage_objects.bg.interactive = true;
 
-            // create the root of the scene graph
-            var renderer = PIXI.autoDetectRenderer(width, height,
-                                                    {view: $element,
-                                                    transparent: true});
+                stage.addChild(stage_objects.bg);
 
-            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');
+                stage.addChild(stage_objects.bg_white);
+                stage.addChild(stage_objects.loader);
 
-            bg_white.width = renderer.width;
-            bg_white.height = renderer.height;
+                return renderer;
+            };
 
-            bg.width = renderer.width;
-            bg.height = renderer.height;
+            var animate = function()  {
+                if ($scope.game) {
+                    stage_objects.water.position.y -= 1;
+                    stage_objects.loader.position.x += 0.55;
 
-            jeans.width = renderer.width;
-            jeans.height = renderer.height;
+                    if((Date.now() - $scope.start_time) > 10000 ) {
+                        $scope.game = false;
+                        $scope.$apply();
 
-            water.width = renderer.width;
-            water.height = renderer.height;
+                        if (game.played === 0) {
+                            game.played += 1;
 
-            loader.y = 0;
-            loader.x = 0;
-            loader.height = 24;
+                            setTimeout(function(){
+                                $state.go($state.current, {}, { reload: true
+                                });
+                            }, 10);
+                        } else {
+                            $state.go('game-tapdance-result');
+                        }
+                    }
+                }
 
-            stage.addChild(bg_white);
-            stage.addChild(jeans);
+                renderer.render(stage);
+                setTimeout(function(){ requestAnimationFrame(animate); }, 10);
 
-            stage.addChild(water);
-            stage.addChild(bg);
+            };
 
-            stage.addChild(bg_white);
-            stage.addChild(loader);
+            $element = $element[0];
+            var game_div = document.getElementsByClassName('container')[0];
 
-            animate();
+            var width = game_div.scrollWidth;
+            var height = 569;
 
-            function animate() {
-                renderer.render(stage);
-                requestAnimFrame(animate);
+            renderer = init(stage, width, height, stage_objects);
+            graphics.beginFill();
 
-                if ($scope.game) {
-                    water.position.y += 1;
-                    loader.position.x += 0.5;
+            // set the line style to have a width of 5 and set the color to red
+            graphics.fillAlpha = 0;
 
-                    if (water.position.y > 520) {
-                        $scope.$apply(function() {
-                            $scope.game = false;
-                            $state.go('game-tapdance-result');
-                        });
-                    }
-                }
-            }
+            // draw a rectangle
+            graphics.drawRect(35, height - 150, 250, 100);
+            graphics.interactive = true;
+
+            var buttonsClick = function(event) {
+                var inc = stage_objects.water.position <= 0 ? 0 : 5;
+                stage_objects.water.position.y += inc;
+                game.clicks += 1;
+            };
+
+            graphics.on('mousedown', buttonsClick);
+            graphics.on('touchstart', buttonsClick);
+
+            stage.addChild(graphics);
+
+            animate();
         }
     };
 })
+
+.factory('game', function() {
+    return {
+        played: 0,
+        clicks: 0
+    };
+})
+
 ;
         //var init = function(rendererType, transparent, antialias, element) {
         //    if (!stage) {

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">
+    <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>
         <p class="text-center">Before you start dancing</p>
         <p class="text-center">try out how it's done</p>
@@ -11,6 +11,18 @@
         </div>
     </div>
 
+    <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>
+        <p class="text-center">Now it's time to show your</p>
+        <p class="text-center">moves and win some points</p>
+
+        <div class="button-modal button-go">
+            <a  ng-click="start_button.click($event)"
+                class="button">LET'S GO</a>
+        </div>
+    </div>
+
     <div ng-show='game' class="game">
         <canvas pixi="stage" class="tapdance" pixi-render="pixiRender"
             pixi-transparent="true" pixi-renderer="'webgl'"></canvas>

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

 <div class="game-background">
-    <img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
-    <a ui-sref='game-tapdance-game'><img class="popup-image" src="/assets/how2play.png" alt='bg'/>
-    </a>
+    <img class="bg-image" src="/assets/bg_tapdance_plain.jpg" alt='bg'/>
+        <a ui-sref='game-tapdance-game'><img class="popup-image" src="/assets/how2play.png" alt='bg'/> </a>
 </div>

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

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

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

 angular.module('Interactive.game.tapdance.result', [
     'ui.router',
-    'ui.bootstrap'
+    'ui.bootstrap',
+    'Interactive.game.tapdance.game'
 ])
 
 .config(function($stateProvider) {
@@ -19,6 +20,6 @@ angular.module('Interactive.game.tapdance.result', [
     );
 })
 
-.controller( 'resultCtrl', function IndexController($scope) {
-
+.controller( 'resultCtrl', function IndexController($scope, game) {
+    console.log(game.clicks);
 });

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

 <div class="game-background">
-    <img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
+    <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>

src/less/main.less

@@ -20,6 +20,8 @@
 
 @import 'variables.less';
 
+@container-width: 320px;
+
 * {
     margin: 0;
     padding: 0;
@@ -34,8 +36,9 @@ body {
 }
 
 .container {
-    width: 375px;
-    margin: 0 auot;
+    width: @container-width;
+    margin: 0 auto;
+    padding: 0 !important;
 }
 
 
@@ -152,7 +155,6 @@ h2 {
 }
 
 .container {
-    padding: 0 !important;
 }
 
 .game-background {
@@ -162,28 +164,32 @@ h2 {
 img.bg-image {
     position: absolute;
     left: 0;
-    height: 667px;
-    width: auto;
+    width: 320px;
     z-index: -1;
 }
 
 .popup-image {
-    width: 380px;
+    width: @container-width;
     margin-left: auto;
     margin-right: auto;
 }
 
 .popup {
-    line-height: 0.5em;
     margin-left: auto;
+    padding: 0.5em 1em 0.5em 1em;
+    line-height: 1em;
     margin-right: auto;
-    padding: 1.5em;
     position: relative;
     top: 80px;
-    width: 300px;
+    width: 250px;
 }
 
 
+.popup a {
+    color: white;
+    font-size: 2.0em;
+}
+
 .gold {
     -moz-border-radius: 30px;
     -webkit-border-radius: 30px;
@@ -197,17 +203,13 @@ img.bg-image {
 }
 
 .button-modal {
-    margin: 3em 0em 1em 0em;
-}
-
-.popup a {
-    color: white;
-    font-size: 2em;
+    margin: 3em 0em 1.6em 0em;
 }
 
 .popup a.button {
     margin-top: 2em;
-    padding: 0.5em 2em 0.5em 2em;
+    margin-bottom: 2em;
+    padding: 0.3em 1em 0.3em 1em;
 }
 
 .white {