Made some good progress on the proof of concept GeoQuest game with Ember Octane. I've discarded the concretejs canvas library in lieu of Konva, implemented field of view for the player and randomized enemy agents patrols.

The small concretejs canvas implementation didn't handle scrolling like I wanted. I've converted to use Konva. "Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications." Previously, the player and enemies where Ember-Animated components which drew simple img elements. It watched the x/y properties and updated positioning with CSS styles. This didn't work out too well when scrolling the map and keeping the path finding synched was a pain. When I converted them to be part of a Konva layer, everything just worked. Nice!

For the field of view code, I collect all the neighboring hexes up to the range of sight of the player. Then I check each hex to see if they are blocked from view by some terrain or anything else. If I reverse sort the hexes by distance and mark all the blocked hexes, I don't have to recheck the blocked hexes. That saves alot of processing especially if there is a lot of blocked hexes in the area. You can see the hexes that are visible or blocked when you move your mouse around the field. The green dots are visible and the red dots have been obscured.

Enemy patrols have been randomized. I can configure each enemy with an array of hexes to "visit." After initialization, it will pick points at random and the path finding takes over from there. With Konva, you can tween most properties. This combined with field of view, I can set the opacity of the enemies based on range. All of this is pretty much for free (sub millisecond) because of my other methods that I've written.