I am developing a browser game based on a hex map. I am storing my data based on axial coordinates system.
I developed a function which shows me axial coordinates of hexes within $distance
from a given hex. Now I want to show those hexes in a form in a HTML table.
The data that I have is only axial coordinates of center hex as well a list of axial coordinates of hexes within distance (not sorted in any way)
As shown in the transition scheme below, hexes may always be shown in form of a simple HTML table:
But I am struggling at how to get each of the map hexes shown in a correct table field (row/column) of the table, assuming that table numbering looks like this:
To solve this out it seems to me that in first instance I need to determine the size of the HTML table that I need. If I will be able to determine what is table coordinate of center of the HTML table then I would be able to find out localisation of each hex in reference to the center hex.
In case of $distance = 1
I need 3 columns and 3 rows:
In case of $distance = 2
I need 5 columns and 5 rows:
This leads me to the conclusion that my required HTLM table size is:
$distance *2 + 1
The center hex lies in the middle of the table, so its coordinates are:
($distance *2 + 2) /2
But what is next, how to convert axial coordinates to table coordinates?