The game piece selection list will go here (once it is loaded).
Use the Piece Set selector to load a set of pieces. Click
a piece to add it to the board.
This will be replaced by the game board graphic (once one is selected).
Use the board selection list to load a pre-selected board or enter an image file URL in the URL
field and click the "apply" button next to that field to load the image from the specified
URL.
Confirm removal:
Boardgame Prototyping Interface (BPI)
THIS IS AN UNFINISHED PROTOTYPE/PROOF-OF-CONCEPT!
That said...
This prototype is for exploring the possibility of using JavaScript
and AJAX techniques to implement an application for
testing/prototyping custom board games, along the lines of the
long-defunct QUB and V_MAP projects. It does not aspire to be a
network-playable boardgame interface, but instead to provide me
with a quick/easy way to setting up new games for playtesting purposes.
This software is being developed by wanderinghorse.net
using the amazing jQuery AJAX/AHAH toolkit
and the jQuery Interface Elements plugin. They are both
pretty amazing. All graphics and source code are in the Public Domain, with the exception of
the jQuery and Interface Elements code, both of which have a dual MIT/GPL license.
Developers who may be interesting in helping to work on BPI are welcomed to
get in touch. If there is enough
interest (yeah, right!) we can set up a project on SourceForge, or similar.
Features:
To add a piece to the board: select the background color you want for the piece
using the color selection block, then DOUBLE-CLICK the piece in the unit selection list.
That will create a copy somewhere near the top/left of the game board.
Once i get drag/drop working how i want it to, this will become a drag/drop operation.
Once a piece is in play, move it around via drag/drop.
Use the right-click popup menu (right-click ON THE PIECE) to remove it.
That's about it as far as features go.
Missing features/Bugs:
Browsers: this app may or may not work in any browser other than
Firefox 2.x. If it works for you, great. If not, get Firefox :D. It is known to fail
in Konqueror 3.5.7, by the way (the double-click handlers are never called in konqueror),
and a bug report has been filed with jQuery (once that tiny thing is fixed, it should work
in Konqi).
It is currently impossible to change the attributes (color/border) of in-play pieces.
To clear the board, use the "Remove all pieces" button or simply
reload this page. To remove individual pieces from play, right-click on a piece to get its
popup-menu, then use the Remove option. Optionally, simply drag it off of the board or later use.
There is of course no save/load support yet. Once the basics are worked out,
adding save/load support via PHP-based callbacks should pose no particular problem
(but see below). The main problem at the moment is the absolute
positioning of in-play graphics...
Due to HTML/CSS limitations on how the game pieces must be positioned,
ANY changes to font size, or similar layout changes, after a piece is put
into play may invalidate its relative position on the board by shifting the
board around under the pieces while the pieces stay in their current places. i do not
know of any way to fix this because HTML/CSS does not support a "position at x/y points relative to the parent
coordinate system" feature. Using the "postition:'relative'"
CSS feature results in unwanted shifting of pieces as other pieces are dragged around.
This bug makes reliable save/load support effectively impossible because when data
is loaded we cannot be certain that the coordinates are still valid (e.g. the page layout may
have changed, invaliding the absolute coordinates).
There's sooooo much more we can do with this once the fundamentals
are worked out (remember that we're working in the relatively limited environment of
browser-side JavaScript).
Set game piece border style, similar to the color selector. If we want
to get fancy, we can do different borders for each of the 4 sides. Seems like overkill,
but that can be used to partially substitute for the lack of double-sided images
(used to represent status changes in many games).
Multi-sided images. This requires a more complex definition of "game piece" (currently
just an IMG element) and the related internal mapping of Objects to IMG elements.
Add per-piece notes. This is probably pretty useless until save/load works.
If you have a
web server running PHP (4 or 5 should do, but 5 is a safer bet) then
you can use the index.php file to run the application. If you do not
have a web server, you can use bpi.html, which is a pre-generated,
static copy of the application.
When unpacking this zip file, be sure to keep the directory structure
intact so that the map and unit graphics are in the proper place. Then simply
open up bpi.html in your web browser (see above for browser
compatibility notes!).