lesson learned: bad example

[ddyer]

The sample code for Gomoku does something a little strange and non-obvious, which makes
it a bad example. Perhaps the code should be changed, or at least commented to explain itself.

The oddness is this. When you place a stone, a new subnode is added to the intersection containing
the visible stone, and then the position of this subnode is animated into position by the "slide" operation.

On the other hand, when you refresh or reload the board, the intersection is created with the stone
already in place, with no subnode. Consequently, node structure of the reloaded board is different
from that of the played-straight through board.

This can lead to subtle differences in the behavior of the UI when you play normally and when you
reload the game, as you do a lot during development.

This didn't cause any problems for Gomoku because stones are placed and never removed,
and because the artwork for the "click here" ring was a little smaller than the art for stones,
so the "click ring" for placed stones was never visible.

[Een]

Yes, I understand how that might have been confusing.

On principle, refreshing should bring back the game in the same exact state, but sometimes, you know... shortcuts.
It's not a bad thing in itself, but for an example game I should have been more careful. I'll add some comments to clarify.

Thanks for the feedback.

[Een]

Eventually I decided to fix the code to destroy the stone node after animating the slide from the player panel (it becomes useless since the intersection itself is showing the stone).

Here is the change, inside the notif_stonePlayed function:

Code: Select all

// Animate a slide from the player panel to the intersection
dojo.style( 'stone_' + notif.args.coord_x + '_' + notif.args.coord_y, 'zIndex', 1 );
var slide = this.slideToObject( $( 'stone_' + notif.args.coord_x + '_' + notif.args.coord_y ), $( 'intersection_' + notif.args.coord_x + '_' + notif.args.coord_y ), 1000 );
dojo.connect( slide, 'onEnd', this, dojo.hitch( this, function() {
        // At the end of the slide, update the intersection 
        dojo.removeClass( 'intersection_' + notif.args.coord_x + '_' + notif.args.coord_y, 'no_stone' );
        dojo.addClass( 'intersection_' + notif.args.coord_x + '_' + notif.args.coord_y, 'stone_'  + notif.args.color );
        dojo.removeClass( 'intersection_' + notif.args.coord_x + '_' + notif.args.coord_y, 'clickable' );
        			
        // We can now destroy the stone since it is now visible through the change in style of the intersection
        dojo.destroy( 'stone_' + notif.args.coord_x + '_' + notif.args.coord_y );
}));

// Counters
this.updateCounters(notif.args.counters);