Circular, clickable cells?

[MarkSteere]

I need to know how to program circular, clickable cells.

I would like to program the following two games, both of which have simple game logic... but are played on a hexagonal board. Not simple.

Gopher: http://www.marksteeregames.com/Gopher_hex_rules.pdf

Bamboo: http://www.marksteeregames.com/Bamboo_rules.pdf

My math skills are more than adequate to place tokens on a hexagonal board. But the clickable cells should be either hexagonal or a circular. A circle would be adequate and, I'm guessing, easier to program.

Mark
http://www.marksteeregames.com/index.html

[thoun]

For circle items, you can create div with border-radius: 50% and they will be circular.
If you want hexagonal, I suggest a big transparent div over your board, and you check the coordinates of the click event and with some maths you will get which hexagon is under.
Don't hesitate to join Dev Discord (link in studio doc) for this kind of help

[MarkSteere]

Good suggestion and advice. Thanks.

[shadowphiar]

You can make a hexagonal div fairly easily by adding this in the css:

Code: Select all

    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

which should be supported in browsers back to 2014 or so, although be aware that they may vary in the way they draw a border around it if you need one.

[Tisaac]

You can make a hexagonal div fairly easily by adding this in the css:

Code: Select all

    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

which should be supported in browsers back to 2014 or so, although be aware that they may vary in the way they draw a border around it if you need one.

What do you mean ? No browser should display a border, that's the point of clip path

[shadowphiar]

I think I was thinking of outline, but I seem to remember there was a time when Firefox would draw (if an outline was specified) around the outside of the element, following the defined shape. (I might also be thinking of the old clip property). But in any case, it doesn't seem to do it now...