Simple arrays or maps for storing hex visual states?

[andretchen0]

One thing that I'd often like to do while developing is change the colors of some on-screen hexagons. Currently, this is done through Hex, by setting a class on it, then calling updateStyle. But that makes effects limited to whatever's offered in Hex – and a Hex is a very busy, and rather fragile place.

I think decoupling on-screen visuals from Hex would offer more flexibility. We could have any number of "layers" of visual data – outlines, coordinates, path info, effects – and any number of superimposed layers on-screen at any given time.

Converting current Hexs to their own layers would just require a simple mapping function.

Pulling Phaser visuals out of Hex would allow it to do one less thing, which would be good.

Plus, it would make it much easier to do some neat animated ground effects like:

 . . . . . .
. . . . . . .
 . . x x . .
. . . . . . .
 . . . . . .

 . . . . . .
. . x x x . .
 . x . . x .
. . x x x . .
 . . . . . .


 . x x x x .
. x . . . x .
 x . . . . x
. x . . . x .
 . x x x x .

Thoughts?

[DreadKnight]

@andretchen0 Sounds good to me. We'll definitely need those type of effects in the future, there are some open issues, like #1598
Could apply some sort of hexagon eyecandy for when hovering a active ability icon, showing some animation of how to use it, #352

[andretchen0]

Great!

---

#1598 - It's a nice effect. I'll start with just pulling the rendering out of Hex but using the old visuals. Then we'll see where that gets us.

---

#352 - As far as that goes, the problem isn't just that the ground visuals were entirely tied to Hex's internal Phaser.Sprites. It's also that there's no easy way to get ranges out of the abilities as they're currently written.

Though I'll look into it more after these refactors.

---

That last point brings up a handy thing. The data in matrices.ts is supposed to represent hex grids, but they're tough to make sense of:

export const diagonalup: AugmentedMatrix = asAugmentedMatrix(
	[
		[0, 0, 0, 0, 1], // Origin line
		[0, 0, 0, 0, 1],
		[0, 0, 0, 1, 0],
		[0, 0, 0, 1, 0],
		[0, 0, 1, 0, 0],
		[0, 0, 1, 0, 0],
		[0, 1, 0, 0, 0],
		[0, 1, 0, 0, 0],
		[1, 0, 0, 0, 0],
	],
	[4, 0],
);

I recently started adding a different format to comments that I think it could be used for human-readable data that could be parsed down to the current format. The example above would look like this:

export const diagonalup: AugmentedMatrix = asAugmentedMatrix(
`
 . . . . O
. . . . *
 . . . * .
. . . * .
 . . * . .
. . * . .
 . * . . .
. * . . .
 * . . . .`
);