JSFiddle - React, Tailwind, and code Playground

by yeuem1vannam

HTML

<div class="table-responsive">
    <table class="table table-bordered" id="word_map">
    </table>
</div>

JavaScript

var word_map = [
    {
        pos: 1,
        word: "SPARTACUS",
        offset: 4,
        clue: "Name of a hero"
    },
    {
        pos: 2,
        word: "VIETNAM",
        offset: 0,
        clue: "Que huong ta"
    },
    {
        pos:3,
        word: "HANOI",
        offset: 4,
        clue: "Thu do Cau 2"
    }
]

function cal_width(w_map){
    var m_left = [];
    var m_right = [];
    $.each(w_map, function(index, w_set){
        m_left.push(w_set.offset); 
        m_right.push(w_set.word.length - w_set.offset);
    });
    return {
        row_width: (Math.max.apply(null, m_left) + Math.max.apply(null, m_right)),
        k_offset: Math.max.apply(null, m_left)
    }
}

function build_row(w_row, row_width, k_offset){
    var cells = [];
    var f_col = k_offset - w_row.offset - 1;
    if ( f_col > 0 ){
        cells.push("<td colspan='" + f_col + "'></td>");
    }
    for(var i = 0; i < w_row.word.length; i++){
        var klass = "btn";
        if ( i == w_row.offset){
            klass += " btn-danger";
        } else {
            klass += " btn-primary";
        }
        var cell = "<td class='" + klass + "'>" + w_row.word[i] + "</td>";
        //console.log(cell);
        cells.push(cell);
    };
    var l_col = row_width - w_row.word.length - f_col - 1;
    if (l_col > 0){
        cells.push("<td colspan='" + l_col + "'></td>");
    }
    //console.log(cells.join());
    var row = "<tr id='" + w_row.pos +"'>" + cells.join() + "</tr>";
    return row;
}

function render_map(w_map){
    var map = [];
    var row_obj = cal_width(word_map);
    $.each(w_map, function(index, w_row){
        map.push(build_row(w_row, row_obj.row_width, row_obj.k_offset));
    });
    //console.log(map)
    $("table#word_map").html(map.join());
}

render_map(word_map);