Need help with CSS I think?

[VanHlebar]

Currently in order to keep development going on El Grande I choose a design for unit placement by clicking on a regions score board. What I would prefer to do is allow the player to select anywhere inside a region and to potentially highlight legal move. I have read a little about how to do this but it was complex and I wanted to move along. Now I am nearing an alpha stage and I think I need to get this implemented, so does anyone have any suggestions or can anyone point me in a direction for research?

I have tried using svg paths I think but I just am not very good at graphic stuff nor do I understand CSS strongly enough.

Thanks in advance for any help and/or direction.

[cmgames]

Well, you could use :hover on an element in CSS to trigger something, but that would not work with tablets and phones where there is no mouse.

Best solution is probably to use the dojo.place and this.placeOnObject to put template elements on top of the legal move areas (probably with an 'opacity' style so that you can still see the background through the new object). Then attach an onclick event to the new (on-top) object.

~cmgames

[VanHlebar]

Thanks for the suggestion.

Additional question then, how would this work with irregular shapes? The board is made up of regions that are not of any specific shape at all.

[DoctorPelusa]

You could use CSS clip-path to shape a div and add or remove its visibility with JS, or use SVG or regular images and also use JS to change its opacity, I don't think you can taint a complex shape using css selectors.

Note: when I say add or remove visibility I refer to adding or removing CSS classes (that define the opacity) from that element using JS.

Regarding the click area, you might want to look into Area Shapes despite being quite an old method I can't think of anything better atm. (The flamingo example is probably what you want)

EDIT: SVGs apparently can use CSS selectors, and that would avoid using area shapes, but afaik they do not accept an image as fill option.