What does `s` do? Can we get short docs/comments on the attributes?

[danielmoniz]

I was playing with the custom-grid sample and found that two of the grid tiles use and display hex values as follows:

• 1, -1, 0 (ie. q=1, r=-1, s=0)
• 1, 0, -1 (ie. q=1, r=0, s=-1)

It's not clear what s is doing here. The difference in position seems to be based entirely on the q and r values, and a look at the source code confirms that. Modifying the s value does not change position, size, opacity, or z-index, and I can't think of anything else it might affect.

Additionally, s seems to be used in certain methods such as HexUtils.lengths() or HexUtils.round(), but given that it's not used in the HexUtils.hexToPixel() method, I'm not sure why it would appear there (or in HexUtils.getID(), for example, where its usage suggests it's important to the identity of the hex).

The request:

• Clarify the usage of the s value specifically.
• Document the component APIs in the README, or perhaps in the component's proptypes.
• Update the custom-grid sample to use more clear/meaningful values

This library is great, and I'll be ignoring the s value for now. Any guidance could help us get more use out of it.

[mfbarrows]

q and r are Axial, s appears to be extra. From https://www.redblobgames.com/grids/hexagons/ :

In my projects, I name the axes q, r, s so that I have the constraint q + r + s = 0, and then I can calculate s = -q - r when I need the third coordinate for algorithms that work better with cube coordinates.

You can see this confirmed in pixelToHex: const hex = new Hex(q, r, -q - r);

One of the examples contradicts this with <Hexagon q={-2} r={0} s={1} />, but likely that's a typo. I'm not sure why it was written as an explicit param instead of implicitly calculated when needed.

[jannikbuschke]

this grid uses a coordinate system with three variables q, r and s. There is now a picture in the readme that should make it clearer where these coordinates are.