display token numbers, harbors, scale and center map

prevostc · Jan 22, 2015 · 9b96882 · 9b96882
1 parent 4252cb8
commit 9b96882
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 22 deletions.
diff --git a/icons.xcf b/icons.xcf
diff --git a/www/img/desert.png b/www/img/desert.png
diff --git a/www/img/empty.png b/www/img/empty.png
diff --git a/www/js/catan/js/hexagon.js b/www/js/catan/js/hexagon.js
@@ -20,6 +20,10 @@
     Catan.Hexagon.prototype.isLand = function () {
         return false;
     };
+    Catan.Hexagon.prototype.hasNumber = function () {
+        return false;
+    };
+
 
 
     Catan.Hexagon.Land = function (pos, land) {
@@ -29,7 +33,10 @@
     Catan.Hexagon.Land.prototype = new Catan.Hexagon();
 
     Catan.Hexagon.Land.prototype.isLand = function () {
-        return false;
+        return true;
+    };
+    Catan.Hexagon.Land.prototype.hasNumber = function () {
+        return this.number !== undefined;
     };
 
 

diff --git a/www/js/catan/js/ui.js b/www/js/catan/js/ui.js
@@ -25,8 +25,8 @@
         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");
+        textures[Catan.T.Empty] = PIXI.Texture.fromImage("img/empty.png");
+        textures.token = PIXI.Texture.fromImage("img/number.png");
 
         return renderer;
     };
@@ -39,12 +39,16 @@
         var tileWidth = 200,
             tileHeight = 230;
 
+        var mapScale = Math.min(width/(7*tileWidth), height/((17/3)*tileHeight));
+
         // 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 = 0.5;
-        tileContainer.scale.y = 0.5;
+
+        // tiles are rotated so width correspond to height
+        tileContainer.position.x = (width / 2) - ((7 * tileWidth * mapScale) / 2);
+        tileContainer.position.y = (height / 2) - (((16/3) * tileHeight * mapScale) / 2);
+        tileContainer.scale.x = mapScale;
+        tileContainer.scale.y = mapScale;
         var tiles = [];
 
         stage.addChild(tileContainer);
@@ -54,14 +58,12 @@
             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;
+            var tile;
 
             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;
@@ -70,23 +72,44 @@
             tile.scale.y = 1;
             tile.anchor.x = 0.5;
             tile.anchor.y = 0.5;
-            tile.rotation = Math.PI/6;
+            // turn left or right randomly
+            tile.rotation = (Catan.Tools.randInterval(0,1) * 2 - 1) * Math.PI/6;
             tiles.push(tile);
             tileContainer.addChild(tile);
 
-            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);
+            if (hexagon.isLand() && hexagon.hasNumber()) {
+                var token = new PIXI.Sprite(textures.token);
+                token.position.x = cx;
+                token.position.y = cy;
+                token.scale.x = 0.8;
+                token.scale.y = 0.8;
+                token.anchor.x = 0.5;
+                token.anchor.y = 0.5;
+                tileContainer.addChild(token);
+
+                var textSize = Catan.Tools.tdsc(hexagon.number) * 5 + 15;
+                var textColor = Catan.Tools.tdsc(hexagon.number) >= 5 ? 'red' : 'black';
+                var text = new PIXI.Text(hexagon.number, {font: textSize + "px Arial", fill:textColor});
+                text.position.x = cx;
+                text.position.y = cy;
+                text.anchor.x = 0.5;
+                text.anchor.y = 0.5;
+                tileContainer.addChild(text);
             }
 
-            var text = new PIXI.Text("Pixi.js can has text!", {font:"50px Arial", fill:"red"});
-            stage.addChild(text);
-            //renderer.render(stage);
+
+            if (hexagon.isHarbor()) {
+                var harbor = new PIXI.Sprite(textures[hexagon.land]);
+                harbor.position.x = cx;
+                harbor.position.y = cy;
+                harbor.scale.x = 0.3;
+                harbor.scale.y = 0.3;
+                harbor.anchor.x = 0.5;
+                harbor.anchor.y = 0.5;
+                // turn left or right randomly
+                harbor.rotation = (Catan.Tools.randInterval(0,1) * 2 - 1) * Math.PI/6;
+                tileContainer.addChild(harbor);
+            }
         };
 
         map.each(drawHexagonCallback);