[n3k5]

I like how this puts SVG elements directly in the page's DOM; seems like a great way of making interactive vector graphics in a browser. Unfortunately, in Firefox I occasionally get rendering errors when the tile I'm pointing at is highlighted. Sometimes weird things happen after clicking a tile and then pointing at a neighbour[0], but mostly it looks as if re-rendering ‘dirty’ areas and updating the framebuffer are somehow getting out of sync[1].

It's not super annoying, though, because moving the pointer over the affected tiles accusatorily[2] cleans them up.

On an even more hair-splitting note: The tile grid looks slightly wonky instead of perfectly regular. (The borders/gaps between hexes have different thicknesses.) I think this is because the coordinates of vertices are rounded to integer pixel coordinates before rasterisation? I'd suggest trying this: Instead of going for exactly regular hexagons, deform them very slightly so their vertices have integer pixel coordinates. Due to the zoom feature this isn't the most trivial fix ever, but on lower-resolution displays it would look a lot neater[3].

Oh, and a feature request: There should be alternatives to ‘mouse wheel’ and ’middle click & drag’[4] for zooming and panning. Input devices on which performing/emulating these actions is inconvenient (or even impossible) aren't all that uncommon. (E.g. how do you middle drag on a trackpad?) Panning could be done with a regular (left) drag. For zooming, there could be −/+ buttons in a corner, or hotkeys, or right dragging, or dragging while holding a modifier key. Not using scrolling for the zoom function would be nice for players with input devices that have omnidirectional scrolling: They could use that for panning instead. I think it would be fine to keep the defaults as-is, but an option to switch it up in the ‘ESC’ menu would be nice for accessibility.

[0] https://i.paste.pics/AE7L2.png [1] https://i.paste.pics/AE6X1.png [2] Fun fact: Firefox's spelling checker doesn't believe that this word exists and suggests ‘satisfactorily’ instead. [3] https://i.paste.pics/AE7JD.png [4] Which should actually be called ‘middle [button] drag‘, but I'll spare you the off-topic rant ;)

[_fp5w]

Ha, thanks for the feedback. I'll address all the things I can from your list. Of the visual artefacts, only the last one makes sense to me, a lost mouseout event overtaken by events (yes, I was lazy.) Think it's possible the first two weirdnesses have to do with browser / video driver render optimizations? If you give me your OS / browser / ver / possibly graphics card, I could see if I can replicate it or do something about it.

The first two kind of look like a glitch introduced by a boundary of a blur filter. The individual tiles, when blurred, have an SVG filter (feGaussianBlur stdDeviation="3,3" or "7,5") applied to them. As a performance optimization, think this SVG library (Snap, successor to RaphaelJS) sets that filter to just barely fit over the element in question.

But if the elements move or if the viewport is manipulated to accommodate pan and zoom, these filters visually glitch. You start seeing parts of the blur kind of weirdly clipped off in middle of nowhere. To counter this visual glitch, I overrode the sizes of these filters to an absurd amount, going from -10000,-10000 to 10000,10000, and that fixed the initial rendering problem. But what you're showing kind of looks like a browser or library isn't honoring the set size of the blur filters and render updates from a mouse over/out are triggering a bad restoration of appearance.

As to the wonky grid, think it might be partly due to scaling and integer precision of the hexagon positioning and how various transforms are applied. The positions of tiles are transforms, ints with no decimal precision, but the transformation matrix for the zoom function is very floaty. How a browser handles that intersection of numbers and precisions is magic. At some zoom levels or window proportions (when i fiddle with it), the spacing gets truncated this way and that and some of them look like they round up or down. Maybe I'll offset those pixels by 0.5 and see if there's improvement.