Board Game Arena

Posted: **10 April 2021, 14:13**

Hello.
I was wondering if Stock component had an option to disable some (not all) cards from ... stock

In fact I have my hand created with a stock component but for certain phases of the game not all cards can be played (selected is a must as I already prevent next steps if not playable card is selected).
What I want is to
- remove possibility to "click" on some cards
- pass them to opacity 0.5, or mark them with a red cross (like when discarding cards in Race For The Galaxy)

Do you have any clue/advice to do this ?

I precise that I use stock component as described in the Wiki :
In JS :

Code: Select all

this.playerHand = new ebg.stock();
this.playerHand.onItemCreate = dojo.hitch(this, function (card_div, card_type_id, card_id) {
	dojo.addClass($(card_id),'card-possible-selection'); 
});
this.playerHand.image_items_per_row = this.nbcolumncards;
this.playerHand.create( this, $('myHand'), this.cardWidth, this.cardHeight );
this.playerHand.setSelectionMode(1);//Only 1 card can be selected at a time
this.playerHand.setSelectionAppearance( 'class' ); //it will use specific Highlighting when selecting a card according to the class .stockitem_selected in CSS

In CSS :

Code: Select all

.card-possible-selection {
    cursor: pointer;
}
.card-possible-selection:hover {
    transform: scale(1.1);
    z-index: 100; 
}
.stockitem_selected {
    border: none ! important;
    outline: 3px solid red ! important;
}

I connect and disconnect "this.playerHand" to a method named "onChangeSelection"

Code: Select all

this.disconnect(this.playerHand,'onChangeSelection'); //in entering state
dojo.connect( this.playerHand, 'onChangeSelection', this, 'onCardSelectionFromHand' );//only for active player in entering state

That prevent the display of possible card placement for non active player.

Bonus question :
How can we figure out the "undocumented features" like I saw in this (veeeeeeeeeeery old) topic ?
viewtopic.php?p=9255#p9255
NB : my question is the next step of the mentioned topic

NB2 : it is still for the development of Riftforce ^^

Thank you all

Posted: **10 April 2021, 19:10**

Define a CSS class that makes your card appear unselectable (opacity and cursor)
You add your class to your unselectable card. You could define a method to update the status of your cards (since you will remove and or add your CSS class)
For the unselectable part, with onChangeSelection, you just check if it is selectable, if it is not, unselect the card. It won't appear selected

You do not have to disconnect/reconnect onChangeSelection.

For the unknown stuff, since it is undocumented, hard to say how to find it. I often just check the code of the component usually.

Posted: **10 April 2021, 19:30**

You can look source code from Papayoo

Posted: **10 April 2021, 19:32**

hello

in JS onPlayerHandSelectionChanged, you can choose to display a button or not depending on what card or cards are clicked...
here is an example :

Code: Select all

var cards = this.playerHand.getSelectedItems();
if( this.checkAction( 'playCardDrawn', true ) )
{
       this.removeActionButtons();
       this.addActionButton ('button_throw_draw_'+cards[0].id+'_'+cards[0].type, _('Throw card'), 'onThrowCard' );
       if( cards[0].id == this.drawnCardId )
       {
           //you cannot play a card drawn from the deck
       }
       else if( cards[0].type > 9)
       {
             this.addActionButton ('button_play_draw_'+cards[0].id+'_'+cards[0].type, _('Play card'), 'onPlayCard' );
       }
}

the player has drawn a card from the deck. the card is added to his hand.
we clean the action bar.
he is allowed to throw (discard) a card from his hand.
he is allowed to play a card whose value is 10 or more but not the one he hasjust drawn.

so, you can choose to display or not action buttons here depending on card values.

Posted: **10 April 2021, 20:49**

I wouldn't disconnect the event, just handle with a test, e.g check with

Code: Select all

dojo.hasClass()

(I totally agree with this suggestion), and then just unselect the selected card with

Code: Select all

myStockObject.unselectItem(item_id);

and

Code: Select all

return

to end the function

Posted: **11 April 2021, 01:03**

Hello everyone.

Thanks for your replies.

I managed to made it work !!

I have created a special class in css :

Code: Select all

.stockitem-disabled {
    cursor:not-allowed !important;
    opacity:0.5 !important;
}
.stockitem-disabled:hover {
    cursor:not-allowed !important;
    /*margin:5px;*/
    outline:3px solid gray !important;
}

(largely inspired by the Papayoo code

)
And I add/remove the class on my stock element with dojo.

I have also removed the "disconnect" events ^^

Board Game Arena

[SOLVED] Disable some cards from Stock PlayerHand

[SOLVED] Disable some cards from Stock PlayerHand

Re: Disable some cards from Stock PlayerHand

Re: Disable some cards from Stock PlayerHand

Re: Disable some cards from Stock PlayerHand

Re: Disable some cards from Stock PlayerHand

Re: Disable some cards from Stock PlayerHand