Step 5 - The New and Improved Board Object!

The first step in implementing the UML diagram is to create the board object.

The main changes I made to the board-drawing code were:

1. Encapsulating the code inside a JavaScript object
2. Removing the code for drawing the wood grain on the canvas
3. Modifying the code so it would support multiple screen widths

The first step was pretty easy. Just like the game object, all it took was to define the object and then instantiate it in the code. In the constructor, I pass in the padding (in pixels) around the board, the width (in pixels) of the board, and the number of lines. Although currently it only supports 19 x 19 line boards.

The constructor looks like this:

// the code that draws the board encapsulated as an object
function Board( padding, width, lines )
{
	this.padding = padding; // padding around the board
	this.width = width;	// width of the actual playing area
	this.lines = lines;	// number of lines on the board 
	this.lineSpacing = (this.width)/(this.lines -1 ); // the spacing between the lines
	this.starPoints = [";S[dd]",";S[jd]",";S[pd]",";S[dj]",";S[jj]",";S[pj]",";S[dp]",";S[jp]",";S[pp]"]; //star points for a 19 x 19 board in SGF format

with the rest of the object being the methods drawBoardLines( ), sgfToXy( ), and drawPiece( ). The sgfToXy( ) and drawPiece( ) are going to disappear when I define the Stone object. Right now it's not 100% matching the UML diagram, but we're getting there :-)

Initially, when I created the board object, the callback wasn't working to start drawing the board lines. Since I'm just learning JavaScript I figured it had something to do with the way I was defining it as this.drawBoardLines( ). I planned to change the design so the board and stones were on separate canvases on top of the board image. Since the callback wasn't working, I thought it would be better to invest my time learning how to layer canvas elements than getting the callback working.

Since the canvas is transparent, this part just required some simple jQuery and CSS to position the canvas on top of an image of the board. It just took some googling and experimentation to figure it out. In go.js the new code looks like this:

// wait until the page is loaded to size and draw the board
$(document).ready(function()
{
	var thePadding = 10;
	var theLines = 19;
	
	// calculate the size of the board
	var boardWidth = Math.round($('#gameSelectBtn').width());
				  
	// after we know the width of the board we can instantiate a board object
	theBoard = new Board(thePadding, boardWidth, theLines);
	
	// next we set the image and board lines to the same value
	$('#goBoardImage').width(boardWidth +    (thePadding * 2));
	$('#goBoardImage').height(boardWidth +   (thePadding * 2));

	// NOTE: need to set width and height with .attr because $('#goBoard').width() will stretch the image and not 
	// change the actual size of the canvas
	$('#goBoard').attr("width", boardWidth + (thePadding * 2));    
	$('#goBoard').attr("height", boardWidth+ (thePadding * 2));
				  
	// thank you stackoverflow.com for the code to position the canvas over the top of the image of the board !!
	// http://stackoverflow.com/questions/683339/how-do-i-find-the-absolute-position-of-an-element-using-jquery
	var position = $('#goBoardImage').offset();
	$('#goBoard').css(position);
				  
    // finally, draw out the lines on the board
	theBoard.drawBoardLines();
});

Lines 33 and 34 position the canvas over the image. And Lines 22-29 resize the board after the page has loaded. One interesting thing is that if you use the .width() and .height() jQuery functions it will stretch the canvas instead of resizing it. So if the canvas originally started out as 100 x 100 pixels and you set the width x height to 400 x 400, you would still have a 100 x 100 canvas, but it would be displayed four times the original size!

The last step was to remove all of the hard-coded values in the original board code. Hard-coding values is a really bad practice, obviously. However, I like to code by making lots of small, fast refactorings, instead of a lengthy, massive push to get it all working perfectly right away.

All of the hardcoded values can be calculated from the three parameters initially passed in. The slightly tricky part was dynamically resizing the board based on the initial screen width. Eventually the board will be a property of the Player object. For now I created a global variable to hold the board object, but I couldn't instantiate it until after the page was loaded because I needed to know the page width. So I created the variable theBoard and assigned it 'null'.  Then later I assigned the instantiated board object, once I knew the page width:

var theBoard = null; // need this as a global variable but can't instantiate until after the page is loaded
...
// after we know the width of the board we can instantiate a board object
theBoard = new Board(thePadding, boardWidth, theLines);

The final change was a small improvement in the routine drawing the star points. The routine I had would work for a 19 x 19 board. If the board size changed in the future, the number and position of the star points would change. Since I had to re-write this method anyway to get rid of the hard-coded variables, I figured I could leverage the sgfToXy( ) method and use that to draw the star points.

In the future this will make it easy to add a multi-dimensional array indexed by the number of board lines which provides the appropriate star point pattern. So a 19 line board would be 'this.starPoints[19][ ]' and a 9 line board would be an array like 'this.starPoints[9][ ]'.