Stock and sildeToObject.

[RicardoRix]

I use the BGA framework stock items in my code.

So a common action to do is 'transfer' a card from one stock item to another, something easy like this:

Code: Select all

stFrom.removeFromStockById(idCard);			
stTo.addToStockWithId(idUnique, idCard);

But now to amimate this behaviour I need to use 'slideToObject', something like:

Code: Select all

this.slideToObject(cardTemp, target, 500, 0).play();

So the problem exists if you combine the stock transfer with the slideToObject. When should the silde occur..?
stFrom.removeFromStockById(idCard); At some point the card doesn't exist and then animation won't work.
If you add in to a stock and then slide it, again the card will exist first then slide to the destination, even worse.

So all-in-all, what seemed like a simple combination doesn't work. I've looked in a few code bases and I don't see complete solution.

So....
1. What about using, setTimeout(function()
{
this.playedStack.addToStockWithId(uniqueId, card.id);
}, 500 + (150 * ii));
1A. Well it may work on the surface, but the callback relies on the parameters not changing. Call this code snippet 2 times or more are you'll find uniqueId, card.id do not change. For a one-time call, this will work OK.
But also, hoping future timed events will occur together smoothly doesn't sound very robust.

2. Do the animation really quick.
2A. Yes this sometimes worked. I didn't look into this too deeply, but sometimes I moved code around and nothing changed. Mostly, not surprisingly, the animation doesn't even occur.

3. Hook into the animate beforeBegin and onEnd events.
3A. This is the best I could come up with, and it works quite well:

Code: Select all

animateStockTransfer: function (ii, uniqueId, cardid, mobile, target, duration, delay, stFrom, stTo)
		{
			var cardTemp = dojo.clone($(mobile + '_item_' + cardid));
			
			if (!cardTemp)
			{
				// use a card background.
				cardTemp = dojo.clone($('tempcard'));
				dojo.place(cardTemp, mobile);
				dojo.attr(cardTemp, "class", "tempcard");
			}
			
			dojo.attr(cardTemp, "id", "card-temp-" + ii);
			dojo.attr(cardTemp, "idUnique", uniqueId);
			dojo.attr(cardTemp, "idCard", cardid);
			dojo.attr(cardTemp, "z-index", "99");
			dojo.place(cardTemp, mobile);
			var anim = this.slideToObject(cardTemp, target, duration, ii * delay);						

			if (stFrom != null)
			{
				dojo.connect( anim, 'beforeBegin', this, function( node ) { 		
					var idCard = dojo.attr(node, "idCard");							
					stFrom.removeFromStockById(idCard);			
				} );
			}
			
			dojo.connect( anim, 'onEnd', this, function( node ) { 							
				var idUnique = dojo.attr(node, "idUnique");
				var idCard = dojo.attr(node, "idCard");		
				if (stTo != null)
					stTo.addToStockWithId(idUnique, idCard);

				if (stTo == this.playerHand)
					this.adjustPlayHand();			
	
				dojo.destroy(node);  
			} );
			anim.play();
		},

There are a few things of note:
If the 'card' does not yet exist, then 'tempcard' a css defined background image of a card is used.
The 2 attributes idUnique, idCard are required to be embedded in the card <div>, and then pulled out in the callback.

If there is extra stuff to do than just these before and after events then you're going to have to deal with this too.
For example my hack: if (stTo == this.playerHand) this.adjustPlayHand();

--------
So all-in-all this is quite a long-winded solution to what appears to be quite a simple problem, I have no idea if I've totally missed the point.

The problem after all of this though remains that the animation still doesn't work that well.
The slide goes to the middle of the target stock container <div>.
The stock items still get 'animated' re-arranged at the same time.
Lastly, and I have no reason why, the slide doesn't work to one of my stock items. The card slides underneath the destination parent <div>. Everything is css position: relative.

[sourisdudesert]

Hello

This situation has been documented here:
http://en.doc.boardgamearena.com/Stock

If you go at the very bottom of the page, in the "tips" sections, you'll see that it corresponds exactly to "Situation B".

Hope this helps.

[RicardoRix]

Yes, Having a long-break and coming back to coding, I remember reading that, just didn't remember it enough..

It would be good to come up with some code that applies to these situations. Combining all the slide and addTo and removeTo code toegther in a few functions.

I can see that quite often it is an array of cards that need to be operated on. The slide could use the delay parameter so that the cards stream across one at a time rather than all together.

Whether it is either the active player or another player.

[RicardoRix]

Hello

This situation has been documented here:
http://en.doc.boardgamearena.com/Stock

If you go at the very bottom of the page, in the "tips" sections, you'll see that it corresponds exactly to "Situation B".

Hope this helps.

I have switched over to using a 'from' argument now in addToStockWithId - so much better, thx.
weirdly sometimes I just specifiy the stock container div and it slides the exact card,
sometimes it shifts the card momentarily to the middle of the stock container div before sliding, I can easily cure this by specifying the _item_ in the from argument, but I don't know why it works is some parts of my code, and other code parts it doesn't.

But I still have an issue with the animation sliding to one of my <div>'s

The card slides underneath the destination parent <div>.

Do you know why that might be?

[DrKarotte]

Did you try to add some z-index to the temporary object?

[RicardoRix]

Did you try to add some z-index to the temporary object?

For most cases it is a stock transfer, from one stock to another using (now) the 'from' parameter. So there is no temporary object.

[RicardoRix]

well, it turns out that css was the culprit.

I had overflow: hidden; which stop the animation working correctly by hiding the card as it slide out-of-range of the overflow: hidden div.