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.

2 thoughts on “Using hover markers and .each()

  1. Joonas Pihlajamaa Post author

    Yes that’s also possible. However, you need to change the CSS style every time it’s another player’s turn, so you’re going to add CSS classes every turn in any case. :(

    Also, for ko’s you don’t want the hover for illegal retaking the ko, in which case you’ll need to go through intersections and selectively mark them for hover. Same goes for illegal suicide moves.

Comments are closed.