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
}]


    function Laser(options) {
        //this.id = options.id
        this.min = options.min
        this.max = options.max
        this.currentHits = 0
        this.maxHits = 0
        this.parentLaser = options.parentLaser
        this.targets = []
    }

Laser.prototype.getParent = function () {
    if (this.parentLaser) return this.parentLaser.getParent()
    return this
}

Laser.prototype.addTarget = function (target) {
    target.position = this.getCurrent()
    this.getParent().targets.push(target)
}
Laser.prototype.resetCurrent = function () {
    this.getParent().currentHits = 0
}
Laser.prototype.incrementCurrent = function () {
    this.getParent().currentHits++
}
Laser.prototype.getCurrent = function () {
    return this.getParent().currentHits
}
Laser.prototype.setCurrentHits = function (current) {
    this.currentHits = current
}
Laser.prototype.setMaxHits = function (hits)...