Board Game Arena

Hi,

I'm developing my first board game here, which has a board of several fields per player holding different number of stones, which can then be moved around the fields following certain rules.
I have modeled the field and it gets layed out correctly, so that each field is a div with a defined id holding several stone divs with defined ids as children.
I have created all backend code and the frontend part for selecting a field for the move. The model gets updated correctly after issueing the move and after pressing F5, the situation is again correct.

But now I am struggeling with the animations. The move triggered several actions on the field, placing several stones in new fields. This is, what the player should now see by animating the stones, so that they move to the new fields. I came up with an array of commands and field numbers, so that the frontend has all the information to do the moving around (e.g. "take_1" for starting on field 1, "move_3" for moving from current field to field 3).
By knowing the field to start and end, I thought I should pick one of the stones left on that field form the field dom node's children list (can be any stone, there's no individual difference) by taking the 1st child. Then I could slide this to the destination field id. And finally I could move this node to the new parent (so that in html it is a child element of the new field the same way a page refresh would place it).

Only, it doesn't work as planned. I tried with Dojo directly, I tried with using the BGA functions, but I struggle with the correct way. And additionally I wasn't able to execute the animations when processing the move commands one after another and let the player see every animation in order and let him wait until everything is finished.

So, hopefully, I described enough that someone could lead me in the right direction on how to process such command lists in the frontend to play all the animations in order plus placing all the div elements correctly and in the same way as a refreshed page would do.
Or alternatively, tell me if something in my considerations is wrong.

Thanks, Alex

Hi Alex

There are different approaches that you could use, but based on what you've said, I'd be tempted to set up the different locations as Stock components (http://en.doc.boardgamearena.com/Stock). There are instructions at the bottom of that page as to how to animate items moving from one to another (you'll want situation B).

Hope that helps!
A.

Ok, thanks, I'll give it a try. I did stumble upon it, but thought this was especially done for card games.