JSFiddle - React, Tailwind, and code Playground

by XTREME104

HTML

<textarea id="codeTextarea"></textarea>
<div id="labelsDiv">
    <p>Lines: </p><p id="linesLabel"></p>
    <br/>
    <p>EAX: </p><p id="eaxLabel"></p>
    <br/>
    <p>EBX: </p><p id="ebxLabel"></p>
    <br/>
    <p>ECX: </p><p id="ecxLabel"></p>
    <br/>
    <p>EDX: </p><p id="edxLabel"></p>
    <br/>
    <button id="parseButton">Parse</button>
    <button id="executeButton">Execute</button>
</div>

CSS

html,body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

textarea#code {
    resize: none;
}

p {
    display:inline
}

JavaScript

setInterval(resize, 0);

var codeLines = {},
    labels = {};

var registers = {
    eax: 0
};

var variables = {};

function mov(destination, source) {
    alert(source);
    if (registers[destination]) {
        registers[destination] = source;
    } else {
        variables[destination] = source;
    }
}

var operations = [
    mov
    ];

function parse(code) {
    var lines = {};
    for (var i = 0; i < code.split(";").length; i++) {
        lines[i] = {};
        lines[i].text = code.split(";")[i].split(",");
        if (lines[i].text.pop() == ":") {
            lines[i].isLabel = true;
            lines[i].label = lines[i].text;
            lines[i].label = lines[i].label.pop();
            labels[lines[i].label] = i;
        } else {
            lines[i].isLabel = false;
            lines[i].mnemonic = lines[i].text.split(" ")[0];
            for (var j = 0; j < lines[i].length; j++) {
                lines[i].operands = {};
                lines[i].operands[j] = lines[i].text.split(",")[j];
            }
            if (!operations[lines[i].mnemonic]) {
                alert("Non-existant operation");
            }
        }
    }
    return lines;
}

function execute(code) {

}

function parseCode() {
    codeLines = parse(document.getElementById("codeTextarea").value);
    document.getElementById("linesLabel").innerHTML = codeLines.length;
}

function executeCode() {
    execute(codeLines);
}

function resize() {
    code.style.width = window.innerWidth - 2 + "px";
    code.style.height = window.innerHeight - document.getElementById("labels").offsetHeight - 7 + "px";
}

parseButton.onclick = parseCode();
executeButton.onclick = executeCode();