tpl and css struggling

[tchobello]

Hello
I need some help because I am really struggling with CSS and TPL.
I have a panel {mahjong} with numbers from 2 to 14. When a player selects and validates one, a tiny number should appear in his player's panel.
first of all, the code for the mahjong panel :
TPL

Code: Select all

<div id="mahjong" class="whiteblock" style="display:none;">
<h3>{LB_MAHJONG}:</h3>
</div>

JS

Code: Select all

            setup
            this.mahjongValues = new ebg.stock();
            this.mahjongValues.create( this, $('mahjong'), this.mahjongwidth, this.mahjongheight ); 
            this.mahjongValues.setSelectionMode( 1 );

            dojo.connect( this.mahjongValues, 'onChangeSelection', this, 'onMahjongValuesSelectionChanged' );
            
            this.mahjongValues.image_items_per_row = 7; // 7 images per row

            for( var value=0; value<=13; value++ ) 
            { // Build card type id
                this.mahjongValues.addItemType( value, value, g_gamethemeurl+'img/tichu-icons-table.png', value ); 
                this.mahjongValues.addToStockWithId(value, value);
 
         onEnteringState: function( stateName, args )
        {               
             case 'firstTrick':
                if( this.isCurrentPlayerActive() )
                {
                    dojo.style( $('mahjong'), 'display', 'block' );
                }               
                this.playerHand.unselectAll();
                break;           
               

The panel is displayed but all elements are displayed vertically. They are well displayed (horizontally) with F5 or F12.
How can I solve this ?

Next step.
When I click on a value and validate, I would like to have a tiny number appearing in the player's panel.
I AJAXe to PHP the value clicked and notifies back.
PHP

Code: Select all

        self::notifyAllPlayers( 'wishMade', $notification_description, array(
                'player_id' => self::getActivePlayerId(),
                'player_name' => self::getActivePlayerName(),
                'value_wished' => $valueWished,

JS

Code: Select all

         notif_wishMade: function( notif )
        {
            dojo.style( $('mahjong'), 'display', 'none' );
            ???
        },

Can I use the mahjongValues Stock and display a tiny sprite (the original one is 70 * 105 and the tiny should be 22 * 32) ?
If not, can I use the tichu-icons-table.png anyway or do I have to create a tichu-icons-panel.png ?
And last, how can I display that in any case ?

[tchobello]

Hi again,
the situation has evolved.
The tiny number appears on the player's panel but under all the others icons.
How can I put it next to the others ?

TPL

Code: Select all

var jstpl_player_board = '<div class="ha_board">\
    ...
    <div class="mahjong_mini"  id="mahjong_mini_${id}"></div>\
    </div>';

var jstpl_mahjong='<div class="mahjong" id="mahjong_${value}" style="background-position:-${x}px -${y}px"></div>';

CSS

Code: Select all

.mahjong {
    position: absolute;
    width: 22px;
    height: 33px;
    background-image: url('img/tichu-icons-panel.png'); 
}

.mahjong_mini {
    width: 22px;
    height: 33px;
}	

JS

Code: Select all

         notif_wishMade: function( notif )
        {
            dojo.style( $('mahjong'), 'display', 'none' );
			var wish = notif.args.wish;
			var x = wish % 7;
			var y = (wish - x) / 7;
			dojo.place(  this.format_block('jstpl_mahjong', {
                value : wish,
			x : x*22,
		        y : y*33}
			), 'mahjong_mini_'+notif.args.player_id );
        },