From fe3016a3623efe3430fbb87d43c7ab317cc7ed16 Mon Sep 17 00:00:00 2001
From: Andres Jaan Tack <ajtack@twilio.com>
Date: Thu, 30 Nov 2017 15:47:16 +0200
Subject: [PATCH 1/2] Remove an unnecessary global.

---
 static/sync/index.js | 34 ++++++++++++----------------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/static/sync/index.js b/static/sync/index.js
index d585191..1cc3728 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,10 +24,7 @@ $(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();
       if (data.board) {
@@ -42,24 +35,21 @@ $(function () {
       //changes on this document, we can trigger our UI to update
       syncDoc.on('updated', updateUserInterface);
 
+      //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 (&nbsp; for UI)
   function toggleCellValue($cell) {
     var cellValue = $cell.html();

From 65c4710f02892f4007dc3681d96c432dfa246804 Mon Sep 17 00:00:00 2001
From: Andres Jaan Tack <ajtack@twilio.com>
Date: Thu, 30 Nov 2017 15:48:52 +0200
Subject: [PATCH 2/2] Update to Sync SDK v0.7.

---
 static/sync/index.html | 2 +-
 static/sync/index.js   | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

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 @@
   </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>
diff --git a/static/sync/index.js b/static/sync/index.js
index 1cc3728..b260c7b 100755
--- a/static/sync/index.js
+++ b/static/sync/index.js
@@ -26,14 +26,17 @@ $(function () {
     //Note the use of promises
     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) {