Board

|◄ Quickstart|Player ►| |---|---:|

The two main classes you interact with in ngGo are the Board and Player classes.

The Board class is used to represent a Go board. It contains various board layers (e.g. grid, stones, markup) and is used for placing and removing objects on these layers as well as drawing or re-drawing them. The class also determines the correct draw size of the board and grid cells, based on the boards grid size, margin and display section.

Board objects are instanced, so you can have as many of them as you'd like. However, please note that since the Player class is a singleton, you can only control one dynamic board at a time.

Directive

The board has an associated directive which links the board HTML element to a Board instance. To trigger the directive, create a HTML structure in your template with the board tag:

<board></board>

This will automatically create a new board instance in the isolate scope of the directive.

Static vs. dynamic boards

The board directive can create both static or dynamic boards. Static boards only draw grid, stones and markup layers and do draw the shadows, score and hover layers. In addition, static boards only create one 2d canvas and all layers draw their content onto that canvas.

To define a board as static, simply set the static attribute to true:

<board static="true"></board>

Use static boards when you need to display one or more boards on the page which don't need to be interacted with.

Using existing instances

If you wish for the directive to use a specific pre-existing Board instance, you can specify it using the attribute instance:

<board instance="Board"></board>

Then, create the instance in your controller:

angular.module('MyApp')
    .controller('MyController', function($scope, Board) {

    //Instantiate a new 9x9 board for the directive
    $scope.Board = new Board({width: 9, height: 9});
    $scope.Board.add('markup', 4, 4, 'triangle');
});

The directive will evaluate the expression given in the instance attribute on the parent scope in order to try and obtain a board instance. This means you can also specify a function to evaluate:

angular.module('MyApp')
    .controller('MyController', function($scope, Board) {

    //Create board in local variable
    var board = new Board({width: 9, height: 9});
    board.add('markup', 4, 4, 'triangle');

    //Supply it via a scope function
    $scope.Board = function() {
        return board;
    }
});

Multiple boards

You can create multiple static boards using for example ng-repeat. In your template, make sure you link the Board instances using the Board scope identifier:

<div class="board-thumb" ng-repeat="Board in Boards">
    <board static="true" instance="Board"></board>
</div>

Then, in your controller, you can instantiate and prepare these instances as needed:

angular.module('MyApp')
    .controller('MyController', function($scope, Board, StoneColor) {

    //Prepare board container
    $scope.Boards = [];

    //Create some 9x9 board instances
    for (i = 0; i < 5; i++) {
        var board = new Board({width: 9, height: 9});
        for (j = 0; j <= 25; j++) {
            var x = Math.floor(Math.random() * 9),
                y = Math.floor(Math.random() * 9);
            board.add('stones', x, y, j%2 ? StoneColor.B : StoneColor.W);
        }
        $scope.Boards.push(board);
    }
});

Of course you can also prepare the stone positions from existing game records and feed them to the board instances all at once.

Configuration & Theme

For details on how to configure a Board instance, see Board configuration. For details on how to change the theme of a Board instance, see Board theme.

|◄ Quickstart|Player ►| |---|---:|