Google Drive Realtime API Tic Tac Toe

app.js

var APP = angular.module('APP', []);

APP.controller('gameController', function($scope) {
    
    $scope.gameReady = false;
    $scope.chatInput = '';
    
    var wins = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [6, 7, 8],
        [0, 4, 8],
        [2, 4, 6],
        ];
        
    var scoreGame = function() {
        for (var k = 0; k < 2; k++) {
            var player = k == 0 ? 'x' : 'o';
            for (var i = 0; i < wins.length; i++) {
                var count = 0;
                for (var j = 0; j < wins[i].length; j++) {
                    if ($scope.tiles[wins[i][j]] == player) count++;
                }
                if (count == 3) return player;
            }
        }
        var used = 0;
        for (var i in $scope.tiles) {
            if ($scope.tiles[i] != 0) used++;
        }
        console.log(used);
        if (used == 9) return 'no one';
    };
    
    $scope.game = {turn:'x'};
    $scope.tiles = [0, 0, 0, 0, 0, 0, 0, 0, 0];
    $scope.chat = [];
    
    $scope.tileClick = function(index) {
        if ($scope.tiles[index] != 0) return;
        //set tile
        $scope.tiles[index] = $scope.game.turn;
        APP.tiles.set(index, $scope.game.turn);
        //change the turn
        $scope.game.turn = $scope.game.turn == 'x' ? 'o' : 'x';
        APP.game.set('turn', $scope.game.turn);
        //evaluate game state
        var winner = scoreGame();
        if (winner) {
            alert(winner + ' wins');
            $scope.reset();
        }
    };
    
    $scope.chatClick = function() {
        var data = {player:$scope.game.turn, message:$scope.chatInput, time:Date.now()};
        console.log(data);
        $scope.chat.push(data);
        APP.chat.push(data);
    };
    
    $scope.reset = function() {
        $scope.tiles = [0, 0, 0, 0, 0, 0, 0, 0, 0];
        APP.tiles.replaceRange(0, $scope.tiles);
    };
    
    //public functions, accessed by drive.js externally
    APP.gameReady = function() {
        $scope.gameReady = true;
        $scope.$apply(); //udpate view
    };
    APP.updateTiles = function() {
        $scope.tiles = APP.tiles.asArray();
        $scope.$apply(); //udpate view
        var winner = scoreGame();
        if (winner) alert(winner + ' wins');
    };
    APP.updateChat = function() {
        $scope.chat = APP.chat.asArray();
        $scope.$apply(); //udpate view
    };
    APP.updateGame = function() {
        $scope.game.turn = APP.game.get('turn');
        $scope.$apply(); //udpate view
    };
});

drive.js

function onFileLoaded(doc) {
    APP.game = doc.getModel().getRoot().get('game');
    APP.tiles = doc.getModel().getRoot().get('tiles');
    APP.chat = doc.getModel().getRoot().get('chat');
    
    //Game
    function gameChange(e) {
        if (e.isLocal == true) return;
        console.log('gameChange', e);
        APP.updateGame();
    };
    APP.game.addEventListener(gapi.drive.realtime.EventType.VALUE_CHANGED, gameChange);
 
    
    //Tiles
    function tilesChange(e) {
        if (e.isLocal) return;
        console.log('tilesChange', e);
        APP.updateTiles();
    };
    APP.tiles.addEventListener(gapi.drive.realtime.EventType.VALUES_SET, tilesChange);
    
    
    //Tiles
    function chatChange(e) {
        if (e.isLocal) return;
        console.log('chatChange', e);
        APP.updateChat();
    };
    APP.chat.addEventListener(gapi.drive.realtime.EventType.VALUES_ADDED, chatChange);
    
    //start game
    console.log(APP);
    APP.updateGame();
    APP.updateTiles();
    APP.gameReady();
}

function initializeModel(model) {
    console.log('model initialized');
    var game = model.createMap({turn:'x'});
    var tiles = model.createList([0, 0, 0, 0, 0, 0, 0, 0, 0]);
    var chat = model.createList();
    
    model.getRoot().set('game', game);
    model.getRoot().set('tiles', tiles);
    model.getRoot().set('chat', chat);
}

var realtimeOptions = {
    clientId: 'YOUR CLIENT ID',
    authButtonElementId: 'authorizeButton',
    initializeModel: initializeModel,
    autoCreate: true,
    defaultTitle: "Realtime API Tic Tac Toe Example",
    newFileMimeType: null, // Using default.
    onFileLoaded: onFileLoaded,
    registerTypes: null, // No action.
    afterAuth: null // No action.
}

window.onload = function() {
    var realtimeLoader = new rtclient.RealtimeLoader(realtimeOptions);
    realtimeLoader.start();
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html ng-app="APP">
<head>
  <title>Google Drive Realtime quickstart</title>
  <meta http-equiv="X-UA-Compatible" content="IE=9">

  <!-- Load the Realtime libraries. -->
  <script type="text/javascript"
          src="https://apis.google.com/js/api.js"></script>

  <!-- Load the utility library. -->
  <script type="text/javascript" src="realtime-client-utils.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  
  <style>
    .game {
        width:175px;
        height:175px;
    }
      .tile {
          display:inline-block;
          width:50px;
          height:50px;
          text-align:center;
          font-size: 40px;
          font-family:Arial;
          background:#EEE;
          margin:2px;
          border:1px solid #DDD;
          overflow:hidden;
      }
  </style>
</head>

<!-- Start Realtime when the body has loaded. -->
<body>

    <h1>Drive Realtime API :: quickstart</h1>
    
    <button id="authorizeButton" disabled>You must authorize</button>
    
    
    <div ng-controller="gameController">
        
        <div ng-if="gameReady == true">
            
            <h3>Tic Tac Toe</h3>
           
            <h4>
                It is {{game.turn}}'s turn.
            </h4>
          
            <div class="game">
                
                <div class="tile" ng-repeat="tile in tiles track by $index" ng-click="tileClick($index)">
                    
                    <span ng-if="tile == 'o'">o</span>
                    <span ng-if="tile == 'x'">x</span>
                    
                </div>
                
            </div>
            
            <br />
            
            <button ng-click="reset()">Reset Game</button>
            
            <h3>Chat</h3>
            
            <div ng-repeat="item in chat track by $index">
                {{item.player}}: {{item.message}}
            </div>
            
            <input ng-model="chatInput" type="text" />
            
            <p>{{chatInput}}</p>
            <button ng-click="chatClick()">Submit</button>
        
        </div>
      
    </div>
    
    
    
    
    
    <script src="app.js"></script>
    <script src="drive.js"></script>

</body>
</html>