Remove spritesheet, use individual images

.gitignore

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

www/js/catan/js/ui.js

@@ -2,6 +2,8 @@
 (function (Catan, PIXI) {
     "use strict";
 
+    var textures = {};
+
     Catan.UI = {
         // if set to true, displays the coordinates system
         debug: false
@@ -16,12 +18,15 @@
         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();
+        textures[Catan.T.Fields] = PIXI.Texture.fromImage("img/field.png");
+        textures[Catan.T.Desert] = PIXI.Texture.fromImage("img/desert.png");
+        textures[Catan.T.Forest] = PIXI.Texture.fromImage("img/forest.png");
+        textures[Catan.T.Pasture] = PIXI.Texture.fromImage("img/pasture.png");
+        textures[Catan.T.Hills] = PIXI.Texture.fromImage("img/hills.png");
+        textures[Catan.T.Mountains] = PIXI.Texture.fromImage("img/mountain.png");
+        textures[Catan.T.Ocean] = PIXI.Texture.fromImage("img/ocean.png");
+        textures[Catan.T.Empty] = PIXI.Texture.fromImage("img/ocean.png");
+        textures["number"] = PIXI.Texture.fromImage("img/number.png");
 
         return renderer;
     };
@@ -31,71 +36,57 @@
 
         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;
-
-        var tileWidth = 50,
-            tileHeight = 50;
+        var tileWidth = 200,
+            tileHeight = 230;
 
         // create an empty container
         var tileContainer = new PIXI.DisplayObjectContainer();
-        tileContainer.position.x = (width / 2) - ((7 * tileWidth) / 2);
-        tileContainer.position.y = (height / 2) - ((7 * tileHeight) / 2);
-        tileContainer.scale.x = 1;
-        tileContainer.scale.y = 1;
+        //tileContainer.position.x = (width / 2) - ((7 * tileWidth) / 2);
+        //tileContainer.position.y = (height / 2) - ((7 * tileHeight) / 2);
+        tileContainer.scale.x = 0.5;
+        tileContainer.scale.y = 0.5;
         var tiles = [];
 
         stage.addChild(tileContainer);
 
-        var getSpriteNameLand = function (land) {
-            var spriteName;
-            var items = ["ocean.png", "mountain.png"];
-            return items[Math.floor(Math.random()*items.length)];
-            switch (land) {
-                case Catan.T.Fields: spriteName = "field.png";break;
-                case Catan.T.Desert: spriteName = "desert.png";break;
-                case Catan.T.Forest: spriteName = "forest.png";break;
-                case Catan.T.Pasture: spriteName = "pasture.png";break;
-                case Catan.T.Hills: spriteName = "hills.png";break;
-                case Catan.T.Mountains: spriteName = "mountain.png";break;
-                case Catan.T.Ocean: spriteName = "ocean.png";break;
-                case Catan.T.Empty: spriteName = "ocean.png";break;
-                default:
-                    throw "Can't find color for non-coast with this land type: '" + land + "'";
-            }
-            return spriteName;
-        };
-
         var drawHexagonCallback = function(i, j){
             var hexagon = map.get(i, j);
-            var tile = PIXI.Sprite.fromFrame(getSpriteNameLand(hexagon.land));
-
             var cx = hexagon.position.column * tileWidth - ((hexagon.position.line + 1) % 2) * tileWidth / 2 + tileWidth / 2,
                 cy = hexagon.position.line * (3 / 4 * tileHeight) + tileHeight / 2;// + canvasHeight / 2 - mapHeight / 2
 
+            var tile, number;
+
+            if (hexagon.isCoast()) {
+                tile = new PIXI.Sprite(textures[Catan.T.Ocean]);
+                number = null;
+            } else {
+                tile = new PIXI.Sprite(textures[hexagon.land]);
+                number = new PIXI.Sprite(textures["number"]);
+            }
 
             tile.position.x = cx;
             tile.position.y = cy;
+            tile.scale.x = 1;
+            tile.scale.y = 1;
             tile.anchor.x = 0.5;
             tile.anchor.y = 0.5;
-            tile.scale.x = 0.15;
-            tile.scale.y = 0.15;
-            tile.rotation = Math.PI/2;
+            tile.rotation = Math.PI/6;
             tiles.push(tile);
             tileContainer.addChild(tile);
 
-            var text = new PIXI.Text("[" + cx + ';' + cy + ']', {font:"11px Arial", fill:"red"});
-            text.position.x = cx;
-            text.position.y = cy;
-            text.anchor.x = 0.5;
-            text.anchor.y = 0.5;
-            tileContainer.addChild(text);
-
+            if (number !== null) {
+                number.position.x = cx;
+                number.position.y = cy;
+                number.scale.x = 0.8;
+                number.scale.y = 0.8;
+                number.anchor.x = 0.5;
+                number.anchor.y = 0.5;
+                tileContainer.addChild(number);
+            }
 
-            renderer.render(stage);
+            var text = new PIXI.Text("Pixi.js can has text!", {font:"50px Arial", fill:"red"});
+            stage.addChild(text);
+            //renderer.render(stage);
         };
 
         map.each(drawHexagonCallback);