Dr Nic

I’m not promising there ever will be a Dr Nic’s Online Civilizations game, but it has seemed like a good idea for a few weeks, and today I went from ASCII map through to beautiful CSS rendering of the map.

6am ASCII to HTML mapping	8am Base tiles	6pm Correct edges	9pm Convert table to div structure

I miss home.

This was a technically interesting process. The images used are actually all on the one base tile sheet [1], and each panel of the map is allocated a separate CSS class relating to the specific tile required.

So for example, to show the base grasslands tile, you’d need some CSS like:

.tiles {height: 30px; width: 30px; background: url(tiles.png) top left no-repeat; ...}
.grasslands {background-position: 0px -30px;}

For a desert tile, with some grasslands to the left, you might use:

.desert-left {background-position: -60px -60px;}

This really gives a nice tiling effect without you needing to do any fancy image manipulations or the user loading up lots of small images. You just assign the appropriate CSS class to the panel (a DIV or TD, for example). Want to change a tile? Change the class (e.g. using Prototype/jQuery libraries)

Yes, this solution requires lots of individual CSS class definitions; but you’re clever - you’ll generate them won’t you

Reader assistance required

The one technical trick that I don’t have a solution for at the moment is a Google Maps-like interface for scrolling map around. I’d love to hear from anyone with some bright thoughts on how they implement that (I don’t want to have to try to read their compact Javascript code).

Any thoughts?

[1] The source images came from the FreeCiv GPL game