LooseMachineJS/demo_basic.html at master · rmruano/LooseMachineJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>LooseMachine Basic demo</title>
    <script src="LooseMachine.js"></script>
</head>
<body>
<h3>LooseMachine basic demo</h3>
<p>
    <input type="button" id="test" value="BEGIN"/>
</p>
<p>
    Open the dev tools to see the console debug output.
</p>
<script>
    var runBasicExample,
        actionDirector = (new LooseMachine.Director()).enableDebug(),
        myAction = (new LooseMachine.Action("test", {defaultState:"state1"}))
            .setDirector(actionDirector) // Notifies it enter/leave events on both Actions & ActionStates
            .onEnter(function(action) {
                console.log("Action onEnter:  "+action.getId());
            }).onLeave(function(action) {
                console.log("Action onLeave:  "+action.getId());
            }).addState( (new LooseMachine.ActionState("state1"))
                    .onEnter(function(actionState) {
                        console.log("ActionState onEnter:  "+actionState.getAction().getId()+"/"+actionState.getId());
                        alert(actionState.getAction().getId()+"/"+actionState.getId());
                        // Synchronous advance to next state
                        actionState.getAction().getState("state2").enter();
                    })
                    .onLeave(function(actionState) {
                        console.log("ActionState onLeave:  "+actionState.getAction().getId()+"/"+actionState.getId());
                    })
            ).addState( (new LooseMachine.ActionState("state2"))
                    .onEnter(function(actionState) {
                        console.log("ActionState onEnter:  "+actionState.getAction().getId()+"/"+actionState.getId());
                        alert(actionState.getAction().getId()+"/"+actionState.getId());
                        // Asynchronous behaviour is also supported, just don't forget to check if the current state
                        // is active. This could represent an user triggering a button on the UI after 1 second
                        setTimeout(function() {
                           if (actionState.isActive()) {
                                actionState.getAction().getState("state3").enter();
                           }
                        }, 1000);
                    })
                    .onLeave(function(actionState) {
                        console.log("ActionState onLeave:  "+actionState.getAction().getId()+"/"+actionState.getId());
                    })
            ).addState( (new LooseMachine.ActionState("state3"))
                    .onEnter(function(actionState) {
                        console.log("ActionState onEnter:  "+actionState.getAction().getId()+"/"+actionState.getId());
                        alert(actionState.getAction().getId()+"/"+actionState.getId()+": ### COMPLETED! ###");
                        actionState.getAction().leave(); // Leave the action, it will be automatically reseted
                    })
                    .onLeave(function(actionState) {
                        console.log("ActionState onLeave:  "+actionState.getAction().getId()+"/"+actionState.getId());
                    })
            );

    // TEST
    document.getElementById("test").addEventListener("click", function() {
        myAction.enter();
    });
</script>

</body>
</html>