Board Game Arena

I am a newbie
I need to show dice roll of 6 dice, but can only get the first image of the sprite.png file.
Can you please help me?
Here is the info:

The gamedatas.players information from the game.php file is correct
as seen from a vardump of gamesadatas
["player_hand"]=> array(4)
{ [0]=> array(2) { ["player"]=> int(2323323) ["dice_roll"]=> array(6) { [0]=> int(6) [1]=> int(4) [2]=> int(3) [3]=> int(3) [4]=> int(2) [5]=> int(4) } }
[1]=> array(2) { ["player"]=> int(2323322) ["dice_roll"]=> array(6) { [0]=> int(2) [1]=> int(5) [2]=> int(1) [3]=> int(1) [4]=> int(6) [5]=> int(6) } }
[2]=> array(2) { ["player"]=> int(2323324) ["dice_roll"]=> array(6) { [0]=> int(6) [1]=> int(1) [2]=> int(2) [3]=> int(6) [4]=> int(4) [5]=> int(6) } }
[3]=> array(2) { ["player"]=> int(2323321) ["dice_roll"]=> array(6) { [0]=> int(6) [1]=> int(2) [2]=> int(4) [3]=> int(2) [4]=> int(6) [5]=> int(5) } } } }

I am trying to use addToStockWithId - but only get the first image of my png file for each player.

This is what I have in the .js file

this.diceSize = 25;
this.tile_size = 120;

this.player_dice_area = [];

for( var player_id in gamedatas.players )
{
var player = gamedatas.players[player_id];
var player_board_div = $('player_board_'+player_id);
dojo.place( this.format_block('jstpl_player_board', player ), player_board_div );

}

for( var player_id in gamedatas.player_hand )

{
cur_player = gamedatas.player_hand[player_id].player;
dice_rolled = gamedatas.player_hand[player_id].dice_roll;
dice_location = 'playertabledice_'+cur_player;


// create players dice
this.playerHand[cur_player] = new ebg.stock(); // new stock object for hand
this.playerHand[cur_player].create( this, 'playertabledice_'+cur_player , this.diceSize, this.diceSize );
this.playerHand[cur_player].image_items_per_row = 6;

for (var value = 1; value <= 6; value++) {

// Build dice type id

var dice_face_id = value;
var image_location = value -1;
this.playerHand[cur_player].addItemType(dice_face_id, dice_face_id, g_gamethemeurl + 'img/dice.png', image_location );

}

for( var die in dice_rolled )
{
var face = dice_rolled[die];
var dice_id = cur_player + die;
this.playerHand[cur_player].addToStockWithId(dice_rolled[die], dice_id );
//this.playDiceOnTable( cur_player, face );
}

}

This is my .tpl
var jstpl_player_board = '\<div class="cp_board">\
<div id="playertables${id}" class="playertables"></div>\
<div id="playertabledice_${id}" class="playertabledice"></div>\
</div>';

This is my .css

.playertabledice {
position: absolute;
width: 25px;
height: 25px;
background-image: url('img/dice.png');
}



Thank you very much for any help!

Why are you using a background image for the div in which your stock object is created? That's probably the image you're seeing, and there's no reason for it to be there based on the intent you've described. That div is the container that the stock items will be placed inside of, and it should therefore be large enough to display a grid of items with margins. These items will already have the background image when they are added to the stock.

Generally speaking, a good way to diagnose issues with Stock components is to use Dev Tools (right click and inspect element on an object that is supposed to be a stock item, or the container). If the item was successfully added to the stock, your "playertabledice_" divs will contain children with the "stockitem" class, and you may have some kind of display issue if you can't see them.

If not, you may need to temporarily log variables to the console at each step to make sure the types are correct. Nothing strikes me as wrong at first glance.

Thanks for your reply, paramesis!

Good point about the background style - image.

Thanks for your tips about the Dev Tools!