JSFiddle - React, Tailwind, and code Playground

by siyegen

HTML

<div class="center">
    <div id="size_area"></div>
    <div id="wrapper">
        test
    </div>
</div>
<div id="test"></div>
<div id="blank_w"></div>
<div id="inputs">
    <input type="textfield" id="width" class="numbers" /> x 
    <input type="textfield" id="height"class="numbers" />
    <input type="button" id="build" value="Build" />
    <input type="button" id="go" value="Start" />
</div>

CSS

.numbers{
    width: 45px;
    color: #999;
}

#inputs{
    margin: 10px 5px;    
}

#size_area{
    font: 45px bold Arial Black, Gadget, sans-serif;
    color: #CCC;
}

.center{
    text-align: center;
    margin: 0 auto;
    overflow: visible;
}

#wrapper{
    padding: 3px 5px;
    overflow: visible;
}

input[type="button"]{
    padding: 1px 4px;    
}

.main_table{
    border: 1px solid #000;
    margin: 0px auto;
}

.cell{
    border: 1px solid black;  
    width: 3em;
    height: 3em;
    background: #ccc;
}

.row{
    border: 1px solid black;    
}

.selected{
    background: #ccddee;    
}

.start{
    background: #0f0;
}

.end{
    background: #f00;
}

.icell{
    height: 2.5em;
    width: 2.5em;
    display: none;
    position: absolute;
    cursor: move;
}

.icell.start{
    border: 2px solid #00FF00;
    background: transparent;
}

.icell.end{
    border: 2px solid #FF0000;   
    background: transparent; 
}

JavaScript

function build(col, row) {
    if (col > 20 || row > 20) {
        col = Math.min(col, 20);
        row = Math.min(row, 20);
    }
    $('#size_area').html(col + ' x ' + row);
    var t_table = $('<table>').addClass('main_table');
    for (i = 0; i < row; i++) {
        var t_row = $('<tr>').attr({
            'class': 'row',
            'id': 'r_' + i
        });
        for (j = 0; j < col; j++) {
            var t_cell = $('<td>').attr({
                'class': 'cell',
                'id': 'c_' + j + '-' + i
            });
            t_cell.data('state', 0);
            t_row.append(t_cell);
        }
        t_table.append(t_row);
    }
    $('#wrapper').html(t_table);
    var t_pos = t_table.position();
    t_table.data('t_pos', {
        'left': t_pos.left,
        'top': t_pos.top,
        'right': t_table.width + t_pos.left,
        'bottom': t_table.height + t_pos.top,
        'cell_size': $('.cell').filter(':first').width()
    });
    $('#c_0-' + (col - 1)).addClass('start').data('state', 2);
    $('#c_' + (row - 1) + '-0').addClass('end').data('state', 3);
}

function findIdByPos(x, y) {
    var table = $('.main_table');
    if (table.length) {
        var t_pos = table.data('t_pos');
        console.log(t_pos);
        var col = parseInt((x - t_pos.left) / t_pos.cell_size, 0);
        var row = parseInt((y - t_pos.top) / t_pos.cell_size, 0);
        return $('#c_' + col + "-" + row);
    } else {
        return undefined;
    }
}

function prepareArray(){
    var array = new Array();
    $('.main_table').find('.row').each(function() {
        var row = new Array(); 
        $(this).children('.cell').each(function() {
            row.push($(this).data('state'));                
        });
        array.push(row);
    });
    return array;
}

$(function() {
    $('.numbers').keydown(function(event) {
        var key_code = event.which;
        if (typeof key_code === 'undefined') {
            return;
        } else if (key_code === 9 || key_code...