JSFiddle - React, Tailwind, and code Playground

by Alvaro Silvino

HTML

<html>
  <body>
    <p>TEST HERE:</p> <br>
    <canvas id="fire_canvas">
    </canvas>
    <input value="minus fire" type="button" id="minus_fire" >
    <input value="more fire" type="button"  id="more_fire">
    
    
    <br/>
    <div id="debug">
    </div>
  </body>
  
</html>

CSS

body {
        background-color: #20262e;
        color: white;
  }

JavaScript

$(document).ready(function() {

const fire_canvas = document.getElementById('fire_canvas');
const debug = document.getElementById('debug');
const width = 400;
const heigh = 100;
const context = fire_canvas.getContext('2d');
const image = context.createImageData(width, heigh);
const fireColorsPalette = [{"r":7,"g":7,"b":7},{"r":31,"g":7,"b":7},{"r":47,"g":15,"b":7},{"r":71,"g":15,"b":7},{"r":87,"g":23,"b":7},{"r":103,"g":31,"b":7},{"r":119,"g":31,"b":7},{"r":143,"g":39,"b":7},{"r":159,"g":47,"b":7},{"r":175,"g":63,"b":7},{"r":191,"g":71,"b":7},{"r":199,"g":71,"b":7},{"r":223,"g":79,"b":7},{"r":223,"g":87,"b":7},{"r":223,"g":87,"b":7},{"r":215,"g":95,"b":7},{"r":215,"g":95,"b":7},{"r":215,"g":103,"b":15},{"r":207,"g":111,"b":15},{"r":207,"g":119,"b":15},{"r":207,"g":127,"b":15},{"r":207,"g":135,"b":23},{"r":199,"g":135,"b":23},{"r":199,"g":143,"b":23},{"r":199,"g":151,"b":31},{"r":191,"g":159,"b":31},{"r":191,"g":159,"b":31},{"r":191,"g":167,"b":39},{"r":191,"g":167,"b":39},{"r":191,"g":175,"b":47},{"r":183,"g":175,"b":47},{"r":183,"g":183,"b":47},{"r":183,"g":183,"b":55},{"r":207,"g":207,"b":111},{"r":223,"g":223,"b":159},{"r":239,"g":239,"b":199},{"r":255,"g":255,"b":255}]
let data_structure = [];
let fire_power = 1;

function start_data(fire){


  for(i = 0 ; i < heigh*width ;i++){

    if (i > (heigh*width - width)  ){
      color = fireColorsPalette[fireColorsPalette.length- fire_power]
      data_structure.push(fireColorsPalette.length - fire_power)
    }else{
      color = fireColorsPalette[0]
      data_structure.push(0)
    }
    image.data[i*4 + 0] = color.r
    image.data[i*4 + 1] = color.g
    image.data[i*4 + 2] = color.b
    image.data[i*4 + 3] = 255 
  }
}

function start() {
	start_data(1)
  setInterval(calclateFireRender, 50)

}

function minus_fire(){
	if (fire_power>0){
		fire_power = fire_power - 1;
  }
  start();
}

function more_fire(){
	if (fire_power<35){
		fire_power =  fire_power + 1;
  }
  start();
}


function...