Now the textbox is placed to the right of the board if the screen width is less than the screen height.

1 files changed, 26 insertions, 6 deletions

diff --git a/js/activity.js b/js/activity.js
index 9821ef4..983b724 100644
--- a/js/activity.js
+++ b/js/activity.js
@@ -6,6 +6,7 @@ define(function (require) {
         Tween = require('tween'),
         Preload = require('preload'),
         $ = require('jquery'),
+        minDimisHeight,
         lessonText;
 
     // Manipulate the DOM only when it is ready.
@@ -34,9 +35,10 @@ 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;
         var boardOffset = 10;
         var boardDim = (minDim - 2*boardOffset) * 0.6;
-        var textZoneHeight = (minDim - 2*boardOffset) * 0.37;
+        var textZoneMinDim = (minDim - 2*boardOffset) * 0.37;
         var gap = (minDim - 2*boardOffset) * 0.03;
         var cellDim = boardDim/8;
         var picturesSizeRatio = cellDim/1000.0;
@@ -76,7 +78,12 @@ define(function (require) {
             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;
+            if (minDimisHeight) {
+                lessonText.lineWidth = 8*cellDim;
+            }
+            else {
+                lessonText.lineWidth = textZoneMinDim;
+            }
             var lessonTextPos = getTextZonePos();
             lessonText.x = lessonTextPos[0];
             lessonText.y = lessonTextPos[1];
@@ -136,16 +143,29 @@ define(function (require) {
         }
         
         function getTextZonePos(){
-            return [boardOffset,
+            if (minDimisHeight) {
+                return [boardOffset,
                       boardOffset + cellDim * 8 + gap];
+            }
+            else {
+                return [boardOffset + cellDim * 8 + gap,
+                        boardOffset];
+            }
         }
         
         function drawTextZone(){
             var txtZone = new createjs.Shape();
             var pos = getTextZonePos();
-            txtZone.graphics.beginFill("#2211CC").drawRect(
-                pos[0], pos[1], 8 * cellDim, textZoneHeight
-            );
+            if (minDimisHeight) {
+                txtZone.graphics.beginFill("#2211CC").drawRect(
+                    pos[0], pos[1], 8 * cellDim, textZoneMinDim
+                );
+            }
+            else {
+                txtZone.graphics.beginFill("#2211CC").drawRect(
+                    pos[0], pos[1], textZoneMinDim, 8 * cellDim
+                );
+            }
             stage.addChild(txtZone);
             stage.update();
         }