Creating a multiplayer game using Dart, Polymer and WebSockets

In my previous post I described how I created a Polymer element for a chessboard and a simple app to test it.

Here, I will give a brief overview how I took this further and created a multiplayer game ChessChallenge as a more fun way of solving chess problems. The game idea is to challenge other players in being first to solve five chess problems. Below is a screenshot of the game. On the right hand you see the list of players in the competition and how many problems they have solved. The chessboard shows the current problem and you solve it by making the check-mate move.

Instead of having to manually enter the chess problems I found libraries of free PGN games from real chess tournaments on the web. To display a "mate-in-one problem" I just needed to find all games that ended with checkmate and then undo the last move. My chessboard element can load a PGN game and can undo moves so everything needed was already supported. The chess games also contained the name and ranking of the real players (displayed at the top-right in the game).

First I implemented a simple login page with the nice looking avatars taken from the Topeka Quiz App. Topeka is written in JS but it was an easy task to convert the login page into Dart. Because the UI is declaratively defined using HTML the difference is only in the logic behind the page.

Then I sketched how the communication between two clients and the server would look like when starting a challenge. The server would be responsible for keeping track of players, the on-going challenges and serve chess problems and scores in real-time.

Dart works great on the server side and has support for WebSockets so I decided to implement both the client and server in one Dart project. The game data used by the client and server can thus be shared, and the Dart Editor has great support for debugging both client and server code.

I looked at some alternatives for hosting the game and found that DartVoid had just what I needed. With great support from the DartVoid team the application was up in no time with only one extra configuration file needed in my project. With their GitHub integration it was also easy to setup and deploy the project.

This project has been a fun way of learning how to write an application using modern web techniques, and my conclusions are:

• Using web components is a great way to build applications from reusable building blocks. 
• Polymer makes it really simple to use web components and to set up two-way data binding between the declarative UI and the underlying logic.
• Using the Polymer Paper elements makes it easy to design professional looking apps that works well both on mobile and desktop.
• Dart is a really powerful language with great support for writing both client- and server-side code.

The code for ChessChallenge is available on GitHub.