JSFiddle - React, Tailwind, and code Playground

by rexable

HTML

<div id="gamearea"></div>
<div id="msg"></div>

CSS

#msg {
    background-color: skyblue;
    width: 480px;
    margin: 0 auto;
}
#gamearea {
    background-color: black;
    width: 480px;
    margin: 0 auto;
    
}
.holder {
    width: 40px;
    height: 40px;
    margin: 10px 0px 10px 0px;
    float: left;
}
.jewel {
    width: 40px;
    height: 40px;
    border-width: 0px;
}
.column {
    width: 40px;
    height: 480px;
    margin: 0px 10px;
    float: left;
}
#gamearea .ui-selecting {
    width: 40px;
    height: 40px;
    border: 3px solid gray;
}
#gamearea .ui-selected {
    border: 3px solid #FF69B4;
}
#gamearea .ui-unselecting{
    width: 40px;
    height: 40px;
    border-width: 0px;
}

JavaScript

//$(function() {

var gamearea = $('#gamearea');
var colors = [ 'blue', 'green', 'yellow', 'skyblue', 'red', 'white', 'purple' ];
for( i = 0 ; i < 8 ; i++ ){
    var col = $('<div class="column"></div>');
    gamearea.append(col);
    for( j = 0 ; j < 8 ; j++ ){
        var r = rand(0,6);
        
        while( !initialCheck(r, {'i':i, 'j':j}) ){
            r = rand(0,6);
        }
        p = $('<div class="holder"></div>').data('position', {'i':i, 'j':j} ).append( makejewel( r ) );
        
        col.append(p);
    }
    
}

gamearea.append('<div style="clear:both;"></div>');

var lastselected = false;
gamearea.selectable({
    filter: '.jewel',
    selected: function(event, ui){
        var s = $(ui.selected);
        if ( lastselected && lastselected.neighbor(s) ) {
            s.exchange(lastselected);
            
            var m = [], match;
            m[0] = connectCheck(s);
            m[1] = connectCheck(lastselected);
            if ( m[0] || m[1] ) {
                grade.resetCombo();
                matchHandle(m);
                                
                $('.ui-selected').removeClass('ui-selected');
                lastselected = false;
                return;
            } else {
                s.exchange(lastselected);
            }
            
        }
        $('.ui-selected').not(ui.selected).removeClass('ui-selected');
        lastselected = s;
    },
    unselected: function(event, ui) {
        if ( $('.ui-selecting').size() == 0)
            lastselected = false;
    }
});


//});
var grade = { 
    point:0, 
    earn:0,
    combo:0,
    maxcombo:0,
    addPoint: function( block ) {
        var p = block.size();
        var level;
        
        level = p > 3 ? 2 : 1;
        this.earn = p * Math.pow(2, this.combo-1) * level;
        this.point = this.point + this.earn;
        return this;
    },
    plusCombo: function() {
        this.combo++;
        if ( this.combo > this.maxcombo ) {
            this.maxcombo =...