JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<div id=container></div>

CSS

#container {
    position: relative;
    width: 620px;
    height: 720px;
    outline:3px #ececec dashed;
    padding:0 10px;
}
#container div {
    outline:1px solid blue;
}

JavaScript

var test = [{
    start: 0,
    end: 100
}, {
    start: 0,
    end: 50
}, {
    start: 0,
    end: 50
}, {
    start: 50,
    end: 100
}]
test = [{
    start: 30,
    end: 150
}, {
    start: 540,
    end: 600
}, {
    start: 560,
    end: 620
}, {
    start: 610,
    end: 670
}]
test = [{
    id: 1,
    start: 0,
    end: 45
}, {
    id: 2,
    start: 90,
    end: 180
}, {
    id: 3,
    start: 15,
    end: 180
}, {
    id: 4,
    start: 400,
    end: 700
}, {
    id: 5,
    start: 600,
    end: 720
}]
test = [{
    id: 1,
    start: 0,
    end: 60
}, {
    id: 5,
    start: 15,
    end: 100
}, {
    id: 4,
    start: 30,
    end: 170
}, {
    id: 2,
    start: 70,
    end: 130
}, {
    id: 6,
    start: 110,
    end: 160
}, {
    id: 3,
    start: 140,
    end: 200
}, {
    id: 7,
    start: 600,
    end: 700
}]
test = [{
    start: 0,
    end: 70
}, {
    start: 30,
    end: 70
}, {
    start: 30,
    end: 70
}, {
    start: 50,
    end: 100
}, {
    start: 70,
    end: 120
}, {
    start: 70,
    end: 120
}, {
    start: 70,
    end: 120
}, {
    start: 70,
    end: 120
}]

test = (function () {
    var toReturn = [];
    for (var i = 100; i--;) {
        var start = ~~ (Math.random() * 600),
            end = start + ~~ (Math.random() * 50 + 50)
            toReturn.push({
                id: i,
                start: start,
                end: end
            });
    }
    return toReturn;
})();

console.log('test is ', test)

function Blah(x, index) {
    this.start = x.start
    this.end = x.end
    this.index = index
}

Blah.prototype.collides = function (min, max) {
    var start = this.start,
        end = this.end
        //reverse logic is simpler and better
    if (max <= start) return false
    if (min >= end) return false
    return true
}
Blah.prototype.collidesWithBlah = function (blah) {
    return this.collides(blah.start, blah.end)
}

//todo: map first so to copy
var x = test.sort(function (a, b) {
    if (a.start < b.start) return -1
   ...