JSFiddle - React, Tailwind, and code Playground

by dashed

HTML

<div id="output"></div>
<button id="rotate" type="button">Rotate</button>
<button id="switch" type="button">Switch Block</button>

CSS

#output {
    overflow: hidden;
}
#output div {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    background: #f00;
    margin: 1px;
}
#output div.cell {
    background: #0f0;
}
/*
#output div:nth-child(4n+5) {
    clear:left;
}*/

.clear_left {
    clear:left;
}

button {
    clear: left;
    margin: 10px;
}

JavaScript

//http://harddrop.com/wiki/Spawn_Location
//console.log(0x0F00.toString(2).length);

var i = {
    blocks: [0x0F00, 0x2222, 0x00F0, 0x4444],
    color: 'cyan'
};
var j = {
    blocks: [0x8E00, 0x6440, 0x0E20, 0x44C0],
    color: 'blue'
};
var l = {
    blocks: [0x2E00, 0x4460, 0x0E80, 0xC440],
    color: 'orange'
};
var o = {
    blocks: [0x6600, 0x6600, 0x6600, 0x6600],
    color: 'yellow'
};
var s = {
    blocks: [0x6C00, 0x4620, 0x06C0, 0x8c40],
    color: 'green'
};
var t = {
    blocks: [0x4E00, 0x4640, 0x0E40, 0x4C40],
    color: 'purple'
};
var z = {
    blocks: [0xC600, 0x2640, 0x0C60, 0x4C80],
    color: 'red'
};
var tetrominoes = [i, j, l, o, s, t, z];


// constructs 2D array of the block (4x4)
var getBlock = function (type, dir) {
    var bit, result, row = 0,
        col = 0,
        piece = type.blocks[dir];

    var block = [];
    block[row] = new Array(4);

    for (bit = 0x8000; bit > 0; bit = bit >> 1) {

        if (piece & bit) {
            block[row][col] = 1;
        } else {
            block[row][col] = 0;
        }

        // cycle col between 0 to 3
        // if col is 0 then increment row
        // if row leq than 3 then create new row
        if ((col = ++col % 4) === 0 && ++row <= 3) {
            
            block[row] = new Array(4);
            
        }
    }
    return block;
};




var draw = function (block) {

    var x, y, cell, output = $('#output');

    // Remove all children
    output.empty();

    // Draw new cells.
    for (y = 0; y < block.length; y++) {
        for (x = 0; x < block[y].length; x++) {
            cell = $('<div>');
            if(block[y][x]) {
                cell.addClass("cell");
            }
            cell.appendTo(output);
        }
    }
$('#output div:nth-child(4n+5)').addClass('clear_left');
};



var rotation = 0;
var tetrominoes_id = 0;
var block_type = tetrominoes[tetrominoes_id];

var block = getBlock(block_type, 0);
draw(block);



$("#rotate").click(function() {
    rotation =...