Issue with Stock layout and setOverlap first time only

[MikeIsHere]

In my game I present the deck to the player so they can choose a card

I use the following method to add the deck to the stock:

Code: Select all

spreadDeck: function(cards, parent) {
	var stock = new ebg.stock();
	stock.create(this, $(parent), this.cardWidth, this.cardHeight);
	dojo.connect(stock, 'onChangeSelection', this, 'onDeckSelect');
	stock.image_items_per_row = 14;
	stock.setOverlap(20, 0);
	var counter = 0;
	for(let i in cards) {
		stock.addItemType(cards[i].id, counter++, g_gamethemeurl + 'img/cards.png', 13);
		stock.addToStockWithId(cards[i].id, cards[i].id);
	}
},

It is called from the onEnterStage at the correct state

Code: Select all

onEnteringState: function (stateName, args) {
	console.log('Entering state: ' + stateName);

	switch (stateName) {

		case 'cutCard':
			dojo.style('cutCard', 'display', 'none');
			this.spreadDeck(args.args.deck, 'fullDeck');
			dojo.style('fullDeck', 'display', 'inline-block');
		case 'dummmy':
			break;
	}
},

The issue is the first time this happens, the cards are displayed vertically like so

Before:


for both players, after refreshing the browser while the game is in the cutCard state the cards are displayed horizontally with the correct overlap

After:


From what I can tell the generated Css looks the same before and after the refresh except for the height of the parent div, which leads me to believe it is being calculated by either setOverlap or addToStockWithId

Parent Div:
Before:


After:


StockItem:
Before:


After:

[Draasill]

Hi,

Your images don't show for me (error 403).

But I've seen some problems with 'stock', sometimes, when the window is resized too fast, for example.

It's probably a race condition, the Stock cannot align cards correctly because the container size is not yet known (or correct) when read by the JS.
When doing a refresh (F5), the display may be faster thanks to some cached elements, and the problem disappears.

Maybe you can delay the stock creation ?
Or call a method forcing the size computation ?

Something like

Code: Select all

setTimeout(function() {
   stock.resetItemsPosition()
}, 1000);

I don't know if "resetItemsPosition" forces the redraw, maybe try moving "setOverlap" in the setTimeout function ?
And maybe adapt "1000" to other values (even 0 (zero) can work, depending on the reflow).


Or, maybe, if "cutCard" is your first state, you may add a previous state, in order to wait for the interface to be ready.
There's a thread about this : viewtopic.php?f=12&t=3104

HTH

[MikeIsHere]

Thank you that solved my issue... I will have to look at the pictures they are publically shared