More tutorial improvments

8 files changed, 107 insertions, 119 deletions

diff --git a/examples/declarative/tutorials/samegame/samegame2/samegame.js b/examples/declarative/tutorials/samegame/samegame2/samegame.js
index d7cbd8d..3f12561 100644
--- a/examples/declarative/tutorials/samegame/samegame2/samegame.js
+++ b/examples/declarative/tutorials/samegame/samegame2/samegame.js
@@ -1,11 +1,9 @@
 //![0]
-//Note that X/Y referred to here are in game coordinates
-var maxColumn = 10;//Nums are for tileSize 40
+var blockSize = 40;
+var maxColumn = 10;
 var maxRow = 15;
-var tileSize = 40;
 var maxIndex = maxColumn*maxRow;
 var board = new Array(maxIndex);
-var tileSrc = "Block.qml";
 var component;
 
 //Index function used instead of a 2D array
@@ -13,17 +11,17 @@ function index(column,row) {
     return column + (row * maxColumn);
 }
 
-function initBoard()
+function startNewGame()
 {
-    //Delete old blocks
+    //Delete blocks from previous game
     for(var i = 0; i<maxIndex; i++){
         if(board[i] != null)
             board[i].destroy();
     }
 
     //Calculate board size
-    maxColumn = Math.floor(background.width/tileSize);
-    maxRow = Math.floor(background.height/tileSize);
+    maxColumn = Math.floor(background.width/blockSize);
+    maxRow = Math.floor(background.height/blockSize);
     maxIndex = maxRow*maxColumn;
 
     //Initialize Board
@@ -38,12 +36,11 @@ function initBoard()
 
 function createBlock(column,row){
     if(component==null)
-        component = createComponent(tileSrc);
+        component = createComponent("Block.qml");
 
-    // Note that we don't wait for the component to become ready. This will
-    // only work if the block QML is a local file. Otherwise the component will
-    // not be ready immediately. There is a statusChanged signal on the
-    // component you could use if you want to wait to load remote files.
+    // Note that if Block.qml was not a local file, component.isReady would be
+    // false and we should wait for the component's statusChanged() signal to
+    // know when the file is downloaded and fully loaded before calling createObject().
     if(component.isReady){
         var dynamicObject = component.createObject();
         if(dynamicObject == null){
@@ -52,12 +49,12 @@ function createBlock(column,row){
             return false;
         }
         dynamicObject.parent = background;
-        dynamicObject.x = column*tileSize;
-        dynamicObject.y = row*tileSize;
-        dynamicObject.width = tileSize;
-        dynamicObject.height = tileSize;
+        dynamicObject.x = column*blockSize;
+        dynamicObject.y = row*blockSize;
+        dynamicObject.width = blockSize;
+        dynamicObject.height = blockSize;
         board[index(column,row)] = dynamicObject;
-    }else{//isError or isLoading
+    }else{
         print("error loading block component");
         print(component.errorsString());
         return false;
diff --git a/examples/declarative/tutorials/samegame/samegame2/samegame.qml b/examples/declarative/tutorials/samegame/samegame2/samegame.qml
index d98d383..e0706c2 100644
--- a/examples/declarative/tutorials/samegame/samegame2/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame2/samegame.qml
@@ -27,7 +27,7 @@ Rectangle {
 
 //![1]
         Button {
-            text: "New Game"; onClicked: SameGame.initBoard();
+            text: "New Game"; onClicked: SameGame.startNewGame();
             anchors.left: parent.left; anchors.leftMargin: 3
             anchors.verticalCenter: parent.verticalCenter
         }
diff --git a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
index 6c358d6..a76b517 100644
--- a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
@@ -12,7 +12,7 @@ Rectangle {
         page.opacity = 1;
     }
     signal closed();
-    color: "white"; border.width: 1; width: dialogText.width + 20; height: 60;
+    color: "white"; border.width: 1; width: dialogText.width + 20; height: dialogText.height + 20;
     opacity: 0
     Behavior on opacity { 
         NumberAnimation { duration: 1000 }
diff --git a/examples/declarative/tutorials/samegame/samegame3/samegame.js b/examples/declarative/tutorials/samegame/samegame3/samegame.js
index 432e88f..9620e25 100644
--- a/examples/declarative/tutorials/samegame/samegame3/samegame.js
+++ b/examples/declarative/tutorials/samegame/samegame3/samegame.js
@@ -1,10 +1,8 @@
 /* This script file handles the game logic */
-//Note that X/Y referred to here are in game coordinates
-var maxColumn = 10;//Nums are for tileSize 40
+var maxColumn = 10;
 var maxRow = 15;
 var maxIndex = maxColumn*maxRow;
 var board = new Array(maxIndex);
-var tileSrc = "Block.qml";
 var component;
 
 //Index function used instead of a 2D array
@@ -12,11 +10,11 @@ function index(column,row) {
     return column + (row * maxColumn);
 }
 
-function initBoard()
+function startNewGame()
 {
     //Calculate board size
-    maxColumn = Math.floor(gameCanvas.width/gameCanvas.tileSize);
-    maxRow = Math.floor(gameCanvas.height/gameCanvas.tileSize);
+    maxColumn = Math.floor(gameCanvas.width/gameCanvas.blockSize);
+    maxRow = Math.floor(gameCanvas.height/gameCanvas.blockSize);
     maxIndex = maxRow*maxColumn;
 
     //Close dialogs
@@ -35,12 +33,11 @@ function initBoard()
 
 function createBlock(column,row){
     if(component==null)
-        component = createComponent(tileSrc);
+        component = createComponent("Block.qml");
 
-    // Note that we don't wait for the component to become ready. This will
-    // only work if the block QML is a local file. Otherwise the component will
-    // not be ready immediately. There is a statusChanged signal on the
-    // component you could use if you want to wait to load remote files.
+    // Note that if Block.qml was not a local file, component.isReady would be
+    // false and we should wait for the component's statusChanged() signal to
+    // know when the file is downloaded and fully loaded before calling createObject().
     if(component.isReady){
         var dynamicObject = component.createObject();
         if(dynamicObject == null){
@@ -50,12 +47,12 @@ function createBlock(column,row){
         }
         dynamicObject.type = Math.floor(Math.random() * 3);
         dynamicObject.parent = gameCanvas;
-        dynamicObject.x = column*gameCanvas.tileSize;
-        dynamicObject.y = row*gameCanvas.tileSize;
-        dynamicObject.width = gameCanvas.tileSize;
-        dynamicObject.height = gameCanvas.tileSize;
+        dynamicObject.x = column*gameCanvas.blockSize;
+        dynamicObject.y = row*gameCanvas.blockSize;
+        dynamicObject.width = gameCanvas.blockSize;
+        dynamicObject.height = gameCanvas.blockSize;
         board[index(column,row)] = dynamicObject;
-    }else{//isError or isLoading
+    }else{
         print("error loading block component");
         print(component.errorsString());
         return false;
@@ -63,19 +60,19 @@ function createBlock(column,row){
     return true;
 }
 
-var fillFound;//Set after a floodFill call to the number of tiles found
+var fillFound;//Set after a floodFill call to the number of blocks found
 var floodBoard;//Set to 1 if the floodFill reaches off that node
-//NOTE: Be careful with vars named x,y, as the calling object's x,y are still in scope
+
 //![1]
-function handleClick(x,y)
+function handleClick(xPos,yPos)
 {
-    var column = Math.floor(x/gameCanvas.tileSize);
-    var row = Math.floor(y/gameCanvas.tileSize);
+    var column = Math.floor(xPos/gameCanvas.blockSize);
+    var row = Math.floor(yPos/gameCanvas.blockSize);
     if(column >= maxColumn || column < 0 || row >= maxRow || row < 0)
         return;
     if(board[index(column, row)] == null)
         return;
-    //If it's a valid tile, remove it and all connected (does nothing if it's not connected)
+    //If it's a valid block, remove it and all connected (does nothing if it's not connected)
     floodFill(column,row, -1);
     if(fillFound <= 0)
         return;
@@ -108,7 +105,7 @@ function floodFill(column,row,type)
     floodFill(column,row+1,type);
     floodFill(column,row-1,type);
     if(first==true && fillFound == 0)
-        return;//Can't remove single tiles
+        return;//Can't remove single blocks
     board[index(column,row)].opacity = 0;
     board[index(column,row)] = null;
     fillFound += 1;
@@ -125,7 +122,7 @@ function shuffleDown()
             }else{
                 if(fallDist > 0){
                     var obj = board[index(column,row)];
-                    obj.y += fallDist * gameCanvas.tileSize;
+                    obj.y += fallDist * gameCanvas.blockSize;
                     board[index(column,row+fallDist)] = obj;
                     board[index(column,row)] = null;
                 }
@@ -143,7 +140,7 @@ function shuffleDown()
                     var obj = board[index(column,row)];
                     if(obj == null)
                         continue;
-                    obj.x -= fallDist * gameCanvas.tileSize;
+                    obj.x -= fallDist * gameCanvas.blockSize;
                     board[index(column-fallDist,row)] = obj;
                     board[index(column,row)] = null;
                 }
@@ -155,20 +152,21 @@ function shuffleDown()
 //![2]
 function victoryCheck()
 {
-    //awards bonuses for no tiles left
+    //Award bonus points if no blocks left
     var deservesBonus = true;
     for(var column=maxColumn-1; column>=0; column--)
         if(board[index(column, maxRow - 1)] != null)
             deservesBonus = false;
     if(deservesBonus)
         gameCanvas.score += 500;
-    //Checks for game over
+
+    //Check whether game has finished
     if(deservesBonus || !(floodMoveCheck(0,maxRow-1, -1)))
         dialog.show("Game Over. Your score is " + gameCanvas.score);
 }
 //![2]
 
-//only floods up and right, to see if it can find adjacent same-typed tiles 
+//only floods up and right, to see if it can find adjacent same-typed blocks 
 function floodMoveCheck(column, row, type)
 {
     if(column >= maxColumn || column < 0 || row >= maxRow || row < 0)
diff --git a/examples/declarative/tutorials/samegame/samegame3/samegame.qml b/examples/declarative/tutorials/samegame/samegame3/samegame.qml
index 9623932..cdf99d7 100644
--- a/examples/declarative/tutorials/samegame/samegame3/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/samegame.qml
@@ -21,11 +21,11 @@ Rectangle {
         Item {
             id: gameCanvas
             property int score: 0
-            property int tileSize: 40
+            property int blockSize: 40
 
             z: 20; anchors.centerIn: parent
-            width: parent.width - (parent.width % tileSize);
-            height: parent.height - (parent.height % tileSize);
+            width: parent.width - (parent.width % blockSize);
+            height: parent.height - (parent.height % blockSize);
 
             MouseArea {
                 anchors.fill: parent; onClicked: SameGame.handleClick(mouse.x,mouse.y);
@@ -45,7 +45,7 @@ Rectangle {
         anchors.bottom: screen.bottom
 
         Button {
-            text: "New Game"; onClicked: SameGame.initBoard();
+            text: "New Game"; onClicked: SameGame.startNewGame();
             anchors.left: parent.left; anchors.leftMargin: 3
             anchors.verticalCenter: parent.verticalCenter
         }
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
index 0716bb3..15f5b19 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
@@ -11,7 +11,7 @@ Rectangle {
         page.opacity = 1;
     }
     signal closed();
-    color: "white"; border.width: 1; width: dialogText.width + 20; height: 60;
+    color: "white"; border.width: 1; width: dialogText.width + 20; height: dialogText.height + 20;
     opacity: 0
     Behavior on opacity { 
         NumberAnimation { duration: 1000 }
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/samegame.js b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
index a905f7d..0b1c6d6 100755
--- a/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
+++ b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
@@ -1,38 +1,28 @@
 /* This script file handles the game logic */
-//Note that X/Y referred to here are in game coordinates
-var maxColumn = 10;//Nums are for gameCanvas.tileSize 40
+var maxColumn = 10;
 var maxRow = 15;
 var maxIndex = maxColumn*maxRow;
 var board = new Array(maxIndex);
-var tileSrc = "content/BoomBlock.qml";
-//var scoresURL = "http://qtfx-nokia.trolltech.com.au/samegame/scores.php";
+var component;
 var scoresURL = "";
-var timer;
-var component = createComponent(tileSrc);
+var gameDuration;
 
 //Index function used instead of a 2D array
 function index(column,row) {
     return column + (row * maxColumn);
 }
 
-function timeStr(msecs) {
-    var secs = Math.floor(msecs/1000);
-    var m = Math.floor(secs/60);
-    var ret = "" + m + "m " + (secs%60) + "s";
-    return ret;
-}
-
-function initBoard()
+function startNewGame()
 {
     for(var i = 0; i<maxIndex; i++){
-        //Delete old blocks
+        //Delete blocks from previous game
         if(board[i] != null)
             board[i].destroy();
     }
 
     //Calculate board size
-    maxColumn = Math.floor(gameCanvas.width/gameCanvas.tileSize);
-    maxRow = Math.floor(gameCanvas.height/gameCanvas.tileSize);
+    maxColumn = Math.floor(gameCanvas.width/gameCanvas.blockSize);
+    maxRow = Math.floor(gameCanvas.height/gameCanvas.blockSize);
     maxIndex = maxRow*maxColumn;
 
     //Close dialogs
@@ -49,21 +39,52 @@ function initBoard()
         }
     }
 
-    timer = new Date();
+    gameDuration = new Date();
+}
+
+function createBlock(column,row){
+    if(component==null)
+        component = createComponent("content/BoomBlock.qml");
+
+    // Note that if Block.qml was not a local file, component.isReady would be
+    // false and we should wait for the component's statusChanged() signal to
+    // know when the file is downloaded and fully loaded before calling createObject().
+    if(component.isReady){
+        var dynamicObject = component.createObject();
+        if(dynamicObject == null){
+            print("error creating block");
+            print(component.errorsString());
+            return false;
+        }
+        dynamicObject.type = Math.floor(Math.random() * 3);
+        dynamicObject.parent = gameCanvas;
+        dynamicObject.x = column*gameCanvas.blockSize;
+        dynamicObject.targetX = column*gameCanvas.blockSize;
+        dynamicObject.targetY = row*gameCanvas.blockSize;
+        dynamicObject.width = gameCanvas.blockSize;
+        dynamicObject.height = gameCanvas.blockSize;
+        dynamicObject.spawned = true;
+        board[index(column,row)] = dynamicObject;
+    }else{
+        print("error loading block component");
+        print(component.errorsString());
+        return false;
+    }
+    return true;
 }
 
-var fillFound;//Set after a floodFill call to the number of tiles found
+var fillFound;//Set after a floodFill call to the number of blocks found
 var floodBoard;//Set to 1 if the floodFill reaches off that node
-//NOTE: Be careful with vars named x,y, as the calling object's x,y are still in scope
-function handleClick(x,y)
+
+function handleClick(xPos,yPos)
 {
-    var column = Math.floor(x/gameCanvas.tileSize);
-    var row = Math.floor(y/gameCanvas.tileSize);
+    var column = Math.floor(xPos/gameCanvas.blockSize);
+    var row = Math.floor(yPos/gameCanvas.blockSize);
     if(column >= maxColumn || column < 0 || row >= maxRow || row < 0)
         return;
     if(board[index(column, row)] == null)
         return;
-    //If it's a valid tile, remove it and all connected (does nothing if it's not connected)
+    //If it's a valid block, remove it and all connected (does nothing if it's not connected)
     floodFill(column,row, -1);
     if(fillFound <= 0)
         return;
@@ -95,7 +116,7 @@ function floodFill(column,row,type)
     floodFill(column,row+1,type);
     floodFill(column,row-1,type);
     if(first==true && fillFound == 0)
-        return;//Can't remove single tiles
+        return;//Can't remove single blocks
     board[index(column,row)].dying = true;
     board[index(column,row)] = null;
     fillFound += 1;
@@ -112,7 +133,7 @@ function shuffleDown()
             }else{
                 if(fallDist > 0){
                     var obj = board[index(column,row)];
-                    obj.targetY += fallDist * gameCanvas.tileSize;
+                    obj.targetY += fallDist * gameCanvas.blockSize;
                     board[index(column,row+fallDist)] = obj;
                     board[index(column,row)] = null;
                 }
@@ -130,7 +151,7 @@ function shuffleDown()
                     obj = board[index(column,row)];
                     if(obj == null)
                         continue;
-                    obj.targetX -= fallDist * gameCanvas.tileSize;
+                    obj.targetX -= fallDist * gameCanvas.blockSize;
                     board[index(column-fallDist,row)] = obj;
                     board[index(column,row)] = null;
                 }
@@ -141,21 +162,22 @@ function shuffleDown()
 
 function victoryCheck()
 {
-    //awards bonuses for no tiles left
+    //Award bonus points if no blocks left
     var deservesBonus = true;
     for(var column=maxColumn-1; column>=0; column--)
         if(board[index(column, maxRow - 1)] != null)
             deservesBonus = false;
     if(deservesBonus)
         gameCanvas.score += 500;
-    //Checks for game over
+
+    //Check whether game has finished
     if(deservesBonus || !(floodMoveCheck(0,maxRow-1, -1))){
-        timer = new Date() - timer;
+        gameDuration = new Date() - gameDuration;
         nameInputDialog.show("You won! Please enter your name:                 ");
     }
 }
 
-//only floods up and right, to see if it can find adjacent same-typed tiles 
+//only floods up and right, to see if it can find adjacent same-typed blocks 
 function floodMoveCheck(column, row, type)
 {
     if(column >= maxColumn || column < 0 || row >= maxRow || row < 0)
@@ -169,35 +191,6 @@ function floodMoveCheck(column, row, type)
            floodMoveCheck(column, row - 1, board[index(column,row)].type);
 }
 
-function createBlock(column,row){
-    // Note that we don't wait for the component to become ready. This will
-    // only work if the block QML is a local file. Otherwise the component will
-    // not be ready immediately. There is a statusChanged signal on the
-    // component you could use if you want to wait to load remote files.
-    if(component.isReady){
-        var dynamicObject = component.createObject();
-        if(dynamicObject == null){
-            print("error creating block");
-            print(component.errorsString());
-            return false;
-        }
-        dynamicObject.type = Math.floor(Math.random() * 3);
-        dynamicObject.parent = gameCanvas;
-        dynamicObject.x = column*gameCanvas.tileSize;
-        dynamicObject.targetX = column*gameCanvas.tileSize;
-        dynamicObject.targetY = row*gameCanvas.tileSize;
-        dynamicObject.width = gameCanvas.tileSize;
-        dynamicObject.height = gameCanvas.tileSize;
-        dynamicObject.spawned = true;
-        board[index(column,row)] = dynamicObject;
-    }else{//isError or isLoading
-        print("error loading block component");
-        print(component.errorsString());
-        return false;
-    }
-    return true;
-}
-
 //![2]
 function saveHighScore(name) {
     if(scoresURL!="")
@@ -205,7 +198,7 @@ function saveHighScore(name) {
     //OfflineStorage
     var db = openDatabaseSync("SameGameScores", "1.0", "Local SameGame High Scores",100);
     var dataStr = "INSERT INTO Scores VALUES(?, ?, ?, ?)";
-    var data = [name, gameCanvas.score, maxColumn+"x"+maxRow ,Math.floor(timer/1000)];
+    var data = [name, gameCanvas.score, maxColumn+"x"+maxRow ,Math.floor(gameDuration/1000)];
     db.transaction(
         function(tx) {
             tx.executeSql('CREATE TABLE IF NOT EXISTS Scores(name TEXT, score NUMBER, gridSize TEXT, time NUMBER)');
@@ -228,7 +221,7 @@ function saveHighScore(name) {
 function sendHighScore(name) {
     var postman = new XMLHttpRequest()
     var postData = "name="+name+"&score="+gameCanvas.score
-        +"&gridSize="+maxColumn+"x"+maxRow +"&time="+Math.floor(timer/1000);
+        +"&gridSize="+maxColumn+"x"+maxRow +"&time="+Math.floor(gameDuration/1000);
     postman.open("POST", scoresURL, true);
     postman.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     postman.onreadystatechange = function() { 
diff --git a/examples/declarative/tutorials/samegame/samegame4/samegame.qml b/examples/declarative/tutorials/samegame/samegame4/samegame.qml
index fe35e3b..5d5c81f 100644
--- a/examples/declarative/tutorials/samegame/samegame4/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/samegame.qml
@@ -20,11 +20,11 @@ Rectangle {
         Item {
             id: gameCanvas
             property int score: 0
-            property int tileSize: 40
+            property int blockSize: 40
 
             z: 20; anchors.centerIn: parent
-            width: parent.width - (parent.width % tileSize);
-            height: parent.height - (parent.height % tileSize);
+            width: parent.width - (parent.width % blockSize);
+            height: parent.height - (parent.height % blockSize);
 
             MouseArea {
                 anchors.fill: parent; onClicked: SameGame.handleClick(mouse.x,mouse.y);
@@ -63,7 +63,7 @@ Rectangle {
         anchors.bottom: screen.bottom
 
         Button {
-            text: "New Game"; onClicked: SameGame.initBoard();
+            text: "New Game"; onClicked: SameGame.startNewGame();
             anchors.left: parent.left; anchors.leftMargin: 3
             anchors.verticalCenter: parent.verticalCenter
         }