Arel.js, The Roguelike Library: Adopting a jQuery-like API

I’ve been doing some thinking. I know, it’s dangerous–but this time I think I might be on to something. My current project, Arel.js, has so far been doing pretty much what every other Roguelike library does, at least as far as JavaScript goes. And there’s nothing wrong with that, but I think it could be so much more, you know?

So I had this idea of giving Arel.js a jQuery-like API. It would introduce something called the VOM: the “view object model”. Basically, it would be a layer for interacting with the display that borrows from the DOM (document object model). Instead of providing a document, though, the VOM provides a “view”. A view of what? The map, of course! I thought about calling it the “map object model”, but then I realized what the acronym would be. Nope. Let’s not go there.

So we have the VOM, which holds the current state of the map (and perhaps can have multiple layers). And then we have Arel.js, which not only provides the VOM, but also provides ways to modify it as well; perhaps wrapped in ‘$’ or ‘_’ or some other short JS variable.

The implications of this all (where you say whoa)

Arel.js would expose functions which would allow you to do the following:

$("4 4").ch("@").style("foreground", "white");

All the methods would of course return themselves, allowing for chaining. There’s an enormous amount of possibilities here. You could get into tile selectors, for example:

$("* 10").ch(".");

The above code would select all the tiles in the 10th row of the map and perform the same operation on all of them (the ‘*’ is naturally a wildcard). It would eliminate the need for clumsy for loops every time you wanted to modify a chunk of tiles. Instead, you might be able to do something like this:

$("10 10, 20 20").ch("#");

…to select all the tiles within the rectangle defined by the points (10, 10) and (20, 20) and set their character to “#”. This would make modifying the map incredibly easy and, if optimized correctly, incredibly fast.

But the VOM would be much more than a wrapper for painting characters to the screen: it would hold the entire state of the map. This allows for even further optimization, but also lets you do stuff like finding the current character at a specific tile, or even storing references to your own custom data structures directly on the VOM. So you’d first store a reference to your tile data structure on each tile in the VOM:

$("* *").forEach(function(x, y) {
this.data(yourMapStructure[x][y]);
});

Then later on if you needed to get a reference to your data structure through the VOM you could do this:

$("5 5").data().somePropertyOnYourTileObject;

Pretty handy.

Finishing up

So with all my brainstorming so far, introducing a jQuery-like API into Arel.js seems like it would introduce an unprecedented level of cleanliness and flexibility. It would also increase development speed and code maintainability. If you’ve got any thoughts on this design pattern please let me know, so that I can take them into consideration moving forward with Arel’s development.