JSFiddle - React, Tailwind, and code Playground

by FloHimself

HTML

<script src="http://rawgithub.com/fschaefer/Stately.js/master/Stately.js"></script>
<!--
adapted shamelessly from http://codeincomplete.com/posts/2011/8/19/javascript_state_machine_v2/example/
-->

<div id="demo">
    <div id="diagram" class="start"></div>
    <textarea id="output"></textarea>
</div>

<img src="https://raw.githubusercontent.com/fschaefer/Stately.js/master/misc/Stately.js-start.png" class="preload">
<img src="https://raw.githubusercontent.com/fschaefer/Stately.js/master/misc/Stately.js-S1-0.png" class="preload">
<img src="https://raw.githubusercontent.com/fschaefer/Stately.js/master/misc/Stately.js-S1-1.png" class="preload">
<img src="https://raw.githubusercontent.com/fschaefer/Stately.js/master/misc/Stately.js-S2-0.png" class="preload">
<img src="https://raw.githubusercontent.com/fschaefer/Stately.js/master/misc/Stately.js-S2-1.png" class="preload">

CSS

#demo {
    text-align: center;
}

#start {
    margin-top: 20px;
    margin-left: 50px;
}

#diagram {
    width: 339px;
    height: 205px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

#output {
    margin-left: 50px;
    margin-top: 20px;
    height: 100px;
    width: 200px;
}

.start {
    background: url(https://raw.githubusercontent.com/fschaefer/Stately.js/master/misc/Stately.js-start.png);
}

.S1-0 {
    background: url(https://raw.githubusercontent.com/fschaefer/Stately.js/master/misc/Stately.js-S1-0.png);
}

.S1-1 {
    background: url(https://raw.githubusercontent.com/fschaefer/Stately.js/master/misc/Stately.js-S1-1.png);
}

.S2-0 {
    background: url(https://raw.githubusercontent.com/fschaefer/Stately.js/master/misc/Stately.js-S2-0.png);
}

.S2-1 {
    background: url(https://raw.githubusercontent.com/fschaefer/Stately.js/master/misc/Stately.js-S2-1.png);
}

.preload {
    position: absolute;
    left: -1000px;
    height: 1px;
}

JavaScript

var diagram = document.getElementById('diagram'),
    output = document.getElementById('output'),
    count = 0,
    log = function() {
        var message = Array.prototype.slice.apply(arguments);
        output.value = count++ + ': ' + message.join(', ') + '\n' + output.value;
    },
    onEnterState = function(event, oldState, newState) {
    		var className = newState + '-' + event;
    		log(event, oldState, newState);
    		diagram.className = className;
		}

var fsm = Stately.machine({
    'S1': {
        'onEnter': onEnterState,
        '0': 'S2',
        '1': 'S1'
    },
    'S2': {
        'onEnter': onEnterState,
        '0': 'S1',
        '1': 'S0'
    }
});

setTimeout(function loopsyloop() {
    fsm[Math.floor(Math.random() * 2)]();
    setTimeout(loopsyloop, 1000);
}, 3000);