• There is a new autodiv.js which enables you to just embed a div with some special attributes and jGoBoard will generate a SGF viewer for you with no additional JavaScript!
• I compiled a single minified all-min.js with Google’s Closure Compiler so you only need one, fast-loading script tag. Nice!

Basically all you need to do is to head to Download page and grab it, and look at the source of embedding demo and you should have a pretty clear idea how to embed jGoBoard to your blog, website, or whatever. Have fun!

Oh, one final remark: Remote SGF loading uses JSONP service I have created that fetches an SGF file, parses it’s structure and returns it to your script in parsed form. To avoid abuse, I’ve put quotas on the amount that one domain can use the service – 1000 requests a day and max 10 MB data in or out. So if you are expecting to exceed this, either put your SGF files in a place you can reference them locally (i.e. no need for http:// in the URL), cache them that way or contact me to negotiate a bigger quota. :)

This way of combining hover functionality with markers has some disadvantages – for example, you cannot have a hover on an intersection which also contains a marker, and if you have an application that places black and white stones in turn, you may need to change 350 markers on each move. However, based on testing it only seems to take around 1ms to change the markers on a modern browser, and because I did not want to add another 361 divs to jGoBoard in addition to the existing 1160, it’s just the way it’s currently done – adding a new hover layer can easily be done by more demanding applications, as long as you pass any mouse clicks to board.click handler if you want to retain that functionality.

Having said all that, here’s how you make a coordinate show a black stone when mouse cursor moves on top of it:

board.mark(new JGOCoordinate("H14"), "<");

Now let’s say you want to make all empty intersections have a white stone hover effect. One way to achieve this would be to make two for-loops to go through all coordinates, but to avoid creating such structure over and over again in the code, JGOBoard object provides an each() method very similar to the one in jQuery to call a function for every coordinate of the board. Similar to jQuery, the special this variable is set to board object in the function, so you can use all board methods easily in the function:

// Mark all empty intersections with white hover
board.each(function(coordinate) {
  if(this.get(coordinate) == JGO_CLEAR)
    this.mark(coordinate, '>');
});

That’s it! Note that the markers remain on board even when you add stones, so if you for example have a web page where the user is always providing moves for white player, after initial marking, you only need to update markers areas where stones are placed or removed.

1. Top layer that contains the markers
2. Middle layer that contains the stones
3. Bottom layer that contains the shadows cast by stones

So how to create a marker? It’s very simple. Remember how we made the board object:

board = jgo_generateBoard($("#board"));

The board object that the function call returns has all the helpful methods in the JGOBoard class (see the beginning of jgoboard.js for documented prototype definitions), but it also replaces the stock set(coordinate,stone) method with a version that updates the board visuals, and adds a new mark(coordinate,marker) to the object. Using mark(…) function is straightforward:

var tengen = new JGOCoordinate(9,9);
board.mark(tengen, '#'); // place a square marker

Clearing a marker uses the same method, you just pass an empty string (“”) as the marker. The following standard markers are available:

1. # creates a square
2. * creates a cross (X)
3. / creates a triangle
4. 0 (zero) creates a circle

In addition, any non-recognized marker will be output as label, so 1-9, a-z, A-Z and longer strings can also be added.

Territory markers

In addition, there are special markers “.” (period) and “,” (comma) for territory, which also mark any stones below them dead (semi-transparent stone with no shadow). Note that marking a stone dead in such a way provides only a visual cue, it does not change the behavior of board class and its methods (such as getGroup(coordinate)) in any way.

Finally

Note that the markers are independent from underlying stones – if you place a black stone on a marked intersection, the color of the marker will change from black to white, but it does not disappear. Applications need to clear the markers when it’s needed.

There are also two special markers to make a coordinate show a semi-transparent black or white stone when user hovers a mouse above that coordinate: “<” and “>”. The next article in the series will show you how to use them, as well as introduce a nice helper function in the JGOBoard class – the each() iterator.

• New board image with less distortion than the previous one
• Correct “descending” order for board letter coordinates (A1 is bottom left, not top left corner :)
• New stone graphics and shadows make a cleaner look (some may like the old ones more, but I’m not redoing these until I get my hands on slate & shell stones)
• Board is now a <div> instead of <table>, and stones are absolutely positioned divs – should be more straightforward to render for a browser (although it’s 1160 divs for a 19×19 board, talk about heavy)
• Complete support for standard SGF markers (circle, square, cross, triangle, number and letter labels)
• Territory markers which highlight underlying stones “dead”
• Some additional nifty code under hood, such as <pre>board.each</pre> iteration functionality

I’ll be doing some documentation soon on how to use all of this new functionality, but meanwhile you can download jGoBoard 2 and take a look at the internals, of give it a spin on the renewed SGF viewer with support for markers and territory display!

If you’re anxious to see the territory markers and don’t want to locate a SGF file from the net with markers or make your own, fast forward this one to the end and also see the second last move with markers: example.sgf (sorry for the bad play :).