button on card on mobile

[galehar]

In Race for the Galaxy, in the Alien Artefacts Orb game, there are Orb cards which you can rotate before placing them. The way it has been implemented (not by me) is that when you select the card, a semi transparent rotating arrow appears on the card. On desktop, when you hover over the arrow, it turns solid and when you click it, the card rotates.
On mobile it doesn't work. The semi-transparent arrow appears, but when you tap it, it unselects the card instead of rotating it.
I've tried changing the .css with .touch-device and .notouch-device to force the arrow opacity to 1 on mobile (since there's no hover). The opacity change works, when I select the card, the solid arrow appears, but tapping it still unselects the card instead of rotating it.
Both the card and the arrow have absolute position. The card has a z-index of 1, I've tried enforcing a higher z-index value to the arrow but no luck.
I am using USB debugging with chrome to debug and inspect the mobile version, but I can't figure it out. Here is an example of an orb card. There's just the card and the rotcommand (which is the arrow).

Code: Select all

<div id="player_hand_orb_item_2" class="stockitem " style="top: 0px; left: 105px; width: 100px; height: 140px; background-image: url(&quot;https://en.1.studio.boardgamearena.com:8083/data/themereleases/current/games/raceforthegalaxy/999999-9999/img/orb.jpg&quot;); background-position: -300% -100%; cursor: move; opacity: 1;">
	<div id="rotcommand_player_hand_orb_item_2" class="rotcommand"></div>
</div>

When the card is created, this is called:

Code: Select all

dojo.connect($('rotcommand_' + div_id), 'onclick', this, 'onRotOrbCard');

When debugging, this is never called. I can only see the select/unselect events. I suck at this frontend stuff, but I'm trying to get better! What's going on here? Can you help me figure this out? Or should I just add some small rotate buttons below the card because that can't work on mobile?

[RicardoRix]

I think you just pass the id string, not inside the $()

Code: Select all

dojo.connect('rotcommand_' + div_id, 'onclick', this, 'onRotOrbCard');

or is it 'click' rather than 'onclick' ?

[Tisaac]

I think you just pass the id string, not inside the $()

Code: Select all

dojo.connect('rotcommand_' + div_id, 'onclick', this, 'onRotOrbCard');

or is it 'click' rather than 'onclick' ?

Actually from my experience, passing the $() works much better than passing the id (not sure why though).
Click or onclick should both works. Can we easily take a look at the game or is it hidden on studio ?

[galehar]

Can we easily take a look at the game or is it hidden on studio ?

Unfortunately no, the game isn't public (see this post).

But I've found the reason. Right after I connect my onclick function, I create a draggable, because the card can be drag and dropped after being rotated.

Code: Select all

            setupNewOrbCard: function(card_div, card_type_id, div_id) {
                console.log("setupNewCard");

                dojo.place(this.format_block('jtspl_orbcardhand', {
                    id: div_id
                }), card_div);
                dojo.connect($('rotcommand_' + div_id), 'onclick', this, 'onRotOrbCard');

                var draggable = new ebg.draggable();
                draggable.create(this, card_div, card_div);
                dojo.connect(draggable, 'onEndDragging', this, 'onOrbCardEndDragging');
                dojo.connect(draggable, 'onDragging', this, 'onOrbCardDragging');
                dojo.connect(draggable, 'onStartDragging', this, 'onOrbCardStartDragging');
            },

If I remove all the draggable code, the card rotates fine on mobile. Of course, that's not really the fix I was looking for
The combination of rotation and draggable actually only works on desktop firefox, because on chrome and edge, after the card have been rotated if you try to drag it it disappears.
I suppose I need to migrate all the draggable code to the standard HTML Drag and Drop API as is recommended by the studio doc, hopefully this will fix both my issues.
Could you recommend a game which uses the standard HTML Drag and Drop API that I could study the code? Even better if it does rotation and drag and drop!
Thanks.