integrate pixi ui framework

.gitignore

@@ -9,4 +9,5 @@ plugins/
 *.keystore
 *.apk
 icon*x*.png
-build_release.sh
+build_release.sh
+texturepacker

bower.json

@@ -5,6 +5,7 @@
     "ionic": "driftyco/ionic-bower#1.0.0-beta.14"
   },
   "dependencies": {
-    "angular-local-storage": "~0.1.5"
+    "angular-local-storage": "~0.1.5",
+    "pixi": "~2.2.3"
   }
 }

www/img/spritesheet.json

@@ -0,0 +1,75 @@
+{"frames": {
+
+"desert.png":
+{
+	"frame": {"x":670,"y":670,"w":380,"h":331},
+	"rotated": true,
+	"trimmed": true,
+	"spriteSourceSize": {"x":590,"y":178,"w":380,"h":331},
+	"sourceSize": {"w":1000,"h":1000},
+	"pivot": {"x":0.5,"y":0.5}
+},
+"field.png":
+{
+	"frame": {"x":2,"y":337,"w":381,"h":331},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":306,"y":15,"w":381,"h":331},
+	"sourceSize": {"w":1000,"h":1000},
+	"pivot": {"x":0.5,"y":0.5}
+},
+"forest.png":
+{
+	"frame": {"x":2,"y":670,"w":381,"h":332},
+	"rotated": true,
+	"trimmed": true,
+	"spriteSourceSize": {"x":24,"y":505,"w":381,"h":332},
+	"sourceSize": {"w":1000,"h":1000},
+	"pivot": {"x":0.5,"y":0.5}
+},
+"hills.png":
+{
+	"frame": {"x":386,"y":2,"w":382,"h":332},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":306,"y":668,"w":382,"h":332},
+	"sourceSize": {"w":1000,"h":1000},
+	"pivot": {"x":0.5,"y":0.5}
+},
+"mountain.png":
+{
+	"frame": {"x":336,"y":670,"w":381,"h":332},
+	"rotated": true,
+	"trimmed": true,
+	"spriteSourceSize": {"x":24,"y":179,"w":381,"h":332},
+	"sourceSize": {"w":1000,"h":1000},
+	"pivot": {"x":0.5,"y":0.5}
+},
+"ocean.png":
+{
+	"frame": {"x":2,"y":2,"w":382,"h":333},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":307,"y":341,"w":382,"h":333},
+	"sourceSize": {"w":1000,"h":1000},
+	"pivot": {"x":0.5,"y":0.5}
+},
+"pasture.png":
+{
+	"frame": {"x":386,"y":336,"w":382,"h":332},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":588,"y":504,"w":382,"h":332},
+	"sourceSize": {"w":1000,"h":1000},
+	"pivot": {"x":0.5,"y":0.5}
+}},
+"meta": {
+	"app": "http://www.codeandweb.com/texturepacker",
+	"version": "1.0",
+	"image": "spritesheet.png",
+	"format": "RGBA8888",
+	"size": {"w":1003,"h":1053},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:b14b7e7dd417e8b7ee9f590f109873d9:27942f005438134559a60909ecb37b7c:729adc6043343cfda41c447ce8f464d6$"
+}
+}

www/index.html

@@ -17,6 +17,9 @@
     <!-- ionic/angularjs js -->
     <script src="lib/angular-local-storage/dist/angular-local-storage.min.js"></script>
 
+    <!-- goodboydigital/pixi -->
+    <script src="lib/pixi/bin/pixi.dev.js"></script>
+
     <!-- catan/catan js -->
     <script src="js/catan/js/catan.js"></script>
     <script src="js/catan/js/hexagon.js"></script>

www/js/catan/js/ui.js

@@ -1,13 +1,13 @@
 //noinspection JSHint
-(function(Catan){
+(function (Catan, PIXI) {
     "use strict";
 
     Catan.UI = {
         // if set to true, displays the coordinates system
         debug: false
     };
 
-    Catan.UI.drawMap = function (map, canvas) {
+    Catan.UI.drawMapBasic = function (map, canvas) {
         var ctx = canvas.getContext('2d');
 
         // align numbers
@@ -25,7 +25,7 @@
         // reset canvas
         //noinspection SillyAssignmentJS
         canvas.width = canvas.width;
-        ctx.clearRect (0, 0, canvas.width, canvas.height);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
         for (var i = 0; i < map.board.length; i++) {
             for (var j = 0; j < map.board[i].length; j++) {
@@ -34,7 +34,7 @@
         }
     };
 
-    Catan.UI.drawHexagon = function (hexagon, ctx, size, dist) {
+    Catan.UI.drawHexagonBasic = function (hexagon, ctx, size, dist) {
 
         var getColorFromLand = function (land) {
             var color;
@@ -95,9 +95,9 @@
         var width = size.width,
             height = size.height,
             mapWidth = width * 7,
-            mapHeight = height * 7 - (1/4 * height * 6),
-            cx = hexagon.position.column * (width + dist) - ((hexagon.position.line + 1) % 2) * (width + dist) / 2 + width/2 + size.canvasWidth/2 - mapWidth/2,
-            cy = hexagon.position.line * (3 / 4 * height + dist) + height/2 + size.canvasHeight/2 - mapHeight/2;
+            mapHeight = height * 7 - (1 / 4 * height * 6),
+            cx = hexagon.position.column * (width + dist) - ((hexagon.position.line + 1) % 2) * (width + dist) / 2 + width / 2 + size.canvasWidth / 2 - mapWidth / 2,
+            cy = hexagon.position.line * (3 / 4 * height + dist) + height / 2 + size.canvasHeight / 2 - mapHeight / 2;
 
         ctx.fillStyle = hexagon.isCoast() ? "rgb(69, 91, 217)" : getColorFromLand(hexagon.land);
         ctx.beginPath();
@@ -162,4 +162,88 @@
         }
     };
 
-})(Catan);
+    Catan.UI.init = function(canvasContainerSelector, width, height) {
+        var canvasContainer = document.querySelector(canvasContainerSelector);
+
+        // You can use either PIXI.WebGLRenderer or PIXI.CanvasRenderer or PIXI.autoDetectRenderer
+        var renderer = new PIXI.CanvasRenderer(width, height);
+        canvasContainer.appendChild(renderer.view);
+        var stage = new PIXI.Stage(0xFFFFFF);
+        renderer.render(stage);
+
+
+        // create a new loader
+        var loader = new PIXI.AssetLoader([ "img/spritesheet.json"]);
+
+        //begin load
+        loader.load();
+
+        return renderer;
+    };
+
+    Catan.UI.draw = function (renderer, map, width, height) {
+        renderer.view.width = width;
+        renderer.view.height = height;
+
+        var stage = new PIXI.Stage(0xFFFFFF);
+
+        // holder to store aliens
+        var aliens = [];
+        var alienFrames = ["field.png", "desert.png", "forest.png", "ocean.png", "pasture.png", "hills.png", "mountain.png"];
+
+        var count = 0;
+
+        // create an empty container
+        var alienContainer = new PIXI.DisplayObjectContainer();
+        alienContainer.position.x = width/2;
+        alienContainer.position.y = height/2;
+
+        stage.addChild(alienContainer);
+        onAssetsLoaded();
+
+        function onAssetsLoaded()
+        {
+
+            // create a texture from an image path
+            // add a bunch of aliens
+            for (var i = 0; i < 20; i++)
+            {
+                // create an alien using the frame name..
+                var alien = PIXI.Sprite.fromFrame(alienFrames[i % 4]);
+
+                alien.position.x = Math.random() * 800 - 400;
+                alien.position.y = Math.random() * 600 - 300;
+                alien.anchor.x = 0.5;
+                alien.anchor.y = 0.5;
+                aliens.push(alien);
+                alienContainer.addChild(alien);
+            }
+
+            // start animating
+            window.requestAnimFrame( animate );
+
+
+        }
+
+        function animate() {
+
+            window.requestAnimFrame( animate );
+
+            // just for fun, lets rotate mr rabbit a little
+            for (var i = 0; i < 20; i++)
+            {
+                var alien = aliens[i];
+                alien.rotation += 0.1;
+            }
+
+            count += 0.01;
+            alienContainer.scale.x = Math.sin(count);
+            alienContainer.scale.y = Math.sin(count);
+
+            alienContainer.rotation += 0.01
+            // render the stage
+            renderer.render(stage);
+        }
+    };
+
+})(Catan, PIXI);

www/js/controllers.js

@@ -5,16 +5,18 @@
     angular.module('starter.controllers', [])
 
         .controller('MapCtrl', function ($scope, $ionicPlatform, Settings) {
+            var ui = Catan.UI.init(
+                '.canvas-container',
+                document.querySelector('.canvas-container').offsetWidth,
+                document.querySelector('.canvas-container').offsetHeight
+            );
             $scope.generate = function () {
-                var canvas = document.querySelector('.canvas');
-                canvas.width = document.querySelector('.canvas-container').offsetWidth;
-                canvas.height = document.querySelector('.canvas-container').offsetHeight;
                 var map = Catan.Generator.Map.generate(Settings.getTileTrioScoreLimit(), Settings.getHarborGenerationStrategy());
-                Catan.UI.drawMap(map, canvas);
-                // @todo: find another fix.
-                // Sometimes, the canvas goes full black (on first launch mainly)
-                // prevent the canvas from remaining black by painting twice
-                Catan.UI.drawMap(map, canvas);
+                Catan.UI.draw(
+                    ui, map,
+                    document.querySelector('.canvas-container').offsetWidth,
+                    document.querySelector('.canvas-container').offsetHeight
+                );
             };
         })
 

www/lib/pixi/.bower.json

@@ -0,0 +1,24 @@
+{
+  "name": "pixi.js",
+  "version": "2.2.3",
+  "main": "bin/pixi.dev.js",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test"
+  ],
+  "dependencies": {},
+  "devDependencies": {},
+  "homepage": "https://github.com/GoodBoyDigital/pixi.js",
+  "_release": "2.2.3",
+  "_resolution": {
+    "type": "version",
+    "tag": "v2.2.3",
+    "commit": "85b6c1023dec32144bddf781923402d10dbabd0e"
+  },
+  "_source": "git://github.com/GoodBoyDigital/pixi.js.git",
+  "_target": "~2.2.3",
+  "_originalSource": "pixi",
+  "_direct": true
+}

www/lib/pixi/CONTRIBUTING.md

@@ -0,0 +1,62 @@
+# How to contribute
+
+It is essential to the development of pixi.js that the community is empowered
+to make changes and get them into the library. Here are some guidlines to make
+that process silky smooth for all involved.
+
+## Reporting issues
+
+To report a bug, request a feature, or even ask a question, make use of the GitHub Issues
+section for [pixi.js][0]. When submitting an issue please take the following steps:
+
+1. **Seach for existing issues.** Your question or bug may have already been answered or fixed,
+be sure to search the issues first before putting in a duplicate issue.
+
+2. **Create an isolated and reproducible test case.** If you are reporting a bug, make sure you
+also have a minimal, runnable, code example that reproduces the problem you have.
+
+3. **Include a live example.** After narrowing your code down to only the problem areas, make use
+of [jsFiddle][1], [jsBin][2], or a link to your live site so that we can view a live example of the problem.
+
+4. **Share as much information as possible.** Include browser version affected, your OS, version of
+the library, steps to reproduce, etc. "X isn't working!!!1!" will probably just be closed.
+
+
+## Making Changes
+
+To setup for making changes you will need node.js, and grunt installed. You can download node.js
+from [nodejs.org][3]. After it has been installed open a console and run `npm i -g grunt-cli` to
+install the global `grunt` executable.
+
+After that you can clone the pixi.js repository, and run `npm i` inside the cloned folder.
+This will install dependencies necessary for building the project. Once that is ready, make your
+changes and submit a Pull Request. When submitting a PR follow these guidlines:
+
+- **Send Pull Requests to the `dev` branch.** All Pull Requests must be sent to the `dev` branch,
+`master` is the latest release and PRs to that branch will be closed.
+
+- **Ensure changes are jshint validated.** After making a change be sure to run the build process
+to ensure that you didn't break anything. You can do this with `grunt && grunt test` which will run
+jshint, rebuild, then run the test suite.
+
+- **Never commit new builds.** When making a code change, you should always run `grunt` which will
+rebuild the project, *however* please do not commit these new builds or your PR will be closed.
+
+- **Only commit relevant changes.** Don't include changes that are not directly relevant to the fix
+you are making. The more focused a PR is, the faster it will get attention and be merged. Extra files
+changing only whitespace or trash files will likely get your PR closed.
+
+## Quickie Code Style Guide
+
+- Use 4 spaces for tabs, never tab characters.
+
+- No trailing whitespace, blank lines should have no whitespace.
+
+- Always favor strict equals `===` unless you *need* to use type coercion.
+
+- Follow conventions already in the code, and listen to jshint.
+
+[0]: https://github.com/GoodBoyDigital/pixi.js/issues
+[1]: http://jsfiddle.net
+[2]: http://jsbin.com/
+[3]: http://nodejs.org