Angular MVC TicTacToe

by dandoyon

HTML

<script src="http://docs.angularjs.org/angular-0.9.18.min.js" ng:autobind></script>    
<script>
    function TicTacToeCntl($location){
    this.$location = $location;
    this.cellStyle= {
    'height': '20px',
    'width': '20px',
    'border': '1px solid black',
    'text-align': 'center',
    'vertical-align': 'middle',
    'cursor': 'pointer'
    };
    this.reset();
    this.$watch('$location.hashSearch.board', this.readUrl);
    }
    TicTacToeCntl.prototype = {
    dropPiece: function(row, col) {
    if (!this.winner && !this.board[row][col]) {
    this.board[row][col] = this.nextMove;
    this.nextMove = this.nextMove == 'X' ? 'O' : 'X';
    this.setUrl();
    }
    },
    reset: function(){
    this.board = [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
    ];
    this.nextMove = 'X';
    this.winner = '';
    this.setUrl();
    },
    grade: function(){
    var b = this.board;
    this.winner =
    row(0) || row(1) || row(2) ||
    col(0) || col(1) || col(2) ||
    diagonal(-1) || diagonal(1);
    function row(row) { return same(b[row][0], b[row][1], b[row][2]);}
    function col(col) { return same(b[0][col], b[1][col], b[2][col]);}
    function diagonal(i) { return same(b[0][1-i], b[1][1], b[2][1+i]);}
    function same(a, b, c) { return (a==b && b==c) ? a : '';};
    },
    setUrl: function(){
    var rows = [];
    angular.forEach(this.board, function(row){
    rows.push(row.join(','));
    });
    this.$location.hashSearch.board = rows.join(';') + '/' + this.nextMove;
    },
    readUrl: function(value) {
    if (value) {
    value = value.split('/');
    this.nextMove = value[1];
    angular.forEach(value[0].split(';'), function(row, col){
    this.board[col] = row.split(',');
    }, this);
    this.grade();
    } else {
    this.reset();
    }
    }
    };
</script>

<h3>Tic-Tac-Toe</h3>
<div ng:controller="TicTacToeCntl">
    Next Player: {{nextMove}}
    <div class="winner" ng:show="winner">Player {{winner}} has won!</div>
    <table...