Reduced the board size and added a (drawn) textbox in the canvas.

1 files changed, 40 insertions, 5 deletions

diff --git a/js/activity.js b/js/activity.js
index 50118f1..9821ef4 100644
--- a/js/activity.js
+++ b/js/activity.js
@@ -5,7 +5,8 @@ define(function (require) {
         createjs = require('easel'),
         Tween = require('tween'),
         Preload = require('preload'),
-        $ = require('jquery');
+        $ = require('jquery'),
+        lessonText;
 
     // Manipulate the DOM only when it is ready.
     require(['domReady!'], function (doc) {
@@ -34,8 +35,10 @@ define(function (require) {
         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 boardDim = (minDim - 2*boardOffset) * 0.6;
+        var textZoneHeight = (minDim - 2*boardOffset) * 0.37;
+        var gap = (minDim - 2*boardOffset) * 0.03;
+        var cellDim = boardDim/8;
         var picturesSizeRatio = cellDim/1000.0;
         
         // Load images asynchronously
@@ -68,14 +71,24 @@ define(function (require) {
         function handleLoadingComplete(){
             
             drawEmptyBoard();
+            drawTextZone();
             
-            var img1 = piecesImages["wb"].clone();
+            var text = "Here the white bishop can eat the black "
+            + "queen, because the black queen is on the bishop diagonal !";
+            lessonText = new createjs.Text(text, getFontText(), "#FFF");
+            lessonText.lineWidth = 8*cellDim;
+            var lessonTextPos = getTextZonePos();
+            lessonText.x = lessonTextPos[0];
+            lessonText.y = lessonTextPos[1];
+            stage.addChild(lessonText);
+            
+            var img1 = piecesImages.wb.clone();
             var img1Pos = getCellPos(2,3);
             img1.x = img1Pos[0];
             img1.y = img1Pos[1];
             stage.addChild(img1);
             
-            var img2 = piecesImages["bq"].clone();
+            var img2 = piecesImages.bq.clone();
             var img2Pos = getCellPos(6,7);
             img2.x = img2Pos[0];
             img2.y = img2Pos[1];
@@ -114,6 +127,28 @@ define(function (require) {
             }
             stage.update();
         }
+        
+        function getFontText()
+        {
+            var fontSize = 20 * cellDim / 50;
+            var fontValue = fontSize + "px Arial";
+            return fontValue;
+        }
+        
+        function getTextZonePos(){
+            return [boardOffset,
+                      boardOffset + cellDim * 8 + gap];
+        }
+        
+        function drawTextZone(){
+            var txtZone = new createjs.Shape();
+            var pos = getTextZonePos();
+            txtZone.graphics.beginFill("#2211CC").drawRect(
+                pos[0], pos[1], 8 * cellDim, textZoneHeight
+            );
+            stage.addChild(txtZone);
+            stage.update();
+        }
 
     });