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 {
    margin:0 -10px;
}

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}
  ]
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.addTarget = function(target){
    if(this.parentLaser) this.parentLaser.addTarget(target)
    else this.targets.push(target)
}

Laser.prototype.setMaxHits = function(hits){
    this.maxHits = Math.max(this.maxHits, hits);
    if(this.parentLaser) this.parentLaser.setMaxHits(hits);
}
Laser.prototype.channel = function(min, max){
    // return a beam, a subsection of the laser, id stays the same
    var beam = new Laser({
        id: this.id,
        min: Math.min(this.min, min),
        max: Math.min(this.max, max),
        parentLaser: this
    })
    
    beam.currentHits = this.currentHits
    beam.setMaxHits (this.currentHits)
    return beam
}
Laser.prototype.reflect = function(max){
    var beam = new Laser({
        id: this.id,
        min: this.max,
        max: max,
        parentLaser: this
    })

    beam.setMaxHits (this.currentHits)
    beam.currentHits = 0    
    return beam
}

Laser.prototype.hit = function(element, elements){
    if (!element || !element.collides(this.min, this.max)) return
    var hits = element.hits || (element.hits = [])
    if (hits.indexOf(this.id) != -1) return
    this.addTarget(element)
    hits.push(this.id)
   ...