5NDN FSM
A Flexible Finite State Machine for Javascript.
Installation
npm install 5ndn-fsm
Basic Usage
Create an instance
var stateMachine = this;
Create some states
var RedState = ;var BlueState = ;
Add them to the Manager
//pass true to initializestateManager;stateManager;
Change States
stateManager;
Real Usage
You'll usually want to extend the State class. The real magic happens inside of the methods you can override.
CREATING OUR STATES
Create your class and extend State
; extend State { super; } { return "Red State"; } { // This is where your animation happen // When they're done! Don't forget to call the super method super; } { // Use the context to change anything you need thiscontextcolor = "red" // This is called right after doIntro is completed } { // This is more animations happen // Again, do forget to call the super method super; }
The getter "KEY" is there for is you want to pass only the State Class into the addState method. It's important to always call tho super methods to let the manager know where you're at. If you forget, the manager we'll let you know. The action method is the only one that doesn't have anything to call.
; extend State { super; } { return 'Blue State'; } { // This is where your animation happen // When they're done! Don't forget to call the super method super; } { // This being the blue state thiscontextcolor = "blue"; // This is called right after doIntro is completed } { // This is more animations happen // Again, do forget to call the super method super; }
In both State classes above, we've changed the color in the action methods.
CREATING OUR MANAGER
Since we used the getter method KEY we can just pass the Class functions. ( looks pretty that way )
; { thiscolor = "white"; thisstateManager = this ; thisstateManager; thisstateManager; }
CHANGE STATES AND LISTENING FOR CHANGES
Knowing when your changes are done can be quit powerful. You can listen to this changes via the event emmtter. Thanks Miller Medeiros and Robert Penner https://millermedeiros.github.io/js-signals/
thisstateManageraction;thisstateManagerintroStart;thisstateManageroutroStart;thisstateManagerintroComplete;thisstateManageroutroComplete; thisstateManager;
Set State also returns a Promise ( if you're into that sort of thing ). So you can do something like.
thisstateManager;