JSFiddle - React, Tailwind, and code Playground

by Mr Pingouin

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF8">
</head>
<body>

<canvas id="myCanvas" width="128" height="128"></canvas>

<input type="file" id="imgInput" accept="image/png, image/jpeg" />
<input type="button" onClick="toSetblock();" value="to setblocks"/>
<div>
<div>
    Axis :
    <label><input type="radio" name="axis" id="axy" checked>X/Y</label>
    <label><input type="radio" name="axis" id="ayz">Y/Z</label>
    <label><input type="radio" name="axis" id="axz">X/Z</label>
</div>
<div>
    <label>Flip axis 1: <input type="checkbox" id="flipaxis1"></label>
    <label>Flip axis 2: <input type="checkbox" id="flipaxis2"></label>
    <label>Swap axis : <input type="checkbox" id="swapaxis"></label>
</div>
<div>
    Offset :<br>
    <label>Axis1 offset :<input type="text" id="offsetX" value="0"></label><br>
    <label>Axis2 osfset :<input type="text" id="offsetY" value="0"></label>
</div>
<label>Background :<input type="text" id="bgblock" value="NONE"></label>

<textarea id="inarea" rows="4" cols="50">Paste data here</textarea>
<label>Flip 1 : <input type="checkbox" id="flip1" value="flip1" checked></label>
<label>Flip 2 : <input type="checkbox" id="flip2" value="flip2" checked></label>
<label>Swap : <input type="checkbox" id="swap" value="swap" checked></label>
<div>
<input type="button" onClick="generate(true);" value="Animate"/>
<input type="button" onClick="generate(false);" value="Generate"/>
<input type="button" onClick="STOP_ANIME = true;" value="Stop Animation"/>


</body>
</html>

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var imgInput = document.getElementById("imgInput");

ctx.fillStyle = "#0000FF";
ctx.fillRect(0,0,150,75);

var blockMapping = {
  "white_stained_glass":"#FFFFFF",
  "black_concrete":"#000000",
  "yellow_stained_glass":"#FFFF00",
  "diamond_block":"#FF00FF",
  "blue_stained_glass":"#0000FF",
  "lime_concrete":"#00FF00"
};

var colorMapping = {
  "#FFFFFF":"white_stained_glass",
  "#000000":"black_concrete",
  "#FFFF00":"yellow_stained_glass",
  "#00B509":"diamond_block",
  "#0000FF":"blue_stained_glass",
  "#7CEBFF":"lime_concrete"
};


function parseEntry(str){
  if(str == "~"){
    return 0;
  }
  return parseInt(str.slice(1));
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function loadImage(){
  var img = new Image();
  img.onload = function(e){
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img,0,0);
  }
  var reader = new FileReader();
  reader.onload = function(evt){
    if( evt.target.readyState == FileReader.DONE) {
      img.src = evt.target.result;
    }
  } 
  reader.readAsDataURL(imgInput.files[0]);

}
imgInput.onchange = function(){loadImage();};

function rgbToHex(r, g, b) {
  if (r > 255 || g > 255 || b > 255)
    throw "Invalid color component";
  return ((r << 16) | (g << 8) | b).toString(16);
}

function hexColor(color){
  return "#" + ("000000" + rgbToHex(color[0], color[1], color[2])).slice(-6);
}

function buildFill(x1,y1,z1,x2,y2,z2, block){
  var r = "fill ~" + x1 + " ~" + y1 + " ~"+ z1 + " ~" + x2 + " ~" + y2 + " ~"+ z2 + " " + block;
  return r.split("~0").join("~");
}

function buildSetblock(x,y,z, block){
  var r = "setblock ~" + x + " ~" + y + " ~"+ z + " " + block;
  return r.split("~0").join("~");
}


function toSetblock(){
  var CW = canvas.width;
  var CH = canvas.height;

  var axy = document.getElementById("axy").checked;
  var ayz = document.getElementById("ayz").checked;
 ...