Now the board is drawn with some pieces.

1 files changed, 51 insertions, 12 deletions

diff --git a/js/activity.js b/js/activity.js
index fe88491..d8ec8f2 100644
--- a/js/activity.js
+++ b/js/activity.js
@@ -27,9 +27,16 @@ define(function (require) {
         canvasContext.canvas.width = gameZone_dim[0];
         canvasContext.canvas.height = gameZone_dim[1];
         
-        // Builds the background
-        var background = new createjs.Shape();
-        background.graphics.beginFill("#CCC").drawRect(0, 0, gameZone_dim[0], gameZone_dim[1]);
+        /*
+        Computing the least game zone dimension,
+        and the ratio of pieces images size.
+        */
+        var minDim = gameZone_dim[0] < gameZone_dim[1] ?
+            gameZone_dim[0] : gameZone_dim[1];
+        var boardOffset = 10;
+        var effectiveDim = minDim - 2*boardOffset;
+        var cellDim = effectiveDim/8;
+        var picturesSizeRatio = cellDim/1000.0;
         
         // Load images asynchronously
         var piecesImages = {};
@@ -53,28 +60,60 @@ define(function (require) {
         
         function handleFileLoaded(file){
             var image = new createjs.Bitmap(file.item.src);
-            image.scaleX = 0.1;
-            image.scaleY = 0.1;
+            image.scaleX = picturesSizeRatio;
+            image.scaleY = picturesSizeRatio;
             piecesImages[file.item.id] = image;
         }
         
         function handleLoadingComplete(){
+            
+            drawEmptyBoard();
+            
             var img1 = piecesImages["wb"].clone();
-            img1.x = 20;
-            img1.y = 20;
+            var img1Pos = getCellPos(2,3);
+            img1.x = img1Pos[0];
+            img1.y = img1Pos[1];
             stage.addChild(img1);
             
-            var img2 = piecesImages["wb"].clone();
-            img2.x = 60;
-            img2.y = 20;
+            var img2 = piecesImages["bq"].clone();
+            var img2Pos = getCellPos(6,7);
+            img2.x = img2Pos[0];
+            img2.y = img2Pos[1];
             stage.addChild(img2);
             
             stage.update();
         }
         
+        /*
+        Parameters : file then rank (0 to 7).
+        Return value : (file_pos, rank_pos)
+        */
+        function getCellPos(file, rank){
+            return [
+                boardOffset + cellDim * file,
+                boardOffset + cellDim * (7 - rank)
+            ];
+        }
         
-        stage.addChild(background);
-        stage.update();
+        function drawEmptyBoard(){
+            for (var rank = 0; rank < 8; rank++){
+                for (var file = 0; file < 8; file++){
+                    var color;
+                    if ((rank+file) % 2 === 0) color = "#FFDB58";
+                    else color = "#6F4E37";
+                    
+                    var pos = getCellPos(file, rank);
+                    
+                    var rectangle = new createjs.Shape();
+                    rectangle.graphics.beginFill(color).drawRect(
+                        pos[0], pos[1], cellDim, cellDim
+                    );
+                    
+                    stage.addChild(rectangle);
+                }
+            }
+            stage.update();
+        }
 
     });