44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/public/sync/index.js:
--------------------------------------------------------------------------------
1 | $(function () {
2 | //We'll use message to tell the user what's happening
3 | var $message = $('#message');
4 |
5 | //Get handle to the game board buttons
6 | var $buttons = $('#board .board-row button');
7 |
8 | //Our interface to the Sync service
9 | var syncClient;
10 |
11 | // Every browser Sync client relies on FPA tokens to authenticate and authorize it
12 | // for access to your Sync data.
13 | //
14 | // In this quickstart, we're using our own token generator. You can generate a token
15 | // in any backend language that Twilio supports, or generate a Twilio Function so
16 | // Twilio can host it for you. See the docs for more details.
17 | //
18 | $.getJSON('/token', function (tokenResponse) {
19 |
20 | // Once we have the token, we can initialize the Sync client and start subscribing
21 | // to data. The client will initialize asynchronously while we load the rest of
22 | // the user interface.
23 | //
24 | syncClient = new Twilio.Sync.Client(tokenResponse.token, { logLevel: 'info' });
25 | syncClient.on('connectionStateChanged', function(state) {
26 | if (state != 'connected') {
27 | $message.html('Sync is not live (websocket connection ' + state + ')…');
28 | } else {
29 | // Now that we're connected, lets light up our board and play!
30 | $buttons.attr('disabled', false);
31 | $message.html('Sync is live!');
32 | }
33 | });
34 |
35 | // Let's pop a message on the screen to show that Sync is working
36 | $message.html('Loading board data…');
37 |
38 | // Our game state is stored in a Sync document. Here, we'll attach to that document
39 | // (or create it, if it doesn't exist) and connect the necessary event handlers.
40 | //
41 | syncClient.document('SyncGame').then(function(syncDoc) {
42 | var data = syncDoc.value;
43 | if (data.board) {
44 | updateUserInterface(data);
45 | }
46 |
47 | // Any time the board changes, we want to show the new state. The 'updated'
48 | // event is for this.
49 | syncDoc.on('updated', function(event) {
50 | console.debug("Board was updated", event.isLocal? "locally." : "by the other guy.");
51 | updateUserInterface(event.value);
52 | });
53 |
54 | // Let's make our buttons control the game state in Sync…
55 | $buttons.on('click', function (e) {
56 | // Toggle the value: X, O, or empty
57 | toggleCellValue($(e.target));
58 |
59 | // Send updated document to Sync. This will trigger "updated" events for all players.
60 | var data = readGameBoardFromUserInterface();
61 | syncDoc.set(data);
62 | });
63 | });
64 |
65 | });
66 |
67 | //Toggle the value: X, O, or empty ( for UI)
68 | function toggleCellValue($cell) {
69 | var cellValue = $cell.html();
70 |
71 | if (cellValue === 'X') {
72 | $cell.html('O');
73 | } else if (cellValue === 'O') {
74 | $cell.html(' ');
75 | } else {
76 | $cell.html('X');
77 | }
78 | }
79 |
80 | //Read the state of the UI and create a new document
81 | function readGameBoardFromUserInterface() {
82 | var board = [
83 | ['', '', ''],
84 | ['', '', ''],
85 | ['', '', '']
86 | ];
87 |
88 | for (var row = 0; row < 3; row++) {
89 | for (var col = 0; col < 3; col++) {
90 | var selector = '[data-row="' + row + '"]' +
91 | '[data-col="' + col + '"]';
92 | board[row][col] = $(selector).html().replace(' ', '');
93 | }
94 | }
95 |
96 | return {board: board};
97 | }
98 |
99 | //Update the buttons on the board to match our document
100 | function updateUserInterface(data) {
101 | for (var row = 0; row < 3; row++) {
102 | for (var col = 0; col < 3; col++) {
103 | var this_cell = '[data-row="' + row + '"]' + '[data-col="' + col + '"]';
104 | var cellValue = data.board[row][col];
105 | $(this_cell).html(cellValue === '' ? ' ' : cellValue);
106 | }
107 | }
108 | }
109 | });
110 |
--------------------------------------------------------------------------------
3 |