QML Advanced Tutorial 4 - Finishing Touches

Storing high scores offline

Now we need to implement the functionality to actually save the High Scores table.

Here is the saveHighScore() function in samegame.js:

 function saveHighScore(name) {
     if (scoresURL != "")
         sendHighScore(name);

     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(gameDuration / 1000)];
     db.transaction(function(tx) {
         tx.executeSql('CREATE TABLE IF NOT EXISTS Scores(name TEXT, score NUMBER, gridSize TEXT, time NUMBER)');
         tx.executeSql(dataStr, data);

         var rs = tx.executeSql('SELECT * FROM Scores WHERE gridSize = "12x17" ORDER BY score desc LIMIT 10');
         var r = "\nHIGH SCORES for a standard sized grid\n\n"
         for (var i = 0; i < rs.rows.length; i++) {
             r += (i + 1) + ". " + rs.rows.item(i).name + ' got ' + rs.rows.item(i).score + ' points in ' + rs.rows.item(i).time + ' seconds.\n';
         }
         dialog.show(r);
     });
 }

First we call sendHighScore() (explained in the section below) if it is possible to send the high scores to an online database.

Then, we use the Offline Storage API to maintain a persistent SQL database unique to this application. We create an offline storage database for the high scores using openDatabase() and prepare the data and SQL query that we want to use to save it. The offline storage API uses SQL queries for data manipulation and retrieval, and in the db.transaction() call we use three SQL queries to initialize the database (if necessary), and then add to and retrieve high scores. To use the returned data, we turn it into a string with one line per row returned, and show a dialog containing that string.

This is one way of storing and displaying high scores locally, but certainly not the only way. A more complex alternative would be to create a high score dialog component, and pass it the results for processing and display (instead of reusing the Dialog). This would allow a more themeable dialog that could better present the high scores. If your QML is the UI for a C++ application, you could also have passed the score to a C++ function to store it locally in a variety of ways, including a simple format without SQL or in another SQL database.

 function sendHighScore(name) {
     var postman = new XMLHttpRequest()
         var postData = "name=" + name + "&score=" + gameCanvas.score + "&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() {
         if (postman.readyState == postman.DONE) {
             dialog.show("Your score has been uploaded.");
         }
     }
     postman.send(postData);
 }