You Can't Go To Oregon And Then Leave California

Milestone 4 has been achieved. Click here to see what project Beer Pong currently looks like. Click on a hex to select it. Click on a hex adjacent to the selected hex to swap them.

I thought I was going to be able to use the hex-coordinate system I developed in Milestone 1 to calculate the id's of adjacent hex's. Shockingly, I ended up running into an unexpected problem.

It turns out that while creating the hex-grid and placing tiles is easier with the ijk coordinate system, finding adjacent tiles becomes devilishly tricky. Ironically, the problem with using the Cartesian coordinate system was that placing the tiles was really difficult but finding adjacent tiles was easy.

Luckily for me, in Milestone 2 I had developed a method to convert between hex-coordinates and Cartesian coordinates. I was able to use that conversion method to easily find adjacent hex's.

While working on this Milestone I ran across yet another bit of quirky Javascript behavior. Javascript can generate events that call functions stored in the portion of the the html document. They look like the following:

img src="foo.png" onmouseout="out_foo()" onmousein="in_foo()
onclick="click_foo()" /

When the cursor passes over a hex, in_foo() gets called and makes the border appear. When the cursor passes out of the hex, out_foo() gets called and makes the border disappear. When a hex gets clicked, other stuff happens (contained within click_foo()) that causes the border to stick around when the cursor leaves the hex, maybe disappear on other hexes and maybe swap places with adjacent selected tiles.

Here's where the behavior gets quirky (though in thinking about it while writing this post, it's really not THAT quirky):

• Tile gre_0_1_2 is a green hex tile at ijk coordinate (0,1,2).


• Tile pur_1_1_2 is a purple hex tile at ijk coordinate (1,1,2).


• These two tiles are adjacent.


• Tile pur_1_1_2 was the last tile clicked and remains highlighted even though I've moused out of it.


• I mouse into gre_0_1_2 and the tile becomes highlighted.


• I click gre_o_1_2 and the two highlighted tiles are swapped.


• Both gre_012 and pur_112 become hidden, as do the borders around both tiles.


• Tiles pur_012 and gre_112 become visible and the border around pur_012 becomes visible.


• When I mouse out of pur_012 the border should remain on because it was the last one clicked.


• However, when I mouse out of the hex, the border becomes hidden.

I had to fiddle fart around to figure out what was going on, but I eventually managed to do it and code up a simple workaround.

In layman's terms, once you enter the State of Oregon you cannot leave any other state until you've first left the State of Oregon, unless you enter a state that happens to be entirely contained within the borders of the State of Oregon. So really, not THAT quirky. Basically, once you mouse into an element, you can't mouse out of any other element until you've moused out of the first one or moused into something else.