# How to handle global state automata ?
What is a [state automata](http://en.wikipedia.org/wiki/Finite-state_machine) ?
They are essential for managing high game states.
## Examples
Sometime examples are so much faster to understand than a long description.
* examples of state automata:
* you enter in menu
* you have to stop the game itself, the user controls, possibly other animations
* another examples:
* you die
* you have to stop the game
* you have to play the death cinematic
* then you have to trigger a player spawn
## Tools
* [gowiththeflow.js](https://github.com/jeromeetienne/gowiththeflow.js)
to handle timed steps in the cinematic
* Dom events at the document level.
It provides a global event channel,
you can use it to get communication between the various parts of your game.
## Global Event Channel
* global custom events at the document level
How to listen to it.
```
document.addEventListener('BadTVJamming', function(){
badTVJamming.trigger()
})
```
How to emit on it.
```
document.dispatchEvent(new CustomEvent('BadTVJamming'));
```
## Examples Code
### Examples 1
The steps of this cinematic are:
* make Osd appears
* Wait 0.8 seconds
* make osd disapears, and go to the menu page
```
document.addEventListener('gameLost', function(){
Flow().seq(function(next){
// Make Osd appears
document.querySelector('#gameLostOsd').style.display = 'block'
next()
}).seq(function(next){
// Wait 0.8 seconds
setTimeout(function(){
next()
}, 1000*0.8)
}).seq(function(next){
// make osd disapears
document.querySelector('#gameLostOsd').style.display = 'none';
// go to the menu page
location.href = '..'
})
})
```
### Examples 2
The steps of this cinematic are:
* disable playerControls
* if there is no more level, swith to 'gameCompleted'
* **good examples of state switching**
* then the sequence... Make osd appears
* stop physics and wait 2seconds
* make osd disapears, and reenable player controls
```
document.addEventListener('gameWon', function(){
// disable playerControls
playerControls.disable = true
// if there is no more level, swith to 'gameCompleted'
if( getNextMapId() === undefined ){
document.dispatchEvent(new CustomEvent('gameCompleted'));
return;
}
Flow().seq(function(next){
// make osd appears
document.querySelector('#gameWonOsd').style.display = 'block'
next()
}).seq(function(next){
// stop physics
physicsWorld.stop()
// wait 2 seconds
setTimeout(function(){
next()
}, 1000*2)
}).seq(function(next){
// make osd disapear
document.querySelector('#gameWonOsd').style.display = 'none';
// reenable player controls
playerControls.disable = false
})
})
```
## States in marbletable2
[marbletable2](http://jeromeetienne.github.io/marbletable2/) automata given here as examples
when the page is loaded, ```gameStart``` is triggered
* on ```gameStart```
* disable usercontrols
* start cinematic
* once cinematic ended, trigger ```spawnPlayer```
* on ```spawnPlayer```
* disable user controls
* set player position
* make noise for this event
* start physics if needed
* then let the player play
* on ```killPlayer```
* display osd 'you die'
* play sound for this event
* start cinematic for this event
* if( player.lives === 0 ) dispatch ```gameLost``` and stop there
* wait 0.8 seconds
* stop physics
* wait 0.6 seconds
* remove osd
* update lives counter
* dispatch ```spawnPlayer```
* on ```gameLost```
* display osd dom element
* wait 0.8 seconds
* stop physics
* wait 2.0 seconds
* hide osd dom element
* goto menu page
* on ```gameWon```
* stop user controls
* if there are no next level, dispatch ```gameCompleted``` and stop there
* display osd dom element
* wait 0.8 seconds
* stop physics
* wait 2.0 seconds
* hide osd dom element
* goto next level
* on ```gamecompleted```
* display osd dom element
* wait 2.0 seconds
* hide osd dom element
* goto menu page