JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://rawgit.com/ifandelse/machina.js/master/lib/machina.js"></script>

JavaScript

var WorldCupPlayer = machina.Fsm.extend({
    initialState: "ready",
    states: {
        ready: {
            "talk.smack": function () {
                this.emit("smack.talking");
            },
            play: "playing"
        },
        playing: {
            play: function () {
                this.emit("wat", "I'm already playing!");
            }
        },
        done: {
            _onEnter: function () {
                this.collapseAndSleep();
            }
        }
    },

    play: function () {
        this.handle("play");
    },

    talkSmackToOpponents: function () {
        this.emit("smack.talking");
    },

    collapseAndSleep: function () {
        this.emit("time.to.sleep");
    },
    
    stopPlaying: function() {
        this.transition("done");   
    }
});

var TimHoward = WorldCupPlayer.extend({
    saves: 15,
    states: {
        playing: {
            "opponent.goal.attempt": "blocking"
        },
        blocking: {
            _onEnter: function () {
                this.saves += 1;
                if (this.saves >= 16) {
                    this.emit("record.broken", {
                        player: "Tim Howard",
                        msg: "Most saves in World Cup Match"
                    });
                }
                this.transition("playing");
            }
        }
    },
    
    defendGoal: function() {
        this.handle("opponent.goal.attempt");
    }
});

var LuisSuarez = WorldCupPlayer.extend({
    states: {
        playing: {
            "play": function() {
                this.emit("bite.me", {
                    player: "Giorgio Chiellini",
                    bitten: true
                });
            }
        },
        done: {
            _onEnter: function () {
                this.ejectFromStadium();
            }
        }
    },
    
    ejectFromStadium: function() {
        this.emit("apology", {
            msg: "truth is my colleague Giorgio Chiellini suffered the physical result...