Software Projects

JavaScript Chess

Overview

Considering the countless millions of chess fans around the world, and the abundance of chess material available online, it is surprising that not many easy to use implementations exist to directly display chess games in web pages. Most of the widgets I have come across require the installation of special plugins, and generally seem to make it more difficult than it should be to show chess games in a visually attractive way!

I think that among the absolute basic requirements for a successful chess widget is the ability to transfer games easily from a desktop chess database system, such as ChessBase, to the web without the need for an intermediate processing step. For this, the PGN specification from Steven Edwards is ideal, since it is both human readable and implemented as a standard import/export format by virtually all of today's popular chess database systems. For the display of only positions, the related FEN specification serves a similar purpose. Naturally, our chess widget not only needs to be able to parse this chess data efficiently, but also correctly implement all of the official rules of chess. Any display of chess moves should be in standard SAN notation.

Less critical technically, but rather very important for the people who use our widget, is the visual presentation of the chess board itself. Serious players will expect a rendering of chess pieces that resembles the appearance of a standard tournament set based on the Staunton design. There exist several slight variations in the 2D rendering of such a piece set, but all of the popular chess database systems follow a more or less consistent standard here as well.

The best chess database systems offer sophisticated interfaces with smooth transitions of pieces sliding to new positions on the board, and move lists that can be easily traversed with button controls, or else by clicking on the moves themselves.

Overall, by the time all of the above requirements and features are implemented, our simple chess widget has become quite a complex piece of software! See the full tournament example template below...

Developer Notes

Displaying a chess game requires only pasting a copy of the game in PGN format into the XHTML source of the page. All of the functionality of the widget is handled by a single JavaScript source file, which in turn relies on the jQuery framework to do the heavy lifting involved in DOM manipulation and visual transitions.

If multiple games need to be displayed, such as the results from a complete tournament, then an additional script dynamically loads a PGN database file on the server, displays a dropdown selection box to load individual games, together with a standard crosstable of the event and round-by-round pairings and results, which in turn link directly to the board display of games. Tournament organizers can thus upload a PGN file to the server, and let the application automatically handle all of the chess related content generation!

Roadmap