Minecraft Multiple Command Compiler

            
              //Set up all the HTML element references
var commandArray = [],
    commandNameList = {},
    commandInput = document.querySelector(".command.adding input"),
    commandAddButton = document.querySelector(".command.adding button"),
    commandError = document.querySelector(".command.adding h3"),
    editInput = document.querySelector(".command.editing input"),
    editSaveButton = document.querySelectorAll(".command.editing button")[0],
    editCancelButton = document.querySelectorAll(".command.editing button")[1],
    editError = document.querySelector(".command.editing h3"),
    listDiv = document.querySelector(".list"),
    listButtons = document.querySelectorAll(".list button"),
    list = document.querySelector(".list select"),
    outputToggle = document.querySelector(".output a"),
    output = document.querySelector(".output textarea"),
    outputSelectButton = document.querySelector(".output button"),
    holoText = document.querySelectorAll("h1, h2, h3");

//Set up globals
var editing = false,
    editingIndex = -1,
    useCommandArray = 0;

commandNameList = { //complete list of valid commands, for validation purposes
  "achievement": {},
  "ban": {},
  "ban-ip": {},
  "banlist": {},
  "blockdata": {},
  "clear": {},
  "clone": {},
  "debug": {},
  "defaultgamemode": {},
  "deop": {},
  "difficulty": {},
  "effect": {},
  "enchant": {},
  "entitydata": {},
  "execute": {},
  "fill": {},
  "gamemode": {},
  "gamerule": {},
  "give": {},
  "help": {},
  "kick": {},
  "kill": {},
  "list": {},
  "me": {},
  "op": {},
  "pardon": {},
  "particle": {},
  "playsound": {},
  "publish": {},
  "replaceitem": {},
  "save-all": {},
  "save-off": {},
  "save-on": {},
  "say": {},
  "scoreboard": {},
  "seed": {},
  "setblock": {},
  "setidletimeout": {},
  "setworldspawn": {},
  "spawnpoint": {},
  "spreadplayers": {},
  "stats": {},
  "stop": {},
  "summon": {},
  "tell": {},
  "tellraw": {},
  "testfor": {},
  "testforblock": {},
  "testforblocks": {},
  "time": {},
  "title": {},
  "toggledownfall": {},
  "tp": {},
  "trigger": {},
  "weather": {},
  "whitelist": {},
  "worldborder": {},
  "xp": {}
}

var baseCommandString = '/summon FallingSand ~ ~1 ~ {Time:1,Block:redstone_block,Passengers:[{id:FallingSand,Time:1,Block:command_block,TileEntityData:{Command:"_&command&_"},Passengers:[{id:FallingSand,Time:1,Block:redstone_block_&nextcommand&_}]}]}';

var nextCommandString = ',Passengers:[{id:FallingSand,Time:1,Block:command_block,TileEntityData:{Command:"_&command&_"},Passengers:[{id:FallingSand,Time:1,Block:redstone_block_&nextcommand&_}]}]';

//Replace _&command&_ in the command string with the initial command, and _&nextcommand&_ with nextCommandString
function setCommand(str, command, nextcommand) {
  var commandString = str || "";
  //If this is the first command in a sequence, str will be empty--use the baseCommandString
  if (!commandString) { commandString = baseCommandString.replace(/_&command&_/, command); }
  //Otherwise, use str
  else { commandString = str.replace(/_&command&_/, command); }
  //If there is a nextcommand, replace that section of the current command with nextCommandString
  if (nextcommand) {
    commandString = commandString.replace(/_&nextcommand&_/, nextCommandString);
    //nextCommandString has a new instance of _&command&_, which we can now replace with the nextcommand in the list of options
    commandString = commandString.replace(/_&command&_/, nextcommand);
  }
  //If there is no next command in the sequence, just replace that part of the current string with nothing
  else { commandString = commandString.replace(/_&nextcommand&_/, ""); }
  return commandString;
}

//will improve later--just a placeholder for now, returns false on no backslash or on only a backslash
function validateCommand(c){
  //Match the command name: everything between the slash and the first space, accounting for dashes (for commands such as save-all)
  var command = c.match(/\/(\w*\-?\w*)? ?/i)[1];
  if (!commandNameList[command] || c.match(/^\/$/) || c[0] !== "/") { return false; }
  return true;
}

//Create the output string from the select's option elements
function parseCommandList(select) {
  var commands = select.options;
  var output = "";
  //If the list is empty, return the empty string
  if (commands.length === 0) { return output; }
  //If only one command, just output that
  if (commands.length === 1) { output = commands[0].text; }
  
  //There's more than one command in the list
  for (var i = 0; i < commands.length; i++) {
    //Check if there is a next command. If so, send setCommand() the current output string, the current command, and the next command
    if (commands[i+1]) { output = setCommand(output, commands[i].text, commands[i+1].text); }
    //If this is the last command, send setCommand() the current output string, the current command, and a blank string for the next command
    else { output = setCommand(output, commands[i].text, ""); }
  }
  
  return output;
}

//Mode-switching functions
//Show the edit dialog, hide the add dialog
function editMode() {
  editing = true;
  editingIndex = list.selectedIndex;
  edit_b.textContent = "Cancel"
  document.querySelector(".command.adding").style.display = "none";
  document.querySelector(".command.editing").style.display = "block";
  editInput.value = list[editingIndex].text;
  editInput.focus();
  editInput.selectionStart = 1;
}

//Show the add dialog, hide the edit dialog
function addMode() {
  editing = false;
  editingIndex = -1;
  edit_b.textContent = "Edit"
  document.querySelector(".command.adding").style.display = "block";
  document.querySelector(".command.editing").style.display = "none";
  commandInput.focus();
  commandInput.selectionStart = commandInput.value.length;
}

//Controls for the input div
commandInput.focus();
commandInput.selectionStart = 1;

//Deselect selected options if not in edit mode
commandInput.addEventListener("focus", function(){
  if (!editing) list.selectedIndex = -1;
}, false);

//Add a command to the list
//If the user presses enter on the input, dispatch a click event on the add button
commandInput.addEventListener("keydown", function(e){
  if (e.keyCode === 13) { 
    var e = document.createEvent('Events');
    e.initEvent('click', true, false);
    commandAddButton.dispatchEvent(e); 
  }
}, false);

//Handle clicks on the actual add button
commandAddButton.addEventListener("click", function(){
  //validateCommand() is in the globals section
  if (!validateCommand(commandInput.value)) {
    commandError.style.display = "block";
    return false;
  }
  //If the command is valid, hide the error message
  commandError.style.display = "none";
  //Create and insert a new option
  var opt = document.createElement("option");
  opt.text = commandInput.value;
  list.add(opt);
  //Reset the command input's value to just the forward slash and focus it
  commandInput.value = "/";
  commandInput.focus();
  
  updateOutput();
  return true;
}, false)

//Edit button controls
//Handle user pressing enter or escape on the input to submit or cancel
editInput.addEventListener("keydown", function(e){
  if (e.keyCode === 13) { //Here's for pressing enter or return
    var e = document.createEvent('Events');
    e.initEvent('click', true, false);
    editSaveButton.dispatchEvent(e); 
  }
  if (e.keyCode === 27) { //Here's for pressing escape
    var e = document.createEvent('Events');
    e.initEvent('click', true, false);
    editCancelButton.dispatchEvent(e); 
  }
}, false);

//Handle clicks on the actual save button
editSaveButton.addEventListener("click", function(){
  //validateCommand() is in the globals section
  if (!validateCommand(editInput.value)) {
    editError.style.display = "block";
    return false;
  }
  //If the command is valid, hide the error message
  editError.style.display = "none";
  //Method for editing is: create a new option with the current contents of editInput, insert the new option after the old one, delete the old one. Also reset the editInput to a backslash
  var opt = document.createElement("option");
  opt.text = editInput.value;
  list.add(opt, editingIndex);
  list.remove(editingIndex + 1);
  editInput.value = "/";
  
  addMode();
  updateOutput();
  return true;
}, false)

//Canceling edit returns to add mode
editCancelButton.addEventListener("click", function(){
  addMode();
}, false)

//Buttons for the list div
//When certain list div buttons are clicked, update the output
function updateOutput() {
  output.textContent = parseCommandList(list);
}

//Move an element or group of elements up in the list
var up_b = listButtons[0];
up_b.addEventListener("click", function(){
  //Immediately return false if no option or more than one option is selected
  if (list.selectedIndex === -1 || list.selectedOptions.length > 1) { return false; }
  //Make sure the selected option isn't already at the top
  if (list.selectedOptions.length === 1 && list.selectedOptions[0].index > 0) {
    //The method for moving is: copy the currently selected option to a new option element, place the new option before the old one, then delete the old one
    var opt = list.selectedOptions[0];
    var newOpt = document.createElement("option");
    newOpt.text = opt.text;
    list.add(newOpt, opt.index - 1);
    newOpt.selected = true;
    list.remove(opt.index);
    
    updateOutput();
    if (editing) { addMode(); }
    return true;
  }
  return false;
}, false);

//Move an element down in the lst
var down_b = listButtons[1];
down_b.addEventListener("click", function(){
  //Immediately return false if no option or more than one option is selected
  if (list.selectedIndex === -1 || list.selectedOptions.length > 1) { return false; }
  //Make sure the selected option is not already at the bottom
  if (list.selectedOptions.length === 1 && list.selectedOptions[0].index < list.length - 1) {
    //The method for moving is: copy the currently selected option to a new option element, place the new option after the old one, then delete the old one
    var opt = list.selectedOptions[0];
    var newOpt = document.createElement("option");
    newOpt.text = opt.text;
    list.add(newOpt, opt.index + 2);
    newOpt.selected = true;
    list.remove(opt.index);
    
    updateOutput();
    if (editing) { addMode(); }
    return true;
  }
  return false;
}, false)

//The edit button: change from the add dialog to the edit dialog
var edit_b = listButtons[2];
edit_b.addEventListener("click", function(){
  //Immediately return false if no option or more than one option is selected
  if (list.selectedIndex === -1 || list.selectedOptions.length > 1) { return false; }
  //editMode() and addMode() defined in globals section above
  if (!editing) { editMode(); }
  else { addMode(); }
}, false)

//Delete the selected elements
var del_b = listButtons[3];
del_b.addEventListener("click", function(){
  //Immediately return false if no element is selected
  if (list.selectedIndex === -1) { return false; }
  //Be sure to cycle backwards through the collection (it's live!)
  for (var i = list.length - 1; i > -1; i--) {
    if (list[i].selected) {
      list.remove(i);
      if (list[i]) list[i].selected = true;
    }
  }
  updateOutput();
  addMode();
  return true;
}, false);

//Show the output fields when user clicks "Show Output"; change text to "Hide.."
outputToggle.addEventListener("click", function(e){
  e.preventDefault();
  var my = outputToggle;
  if (my.textContent === "Show Output") { //Show output
    output.style.display = "block";
    outputSelectButton.style.display = "block";
    my.textContent = "Hide Output";
    window.scroll(0, document.body.scrollHeight);
  }
  else {  //Hide output
    output.style.display = "none";
    outputSelectButton.style.display = "none";
    my.textContent = "Show Output";
  }
}, false);

//Automatically select the text inside the output field when it's clicked
output.addEventListener("click", function(){
  output.selectionStart = 0;
  output.selectionEnd = output.value.length;
}, false)
outputSelectButton.addEventListener("click", function(){
  output.selectionStart = 0;
  output.selectionEnd = output.value.length;
}, false);

//Set the holographic effect for header tags to something random
for (var i = 0; i < holoText.length; i++) {
  if (holoText[i].style.animationName !== "glowRed") {
    holoText[i].style.animationDelay = -1 * Math.floor(Math.random() * 5) + 's';
    holoText[i].style.animationDuration = 5 + Math.floor(Math.random() * 5) + 's';
  }
}

var commArray = ["/fill 0 1 0 0 4 0 cobblestone 0 air","/setblock 0 10 0 planks 1","/tp @e[r=10] 0 11 0","/gamerule doDaylightCycle false"];

/*

MC command elements:
name
main method
location1
volume1
location2

  Name     Command method  Bool
____|____ _______|_______ __|__
|       | |             | |   |
/gamerule doDaylightCycle false

                                  Command method
 Name      Volume     Block type/data   |    Block type/data
__|__ _______|________ ______|______ ___|___ ___|____
|   | |              | |           | |     | |      |
/fill 0 2 0 89 202 873 cobblestone 0 replace planks 1

                                 Command method
 Name        Volume       Location     |    Method modifier
__|___ ________|________ _____|____ ___|___ __|__
|    | |               | |        | |     | |   |
/clone ~0 ~1 ~0 ~4 ~5 ~4 ~32 ~1 ~32 replace force

*/