1982
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
Previous Topic
