JSFiddle - React, Tailwind, and code Playground

by Leo Cavalcante

HTML

<div class="genius">
    <button class="play">play</button>
    <span class="score">0</span>
    <ul class="colors">
        <li class="color red">
            <button></button>
        </li>
        <li class="color green">
            <button></button>
        </li>
        <li class="color blue">
            <button></button>
        </li>
        <li class="color yellow">
            <button></button>
        </li>
    </ul>
</div>

CSS

.genius {
    width: 110px;
}

.genius .color {
    display: inline-block;
}

.genius .color button {
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
}

.genius .color.red button {
    background-color: red;
}

.genius .color.green button {
    background-color: green;
}

.genius .color.blue button {
    background-color: blue;
}

.genius .color.yellow button {
    background-color: yellow;
}

JavaScript

(function ( global, undefined ) {
    'use strict';
    
    var sequence, needle, score,
        root = $( '.genius' ),
        red = {
            elmt: root.find( '.color.red' )
        },
        green = {
            elmt: root.find( '.color.green' )
        },
        blue = {
            elmt: root.find( '.color.blue' )
        },
        yellow = {
            elmt: root.find( '.color.yellow' )
        },
        colors = [red, green, blue, yellow];
    
    red.elmt.data( 'data', red );
    green.elmt.data( 'data', green );
    blue.elmt.data( 'data', blue );
    yellow.elmt.data( 'data', yellow );
    
    function sort () {        
        sequence.push( colors[Math.round( Math.random() * ( colors.length - 1 ) )] );
    }
    
    function play () {
        var color = sequence[needle];        
        root.find( '.color button' ).unbind( 'click' );       
        showUp( color.elmt, move );        
    }
    
    function move () {
        if ( needle === sequence.length - 1 ) {
            needle = 0;
            root.find( '.color button' ).bind( 'click', click );
        } else {
            needle++;
            play();
        }
    }
    
    function click () {        
        var color = $( this ).parent().data( 'data' );
        
        showUp( color.elmt, function () {
            if ( color == sequence[needle] ) {
                if ( needle === sequence.length -1 ) {
                    score += 10;
                    needle = 0;
                    root.find( 'span.score' ).text( score );
                    sort();
                    play();
                } else {
                    needle++;
                }
            } else {
                init();
                root.find( 'span.score' ).text( score );
                root.find( '.color button' ).unbind( 'click' );
            }                
        });
    }
    
    function init () {
        sequence = [];
        needle = 0;
        score = 0;        
    }
    
   ...