Cube grid

[gereleth]

Thanks to @gordonwoodhull we have an initial implementation of the cube grid. Its development was discussed in #83. I'm fixing the remaining issues in the cubes branch (preview link).

Here's what I changed so far.

1. Reduced puzzle sizes

Cube grid is based on hexagonal grid with every hexagon divided into three rhombic tiles. So the tile count for cube grid is 3x that of the hexagonal grid. And even the smallest 5x5 puzzle had 25*3=75 tiles originally. Or 19*3=57 if we use a hexagon-shaped board with the corners cut off.

I wanted to have puzzles with roughly the same tile counts as in the hexagonal/square sizes. Each next size is approximately double of the previous one there.

size	Hex tile count	Cube 3x (too many!)	Cube downsized
5x5	25	75	21
7x7	49	147	57
10x10	100	300	111
15x15	225	675	225
20x20	400	1200	381
30x30	900	2700	900
40x40	1600	4800	1641

This example is how a 7x7 puzzle looks after the downsize. I don't know if we can find any 7s here... Maybe I should just call the sizes differently, still thinking about this.

2. Refactored edgemark bends

See how connection marks bend in the image above. This is pretty tricky to implement as two halves of the mark should have different transforms applied to them.

I considered dropping transforms alltogether and just providing grid coordinates for the line segments. What stopped me was that the difference between wall marks and connection marks is a 90deg turn and that would not work for skewed tiles.

So far I made the TransformedPolygonTile provide grid coordinates of its connection mark's endpoint in addiition to the usual {x1, x2, y1, y2} output in polygon coordinates. That lets me display the reflected half in the correct location.

An open question is how we should determine if a bend is necessary. We could make this a grid property. But I can imagine, for example, a grid that mixes regular hexagons and cubes (wouldn't that be fun). Then some connections would need bends and some wouldn't. So maybe this should be decided locally - if two polygons sharing an edge are different and at least one of them is a transformed polygon then a bend is necessary. Again, still thinking about this.

Another question is how edgemark gestures should be handled when there's a bend. Currently you have to draw a connection mark as if living in the coordinates of the tile where you started the gesture. That may not be obvious)).

3. Zoom factor

The grid is scaled for hexagons so the cube tiles can look too small at their default size. I tried introducing a zoom factor (1.5) to pixels per grid unit calculations. That somewhat helped with initial scaling of the puzzle though smallest sizes now can look too zoomed in so this needs more work.

I also realized that some controls logic relies on grid units too - like panning starts when drag distance is greater than 1. In cube puzzles this seems to happen later than I expect - like I have to pass ~two tiles distance instead of one. So maybe I should scale grid coordinates instead?..

4. Other minor fixes

Fixed click to orient not working on touch screens, "Play" header item highlighting on cube pages.

---

Wow, I did not expect this list to turn out so long... :sweat_smile:

[gordonwoodhull]

Wondering if the non-N-by-N grids could be named simply by the number of tiles - having sizes 21, 57, 111, 225, 381 … is 😎

I guess the numbers would be different for wrap and non-wrap, maybe too complicated.

[gordonwoodhull]

On (3), arguably maybe I should have multiplied the HexaGrid coordinates before using them, instead of shrinking the tiles to fit inside a unit-size hexagon. That might be the simplest solution, unless you want grid scaling for another purpose.

Yes, it's annoying to have to drag so far to activate panning.

[gereleth]

I ditched the zoom factor and resized hexagons to make them 1.5x larger instead... Late panning is mostly fixed but now edge marks and guide dots look too thin and small :sweat_smile:

I'm also experimenting with a brightness filter on cube faces to really go for the illusion of 3d. I think it looks fun but it also adds some visual noise... And it interferes with the win animation in Firefox :unamused:

[gordonwoodhull]

The “3D” shading looks great!

Too bad about the small marks and dots - maybe different parts are always going to scale at different rates.

I think the “visual noise” of the false perspective adds to the fun somehow, even though it doesn’t really mean anything.

Maybe the shading will focus attention on the “convex” and “concave” 3-corners where most of the logic patterns reside.

[gereleth]

I think this is almost ready!

I tweaked edgemark gestures detection - now it checks if the gesture was parallel or perpendicular to the actual wall between tiles as drawn, no perspective shenanigans.

I changed the win animation to avoid Firefox problems. It's now brighten to white and back instead of hue rotation.

Tweaked edgemark widths and guide dot sizes too.

[gordonwoodhull]

Whoohoo! This is so exciting.

I love the subtle shading - on Android Firefox and Chrome. On iOS I don't see the shading. I tried clearing the browser cache to no avail. I'll try to take a look when I catch up on your changes. So many things are deficient on WebKit, really hope they improve their SVG implementation someday.

The edge marks work great and panning feels right, instead of that exaggerated gesture I had to do before.

It looks like you also made the no-wrap grid smaller, which makes sense. I'll have to recalibrate... probably 10x10 is now my casual quick game instead of 5 or 7.

I like the new win animation. It's more subtle but very sleek.