Board Game Arena

I been having a lot of fun trying to implement Rising Empires. I have run into a bug that I have not been able to find a solution to. When I play my cards they always get a strange position. How do I control the top and left position of the style when I am playing cards? It likes to put my cards here:

<div class="playercard charactercard" id="cardspotx_1" style="background-position: 450px 210px; top: -52.5px; left: 72.5px;"></div>

At top:-52.5px; left: 72.5px;. It will put the cards there for all 30 spots on the gameboard. As soon as I try to play a card that 'kills' another card. Meaning I need to clear out the old card and play another card in it's spot, now it puts the cards right where they are supposed to go without adding that extra offsetting style. So I can't compensate for the weird positioning because when I call the same routine later in the game it stops doing it.

<div class="playercard charactercard" id="cardspotx_1" style="background-position: 450px 210px;"></div>

Nowhere in my code have I told the cards to have the strange positioning. In fact specifying the top and left positions in the playercard or charactercard class or specifying them in the Javascript template are all ignored and it just puts it where it wants. I need a way to control this so my positioning is always consistent.

I really want to see this project to completion so any ideas you may have on how to do this would be very appreciated.

Thanks,
Brett

var jstpl_player_card = '<div class="playercard charactercard" id="cardspotx_${cardSpot}" style="background-position:${x}px ${y}px"></div>';
</script>

playCardsFromHand: function(player_id, card_graphic_x, card_graphic_y, empire, position, player_color_letter, counter)
{
console.log("PlayCard");
dojo.place(this.format_block('jstpl_player_card', {
cardSpot : counter,
x : this.redcardwidth* card_graphic_x,
y : this.redcardheight * card_graphic_y}),
'playertable_' + empire + '_' + position + '_' + player_color_letter);
this.placeOnObject('cardspotx_' + counter, 'overall_player_board_' + player_id);

this.slideToObject('cardspotx_' + counter, 'playertable_' + empire + '_' + position + '_' + player_color_letter).play();

},

using some of the built in animation functions like sildeToObject will add those inline left and top styles.

You can use sildeToObjectPos() to specify x and y.
You can also use dojo.setStyle to change a style attribute.

alternatively would the BGA stock item work for you?

Thanks so much for your response.
The sildeToObjectPos() is precisely what I want to do. I found it in the documentation and it reads as follows:

" this.slideToObjectPos( mobile_obj, target_obj, target_x, target_y, duration, delay )
This method does exactly the same as "slideToObject", except than you can specify some (x,y) coordinates. This way, "mobile_obj" will slide to the specified x,y position relatively to "target_obj".
Example: slide a token to some place on the board, 10 pixels to the bottom:
this.slideToObjectPos( "some_token", "some_place_on_board", 0, 10 ).play(); "

This would be great.! I tried it couldn't seem to get it to work.
My working code: this.slideToObject(tableposition, 'playertable_' + empire + '_' + position + '_' + player_color_letter).play();
New code: this.sildeToObjectPos(tableposition, 'playertable_' + empire + '_' + position + '_' + player_color_letter, 0, 10).play()

I just get the error: Javascript error:
During pageload
this.sildeToObjectPos is not a function
TypeError: this.sildeToObjectPos is not a function

So it looks like the easy solution isn't going to work for some reason. I could deal with it if SlideToObject always added the same inline Top and Left styles, but when I start deleting cards and replaying new cards on the same spot, it stops adding them the inline styles and now the cards are not in the same spot. I have been experimenting with the dojo.style and am wondering if it might be too late once the card is on the screen.
I will keep playing with it.
Thank you,
Brett

slideToObjectPos should definitely work, I would persist with this, but I don't understand the error message either. I'm guessing it's a syntax error you've made. (On your line of code, you don't have a terminating ';')

I think you forgot the "delay" argument of the function.

the duration and delay are optional, but yeah, it can't hurt to add them.

It looks like you have a typo: instead of

Thanks to RicardoRix for pointing that function out to me and thanks to mandrel for finding my typo. I guess I am a little bit spoiled with Visual Studio who shows you your typos, I need to be more careful about that. I am grateful beyond words. Thank you.!