Merge pull request #32 from ajtack/update-to-sync-0.7

Update to Sync SDK v0.7

static/sync/index.html

@@ -44,7 +44,7 @@
   </section>
 
 
-  <script src="//media.twiliocdn.com/sdk/js/sync/v0.5/twilio-sync.min.js"></script>
+  <script src="//media.twiliocdn.com/sdk/js/sync/v0.7/twilio-sync.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="index.js"></script>
 </body>

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();