Topic awaiting preservation: Can JS generate a hex map?

Ok, here's the deal. There is a play by email strategy game that I've been playing for a while, Atlantis if any of you have heard of it. I receive a text file every week that has an ascii display of the map and it shows me which units are in each hex, so on and so on. Well I have to write out a reply with the orders for each of my units and needless to say it can get quite confusing once you have a large force. Now I'm fairly confident that I can write a javascript to generate my orders for me in a way that I could just point and click on what I want to do and just have it write out my orders in a text box or something similar that I could cut and paste.

I would like to have it so I could cut and paste my turn report into a text box, then have javascript generate a map on the screen for me (I would have graphics for it to assemble the map with). I could do it for sure if it was a square map but since it's a hex map I'm not sure that I could do it with javascript. Here is a small snippet of the turn report I get, I have changed certain details just on the off chance there is someone else on this board playing in the same game I am.

;-----------------------------------------------------------
;plain (47,32) in Thornblad, contains Derebu [city]
; ____
; nw / \ ne Next monsoon
; ____/ ~ ~ \____ Tax 20797
; / \ ~ ~ / \ Ente 1039
; / \____/ ~ ~ \ Wage 17 (max 10101)
; \ / \ ~ ~ /
; \____/Derebu\____/ Want 146 GRAI @ 27
; / \ / \ 100 LIVE @ 29
; / ~ ~ \____/ ~ ~ \ 42 WOOD @ 47
; \ ~ ~ / \ ~ ~ / 116 FISH @ 27
; \____/ ~ ~ \____/ 39 XBOW @ 129
; \ ~ ~ / 40 PARM @ 501
; sw \____/ se 16 VODK @ 141
; 16 MINK @ 131
;
; Sell 42 SWOR @ 138
; 11 CAVI @ 81
; 12 PERF @ 78
; 594 HELF @ 68
; 118 LEAD @ 136
;
; Prod 66 LIVE
; 28 HORS

unit 2034
;Shogun Assasins (2034), avoiding, behind, revealing faction, holding,
; 35414 silver [SILV], winged horse [WING], tribesman [TMAN]. Weight:
; 60. Capacity: 70/70/85/0. Skills: weaponsmith [WEAP] 1 (30).

Sorry, I know that map isn't displaying properly, I tried messing around with font settings to make it work but I just couldn't. I think it's good enough to give you an idea of what I'm talking about though. Anyway, I would like to paste that info and have javascript generate a map similar to what can be seen on this page. That interface is all done with javascript but the map was generated beforehand which I unfortunately cannot do for this.

Sorry that this post was so long winded but I felt I had to give as much info as I possibly could to make sure I was understood. So what do you think, is it possible? And if it is I would of course like to be able to make it cross browser compatible.

Thanks,
Gunder

p.s. There are clients available to download but I would like to try and create my own if I could.

(Edited by gunder on 06-08-2005 00:59)

Of course it's possible. Really, a hex grid is a square grid with a trick to it: every other row is shifted half a column left or right. For example:

XXX XXX XXX XXX

XXX XXX XXX XXX

XXX XXX XXX XXX

Is a standard square grid. Boring! So lets move the center row over a bit...

XXX XXX XXX XXX

  XXX OOO XXX XXX

XXX XXX XXX XXX

Now, it's a hex grid! (Not convinced? Look at the OOO space. It has a neighbot to the left and the right; and then two to the north and two to the south). So, all you have to do to make a hex grid is use a square grid, and stagger every other line. Something like (let's assume, 32x32 tiles):

renderx = (x * 32) + ((y & 1) * 16);
rendery = (y * 32);

Alternatively, you can stagger the columns instead. It's a simple change.

The hard part is in READING the input file. I'm not sure about that one yet, but there should be a way that's not too tough.

---
Website

Thanks for the help Iron Wallaby I'm not sure why I didn't think about that. My graphics for the hex tiles would of course be square but I guess if I used gifs with transparency than it wouldn't really matter. I would rather use pngs but if I remember right OE still has a problem doing transparency, is that correct?

-gunder

Yes and no. MSIE has problems with 24-bit transparent PNG's, ie. PNG's with semi-transparent pixels (say, a 50% gray). It can handle binary transparency in 8-bit PNG's (the ones that are like GIF transparency). So, if you use transparency like a GIF, it works fine.

---
Website

I did some work on this using PHP a while ago, before Firefox existed, and can confirm that PNG support is bad in IE.

View this in Firefox and it looks fine, viewed IE you can see the png merges create different colour bands.

Yeah I can see what you mean .. I hate IE. What is that that you were working on? Have you done anything more on it?

-gunder

PaulBM: Since you background is uniform you can well use some GIF, and make them overlap.

I haven't done anymore work on it, it was for my son really, he wanted to try to recreate an online version of a battle card game. At the time, my ISP didn't support GIF's via GD in PHP so it would have to be non IE to look right.

poi, yes I did consider that, but these flat shapes were really only to test the idea, hopefully better more detailed tiles would be created. Vehicles instead of coloured discs for example.

But we digress from your original request about JS, sorry.