Move card to player boards

[VanHlebar]

I am struggling with moving a card from player's hands to the player boards. Is there some way to make this be relative to inside the cp_board class of the player boards? I can get the card to move "close" to where I want it but not inside the actual player board.

I have tried putting a div wrapper around the specific div I am moving the objects to and I have tried the wrapper around the entire board, nothing is working well for me here. I will admit, CSS etc isn't my strongest of skills so I am sure I am missing something here, hopefully simple

[RicardoRix]

are these 2 different 'stock' items ?

http://en.doc.boardgamearena.com/Stock

Look at the bottom for a card to transfer from 1 stock item to another. Situation B, remember to use the 'from' argument to get a nice animation slide.

[VanHlebar]

Thanks for the help, as it turned out it was a CSS issue after all. Finally got that one worked out and on to the next issue.

In the same routines, now that I am able to have the player click a card and move it to the player panel, it needs to be reflected on the other players of course. At this point when the game gets notified of the player playing a power card the other players that are not the active player are getting an error.

Below are my three templates I have defined:

Code: Select all

var jstpl_player_board='\<div class="el_playerboard">\
        <div id="courticon_${player_id}">Court: <span id="courtcount_${player_id}">${court_count}</span></div>\
        <div id="provinceicon_${player_id}">Province: <span id="provincecount_${player_id}">${province_count}</span></div>\
        <div class="ppcardpanel" id="powercard_on_player_panel_{PLAYER_ID}"></div>\
    </div>';

var jstpl_powercard_ontable='<div class="powercard" id="powercard_ontable_${player_id}" style="background-position: -${x}px -${y}px"></div>';

var jstpl_otherplayer_board='\<div class="el_playerboard">\
        <div id="courticon_${player_id}">Court: <span id="courtcount_${player_id}">${court_count}</span></div>\
        <div id="provinceicon_${player_id}">Province: <span id="provincecount_${player_id}">${province_count}</span></div>\
        <div class="ppcardpanel" id="powercard_on_other_player_panel_{PLAYER_ID}"></div>\
    </div>';

When my JS goes to do the dojo.place routine for the other players it crashes giving an error the following error:

Code: Select all

During notification playPowerCard
Cannot read property 'ownerDocument' of null
TypeError: Cannot read property 'ownerDocument' of null

My research indicates that it is because at the time the dojo.place is trying to put the html into the 'powercard_on_otherplayer_panel + p_id that element has not yet been defined. I have tried using both the {PLAYER_ID} and the ${player_id} variables in the template and neither will work. Does anyone have a diction to point me in in the documentation to reasearch? I started thinkning maybe I need to define a block inside my view.php but I am not certain that will solve the issue either?

Thanks,
Eric

[RicardoRix]

use
debugger; and F12.

inspect the div element to see the exact id, and the id you specify in the dojo.place.

You quote:
powercard_on_otherplayer_panel + p_id

^^ that's missing 2 underscores.

[VanHlebar]

use
debugger; and F12.

inspect the div element to see the exact id, and the id you specify in the dojo.place.

You quote:
powercard_on_otherplayer_panel + p_id

^^ that's missing 2 underscores.

Thanks for the reply! Yea the underscores definately was a mistype in my code, but sadly that isn't the issue. The issue is that all of my player boards (powercard_on_other_player_panel_ + p_id) always point to the current player_id for all players in the game.

Example:
Player 1 player_id: 2312047
Player 2 player_id: 2312048
Player 3 player_id: 2312049
Player 4 player_id: 2312050

Now upon inspection of the elements, the div#player_name_player_id is correct in all 4 player board areas. When looking at my template code for the location that the card will be placed all 4 player boards are showing div#powercard_on_player_panel_ + player_id of the current player. This is getting created from the setup() that is seting up my intial game state.

My template for the div#powercard_on_other_player_panel + player_id is never getting called or created until the game updates after a player has played a power card. So when the dojo.place routine looks for that div it isn't in the DOM so it crashes. (Or that is my assumption here) Even if I tried to use the div already created in the setup routine, all of those have the same div id which is the currently player's id attached to the template. I feel like I have somemething incorrect in my template code, but the only change I can think of is to go from {PLAYER_ID} to ${player_id} which then causes things to crash during the game setup function.

Sorry for the rambling message here!

[RicardoRix]

post the dojo.place code.

It's the dojo.place code that essentially makes the <div> (player card) and places it onto *something* like another div that already needs to already be there, like one of the player boards.

it's dojo.place ('format_block', 'div_id_of_the_player_board');
are you missing this 2nd parameter?

Have you used dojo.place already in the code before that was sucessful? If not try a basic test.

dojo.place ('<div>asdasd</div>', 'background'); ... or something. If that doesn't work then it's somekind of dojo define\declare thing.

[VanHlebar]

Here is the function that is doing the card placement:

Code: Select all

        playPowerCard : function ( p_id, card )
        {
            // See if this is actual player playing the card or one of the other players.
            if( p_id != this.player_id )
            {
                console.log( 'Playing a different player powercard' );
                console.log( 'Player attempting to update: ' + p_id);

                dojo.place(this.format_block('jstpl_powercard_ontable', {
                    x : 130 * (card.type_arg - 1),
                    y : 210 * (card.type - 1),
                    player_id : p_id
               }), 'powercard_on_other_player_panel_' + p_id );               
            }
            else
            {
                dojo.place(this.format_block('jstpl_powercard_ontable', {
                    x : 130 * (card.type_arg - 1),
                    y : 210 * (card.type - 1),
                    player_id : p_id
                }), 'powercard_on_player_panel_' + p_id );  //'pc_panel_wrap' );
            }

            this.powerCards.removeFromStockById( card.id );
        },

The dojo.place that gets called in the if statement is what is crashing, the dojo.place that gets called as part of the else statement works just fine.

Thanks again for all your help!

[RicardoRix]

You must have already placed the other player div's with id : powercard_on_other_player_panel_
It looks like they need to get there by a previous dojo.place with this block: jstpl_otherplayer_board
by your previous post you think they are getting there from the setup, but....

try breaking out into 2 lines
var sBlock = this.format_block();

just to check that string is OK, maybe the card is null, or doesn't have the defined properties (type, type_arg)

or does the div that you're trying to place already exist?

[VanHlebar]

Wow what a super cryptic and difficult bug to locate! I did finally figure it out and as I thought it was in fact coming from my setup function. Up there I was setting up the game specific items in my player blocks and instead of doing this:

Code: Select all

player_id : player_id

I had this:

Code: Select all

player_id : player

so in the actual DOM it has my div id with [object Object] instead of the actual player id.

Thanks again for helping and sorry to clog up the forum with my own inability to type correctly.

[RicardoRix]

coolio.

You should have been able to figure that out with:

use
debugger; and F12.

inspect the div element to see the exact id, and the id you specify in the dojo.place.