JSFiddle - React, Tailwind, and code Playground

by mmis1000

HTML

<div id='mainWrap'>
    <div id='output'>
        <div id='outputInner'>
            <div id='displayInput'></div>
            <div id='displayOutput'>
                <div>the generated command is:</div>
                <div id="commandText"></div>
            </div>
        </div>
    </div>
    <div id='input'>
        <div class='inputInnerleft inputMode1'>
            <input type="text" id="x" class="posInput inputBox"></input>
            <input type="text" id="y" class="posInput inputBox"></input>
            <input type="text" id="z" class="posInput inputBox"></input>
            <input type="text" id="id" class="inputBox idMetaInput"></input>
            <input type="text" id="meta" class="inputBox idMetaInput"></input>
        </div>
        <div class='inputInnerMid inputMode1'>
            <input type="text" id="nbtTag" class="inputBox nbtTagInput"></input>
        </div>
        <div class='inputInnerright'>
            <input type="button" id="generateCommand" class="leftButton" value="generate"></input>
            <input type="button" id="addBlock" class="leftButton" value="add"></input>
            <input type="button" id="switchInput" class="leftButtonMini" value="s"></input>
        </div>
    </div>
</div>

CSS

#mainWrap {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
    background: gray;
}
#commandText {
    overflow:hidden;
}
#generatedCode {
    width:100%;
    height:100%;
    word-break: word;
    overflow-x:hidden;
    overflow-y:auto;
}
#input {
    height:24px;
    background:white;
    width:100%;
    position:absolute;
    bottom:0px;
}
.inputInnerMid {
    height:100%;
    width:100%;
    padding-left:205px;
    padding-right:190px;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}
.inputInnerright {
    height:100%;
    width:190px;
    position:absolute;
    right:0;
    top:0;
}
.inputInnerleft {
    height:100%;
    width:220px;
    position:absolute;
    left:0;
    top:0;
}
#output {
    height:100%;
    width:100%;
    padding-bottom:25px;
    position:absolute;
    top:0px;
    overflow:auto;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}
#outputInner {
    width:100%;
    height:100%;
    background:#777;
}
#displayInput {
    width:100%;
    height:70%;
    background:#777;
    overflow:auto;
}
#displayOutput {
    width:100%;
    height:30%;
    background:#999;
    overflow:auto;
}
/*for input area*/
 .posInput {
    width:40px;
    height:20px;
}
.idMetaInput {
    width:30px;
    height:20px;
}
.nbtTagInput {
    width:100%;
    height:20px;
}
.notEnabled {
    color:#CCCCCC;
}
.badFormat {
    color:red;
}
.inputBox {
    float:left;
    padding:0;
    border-width:1px;
    margin:1px;
}
.leftButton {
    float:right;
    width:80px;
    padding:0px;
    height:20px;
    border-width:1px;
    margin:1px;
}
.leftButtonMini {
    float:right;
    width:15px;
    padding:0px;
    height:20px;
    border-width:1px;
   ...

JavaScript

//field
var CommandList = {};
var inputModeClass = [
    "inputMode1",
    "inputMode2"
];
var inputModeClassEntrance = [
    
]
var currentInput = 0;
var inputBoxDisplayDefault = {
    x: "X",
    y: "Y",
    z: "Z",
    id: "id",
    meta: "meta",
    nbtTag: "NbtTag"
};
var isInputBoxEnabled = {
    x: false,
    y: false,
    z: false,
    id: false,
    meta: false,
    nbtTag: false
};
var inputBoxDefault = {
    x: "0",
    y: "0",
    z: "0",
    id: "0",
    meta: "0",
    nbtTag: ""
};
var inputBoxForce = {
    x: true,
    y: true,
    z: true,
    id: true,
    meta: false,
    nbtTag: false
};

var inputBoxFormat = {
    x: /(~?-?\d+|~)/g,
    y: /(~?-?\d+|~)/g,
    z: /(~?-?\d+|~)/g,
    id: /[\w:]+/g,
    meta: /\d+/g,
    nbtTag: /.+/g
};

//logic

function getSetBlockCommand(x, y, z, id, meta, nbt) {
    var command;
    meta = meta || "0";

    command = "/setblock " + x + " " + y + " " + z + " " + id;
    if (nbt || (meta !== "0")) {
        command = command + " " + meta;
    }
    if (nbt) {
        command = command + " replace " + nbt;
    }
    return command;
}

function generateCommandFinal(commandList) {
    var command = "/summon MinecartCommandBlock ~ ~2 ~ " + _tagBuilder(commandList);
    return command;
}


function _tagBuilder(_commandList, current) {
    var buffer;
    var Listlength = _commandList.length;
    if (Listlength == 1) {
        buffer = "Command:\"" + _commandList[0].replace(/(\\"|\")/g, "\\\"") + "\"";
        if (current) {
            buffer = buffer + ",Riding:" + current;
        }
        buffer = "{" + buffer + "}";
        return buffer;
    } else {
        buffer = "id:MinecartCommandBlock";
        buffer = buffer + ",Command:\"" + _commandList[0].replace(/(\\"|\")/g, "\\\"") + "\"";
        if (current) {
            buffer = buffer + ",Riding:" + current;
        }
        buffer = "{" + buffer + "}";
        return _tagBuilder(_commandList.slice(1), buffer);
    }
}

//display block

function...