Command Generator

It generate commands!

by Mr Pingouin

HTML

<body>
  <div>
    <div id="content"></div>
    <div id="utilContent">
      <div id="scriptRunner">
        <div class="script-header">Script js</div>
        <div class="script-area-content">
          <textarea id="script-area" rows="10" cols="60"></textarea>
        </div>
        <div>
          <textarea id="script-area-out" rows="5" cols="60"></textarea>
        </div>
        <div class="script-header">Output</div>
        <div id="scriptOption" class="parsable-option">
          <label class="block">Reduced Math
            <input var-name="reducedMath" class="cmd-option" type="checkbox" checked>
          </label>
          <input type="button" class="block modif-script-run" onclick="evaluateScript(this)" value="Run">
        </div>
      </div>
      <br>
      <br>
    </div>
  </div>
  <div id="elmentAdder">
    <input type="button" onclick="appendTextArea('init')" value="Add Init commands">
    <input type="button" onclick="appendTextArea('clock')" value="Add Clock">
    <input type="button" onclick="appendTextArea('impulse')" value="Add Impulse commands">
    <input type="button" onclick="appendTextArea('sequence')" value="Add Sequence commands">
  </div>

  <div id="generalOptions" class="parsable-option">
    <label>
      Propagation direction :
      <select id="propagation" var-name="propagationDirection" class="cmd-option">
        <option value="X/Y" selected>X/Y</option>
        <option value="X/Z">X/Z</option>
      </select>
    </label>
    <label class="block">Max propagation :
      <input type="text" var-name="maxPropagation" class="cmd-option" value="5">
    </label>
    <label class="block">Delete base command_block
      <input var-name="deleteBaseCMB" type="checkbox" class="cmd-option">
    </label>
    <label class="block">Debug
      <input var-name="hasdDebug" type="checkbox" class="cmd-option">
    </label>
    <label class="block removed">Use Button
      <input var-name="useButton" type="checkbox" class="cmd-option"...

CSS

.cmd-element {
  display: flex;
}

.flex {
  display: flex;
}

.block {
  display: block;
}

.margin-top-1e {
  margin-top: 1em;
}

.padding-s {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
}

.margin-mv {
  margin-top: 15px;
  margin-bottom: 15px;
}

.margin-sh {
  margin-left: 5px;
  margin-right: 5px;
}

.margin-sl {
  margin-left: 10px;
}

.cmd-option {
  margin-top: 2px;
  margin-bottom: 2px;
}

.align-helper {
  position: relative;
  margin-bottom: 4px;
  min-height: 100px;
}

.modif-pos {
  min-width: 30px;
}

.fix-down {
  position: absolute;
  bottom: 0px;
}

.align-center {
  position: absolute;
  top: 49%
}

#content > .cmd-element:first-child .modif-up {
  display: none;
}

#content > .cmd-element:last-child .modif-down {
  display: none;
}

.hidden-toggle .toHide {
  display: none;
}

.glyphicon {
  font-size: 15px;
  font-weight: bold;
}

.script-error {
  box-shadow: 0px 0px 10px red;
  outline: 0px !important;
  -webkit-appearance: none;
}

#utilContent {
  position: absolute;
  right: 10px;
  top: 10px;
}

textarea {
  resize: vertical;
}

.debug {
  display: none;
}

.removed {
  display: none;
}

#templates {
  display: none;
}

JavaScript

/*
    Context variables    
*/

var mainContent = document.getElementById("content");
var scriptArea = document.getElementById("script-area");
var scriptAreaOut = document.getElementById("script-area-out");
var templates = document.getElementById("templates");
var currentAreaID = 0

var areaTypeText = {
  "init": "Command init",
  "clock": "Command Clock",
  "impulse": "Command Place",
  "sequence": "Command sequence",
  "formated": "Command Formated"
};

var mathReplace = {
  "max(": "Math.max(",
  "min(": "Math.min(",
  "sin(": "Math.sin(",
  "cos(": "Math.cos(",
  "tan(": "Math.tan(",
  "abs(": "Math.abs(",
  "random(": "Math.random(",
  "rand(": "Math.random(",
  "round(": "Math.round(",
  "ceil(": "Math.ceil(",
  "floor(": "Math.floor(",
  "PI": "Math.PI",
  "exp(": "Math.exp(",
  "pow(": "Math.pow(",
  "log(": "Math.log(",
  "sqrt(": "Math.sqrt("
};

var generalOption = {};
var scriptOption = {};

var COMMAND_SIZE_LIMIT = 32500;

function getCommandList() {

  var finalCmdList = [];
  var elements = mainContent.getElementsByClassName("cmd-element");
  var cmdList = [];
  for (var i = 0; i < elements.length; i++) {
    var currentElem = elements[i];
    var type = currentElem.getAttribute("type");
    var options = parseOptions(currentElem.getElementsByClassName("parsable-option")[0]);
    cmdList = cleanCommands(currentElem.getElementsByClassName("textarea-content")[0].value);
    cmdList = changeListFromOptions(cmdList, type, options);
    for (var j = 0; j < cmdList.length; j++) {
      if (generalOption.hasdDebug) {
        cmdList[j] = replaceAll(cmdList[j], "auto:1", "auto:0");
      }
      finalCmdList.push(cmdList[j]);
    }
  }
  return finalCmdList;
}

function changeListFromOptions(list, type, options) {
  if (type == "init") {
    return alterListInit(list, options);
  } else if (type == "clock") {
    return alterListClock(list, options);
  } else if (type == "impulse") {
    return alterListImpulse(list, options);
  } else if (type ==...