goban.js

function Goban(canvasElement) {
  // size config
  this.gridSize    = 19;
  this.gridWidth   = 20;
  
  // style config
  this.styleStones = 'smooth';
  this.styleBoard  = 'lightwood';

  // board style
  this.gridBackground = 'white';
  this.gridStroke     = 'black';
  
  // background image data
  // useful: http://www.kawa.net/works/js/data-scheme/base64-e.html
  this.lightwood = 'data:image/jpeg;base64,'+
      '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'+
      '2QJQ9k2c7GH6z//Z';
  
  // get canvas element and object
  this.canvas = canvasElement;
  this.board = canvasElement.getContext('2d');
  
  // this.canvas = document.getElementById('goban');
  // this.board = document.getElementById('goban').getContext('2d');
  
  // get settings from data- tags!
  if (this.canvas.hasAttribute('data-grid-size'))
    this.gridSize = parseInt(this.canvas.getAttribute('data-grid-size'), 0);
  
  if (this.canvas.hasAttribute('data-grid-width'))
    this.gridWidth = parseInt(this.canvas.getAttribute('data-grid-width'), 0);
  
  if (this.canvas.hasAttribute('data-style-board'))
    this.styleBoard = this.canvas.getAttribute('data-style-board');
  
  if (this.canvas.hasAttribute('data-style-stones'))
    this.styleStones = this.canvas.getAttribute('data-style-stones');
  
  // make canvas the correct size
  this.canvas.width = this.canvas.height = (this.gridSize+1)*this.gridWidth;
  
  // create stones array
  this.stones = new Array(this.gridSize);
  for (var i = 0; i < this.gridSize; i++) {
    this.stones[i] = new Array(this.gridSize);
    
    for (var j = 0; j <this. gridSize; j++)
      this.stones[i][j] = Math.floor(Math.random()*3);
  }
 
  
  
  // is it lightwood?
  switch (this.styleBoard) {
    case 'lightwood':
      // for texture onload
      var self = this;
      
      // load the texture, draw when ready
      this.texture = new Image();
      this.texture.src = this.lightwood;
      this.texture.onload = function() {
        // texture has loaded
        self.gridBackground = self.board.createPattern(self.texture, 'repeat');
    
        // draw!
        self.draw();
      };
      break;
      
    case 'plain':
      this.gridBackground = '#e6b933';
      this.draw();
      break;
      
    default:
      this.gridBackground = '#e6b933';
      this.draw();
      break; 
  }
}

Goban.prototype.draw = function() {
  // fill the background
  this.board.fillStyle = this.gridBackground;
  this.board.fillRect(0,0,(this.gridSize+1)*this.gridWidth,(this.gridSize+1)*this.gridWidth);
  
  // draw the grid
  this.board.strokeStyle = this.gridStroke;
  this.board.beginPath();
  
  for (var i = 0; i < this.gridSize; i++) {
    // per loop
    var extraSpace = this.gridWidth+(i*this.gridWidth) + 0.5;
    this.board.moveTo(this.gridWidth, extraSpace);
    this.board.lineTo(this.gridWidth*this.gridSize, extraSpace);
    this.board.moveTo(extraSpace, this.gridWidth);
    this.board.lineTo(extraSpace, this.gridWidth*this.gridSize + 0.5);
  }
  
  this.board.closePath();
  this.board.stroke();
  
    
  // draw the dots
  this.board.fillStyle = 'black';
  this.board.beginPath();
      
  var gridDots = [];
    
  if (this.gridSize == 19)
    gridDots = [3,9,15];
    
  // TODO: not quite.
  if (this.gridSize == 13)
    gridDots = [3,6,9];
  
  // TODO: not quite.
  if (this.gridSize == 9)
    gridDots = [2,4,6];
      
  for (var g = 0; g < gridDots.length; g++)
    for (var h = 0; h < gridDots.length; h++)
      this.board.arc(this.gridWidth*(gridDots[g]+1) + 0.5,
        this.gridWidth*(gridDots[h]+1) + 0.5, 3, 0, 2*Math.PI, true);
      
  this.board.closePath();
  this.board.fill();  
  
  // add the stones
  for (var x = 0; x < this.gridSize; x++) {
    for (var y = 0; y < this.gridSize; y++) {
      if (this.stones[x][y] > 0) {
        
        // centre of stone
        var p = this.gridWidth*(x+1) + 0.5;
        var q = this.gridWidth*(y+1) + 0.5;
        
        // set the style
        switch(this.styleStones) {
          case 'flat':
            var flat;
            if (this.stones[x][y] == 1)
              flat = 'black';
            
            if (this.stones[x][y] == 2)
              flat = 'white';
              
            this.board.fillStyle = flat;
            break;
            
          case 'smooth':
            var smooth = this.board.createRadialGradient(p-2, q-2, 0.1, p, q, this.gridWidth/2);
            // set colour (black)
            if (this.stones[x][y] == 1) {
              smooth.addColorStop(0, '#2E2E2E');
              smooth.addColorStop(1, '#080808');
            }
        
            // set colour (white)
            if (this.stones[x][y] == 2) {
              smooth.addColorStop(0, '#FFFFFF');
              smooth.addColorStop(1, '#DBDBDB');
            }
            
            this.board.fillStyle = smooth;
            break;
        }
        
        // draw the stone
        this.board.beginPath();
        this.board.arc(p, q, this.gridWidth/2, 0, 2*Math.PI, true);
        this.board.closePath();
        this.board.fill();
      }
    }
  }
};