Wait for animations to complete

[Alex_tgiu]

I already asked generally about animations, here's a more specific problem:

I chained several animations and it takes them several seconds to be carried out, but the state already changed to the next player even though he won't see the final situation yet.
Plus, I see the following log in the browser console, which fits to the fact that I don't see all animations:

Code: Select all

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). 

(Or is it the fact that I use the slideToObject function for the animations, which I put in a chain and play after having created all?)


So how do I carry out all animations in specific order and only after that continue with the game UI? (Like for example done in "Colt Express" where I see several things happen before anyone can act again.)

[RicardoRix]

Yes, I get that error message a lot as well, I assumed it was down to slideTo animations on the page setup, I've always ignored them.

General comments:

You can chain animations with:
dojo.fx.chain();
there is also dojo.fx.combine();

You have the ability to make a delay after a notification with:
this.notifqueue.setSynchronous( 'handHeadReveal', 2000 );

I think I've always gone back on this idea, but you can add a callback to the end of the animation by dojo connecting onto the 'onEnd' event of an animation.

Maybe you need to post back to the server to let the game continue to the next phase?, although that doesn't sound quite right. In my current game I've created a whole multiplayer game state to show a score card, and only let the game continue to the next step when everyone has acknowledged it. This way even on turn-based games every player will be able to see the scoring phase - generally this is a perennial problem with quite a few games.
I will pass the data through the state 'args' function, and play a series of animations, then I'm going to use this client side dialog box, because the php score card idea just doesn't work here:
http://en.doc.boardgamearena.com/Game_i ... js#Dialogs

[Alex_tgiu]

Ok, thanks for the hints so far.

I tried to compare this to the reversi tutorial, because there the player only changes after the putting and blinking of the game elements - but I must be blind, I just don't see how this is done.

I thought, I made it the same way:
JS: OnClik on my field
=> JS: callback to action method name
=> PHP: action function calls game method
=> PHP: game function does model updates in db, notifies about move, changes game state to next player
=> JS: notify function chains animations and does play
=> PHP: next player state

What exactly causes the reversi game to wait for switching to other player only after animations are done?

[RicardoRix]

What exactly causes the reversi game to wait for switching to other player only after animations are done?

You can get access to other people projects very easily and look at them.

Pure guess, but can you get that effect by just adding a delay to the notification (php - notification plus a change game state)? otherwise that sounds like a postback on the onEnd, I can't see how else you can get that effect.

[Tisaac]

Set synchronous is the key of timing and will take care of everything

[Alex_tgiu]

@Tisaac, @RicardoRix: Oh man, as I asumed, I am blind - yes, it is exactly that I forgot to put the line about synchronous notif in there - thanks!

And after RTFM, I discovered on how to wait until the animation is finished:
this.notifqueue.setSynchronousDuration(anim.duration);