JSFiddle - React, Tailwind, and code Playground

by aaron_senecal

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
body {
    background: #333;
    display: webkit-flex;
    -webkit-flex-direction: column;
}
#workspace {
    -webkit-flex: auto;
    border: 1px solid #999;
    position: relative;
    max-width: 75%;
    margin: auto;
}
#workspace:after {
    content: '';
    padding-top: 100%;
    display: block;
}
.pattern {
    position: absolute;
    top: 5px;
    bottom: 0px;
    left: 5px;
    right: 0px;
    display: -webkit-flex;
    -webkit-flex-direction: row;
}

.column {
    display: -webkit-flex;
    -webkit-flex: auto;
    -webkit-flex-direction: column;
}
.node {
    display: -webkit-flex;
    -webkit-flex: auto;
    background: #999;
    margin: 0 5px 5px 0;
    border-radius: 2px;
}

JavaScript

var SIXTEEN = {
    info: {
        title: 'Test Song',
        author: 'Aaron'
    },
    control: {
        volume: 1,
        tempo: 140   
    },
    sequence: {
        state: [
        ],
        add: function() {
           if (!SIXTEEN.audio.source) {
                for (var pat = 0; pat < 1; pat++) {
                    (function(pat) {
                        SIXTEEN.sequence.state.push([]);
                        var patdiv = document.createElement('div');
                        patdiv.classList.add('pattern');
                        document.getElementById('workspace').appendChild(patdiv);
                        for (var col = 0; col < 16; col++) {
                            (function(col){
                                SIXTEEN.sequence.state[pat].push([]);
                                var coldiv = document.createElement('div');
                                coldiv.classList.add('column');
                                patdiv.appendChild(coldiv);
                                for (var row = 0; row < 8; row++) {
                                    (function(row) {
                                        var node = document.createElement('div');
                                        node.dataset.pat = pat;
                                        node.dataset.col = col;
                                        node.dataset.row = row;
                                        node.classList.add('node');
                                        coldiv.appendChild(node);
                                        SIXTEEN.sequence.state[pat][col].push({node: node, on: false, volume: 1});
                                    })(row);
                                }
                            })(col);
                        }
                    })(pat);
                }
            }    
            console.log(SIXTEEN);
        },
        remove: function(pat) {
            
        },
        move: function(pat) {
            
        }
   ...