I'm working on Here Kitty Kitty and the player's hand of cards displays correctly, but when you select a card the background image shifts. The cards are in a single image of 13x4 images (52 card images) at 260px by 185px. How much it shifts and the direction of the shift is variable depending on its location in the overall image file available here. Note that these are images I scanned in myself as I haven't received the official images from Fireside Games yet, so they are grainy and some are a little crooked.
Before you select a card, the hand looks like this:
After you select the first card in the row, the hand looks like this:
These are stock items created using this function:
The setupNewCard() function is used to add the HTML ToolTip (which works fine) and the cardStockItem class in the CSS file is as follows:
I've looked at Just Desserts as an example of a working game that has this functionality but I'm at a loss of what is different here. Anyone have any ideas? I have to be missing something obvious here.
Thanks.
Before you select a card, the hand looks like this:
After you select the first card in the row, the hand looks like this:
These are stock items created using this function:
Code: Select all
createCardStockObject: function( element, selectable )
{
console.log("createCardStockObject()");
var stock = new ebg.stock();
stock.create (this, element, this.CARDWIDTH, this.CARDHEIGHT);
stock.image_items_per_row = 13;
for (var x=0; x <= 51; x++) {
stock.addItemType(x, x, g_gamethemeurl + 'img/Cards185x260.jpg', x );
}
if (selectable) {
stock.setSelectionMode(2);
dojo.connect( stock, 'onChangeSelection', this, 'onCardSelected' );
}
else {
stock.setSelectionMode(0);
}
stock.onItemCreate = dojo.hitch( this, 'setupNewCard' );
stock.extraClasses = 'cardStockItem';
return stock;
},
Code: Select all
.cardStockItem {
cursor: pointer;
margin-right: 8px;
height: 260px;
width: 185px;
box-sizing: border-box;
border-radius: 10px;
}
Thanks.
