JSFiddle - React, Tailwind, and code Playground

by Brondem Brondem

HTML

<table id='table'>
      <tr>
        <td>AAA</td>
        <td>BBBBBB</td>
        <td>XXXX</td>
        <td>MM</td>
      </tr>
      <tr>
        <td>CCCCCC</td>
        <td>D</td>
        <td>YY</td>
        <td>HHHH</td>
      </tr>
      <tr>
        <td>WWW</td>
        <td>Z</td>
        <td>OOO</td>
        <td>GGGGGG</td>
      </tr>
      <tr>
        <td>UUUU</td>
        <td>E</td>
        <td>PPPPPP</td>
        <td>LLL</td>
      </tr>
    </table>

CSS

table {
  border-collapse: collapse;
  text-align: center;
}

td {
  border: solid black 1px;
}

.bg-red {
  background-color: red;
}

JavaScript

function Compiler( code ){
    if( !(code instanceof Array) ) {
        throw Error( 'Expected instance of Array');
    } else if( code.length <= 0  ) {
        throw Error( 'It is not allowed empty code' );
    }

    this.pos   = 0;
    this.code  = {};
    this.stack = [];
    if( code.length > 0 ) {
        if( this.isDeclaration( code[0] ) ) {
            this.code[0] = code[0];
            ++this.pos;
        }
    
        this.current = { 
            'code' : code,
            'name' : 'code',
            'state': this.pos,
            'jump' : this.pos
        };
    } else {
        throw Error( 'It is not allowed empty code' );
    }
}

Compiler.prototype.isDeclaration = function( instruction ) {
    if( (typeof instruction) === 'object' ) {
        var keys = Object.keys( instruction );
        return keys.length === 1 && keys[0] === 'var';
    } else {
        return false;
    }
}

Compiler.prototype.detectInstruction = function( instruction ){
    var keys = [];
    if       ( typeof instruction === 'function' ) {
        return 'calc';
    } else if( typeof instruction ===  'object'  ) {
        keys = Object.keys( instruction );
        if       ( keys.length === 1 ) {
            if( keys[0] === 'action' )
                return 'action';
            if( keys[0] in {'while':undefined, 'if':undefined} )
                return keys;
        } else if( keys.length === 2 ) {
            keys = keys.sort( function(a,b){ return a<b; } );
            if( keys[0] === 'if' && keys[1] === 'else' )
                return keys;
        }
    }
    var error = 'instruction{ ' + keys[0];
    for( var i = 1; i < keys.length; ++i )
        error += '-' + keys[i];
    error += ' } is not allowed instruction';
    throw new Error( error );
}

Compiler.prototype.endControlFlow = function( current ) {

    var name = current.name;
    var jump = current.jump;
    if       ( name === 'while' ) {
        this.code[this.pos] = {
            'jump' : { 'to': jump }
  ...