JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<section id='landscape'>
    <canvas id='nightscape'></canvas>
    <div class='clear'></div>    
</section>

CSS

#landscape {
     z-index:0;
    background:-moz-linear-gradient(top, #040429, #257eb7);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#040429), color-stop(100%,#257eb7));
 width:100%;
 height:100%;   
  
}
#nightscape {
 width:100%;
 height:100%;   
background:transparent;    
}
.clear {
 clear:both;   
}

JavaScript

/* Firefly */
/* Flyweight pattern. Photuris is the flyweight object w/x,y property
 * and "is flashing" boolean
 * Firefly is the container */

var Photuris = function(x, y) {
    this.df = false;
    this.dx = x;
    this.dy = y;
    return this;
};

Photuris.prototype.sx = function(x) {
    this.dx = x;
    return this;
};

Photuris.prototype.gx = function() {
    return this.dx;
};

Photuris.prototype.sy = function(y) {
    this.dy = y;
    return this;
};

Photuris.prototype.gy = function() {
    return this.dy;
}

Photuris.prototype.sf = function(f) {
    this.df = ( !! f) ? true : false;
    return this;
};

Photuris.prototype.gf = function(f) {
    return this.df;
};

Photuris.prototype.x = function(x) {
    return ( !! x) ? this.gx() : this.sx(x);
};

Photuris.prototype.y = function(y) {
    return ( !! y) ? this.gx() : this.sx(y);
};

Photuris.prototype.f = function(f) {
    return ( !! f) ? this.gx() : this.sf(f);
};

var Firefly = function(x, y) {
    this.self = new Photuris(x, y);
};

Firefly.prototype.x = function() {
    return this.self.x();
};

Firefly.prototype.y = function() {
    return this.self.y();
};
    
//duration in ms
Firefly.prototype.move = function(x, y, duration_in_milliseconds, millseconds_per_tick, beeline, callback) {
    console.log('args',x, y, duration_in_milliseconds, millseconds_per_tick, beeline);
    console.log('self',this.self.x(),this.self.y());
    var begin = {
        x: this.self.x(),
        y: this.self.y()
    },
        end = {
            x: x,
            y: y
        },
        that = this,
        duration_in_milliseconds = ( !! duration_in_milliseconds) ? duration_in_milliseconds : 1000,
        x_per_millisecond = (end.x - begin.x),
        y_per_millisecond = (end.y - begin.y),
        x_per_tick = Math.floor(x_per_millisecond / millseconds_per_tick),
        y_per_tick = Math.floor(y_per_millisecond / millseconds_per_tick),
        callback = function() {

            var cx = that.self.x(),
          ...