FENipulator
FENipulator is an online chess board program. More specifically, it is a very simple interface for viewing and changing FEN data, primarily for correspondence chess. Having been unimpressed with online correspondence chess systems, I decided to make my own. Here’s why it works for me: it’s simple, it’s lightweight, it takes in FEN via URL (HTTP-GET), it generates new encoded URLs to pass to the next player, and it only ever deals with one half-turn worth of information at once. With few exceptions, it does not know the rules of chess. It uses no javascript, is not attached to a database, and (with its default pieceset and board) loads no images — simple and lightweight.
Using FENipulator is simple. Simply going to fenipulator.brhfl.com without sending any FEN data presents a board in opening. Typical correspondence chess use is as follows: white clicks a piece to move, and then clicks where she wants the piece to go. At this point, everything on the board is inactive, and white should click the ‘reset turn’ link at the bottom of the status box if she wants to change her move. Otherwise, the idea is that white will copy the URL of the ‘link to current board state’ at the bottom of the status box, and send that to black. Black then is presented with the state of the board after white’s move, and goes through the same process to make his move.
Below the game board is the status box. This shows the current FEN string, as well as human-readable versions of the information conveyed within. The FEN box is also an input — any FEN string can be dropped in, and after pressing enter to submit it, the board and other data will be updated. For those unfamiliar with FEN, aside from the board, the data presented is: whose turn it currently is, who can castle where, what space (if any) would be the target of an en passant attack, a half-turn clock (resetting on captures and pawn movement for 50-move rule), and a full-turn clock. Finally, the status box has the two links for sending off the board state or resetting one’s turn, as well as a link to flip the board (this uses CSS rotation, and may slow down page-loads).
I mentioned that FENipulator does not know the rules of chess, save for a few exceptions. In order for pawn promotion, castling, and en passant captures to be possible even on a system otherwise ignorant of rules, the system must understand these rules. It must know that once a pawn reaches its final rank, it is no longer a pawn. If it did not know this, it would need a more complicated mechanism for constantly asking what a piece should turn into after every move. It must know that if a king moves two spaces toward a rook, it has to move both of these pieces. Otherwise, you’d just end up with a king in the wrong place. It also must keep track of whether such a move is legal — because this information is part of the FEN string. Likewise for en passant captures, even without knowing what an en passant capture is, the system must know when and where it’s possible, because this is required information in FEN. On top of this, though, it does need to know to remove a piece in an en passant capture. This is the only time the game removes a piece — in normal captures, the piece is essentially just overwritten. So, yes, the system knows a few rules. It will, however, still allow you to jump your king onto your opponent’s rook on the first turn, if you’d like. FENipulator is primarily just a board — it assumes you know and abide by the rules on your own.
FENipulator is a sloppy bit of PHP, which is currently available for download here. I’m going to figure out a better way to package it all up and distribute it, and will likely be slapping on a New BSD license. It was as much of a playing-with-CSS project for me as it was a make-a-chess-board-program project, and because of this it may not even render in IE pre-9. Work for myself and not for clients, I tend not to bother with IE testing — FENipulator works just fine in Safari, Chrome, Firefox 3.5.1+ (older versions work save for flipping the board), and recent versions of Opera. Three CSS files are necessary — one for general style, one for piece definitions, and one for board definitions. There is an options page, currently missing from the FENipulator menu while I make it presentable, that allows the user to choose from several piecesets and boards — hence their own separate CSS files. See below for more info on making piecesets and boards.
While the overall approach is fairly primitive, using no AJAX &c. (in fact, no javascript at all), there are some modern HTML5 and CSS3 tricks. Rather unimportantly, autofocus is used on the FEN input box, making it easy to copy/paste FEN data, as well as rendering out the current state quickly. As was already mentioned, CSS3 rotation is used for board flipping. Most elements have many classes, possibly too many. For instance, both .active and .inactive classes exist, while anything intended for .inactive could be done as :not(.active) instead — oh well. No piece data is rendered in HTML, instead each type of piece has its own class, and its representation is generated with :after content. I did, for laughs, try loading it in IE6 — the results were hilarious, and pieces didn’t render at all. Anyway, this strategy allows for fairy pieces, &c. to be defined in piecesets without having to break into the PHP.
Pieceset and board definitions
Piecesets and boards are CSS files that live in /pieces/ and /boards/, respectively. As was already mentioned, pieces are defined by :after pseudo-elements on spans classed by their FEN/SAN representation. So, in the default pieceset, the white king is defined as .K:after {content: "\2654";}, with 2654 being the unicode address of a white king character. An image-based representation of a black pawn could be something like .p:after {content: url(b-pawn.png);}. Board definitions are much simpler. Every space on the board is a classed as .space. The color of a space is defined by each <span>’s background-color. Light spaces are .light and dark .dark. So, the default board looks something like .light {background-color: #E5E5E5;} .dark {background-color: #8C8C8C;}. Other notable classes are .active for the active piece (and the empty space it leaves behind), .empty for empty spaces, and .piece for any piece.
That about sums up FENipulator. I made it for myself, but I hope others find it useful. If anyone has any boards/piecesets that they’d like to contribute, I’ll gladly merge them into the project. If anyone wants to play a game, make your move and send it to b @ my domain name. If anyone finds any bugs, send them to the same place. Future improvements may include SAN output/input, but for the sake of disambiguation, the full rules would need to be coded into the program. I’m not sure how much heavier this would really make things, it’ll probably end up being worth it. Also, I may periodically post updates on te.brhfl.com, these should all get lumped here. Anyway, cheers!