dragging a rotated element

[galehar]

There is this game where players can rotate cards, then drag them to place them on the board. The current code uses BGA's framework (undocumented?) "rotateTo" and draggable. I checked the code of rotateTo, and it just applies a transform rotate style with an animation, nothing fancy.
Now, this works perfectly fine in Firefox. However, in Chrome and Edge, when the card is rotated, as soon as the drag begins it disappears. Following the recommendations on the studio doc, I've tried to migrate the code to the standard drag and drop API. Again, it works fine in Firefox, but in Chrome, when dragging the rotated card, the drag image shows the card straight, without any rotation.
Searching the web, I found this guy who had the same issue. The solution offered is quite depressing (implement my own drag'n drop code).
When searching, I found many other issues with dragging transformed elements. So, any chance to make this work with the drag and drop API or should I implement my own drag and drop code?

[fafa-fr]

Sorry to answer with a question, but before diving into complicated things, are you sure you really need drag and drop? Would it be possible to use only clicks/presses, even if this involves a few "adjustments", depending on the needs for the game interface? (don't know what game you're talking about, but it could help figure out)

[galehar]

The game is Race for the Galaxy with the Alien Artefact expansion. Players can play cards on the table to build a board. There are conditions for the placement of the card, so it is really needed that the player can see the image of the card properly oriented where he's planning to play it to see how it's going to change the board.
I guess it doesn't require the player holding down the mouse button, and with the card selected, have the image of the card on the mouse cursor when hovering the board. Still need the same code as was suggested on stackoverflow anyway. And it's even less mobile friendly as there's no hover there.

[fafa-fr]

The game is Race for the Galaxy with the Alien Artefact expansion.

Ok thanks.

I've checked your orb.jpg file, it's not very big (180MB), so a solution could be to have each card in four copies, one for each orientation. This way you don't need to use rotate. (Instead of four different images, it'd be better to have only one sprites image, four times bigger, or two sprites images, one for vertical cards and one for horizontal cards, if it's easier to code.)
I don't know if it's the best solution, I'm just giving ideas.

[galehar]

The game is Race for the Galaxy with the Alien Artefact expansion.

Ok thanks.

I've checked your orb.jpg file, it's not very big (180MB), so a solution could be to have each card in four copies, one for each orientation.

180MB is not very big?
Fortunately, the file weights 364k. Yeah, it's a good idea, I might try this. Thanks.

[fafa-fr]

180MB is not very big?

was typing too fast, I meant 180k. (the one I downloaded from a game in progress is 179.3k).

[Victoria_La]

I don't its good iea to replicate graphics, rotate should work, there are many games that can drag rotate elements. You may have to wrap card in another container because transform: does not stack but it should be solvable. The draggable in bga framework does support rotation too (but you have to set it with framework methods as well not with css)

[galehar]

I don't its good iea to replicate graphics, rotate should work, there are many games that can drag rotate elements.

Well, replicating the graphics is really a last resort, I'm still trying to make it work properly. Could you point me to such games? I'd like to check the code.
edit: Carcassone of course! Too bad premium games aren't in studio

You may have to wrap card in another container because transform: does not stack but it should be solvable.

Hmm, I've just checked in debugger, draggable seems to work by changing the element's position, it doesn't apply a transform. I could try to add a wrapper, but I don't understand how it would help.

The draggable in bga framework does support rotation too (but you have to set it with framework methods as well not with css)

As I said in the original post, the original code uses BGA's framework draggable and RotateTo, and it only works in Firefox.

[shadowphiar]

You can drag rotated elements in Steam Works (although its fairly rare - only a couple of tiles ever rotate). I didn't have any similar problem with rotated elements disappearing and didn't do anything special to counter it ¯\_(ツ)_/¯ (the code uses draggable, but if you look at it beware I had to customise it quite severely to cope with some z-ordering issues.)

[galehar]

You can drag rotated elements in Steam Works (although its fairly rare - only a couple of tiles ever rotate). I didn't have any similar problem with rotated elements disappearing and didn't do anything special to counter it ¯\_(ツ)_/¯ (the code uses draggable, but if you look at it beware I had to customise it quite severely to cope with some z-ordering issues.)

Have you tried it in chrome? I just did, and you have the exact same bug as I do. Once the tile is rotated, if you try to drag it, it disappears.