Tag Archives: howto

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

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