Scopa

Game development with Board Game Arena Studio
User avatar
tchobello
Posts: 525
Joined: 18 March 2012, 13:19

Re: Scopa

Post by tchobello »

fafa-fr wrote:
godassesdor wrote:didn't know it could add _item_x to a div in the tpl.
BGA's Stock component does this: when you use
this.playerHand.addToStockWithId(this.getCardUniqueId(color, value), card.id);
the method adds a div "mycards_item_24" (or another id, depending on card.id value) in the "mycards" div. ("mycards" because in your Stock creation you wrote this.playerHand.create( this, $('mycards'), ...)
It's working now when I play a card.
Thanks for giving me the right place to look for.

not sure I can deal by now with the opponent playing a card...need state & notifications I suppose.

Little by little...I learn.
User avatar
tchobello
Posts: 525
Joined: 18 March 2012, 13:19

Re: Scopa

Post by tchobello »

hi !
when I click on a card in PlayerHand, it slides to the table when I use this in the JS setup :

Code: Select all

dojo. connect( this.playerHand, 'onChangeSelection', this, 'onPlayerHandCardClicked' );
but I doesn't work when I use :

Code: Select all

dojo. connect( this.playerHand, 'onClick', this, 'onPlayerHandCardClicked' );
What did I miss ?
User avatar
Woodruff
Posts: 411
Joined: 08 March 2014, 00:53

Re: Scopa

Post by Woodruff »

Hi,

Congrats for the job you've achieved so far.

I am not totally sure about your problem. It may be caused by the fact that 'onChangeSelection' event targets your Stock component and not individual card. A 'onClick' event on the Stock component itself, which is a programmatic object by itself and not an HTML node (even if it is linked to a container on your DOM), may not have any meaning.
Why would you need the 'onClick' event if the first one works? Any reason i n particular?

If you want to publish your game, keeping these graphics becoming a problem, I found the page on Wikipedia linking to many sets: https://fr.wikipedia.org/wiki/Jeu_de_cartes_italien
Maybe you can pick one of these. They are free of right for use in the web (Wikipedia Common license) so that could be a start.
User avatar
tchobello
Posts: 525
Joined: 18 March 2012, 13:19

Re: Scopa

Post by tchobello »

Hi !
thanks for the advices.

I'll look at the graphics later. I needed something beautiful to work on ;)

I know it works as in the hearts tutorial where you can select several cards (pass) or a single one (play).
As I'm learning, i wanted to do the right dojo method as I click on a single card which should go on the table.
User avatar
Woodruff
Posts: 411
Joined: 08 March 2014, 00:53

Re: Scopa

Post by Woodruff »

  • With onSelectionChange, to trigger the play of one single card, you can filter by the size of the selection inside the handler:

    Code: Select all

    function onPlayerHandCardClicked() {
    	var items = this.player_hand.getSelectedItems();
    	if (items.length == 1) {
    		var card_id = items[0].id;
    		// Do something
    	}
    }
  • If you want to target onClick specifically, you can connect on the div which the Stock is attached to. In that case, you have to use the event paraemeter to figure out on what card you clicked.

    Code: Select all

    function onPlayerHandCardClicked(event) {
    	var node = event.currentTarget; // The HTML node which correspond to your card
    	var node_HTML_id = dojo.getAttr(node, 'id');
    	// Do something to get the card id
    }
    The trouble with that second method is that you have to parse manually the id to see what is the id card you clicked on, whether the first method works with the Stock component natively, and get that id directly, ready to submit to the server via an Ajax call.
User avatar
tchobello
Posts: 525
Joined: 18 March 2012, 13:19

Re: Scopa

Post by tchobello »

Thanks again !
I'll stick to the first code...

I talked about onclick because it was written on the js page here at player input, dojo.connect
User avatar
tchobello
Posts: 525
Joined: 18 March 2012, 13:19

Re: Scopa

Post by tchobello »

Hi again !

I've made little progress :
I've updated States and now each player can play a card alternatively.
There are some notifications sent.

but I need F5 to make the opponent cards appear.
I suppose notifications in client calls playCardOnTable in order to make appear other players cards on tableCards Stock.

Code: Select all

        playCardOnTable : function(player_id, color, value, card_id) {
            // player_id => direction
            if (player_id != this.player_id) {
                // Some opponent played a card
                // Move card from player panel
                console.log(player.id +" otherhand_item_ "+card_id);
                  this.tableCards.addToStockWithId( this.getCardUniqueId(color, value), 'tablecards_item_'+card_id )
            } 
            else {
                // You played a card. If it exists in your hand, move card from there and remove
                // corresponding item
                if ($('mycards_item_' + card_id)) {
                     this.tableCards.addToStockWithId( this.getCardUniqueId(color, value), 'tablecards_item_'+card_id, 'mycards_item_' + card_id )
                     this.playerHand.removeFromStockById(card_id);
                }
            }
By now, I think I have to write something in the case player_id != this.player_id.
I want to move the card from the active playerHand Stock to tableCards Stock
I don't know what to put as last arg in this.tableCards.addToStockWithId, which be 'from'
I suppose I also have to removeFromStockById(card_id) from the active playerHand Stock.

Or am I totally wrong about Stock components ?
User avatar
fafa-fr
Posts: 383
Joined: 22 December 2013, 21:58

Re: Scopa

Post by fafa-fr »

  • 1. There's a wrong variable name in your console.log: player.id is not defined, maybe you wanted to write player_id
  • 2. When a card is played:
    • - In the page of the player who played the card (in your else block in playCardOnTable), you want to move a card from one stock (playerHand) to another (tableCards). This is the situation B described at the end of the Stock doc page, and your code is correct, except for the 2nd argument, see point 3 below.
    • - In the opponent page (in your if (player_id != this.player_id) block), you want to add a card in tableCards Stock that is not in a Stock (it is not displayed on this page before it is played), so you're in situation A of the Stock doc page: only addToStockWithId(). This is what you do at the moment, but there's the same error on the 2nd argument. Additionally, if you want to make this more good-looking, you can add an html div id as a 3rd argument (from) to make the card appear above this div and slide to its final position in tablecards. Usually on BGA, we make these things appear above "player boards" (I think it's a confusing name), their div ids are "overall_player_board_"+player_id.
  • 3. About your line this.tableCards.addToStockWithId( this.getCardUniqueId(color, value), 'tablecards_item_'+card_id )
    - there's no semicolon at the end
    - When you use addToStockWithId(), the id (2nd argument) is an id used within the tableCards Stock, it's NOT the html id, the id of the card div. So you must use card_id instead of 'tablecards_item_'+card_id. BGA's addToStockWithId method will automatically set the html id of the newly placed card. There's no javascript error, so the code is executed without problem, but if you look at the card placed with your actual code, you'll see that its html id is id="tablecards_item_tablecards_item_38", which can cause problems later.
    Same error for the 2nd argument of your addToStockWithId() in your else block, but NOT for the 3rd argument, this one is correct in your code, because you're supposed to pass an HTML div id for the 3rd argument.
User avatar
tchobello
Posts: 525
Joined: 18 March 2012, 13:19

Re: Scopa

Post by tchobello »

Thanks a lot. Your explanations are crystal clear.
User avatar
tchobello
Posts: 525
Joined: 18 March 2012, 13:19

Re: Scopa

Post by tchobello »

hi !
I've made some progress in the game and need some help in js.

when a player plays a card on the table, if there is a card with the same value, he can win them both.
when all players have played their 3 cards, the dealer gives them 3 new cards.

that works in game, in the database, in the notifications.
it's ok too when I hit F5 but i'm strugglng to make some "live" animations.

can someone explain to me how it works ?
Post Reply

Return to “Developers”