Add first screens

Gruntfile.js

@@ -41,7 +41,7 @@ module.exports = function ( grunt ) {
           // If specified to, for example, "127.0.0.1" the server will
           // only be available on that ip.
           // Specify "0.0.0.0" to be available everywhere
-          host: "127.0.0.1",
+          host: "0.0.0.0",
           showDir : true,
           autoIndex: true,
 
@@ -59,6 +59,7 @@ module.exports = function ( grunt ) {
    * instructions.
    */
   var taskConfig = {
+
     /**
      * We read in our `package.json` file so we can access the package name and
      * version. It's already there, so we don't repeat ourselves here.

src/app/app.js

 angular.module( 'Interactive', [
     'templates-app',
     'templates-common',
+    'ui.router',
     'Interactive.index',
     'Interactive.pixi',
-    'ui.router'
+    'Interactive.game',
+    'Interactive.game.tapdance'
 ])
 
 .config( function ( $stateProvider, $urlRouterProvider ) {
@@ -11,6 +13,7 @@ angular.module( 'Interactive', [
 })
 
 .run( function run () {
+
 })
 
 .controller( 'AppCtrl', function AppCtrl ( $scope, $location ) {
@@ -22,4 +25,3 @@ angular.module( 'Interactive', [
 })
 
 ;
-

src/app/app.spec.js

 describe( 'AppCtrl', function() {
   describe( 'isCurrentUrl', function() {
-    var AppCtrl, $location, $scope;
+    //var AppCtrl, $location, $scope;
 
-    beforeEach( module( 'Interactive' ) );
+    //beforeEach( module( 'Interactive' ) );
 
-    beforeEach( inject( function( $controller, _$location_, $rootScope ) {
-        $location = _$location_;
-        $scope = $rootScope.$new();
-        AppCtrl = $controller( 'AppCtrl', { $location: $location, $scope: $scope });
-    }));
+    //beforeEach( inject( function( $controller, _$location_, $rootScope ) {
+    //    $location = _$location_;
+    //    $scope = $rootScope.$new();
+    //    AppCtrl = $controller( 'AppCtrl', { $location: $location, $scope: $scope });
+    //}));
 
-    it( 'should pass a dummy test', inject( function() {
-        expect( AppCtrl ).toBeTruthy();
-    }));
+    //it( 'should pass a dummy test', inject( function() {
+    //    expect( AppCtrl ).toBeTruthy();
+    //}));
   });
 });

src/app/game/index.js

+angular.module('Interactive.game', [
+    'Interactive.pixi',
+    'ui.router'
+])
+
+.config(function($stateProvider) {
+    $stateProvider.state( 'game', {
+        url: '/game',
+        views: {
+            'main': {
+                controller: 'IndexCtrl',
+                templateUrl: 'game/index.tpl.html'
+            }
+        },
+
+        data: { pageTitle: 'Game' }
+    });
+})
+
+.controller( 'IndexCtrl', function IndexController($scope) {
+    console.log('game-index');
+})
+
+;

src/app/game/index.tpl.html

+<h1>Game index</h1>
+
+<a ui-sref="game-tapdance">tapdance</a>

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

+angular.module('Interactive.game.tapdance', [
+    'ui.router',
+    'ui.bootstrap',
+    'Interactive.pixi'
+])
+
+.config(function($stateProvider) {
+    $stateProvider
+        .state( 'game-tapdance', {
+            url: '/tapdance',
+            views: {
+                'main': {
+                    controller: 'tapdanceCtrl',
+                    templateUrl: 'game/tapdance/tapdance-index.tpl.html'
+                }
+            },
+
+            data: { pageTitle: '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-index.tpl.html

+<div class="game-background">
+    <div class="popup">
+        <h1 class="text-center">TAP DANCE</h1>
+        <p class="text-center">Help your conscience and save water</p>
+        <button class="btn btn-default center-block play-now">PLAY NOW</button>
+    </div>
+</div>

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

+<div class="center-block">
+    TAP DANCE
+</div>

src/app/index/index.js

@@ -13,7 +13,7 @@ angular.module('Interactive.index', [
             }
         },
 
-        data: {pageTitle: 'index'}
+        data: { pageTitle: 'index' }
     });
 })
 

src/app/index/index.tpl.html

-<h1>Game</h1>
+<h1>Intro</h1>
+<a ui-sref='game-tapdance'>Go to the game</a>
+<!---
 <canvas pixi="stage" pixi-render="pixiRender"
         pixi-transparent="false" width="900" height="400">
 </canvas>
+-->

src/app/pixi/pixi.js

+angular.module('Interactive.pixi', [
+])
+
+.directive('pixi', function($parse) {
+  return {
+    restrict: 'A',
+    scope: true,
+    controller: function($scope, $element, $attrs, $document) {
+            // init the first element
+            $element = $element[0];
+
+            var width = $element.width || 800;
+            var height = $element.height || 400;
+
+            // TODO: set color from options
+            var stage = new PIXI.Stage();
+            var renderer = PIXI.autoDetectRenderer(width, height,
+                                                   {view: $element});
+
+            renderer.view.style.height = window.innerHeight;
+            renderer.view.style.width = window.innerWidth;
+            renderer.view.style.display = 'block';
+
+            var bg_texture = PIXI.Texture.fromImage('/assets/images/mario_bg.png');
+            var bg = new PIXI.TilingSprite(bg_texture, width, height - 20);
+
+            bg.position.x = 0;
+            bg.position.y = 0;
+
+            bg.tilePosition.x = 0;
+            bg.tilePosition.y = 0;
+
+            //, TODO calculate scaling
+            stage.addChild(bg);
+            requestAnimFrame(animate);
+
+            function animate() {
+                bg.tilePosition.x -= 0.5;
+                requestAnimFrame(animate);
+                renderer.render(stage);
+            }
+        }
+    };
+})
+;
+        //var init = function(rendererType, transparent, antialias, element) {
+        //    if (!stage) {
+        //        // create a new instance of a pixi stage
+        //        stage = new PIXI.Stage(0x66FF99);
+        //        stageAttr.assign($scope, stage);
+        //    }
+
+        //    switch(rendererType) {
+        //        case 'canvas':
+        //            renderer = new PIXI.CanvasRenderer(width, height, $element, transparent);
+        //        break;
+        //        case 'webgl':
+        //            try {
+        //                renderer = new PIXI.WebGLRenderer(width, height, $element, transparent, antialias);
+        //            } catch (e) {
+        //                $scope.$emit('pixi.webgl.init.exception', e);
+        //                return;
+        //            }
+        //        break;
+        //        default:
+        //            renderer = new PIXI.autoDetectRenderer(width, height, {view: $element}, transparent, antialias);
+        //    }
+
+        //    return renderer;
+        //};
+
+        //init(renderType, transparent, antialias, $element);
+
+        //this.render = function render(force) {
+        //    var doRender = true;
+        //    if (renderFunc) {
+        //        doRender = renderFunc(stage, this.renderer);
+        //    }
+
+        //    // render the stage
+        //    if (force || doRender !== false) {
+        //        this.renderer.render(stage);
+        //    }
+        //};
+
+        //// create a texture from an image path
+        //var texture = PIXI.Texture.fromImage("/assets/bunny.png");
+
+        //// create a new Sprite using the texture
+        //var bunny = new PIXI.Sprite(texture);
+
+        //// center the sprites anchor point
+        //bunny.anchor.x = 0.5;
+        //bunny.anchor.y = 0.5;
+
+        //// move the sprite t the center of the screen
+        //bunny.position.x = width / 2;
+        //bunny.position.y = height / 2;
+
+        //function renderLoop() {
+        //    self.render();
+        //    bunny.rotation += 0.1;
+        //    requestAnimFrame( renderLoop );
+        //}
+
+        //// add the renderer view element to the DOM
+        ////document.body.appendChild(renderer.view);
+
+        //this.getStage = function() {
+        //    return stage;
+        //};
+
+        //this.getRenderer = function() {
+        //    return this.renderer;
+        //};
+
+        //this.getContext = function() {
+        //    return this.renderer.gl ? this.renderer.gl : this.renderer.context;
+        //};
+
+        //this.getStage().addChild(bunny);
+
+        //requestAnimFrame( renderLoop );
+
+        ////($window).resize(function() {
+        ////    renderer.resize(element.width(), element.height());
+        ////});
+
+        //}
+    //};

src/less/main.less

@@ -20,6 +20,9 @@
 
 @import 'variables.less';
 
+body {
+    font-family: MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
+}
 
 /**
  * Typography
@@ -121,3 +124,52 @@ h2 {
 
 /*  @import '../app/home/home.less'; */
 
+// Class
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Usage as a mixin
+.element {
+  .center-block();
+}
+
+.container {
+    padding: 0 !important;
+}
+
+.game-background {
+    background: url("/assets/bg.jpg");
+    background-position: 50% 50%;
+    background-size: auto 80%;
+    background-repeat: no-repeat;
+    padding: 0 !important;
+    height: 800px;
+
+}
+
+.popup {
+    color: #d0b745;
+    background: white;
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    border-radius: 30px;
+    position: absolute;
+    padding: 3em;
+    left: 50%;
+    top: 10%;
+    transform: translateY(-50%);
+    transform: translateX(-50%);
+}
+
+.popup h1 {
+    font-weight: bold;
+}
+
+.popup button {
+    background-color: #e7d878;
+    color: white;
+    font-size: 3em;
+}