hover + onclick on rotated CSS element

[Rhum666Rhum]

Hello,
I'm sure the solution is easy but can't find it, so thanks for your help.

Here is my issue : I have a board on which I put cards. Then the player must be able to select the cards.

globaly the tpl is like :
<div id="places_up">
-- div of the cards to be placed here (generated in js) -- (2 divs)
</div>
<div id="places_left">
-- div of the cards to be placed here (generated in js) --(2 divs)
</div>
<div id="places_right">
-- div of the cards to be placed here (generated in js) --(2 divs)
</div>
On the contained div (the cards), I applied a CSS "hover" and a js onclick() handler

Css for places_up, places_left, places_right are mostly the same (containing only "top" and "left" attributes),
except that for places_right and places left, I applyed a css transform "rotate" of 120 deg (because the board is set so that the set of cards is turned)

It seems that applying the "rotate" transformation make contained div "hover" and "onclick()" not applicable -they don't work after rotate operation-, as the same operation works well for places_up but not for places_right and places_left (except if I remove the transform: rotate operation)

Do you have any solution to this?
Thanks

---- For the moment, I have solutions that are mostly just hiding the problem, I want to avoid this, but there they are : ----
1) transform the board to have no rotation of the card. This is less looking like the original game, but at least this works well, and keep playability
2) create a svg polygon in a separate div for each cards, and then apply the hover and "onclick" on it. I am sure I can work it out but for the moment doing so it destroy the global layout. Still, I think that is the best "hiding problem" solution if I can't work it out more properly.

[Tisaac]

There is no reason a transform would disable hover or click, the bug probably come from something else but hard to tell with these info.
What is the name of.the game ?

[galehar]

I think I have something very similar to your case in Race for the Galaxy in the Alien Artefact Orb game. The players have orb card which they can rotate, then drag them and drop them on the orb. There is a hidden button with a rotating arrow on the card which gets displayed when the player hover above it. Then clicking the button rotate the card.
I can't make all the code public but I can share some parts if that can help you. Not though that it doesn't work on mobile, and I have no idea why.

[tchobello]

I think I have something very similar to your case in Race for the Galaxy in the Alien Artefact Orb game. The players have orb card which they can rotate, then drag them and drop them on the orb. There is a hidden button with a rotating arrow on the card which gets displayed when the player hover above it. Then clicking the button rotate the card.
I can't make all the code public but I can share some parts if that can help you. Not though that it doesn't work on mobile, and I have no idea why.

Code: Select all

            dojo.connect( $( action_button ), 'mouseenter', dojo.hitch( this, function() {
                dojo.addClass( 'tile_'+divTileArtId0+'_art', 'willrotate' );
            } ) );

            dojo.connect( $( action_button ), 'mouseleave', dojo.hitch( this, function() {
                dojo.removeClass( 'tile_'+divTileArtId0+'_art', 'willrotate' );
            } ) );

I've used a 'mouse enter' 'mouse leave' on button in action bar to rotate a room in Dungeon Twister.
the 'hover' highlight the room to be rotated with the CSS 'willrotate'.
I had a problem since the room stayed highlighted on mobile device.
it's because 'mouse leave' is ineffective.
In order to work, i've also added
dojo.removeClass( 'tile_'+divTileArtId0+'_art', 'willrotate' );
at the beginning of the rotation animation.

perhaps you have something similar and the hidden button does not disappear afeter clicking on it on mobiles...

[galehar]

Thanks for your input, but my issue is a bit different. When the card is selected, the rotate button appears semi transparent in the middle of the card.
On desktop, hovering over the button changes it to solid, then clicking it rotate the card.
On mobile, tapping the rotate button unselects the card instead of rotating it.

[Rhum666Rhum]

Hello all
Thanks a lot for your answers. (And sorry for late answer, I did not get notif and was away for the weekend.
-> game is Shadow Hunters. No release for the moment as I did not get a playable version yet. But if someone wants to help on it tell me.
->if transform:rotate should not disable the hover then I really don't get what it is, as removing it makes the hover works. Maybe somehow the z-index change with rotate making it unreachable? I'll try to check if that can be.
-> @Galehar : I would be happy to have the bits of code that implements this to have an idea how to solve my issue. In fact, only question is : if the card is ALREADY rotated, does the hover still work to put it back in place? (button still appears and works)?
Oh, and by the way is it an expansion of Race for the Galaxy playable on beta or in studio? (just so I can see actualy what it does). This issue on mobile version you are indicating is not a problem in my case. I would be happy to search for a solution to your issue but I have no idea right now.
-> @tchobello : the use of dojo.connect 'mouseenter' may be the solution, though I'm using dojo.connect for adding the onclick option and that does not work once the div is rotated. I'll try that thanks and tell you.

Romuald

[galehar]

Yes, it is on Studio, but the game is set to alpha so you probably can't access it. If you have a Premium account, you can test it in prod by creating a table with "Alien Artefacts with Orb" expansion. You'll be able to play an Orb card right after the start world selection, and there you can test rotating it.
Since I'm not supposed the share the code, I'd rather avoid posting it on this public forum. Are you on the BGA developer discord server?

[Tisaac]

Hello all
Thanks a lot for your answers. (And sorry for late answer, I did not get notif and was away for the weekend.
-> game is Shadow Hunters. No release for the moment as I did not get a playable version yet. But if someone wants to help on it tell me.
->if transform:rotate should not disable the hover then I really don't get what it is, as removing it makes the hover works. Maybe somehow the z-index change with rotate making it unreachable? I'll try to check if that can be.
-> @Galehar : I would be happy to have the bits of code that implements this to have an idea how to solve my issue. In fact, only question is : if the card is ALREADY rotated, does the hover still work to put it back in place? (button still appears and works)?
Oh, and by the way is it an expansion of Race for the Galaxy playable on beta or in studio? (just so I can see actualy what it does). This issue on mobile version you are indicating is not a problem in my case. I would be happy to search for a solution to your issue but I have no idea right now.
-> @tchobello : the use of dojo.connect 'mouseenter' may be the solution, though I'm using dojo.connect for adding the onclick option and that does not work once the div is rotated. I'll try that thanks and tell you.

Romuald

Just to be sure : you know there is License agreement for this game at the moment, right ? This means you wont be able to deploy it to the main site.

[Rhum666Rhum]

Finally it was a z-index issue. An hidden element automatically generated in the code was hidding my cards. Just hidding them in a vicious way that it was hidding the cards when rotated, and not when not rotated (because not exactly in the same position)

Thanks for your help, took me a lot of time to understand the issue


About licence agreement :
I know, I requested for it, and for the moment the team said they will ask for it and will give me later a feedback. I know I am potentially developping "for nothing" if they don't get the licence. But it is a way for me to test things for other games so there is no issue about this.

[Tisaac]

Finally it was a z-index issue. An hidden element automatically generated in the code was hidding my cards. Just hidding them in a vicious way that it was hidding the cards when rotated, and not when not rotated (because not exactly in the same position)

Thanks for your help, took me a lot of time to understand the issue


About licence agreement :
I know, I requested for it, and for the moment the team said they will ask for it and will give me later a feedback. I know I am potentially developping "for nothing" if they don't get the licence. But it is a way for me to test things for other games so there is no issue about this.

Ok for the license agreement, just wanted to make sure you know the status.
For the z-index issue, the web inspector is actually incredibly useful for that, just do a right click + inspect on the target and it will directly focus on the top-most element with respect with z-index, so you would easily see if another element get in between your target or not.