Page 2 of 2
Re: Hex Grid
Posted: 23 July 2020, 18:35
by Athelin
docthib wrote: ↑16 July 2020, 10:17
If there is a graphic board behind, you don't especially need to make hexagonal forms in HTML / CSS.
Just a square div container (for each cell / tile) well positioned on your board image (just use browser inspector on Terra Mystica for example).
But if you want to do nice hexagonal effects / style you will have some CSS work for sure
I wonder I could do that but with a square you cant fill all the hexagon so if they click in a corner you dont detect they are clicking. Or maybe I am missing something...
Re: Hex Grid
Posted: 24 July 2020, 17:57
by fafa-fr
Athelin wrote: ↑23 July 2020, 18:35
docthib wrote: ↑16 July 2020, 10:17
If there is a graphic board behind, you don't especially need to make hexagonal forms in HTML / CSS.
Just a square div container (for each cell / tile) well positioned on your board image (just use browser inspector on Terra Mystica for example).
But if you want to do nice hexagonal effects / style you will have some CSS work for sure
I wonder I could do that but with a square you cant fill all the hexagon so if they click in a corner you dont detect they are clicking. Or maybe I am missing something...
I think you're not missing anything, but maybe docthib was speaking about hexagons that you don't need to click. But even if you do need to click them, I think it's not a problem if the clickable zone doesn't cover the whole hexagon, it can help to avoid misclicks. You can use css pointer to show players with a mouse where they can click, and players with a touch screen will usually tap in the middle of the hex. And if they tap close to the border, they might misclick, so it's better to not allow this.
In the game I'm coding, the divs containing the hex images are not connected to onclick events, and I place smaller "clickzone" square divs above the images.
But I might take some time someday to learn how to use clip-path.
Re: Hex Grid
Posted: 24 July 2020, 18:12
by Tisaac
fafa-fr wrote: ↑24 July 2020, 17:57
But I might take some time someday to learn how to use clip-path.
With the % value, it's a simple copy/paste :
Code: Select all
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
And for "horizontal" hexagons :
Code: Select all
clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
Re: Hex Grid
Posted: 25 July 2020, 08:52
by fafa-fr
Thanks
But to me, learning how to use a new functionnality is never a simple copy/paste. I want to fully understand what it does, so reading the CSS reference page and doing some tests is a minimum. And I also want to be sure it will be supported by all browsers officially supported by BGA. Which seems to not be the case:
https://caniuse.com/#feat=css-clip-path
IE11 seems to not support clip-path for HTML elements. Neither does Opera Mini, but this one is not in the list of officially supported browsers. (I am still curious to know how many BGA players use Opera Mini (for background-position-x), if ever an admin reads this ... Or maybe I'll resurrect the old thread about player's browser statistics.)
(But my "thanks" at the beginning was sincere, not ironic
)
Re: Hex Grid
Posted: 25 July 2020, 11:18
by Tisaac
fafa-fr wrote: ↑25 July 2020, 08:52
Thanks
But to me, learning how to use a new functionnality is never a simple copy/paste. I want to fully understand what it does, so reading the CSS reference page and doing some tests is a minimum. And I also want to be sure it will be supported by all browsers officially supported by BGA. Which seems to not be the case:
https://caniuse.com/#feat=css-clip-path
IE11 seems to not support clip-path for HTML elements. Neither does Opera Mini, but this one is not in the list of officially supported browsers. (I am still curious to know how many BGA players use Opera Mini (for background-position-x), if ever an admin reads this ... Or maybe I'll resurrect the old thread about player's browser statistics.)
(But my "thanks" at the beginning was sincere, not ironic
)
Sure ! This property is not complex but have several "level" of use. The most basic are using a shape or polygon to clip the boundaries of your dom element. In this case, you just give a list of vertices position to define the shape/polygon : polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); means a first vertex at x=50% and y=0% so that the top vertex in the center, ...
The second level is using an svg that is either referenced in the html using #id, or even in an external file : url(img.svg)#path, but that is not very well supported.
For the basic clip-path, however, the support is quite good, IE11 is quite old (built in 2013) and opera mini should be almost completely replaced by opera mobile browser (since ~2015).
Re: Hex Grid
Posted: 26 July 2020, 10:33
by fafa-fr
thanks again
Re: Hex Grid
Posted: 27 July 2020, 10:39
by joezg
Athelin wrote: ↑23 July 2020, 18:35
docthib wrote: ↑16 July 2020, 10:17
If there is a graphic board behind, you don't especially need to make hexagonal forms in HTML / CSS.
Just a square div container (for each cell / tile) well positioned on your board image (just use browser inspector on Terra Mystica for example).
But if you want to do nice hexagonal effects / style you will have some CSS work for sure
I wonder I could do that but with a square you cant fill all the hexagon so if they click in a corner you dont detect they are clicking. Or maybe I am missing something...
I mentioned earlier, you can make circle with border-radius. It covers almost all of the hexagon nicely. Over 90 percent of it.