[SOLVED] Disable some cards from Stock PlayerHand

[Badguizmo]

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

[Benoit314]

• 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.

[thoun]

You can look source code from Papayoo

[tchobello]

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.

[cpasbanal]

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

[Badguizmo]

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 ^^