Hunting for Galactic Civilization's perfect starting location

nospam@example.com (argh) — Fri, 03 Sep 2004 10:18:12 +0200

Talking about what can be done with javascript... for the Game Manager I built to calculate the values of starting locations in the Galactic Civilizations PC game, I implemented language switching and skin switching entirely in javascript.

The whole tool is built on objects that tightly communicate amongst themselves - each star system, planet or game is an object and can render itself. The layout control is mostly implemented with stylesheets, the javascript only rendering a very simple html structure. The core is the gameManager class itself - it renders the main navigation elements, and provides a series of helper methods (like the button() method that is used to render a button).

The language switching was not too difficult - I first googled around but the generally used trick with document.write( '[script tag]' ); makes Mozilla reload the page. I found a nicer way to do this: create the script tag with the document.createElement() method, and append it to the document's head tag with document.getElementsByTagName('head')[0].appendChild( tag ); As my language files consist of one file with a list of variables, they simply get replaced when loading the new script. Updating the display is a breeze, I just have to tell the objects to redraw themselves

The skin (stylesheet) switching proved a little more annoying: it works the same way than the javascript include, by appending a link tag to the head - but the existing styles do not get replaced, they are overwritten and extended. Meaning that if in my standard stylesheet, the h1 tag has a padding but not in the second stylesheet, that padding will still be there... Solution: delete all styles before loading the new stylesheet. That's easy to do by accessing the document's styleSheets property, going through each stylesheet and deleting each style rule via document.styleSheets[x].deleteRule( x ); Peter-Paul Koch has an excellent reference on this.

Currently the Game Manager only works with gecko-based browsers like Mozilla or Firefox, as I use some specific methods like the addEventListener() method (to check when the external file has been loaded), and also because I used only the gecko implementation of the styleSheet access methods.

The result matches my expectations: a blazingly fast online tool, that would have taken a lot of time to build with a PHP/Javascript mixture and would not have been this fast. Now I only need to implement the save button and it's ready to really rock Implementing this would take a little time, but basically all I need is already there: if you clicked on one of the View XML buttons in the interface, you have seen that each object can render itself to XML too, so I would just have to submit that to a PHP script for storage, and parse existing XML to rebuild the needed settings... but that's for another blog entry

You can view the whole Game Manager package in my personal WebCVS.

a programmer's best friend - Experiments

Hunting for Galactic Civilization's perfect starting location