Monthly Archives: March 2011

Using hover markers and .each()

A common need in interactive applications is to provide some kind of visual feedback to the user where he’s going to place a stone next. For this purpose, two special “hover” markers are provided: “<” for black stones and “>” for white stones. They do not display anything when the mouse cursor is not above them, but when mouse enters the marker area, a semi-transparent stone with no shadow is displayed. You can learn more about markers in my previous post.

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 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.

Using markers with jGoBoard 2.0

The most significant addition in jGoBoard 2.0 is the ability to place markers on the board. This enables applications utilizing jGoBoard to display about 99,5 % of SGF files out there. Markers can also be used to indicate the last move, or a ko that is taking place.
Basic design decision in jGoBoard 2 was to create separate layers above the board:

  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:
Continue reading

jGoBoard 2.0 released!

A substantially improved version of jGoBoard library is now available. The basic usage is the same, but some notable changes include:

  • 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 :).