JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="stage-graphic-container"></div>
<button class="back">&lt;&lt;&lt;</button>
<button class="next">&gt;&gt;&gt;</button>

CSS

button {
    padding: 15px 30px;
}

.stage-graphic-container {
    width: 100%;
    position: relative;
}

.title-container, .subtext-container {
    width: 100%;
    display: flex;
}

.title {
    flex: 1 1 auto;
    width: 1px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}

.subtext {
    flex: 1 1 auto;
    width: 1px;
    text-align: center;
    font-weight: normal;
    font-size: 14px;
}

JavaScript

var StateTransition = function (element, spec) {
    this.element = element;
    this.spec = spec;

    this.setSize(spec);
    this.calculateMeasures(spec);
    
    this.createLabels(spec);
    this.createCanvas(spec);
    this.update(spec);
    
    this.render = this.render.bind(this);
    requestAnimationFrame(this.render);
};

StateTransition.prototype.setSize = function (spec) {
    if (spec.fitToParentWidth) {
        spec.width = this.element.parentElement.clientWidth;
        
        var self = this;
        window.addEventListener('resize', function (event) {
            self.spec.width = self.element.parentElement.clientWidth;
            self.canvas.setAttribute('width', self.spec.width);
            self.calculateMeasures(self.spec);
            
            requestAnimationFrame(self.render);
        });
    }
};

StateTransition.prototype.createLabels = function (spec) {
    // titles
    var titleContainer = document.createElement('div');
    titleContainer.classList.add('title-container');
    for (var i = 0; i < this.spec.states.length; i++) {
        var span = document.createElement('span');
        span.classList.add('title');
        span.innerHTML = this.spec.states[i].title || '';
        titleContainer.appendChild(span);
    }
    
    this.element.appendChild(titleContainer);
    
    // subtext
    var subtextContainer = document.createElement('div');
    subtextContainer.classList.add('subtext-container');
    for (var i = 0; i < this.spec.states.length; i++) {
        var span = document.createElement('span');
        span.classList.add('subtext');
        span.innerHTML = this.spec.states[i].subtext || '';
        subtextContainer.appendChild(span);
    }     
    
    this.element.appendChild(subtextContainer);
};

StateTransition.prototype.createCanvas = function (spec) {
    this.canvas = document.createElement('canvas');
    this.canvas.setAttribute('width', spec.width);
    this.canvas.setAttribute('height', spec.height);
   ...