Added coordinates around the board.HEADmaster

2 files changed, 56 insertions, 8 deletions

diff --git a/js/activity.js b/js/activity.js
index 6c69bfb..c4e2ed2 100644
--- a/js/activity.js
+++ b/js/activity.js
@@ -14,7 +14,7 @@ define(function (require) {
     var graphicalBoard,
         textZone,
         piecesBitmapsManager,
-        minDimisHeight;
+        minDimIsHeight;
 
     // Manipulate the DOM only when it is ready.
     require(['domReady!'], function (doc) {
@@ -42,18 +42,33 @@ define(function (require) {
         */
         var minDim = gameZone_dim[0] < gameZone_dim[1] ?
             gameZone_dim[0] : gameZone_dim[1];
-        minDimisHeight = gameZone_dim[1] <= gameZone_dim[0] ? true : false;
+        minDimIsHeight = gameZone_dim[1] <= gameZone_dim[0] ? true : false;
         var boardOffset = 10;
         var boardDim = (minDim - 2*boardOffset) * 0.6;
-        var textZoneMinDim = (minDim - 2*boardOffset) * 0.37;
-        var gap = (minDim - 2*boardOffset) * 0.03;
+        var gap = 15;
         var cellDim = boardDim/8;
         graphicalBoard = new GraphicalBoard([boardOffset, boardOffset], cellDim, stage);
-        if (minDimisHeight) {
-            textZone = new TextZone(boardOffset, boardOffset + cellDim * 8 + gap, 8 * cellDim, textZoneMinDim, 20 * cellDim / 50,  "#2211CC", "#FFF", stage);
+        if (minDimIsHeight) {
+            textZone = new TextZone(
+                boardOffset,
+                boardOffset + graphicalBoard.getHeight() + gap,
+                graphicalBoard.getWidth(),
+                gameZone_dim[1] - graphicalBoard.getHeight() - gap - 2 * boardOffset,
+                20 * cellDim / 50, 
+                "#2211CC",
+                "#FFF",
+                stage);
         }
         else {
-            textZone = new TextZone(boardOffset + cellDim * 8 + gap, boardOffset, textZoneMinDim, 8 * cellDim, 20 * cellDim / 50,  "#2211CC", "#FFF", stage);
+            textZone = new TextZone(
+                boardOffset + graphicalBoard.getWidth() + gap,
+                boardOffset,
+                gameZone_dim[0] - graphicalBoard.getWidth() - gap - 2 * boardOffset,
+                graphicalBoard.getHeight(),
+                20 * cellDim / 50,
+                "#2211CC",
+                "#FFF",
+                stage);
         }
         
         function main(){
diff --git a/lib/customs/graphical_board.js b/lib/customs/graphical_board.js
index a6ca655..f44c993 100644
--- a/lib/customs/graphical_board.js
+++ b/lib/customs/graphical_board.js
@@ -6,7 +6,34 @@ GraphicalBoard.prototype = {
     initialize: function(pos, cellSize, stage){
         this.pos = pos;
         this.cellSize = cellSize;
+        this.coordsFontSize = cellSize * 0.7;
         this.stage = stage;
+        var addSimpleCoord = function(self, textValue, position){
+            var text = new createjs.Text(textValue, self.coordsFontSize + "px Arial bold", "#000");
+            text.x = position[0];
+            text.y = position[1];
+            self.stage.addChild(text);
+            return [text.getMeasuredWidth(), text.getMeasuredHeight()];
+        };
+        var addCoordsTexts = function(self){
+            self.coordsTextDim = addSimpleCoord(self, "1", [self.pos[0], self.pos[1] + 7*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "2", [self.pos[0], self.pos[1] + 6*self.cellSize + self.cellSize * 0.1]);
+            self.coordsTextWidth = addSimpleCoord(self, "3", [self.pos[0], self.pos[1] + 5*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "4", [self.pos[0], self.pos[1] + 4*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "5", [self.pos[0], self.pos[1] + 3*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "6", [self.pos[0], self.pos[1] + 2*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "7", [self.pos[0], self.pos[1] + 1*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "8", [self.pos[0], self.pos[1] + 0*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "A", [self.pos[0] + self.coordsTextDim[0] + self.cellSize * 0.4 + 0 * self.cellSize, self.pos[1] + 8*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "B", [self.pos[0] + self.coordsTextDim[0] + self.cellSize * 0.4 + 1 * self.cellSize, self.pos[1] + 8*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "C", [self.pos[0] + self.coordsTextDim[0] + self.cellSize * 0.4 + 2 * self.cellSize, self.pos[1] + 8*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "D", [self.pos[0] + self.coordsTextDim[0] + self.cellSize * 0.4 + 3 * self.cellSize, self.pos[1] + 8*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "E", [self.pos[0] + self.coordsTextDim[0] + self.cellSize * 0.4 + 4 * self.cellSize, self.pos[1] + 8*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "F", [self.pos[0] + self.coordsTextDim[0] + self.cellSize * 0.4 + 5 * self.cellSize, self.pos[1] + 8*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "G", [self.pos[0] + self.coordsTextDim[0] + self.cellSize * 0.4 + 6 * self.cellSize, self.pos[1] + 8*self.cellSize + self.cellSize * 0.1]);
+            addSimpleCoord(self, "H", [self.pos[0] + self.coordsTextDim[0] + self.cellSize * 0.4 + 7 * self.cellSize, self.pos[1] + 8*self.cellSize + self.cellSize * 0.1]);
+        };
+        addCoordsTexts(this);
     },
     getX: function(){
         return this.pos[0];
@@ -19,12 +46,18 @@ GraphicalBoard.prototype = {
     },
     // file : (0..7)
     getFileX: function(file){
-        return this.pos[0] + file * this.cellSize; 
+        return this.pos[0] + this.coordsTextDim[0] + this.cellSize * 0.2 + file * this.cellSize; 
     },
     // rank :  (0..7)
     getRankY: function(rank){
         return this.pos[1] + (7-rank) * this.cellSize; 
     },
+    getWidth: function(){
+        return this.coordsTextDim[0] + this.cellSize * 0.2 + 8 * this.cellSize;
+    },
+    getHeight: function(){
+        return this.cellSize * 0.2 + this.coordsTextDim[1] + 8 * this.cellSize;
+    },
     // Just call it once.
     addToStage: function(){
         for (var rank = 0; rank < 8; rank++){