Indexed DB - HTML5 with Visual Studio 2012 - page 271

else
movePiece(oStart, startID, end, pieceStore);
}
}

Now add the following code to the end of the script element to implement the displayCapturedPieces()
function:

function displayCapturedPieces() {
var xact = db.transaction(["piece"]);
var textOut = "";

var pieceStore = xact.objectStore("piece");
var index = pieceStore.index("piecePosition");

var keyRange = IDBKeyRange.lowerBound("x");
var cursor = index.openCursor(keyRange);

cursor.onsuccess = function (event) {
var item = event.target.result;
if (item) {
textOut += " - " + item.value.color +" " +
item.value.type + "\r\n";
item.continue();
}
else if (textOut.length > 0)
alert("The following pieces were captured:\r\n"+textOut);
}
}

This code creates a read-only transaction using only the piece store. It then gets the store and its
piecePosition index. It defines a key range using a lower bound of “x”. This will only return objects that begin
with “x” or greater. Since the pieces on the board will have a position that starts with “a” through “h” these will
be excluded. The code then iterates through the cursor and concatenates the piece details into a text string. The
result is displayed using an alert() function.

■ Be aware that the string comparisons in the key range are case sensitive. If you had used an upper-
case “x”, this would not have worked since a lowercase “a” comes after an uppercase “x”. The W3C specification
provides some details on how comparisons are supposed to work. For details, see the article at:
http://www.w3.org/TR/IndexedDB/#key-construct .

Caution

Now you'll need to call this function after the animation is completed. Add the following line of code to the
makeNextMove() function after the “Checkmate!” text is displayed:
displayCapturedPieces();

Save your changes and press F5 to start the application. After the animation has finished you should see the
alert shown in Figure 11-6 .