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="m1_inputInnerLeftMid inputMode1_display">
            <input type="text" id="m1_rawCommand" class="rawCommandInput inputBox inputMode1"></input>
        </div>
        <div class='m0_inputInnerleft inputMode0_display'>
            <input type="text" id="m0_x" class="posInput inputBox inputMode0"></input>
            <input type="text" id="m0_y" class="posInput inputBox inputMode0"></input>
            <input type="text" id="m0_z" class="posInput inputBox inputMode0"></input>
            <input type="text" id="m0_id" class="inputBox idMetaInput inputMode0"></input>
            <input type="text" id="m0_meta" class="inputBox idMetaInput inputMode0"></input>
        </div>
        <div class='m0_inputInnerMid inputMode0_display'>
            <input type="text" id="m0_nbtTag" class="inputBox nbtTagInput inputMode0"></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="switchMode" class="miniButton" 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;
}
.m0_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+ */
    float:left;
}
.inputInnerright {
    height:100%;
    width:190px;
    position:absolute;
    right:0;
    top:0;
}
.m0_inputInnerleft {
    height:100%;
    width:220px;
    position:absolute;
    left:0;
    top:0;
}
.m1_inputInnerLeftMid {
    height:100%;
    width:100%;
    padding-left:0px;
    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+ */
    position:absolute;
    float:left;
}
#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;
}
.rawCommandInput {
    width:100%;
   ...

JavaScript

//field
var currentInputMode = 0;
var inputModeCount = 2;
var inputBoxInfo = [];

inputBoxInfo[0] = [];
inputBoxInfo[0].modeClass = [
    "inputMode0_display"];
inputBoxInfo[0].textClass = [
    "inputMode0"];
inputBoxInfo[0].inputBoxIdList = ["x", "y", "z", "id", "meta", "nbtTag"];
inputBoxInfo[0].inputBoxDisplayDefault = {
    m0_x: "X",
    m0_y: "Y",
    m0_z: "Z",
    m0_id: "id",
    m0_meta: "meta",
    m0_nbtTag: "NbtTag"
};
inputBoxInfo[0].isInputBoxEnabled = {
    m0_x: false,
    m0_y: false,
    m0_z: false,
    m0_id: false,
    m0_meta: false,
    m0_nbtTag: false
};
inputBoxInfo[0].inputBoxDefault = {
    m0_x: "0",
    m0_y: "0",
    m0_z: "0",
    m0_id: "0",
    m0_meta: "0",
    m0_nbtTag: ""
};
inputBoxInfo[0].inputBoxForce = {
    m0_x: true,
    m0_y: true,
    m0_z: true,
    m0_id: true,
    m0_meta: false,
    m0_nbtTag: false
};
inputBoxInfo[0].inputBoxFormat = {
    m0_x: /(~?-?\d+|~)/g,
    m0_y: /(~?-?\d+|~)/g,
    m0_z: /(~?-?\d+|~)/g,
    m0_id: /[\w:]+/g,
    m0_meta: /\d+/g,
    m0_nbtTag: /.+/g
};

inputBoxInfo[1] = [];
inputBoxInfo[1].modeClass = [
    "inputMode1_display"];
inputBoxInfo[1].textClass = [
    "inputMode1"];
inputBoxInfo[1].inputBoxIdList = ["rawCommand"];
inputBoxInfo[1].inputBoxDisplayDefault = {
    m1_rawCommand: "Command"
};
inputBoxInfo[1].isInputBoxEnabled = {
    m1_rawCommand: false
};
inputBoxInfo[1].inputBoxDefault = {
    m1_rawCommand: ""
};
inputBoxInfo[1].inputBoxForce = {
    m1_rawCommand: true
};
inputBoxInfo[1].inputBoxFormat = {
    m1_rawCommand: /.+/g
};

//command list

var commandList = {};
var commandCollectionList = {};

//input mode list

var inputModeList = [];

//input mode 0

inputModeList[0] = {};
inputModeList[0].addBlockListener = function () {
    if (finalCheck()) {
        appendCommand(inputModeList[0].getCurrentInput());
        resetInput();
        return true;
    } else {
        return false;
    }
};
inputModeList[0].getCurrentInput = function () {
    var x =...