A GroovyFX version of the Canoo JavaFX Abacus tutorial part VI

abacus.groovy

@Grab('org.codehaus.groovyfx:groovyfx:0.3.1')
import static groovyx.javafx.GroovyFX.start
 
final int ROW_COUNT   = 10
final int COL_COUNT   = 10
final int RADIUS      = 20
final int DIAMETER    = 2 * RADIUS
final int MOVE_WAY    = 8 * DIAMETER
final int WIDTH       = COL_COUNT * DIAMETER + MOVE_WAY
final int HEIGHT      = ROW_COUNT * DIAMETER
final int PADDING     = 20
final int OFFSET      = PADDING + RADIUS
final int RAIL_HEIGHT = 10
 
start {
  stage( title: 'GroovyFX Abacus with Styling', visible: true ) {
    scene( width: WIDTH + 2 * PADDING, height: HEIGHT + 2 * PADDING,
           stylesheets: resource("/casino.css") ) {
      pane( styleClass:'root' ) {
        (0..<ROW_COUNT).each { int row ->
          rectangle( x:PADDING, y:OFFSET - (RAIL_HEIGHT / 2) + (row * DIAMETER),
                     width:WIDTH, height:RAIL_HEIGHT,
                     styleClass:'rail' )
          (0..<COL_COUNT).inject( null ) { lastCircle, column ->
            circle( radius : RADIUS - 1,
                    centerX: OFFSET + ( column * DIAMETER ),
                    centerY: OFFSET + (row * DIAMETER),
                    styleClass:column < COL_COUNT / 2 ? 'left' : 'right' ).with { thisCircle ->
              thisCircle.onMouseClicked = { e ->
                int newX = thisCircle.translateX > 1 ? 0 : MOVE_WAY
                translateTransition( 200.ms, node:thisCircle, toX:newX ).playFromStart()
              } as javafx.event.EventHandler
              text( x: thisCircle.centerX - 3, y: thisCircle.centerY + 4, 
                    text:"${(COL_COUNT - column) % COL_COUNT}",
                    fill: WHITE,
                    translateX: bind { thisCircle.translateX },
                    onMouseClicked: thisCircle.onMouseClicked,
                    styleClass:'text' )
              if( lastCircle ) {
                lastCircle.translateXProperty().addListener( { observableValue, oldX, newX ->
                  if( newX > thisCircle.translateX ) thisCircle.translateX = newX
                } as javafx.beans.value.ChangeListener )
                thisCircle.translateXProperty().addListener( { observableValue, oldX, newX ->
                  if( newX < lastCircle.translateX ) lastCircle.translateX = newX
                } as javafx.beans.value.ChangeListener )
              }
              thisCircle
            }
          }
        }
      }
    }
  }
}

casino.css

.root {
    -fx-background-color: radial-gradient(center 25% 25%, radius 60%, reflect, red, black );
}
.left {
    -fx-fill: radial-gradient(center 50% 16%, radius 50%, reflect, papayawhip, rgba(183, 146, 104, 0.9) 80% );
}
.right {
    -fx-fill: radial-gradient(center 50% 16%, radius 50%, reflect, papayawhip, rgba(152, 76, 45, 0.9) 80% );
}
.rail {
    -fx-fill: linear-gradient(sienna, burlywood 25%, saddlebrown 50%)
}
.rail.selected {
    -fx-fill: linear-gradient(firebrick, burlywood 25%, darkred 50%)
}
.text {
    -fx-fill: transparent;
}

Original JavaFX tutorial here: http://www.canoo.com/blog/2013/02/14/javafx-abacus-tutorial-part-vi-styling/

Thanks for the GroovyFX version!
Backlink added.