Add docker support and assets

.bowerrc

+{
+  "directory": "vendor",
+  "json": "bower.json",
+  "interactive": false
+}

Dockerfile

-FROM node:latest
+FROM ubuntu:14.10
 
-RUN \
-    apt-get update && \
-    apt-get install -y ruby ruby-dev supervisor nginx && \
-    rm -rf /var/lib/apt/lists/*
-
-RUN npm update -g npm
-RUN npm -g install grunt-cli karma bower
+RUN apt-get update && apt-get install -y nginx git supervisor nodejs npm firefox
+RUN ln -s /usr/bin/nodejs /usr/bin/node
+RUN npm -g install grunt-cli karma bower less
 
 WORKDIR /app
-ADD . /app
-VOLUME ./src:/app/src/
 
+ADD package.json /app/package.json
 RUN npm install
+
+ADD bower.json /app/bower.json
+ADD .bowerrc /app/.bowerrc
+
 RUN bower install --config.interactive=false --allow-root
 
+ADD . /app
+
 CMD etc/bootstrap.sh

Gruntfile.js

@@ -474,7 +474,8 @@ module.exports = function ( grunt ) {
        * plugin should auto-detect.
        */
       options: {
-        livereload: true
+        livereload: true,
+        interval: 1000
       },
 
       /**
@@ -497,7 +498,7 @@ module.exports = function ( grunt ) {
         files: [ 
           '<%= app_files.js %>'
         ],
-        tasks: [ 'jshint:src', 'karma:unit:run', 'copy:build_appjs' ]
+        tasks: [ 'jshint:src', 'copy:build_appjs' ]
       },
 
       /**
@@ -508,7 +509,7 @@ module.exports = function ( grunt ) {
         files: [ 
           '<%= app_files.coffee %>'
         ],
-        tasks: [ 'coffeelint:src', 'coffee:source', 'karma:unit:run', 'copy:build_appjs' ]
+        tasks: [ 'coffeelint:src', 'coffee:source', 'copy:build_appjs' ]
       },
 
       /**
@@ -557,7 +558,7 @@ module.exports = function ( grunt ) {
         files: [
           '<%= app_files.jsunit %>'
         ],
-        tasks: [ 'jshint:test', 'karma:unit:run' ],
+        tasks: [ 'jshint:test' ],
         options: {
           livereload: false
         }
@@ -571,7 +572,7 @@ module.exports = function ( grunt ) {
         files: [
           '<%= app_files.coffeeunit %>'
         ],
-        tasks: [ 'coffeelint:test', 'karma:unit:run' ],
+        tasks: [ 'coffeelint:test' ],
         options: {
           livereload: false
         }
@@ -589,7 +590,7 @@ module.exports = function ( grunt ) {
    * before watching for changes.
    */
   grunt.renameTask( 'watch', 'delta' );
-  grunt.registerTask( 'watch', [ 'build', 'karma:unit', 'delta' ] );
+  grunt.registerTask( 'watch', [ 'build', 'delta' ] );
 
   /**
    * The default task is to build and compile.
@@ -602,9 +603,7 @@ module.exports = function ( grunt ) {
   grunt.registerTask( 'build', [
     'clean', 'html2js', 'jshint', 'coffeelint', 'coffee', 'less:build',
     'concat:build_css', 'copy:build_app_assets', 'copy:build_vendor_assets',
-    'copy:build_appjs', 'copy:build_vendorjs', 'copy:build_vendorcss', 'index:build', 'karmaconfig',
-    'karma:continuous' 
-  ]);
+    'copy:build_appjs', 'copy:build_vendorjs', 'copy:build_vendorcss', 'index:build' ]);
 
   /**
    * The `compile` task gets your app ready for deployment by concatenating and

etc/supervisord/dev.conf

@@ -8,3 +8,11 @@ redirect_stderr=true
 stdout_logfile=/dev/stdout
 stdout_logfile_maxbytes=0
 command=/usr/sbin/nginx
+
+[program:watch]
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+directory=/app/
+command=grunt watch

makefile

+.PHONY: build
+
+ARGUMENTS=
+ARGUMENTS+= -v ./etc/:/app/etc/
+
+DIR=$(shell pwd)
+
 build:
 	docker build -t pixi-game .
 
 run:
-	docker run --rm -ti -p 8282:80 pixi-game
+	docker run --rm -ti -p 8282:80 -v $(DIR)/src/:/app/src/ pixi-game
 
 # inside docker
 install:

src/app/app.js

@@ -6,7 +6,7 @@ angular.module( 'Interactive', [
     'ui.router'
 ])
 
-.config( function ( $stateProvider, $urlRouterProvider ) {
+.config(function ($stateProvider, $urlRouterProvider) {
     $urlRouterProvider.otherwise( '/index' );
 })
 

src/app/index/index.tpl.html

 <h1>Game</h1>
-<canvas pixi="stage" pixi-render="pixiRender"
-        pixi-transparent="false" width="900" height="400">
+<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/index.html

@@ -15,6 +15,7 @@
   </head>
   <body>
       <div class="container" ui-view="main">
+          test
       </div>
   </body>
 </html>