diff --git a/static/sync/index.html b/static/sync/index.html index 796886d..4096d63 100755 --- a/static/sync/index.html +++ b/static/sync/index.html @@ -44,7 +44,7 @@ - + diff --git a/static/sync/index.js b/static/sync/index.js index d585191..b260c7b 100755 --- a/static/sync/index.js +++ b/static/sync/index.js @@ -8,10 +8,6 @@ $(function () { //Our interface to the Sync service var syncClient; - //We're going to use a single Sync document, our simplest - //synchronisation primitive, for this demo - var syncDoc; - //Get an access token for the current user, passing a device ID //In browser-based apps, every tab is like its own unique device //synchronizing state -- so we'll use a random UUID to identify @@ -28,38 +24,35 @@ $(function () { //This code will create and/or open a Sync document //Note the use of promises - syncClient.document('SyncGame').then(function(doc) { - //Lets store it in our global variable - syncDoc = doc; - + syncClient.document('SyncGame').then(function(syncDoc) { //Initialize game board UI to current state (if it exists) - var data = syncDoc.get(); + var data = syncDoc.value; if (data.board) { updateUserInterface(data); } //Let's subscribe to changes on this document, so when something //changes on this document, we can trigger our UI to update - syncDoc.on('updated', updateUserInterface); + syncDoc.on('updated', function(event) { + console.debug("Board was updated", event.isLocal? "locally." : "by the other guy."); + updateUserInterface(event.value); + }); + //Whenever a board button is clicked, update that document. + $buttons.on('click', function (e) { + //Toggle the value: X, O, or empty + toggleCellValue($(e.target)); + + //Send updated document to Sync + //This should trigger "updated" events on other clients + var data = readGameBoardFromUserInterface(); + syncDoc.set(data); + + }); }); }); - //Whenever a board button is clicked: - $buttons.on('click', function (e) { - //Toggle the value: X, O, or empty - toggleCellValue($(e.target)); - - //Update the document - var data = readGameBoardFromUserInterface(); - - //Send updated document to Sync - //This should trigger "updated" events on other clients - syncDoc.set(data); - - }); - //Toggle the value: X, O, or empty (  for UI) function toggleCellValue($cell) { var cellValue = $cell.html();