Board Game Arena

Posted: **13 May 2016, 18:41**

Hi everybody!

I'm faced with a basic problem. I have a stock component to represents the cards in player's hand and a Zone component to represent player's board, which is managed by a custom pattern. For the moment, to simplify my problem, the cards have the same layout in both hand and board (visible verso).

I want to pick a card from player hand (Stock) which id is known and place it smoothly on the board (Zone). Here's what I do, according to what is said at the end of the doc http://en.doc.boardgamearena.com/Stock -> Tips when adding/removing items to/from Stock components -> Situation C:

Code: Select all

var HTML_id = 'hand_' + player_id + '_item_' + id;     // 'hand_' + player_id is the HTML div which hosts the myStock; id is the id of the card defined when it has been added to myStock
var node = dojo.clone($(HTML_id));     // Clone the card and get a mobile node
this.placeOnObject(node, HTML_id);     // Place this node on the Stock, above the original card
this.slideToObject(node, 'board_' + player_id);     // 'board_' + player_id is the HTML div which hosts myZone slide the node from stock to Zone
myStock[player_id].removeFromStockById(notif.args.id);     // Delete the card from the stock
myZone.placeInZone( node , 1 );     // Integrate the node with weight = 1 in myZone

This code does not work

. The node seems not to be cloned properly. I read that JS template could be useful but I don't know how to associate a card coming from a stock with such template

.

Any luck?

Posted: **13 May 2016, 23:16**

The first danger when you clone an element, is that you end up with an element with the same id!
If you don't change the clone's id, trying to manipulate it using its id is guaranteed to go wrong ><
Is this where your error comes from?

Posted: **15 May 2016, 10:48**

Thank you Pikiou.

Duplicating a node and keep the same id is indeed a BIG PROBLEM

. Thanks for mentionning it

.
So, here's my 2nd try:

Code: Select all

var HTML_id = 'hand_' + player_id + '_item_' + notif.args.id;
var node = dojo.clone($(HTML_id));
dojo.attr(node, 'id', 'mobile');   // Change the id
dojo.removeAttr(node, 'class');   // Remove the class 'stockitem' so that the object does not belong to the stock anymore
dojo.style(node, 'visibility', 'hidden');    //
dojo.place(node, dojo.body());    // Attach the node to the DOM
this.placeOnObject('mobile', HTML_id);    //dojo.place(node, HTML_id);   // Put the node on it's twin: THIS DOES NOT WORK
dojo.style(node, 'visibility', 'visible');    // Make it visible
this.slideToObject('mobile', 'board_' + player_id).play();   // I read I have to add the .play() method at the end of this
myStock.removeFromStockById(notif.args.id);

I notice that when you clone a node using dojo's clone method, the newly created node is not attached to the DOM. That's why I use dojo.place which attach the node at the end of the indicated parent (here, <body>); this.placeOnObject does not work for nodes which have not been attached yet.

As far as I understand, this.placeOnObject does not change the position of the objet within the DOM structure but just change its screen coordinates. Could you confirm that? So, when I use it, I expect that node remains a direct child of <body> but is freed by its normal position (absolute positioning?) to be placed on the target.

I have no crash but this.placeOnObject and this.slideToObject have no effect... At the end, the newly created card still appears at the end of the webpage...

Do you have any idea to know what goes wrong?

Posted: **15 May 2016, 12:17**

As you suspected, for this.placeOnObject and this.slideToObject to work, you may have to specify that your CSS position is absolute.

I'd advise you pick a more unique id than 'mobile', because when multiple animations occur (typical when you replay the game) it will cause problems.
A this.uniqueId() function using an incremented number would do the trick.

Board Game Arena

[SOLVED] Straightest way to move a card from Stock component to Zone component

[SOLVED] Straightest way to move a card from Stock component to Zone component

Re: Straightest way to move a card from Stock component to Zone component

Re: Straightest way to move a card from Stock component to Zone component

Re: Straightest way to move a card from Stock component to Zone component