Creating a chessboard element using Dart and Polymer

This will be the first part of two describing how I built a simple multi-player chess game using Dart and Polymer. It all started out during my summer vacation when going through a book of chess problems with my kids.

Although good, the book only consists of lots of these "mate-in-one" puzzles. There must be a more fun way of teaching this, like a mobile game on their iPads.

At the same time at Google I/O, the nice Material Design was announced and it was available for Dart and the Polymer framework. Finally, a great UI widget library! And Polymer is the kind of framework that I have been longing for. To be able to put together applications from existing components is the kind of reuse that makes me tick.
A quick stop at the Dart pub, and chess.dart (port of chess.js) was found. Yay! That functionality for keeping the game state, loading games from standard chess notation, ... and more, would sure come in handy.

For displaying the chessboard in the game I needed something like chessboard.js, but that wasn’t available in the pub. My first plan was to wrap the JS library, but I soon realise it would be nicer to write a cleaner version using these emerging web technologies. A chessboard tag would be great to have.

Without going into the details of my implementation chessboard.dart, here are some key benefits I found using these newer technologies:

• Separation of presentation from logic. I was able to move most of the presentation logic from code into HTML. In the JS version the HTML is generated in JS.
• CSS encapsulation inside the web component relieved me from having to generate unique element ids as in the JS version.
• Clear separation between modules. There is an overlap of functionality in chess.js and chessboard.js that I could nicely clean up in the Dart implementation.
• The chessboard.dart implementation contains roughly around 350 lines of Dart code compare to around 1200 lines of JavaScript in chessboard.js (excluding the animation support, which I didn’t need).

To demonstrate how to use the chessboard element in a Polymer application I created a simple Chessboard App. Using the Polymer core- and paper-elements, I got a mobile-friendly app in less than 100 lines of Dart code and a nice declarative HTML.

Here is an extract of how it looks like to insert the chessboard element and to data bind to some of its properties:

          <chess-board id="chess_board" on-move="{{onMove}}"></chess-board>
          <core-item id="turn" label="{{$['chess_board'].turn}} to move"></core-item>
          <core-item id="gameStatus" label="{{$['chess_board'].gameStatus}}"></core-item>

          void onMove(CustomEvent event, detail, target) {
            ChessBoard chessBoard = target;
            print('Move event, next turn is ${chessBoard.turn}');
          }

In the next part, I will show you how I continued to build upon the chessboard element to create a multiplayer “Chess challenge” game.