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;
}

.row{
    border: 1px solid black;    
}

.blank{
    background: #ccc;    
}

.selected{
    background: #ccddee;    
}

.start{
    background: #0f0;
}

.end{
    background: #f00;
}

.icell{
    height: 2.7em;
    width: 2.7em;
    background: #aaa;
    border: 1px solid #fff;
    display: none;
    position: absolute;
    cursor: move;
}

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++) {
            t_row.append($('<td>').attr({
                'class': 'cell blank',
                'id': 'c_' + j + '-' + i
            }));
        }
        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');
    $('#c_' + (row - 1) + '-0').addClass('end');
}

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);
        var row = parseInt((y - t_pos.top) / t_pos.cell_size);
        return '#c_'+col+"-"+row;
    } else {
        return undefined;     
    }  
}

$(function() {
    $('.numbers').keydown(function(event) {
        var key_code = event.which;
        if (typeof key_code === 'undefined') {
            return;
        } else if (key_code === 9 || key_code === 8 || key_code === 46 || (key_code < 58 && key_code > 47) || (key_code < 106 && key_code > 95)) {} else {
            event.preventDefault();
        }
    });

    $('body:not(.set)').delegate('.cell:not(.start,.end)', 'mousedown', function(event) {
        event.preventDefault();
        $(this).toggleClass('blank selected');
        $('.main_table').data('switchBlank', $(this).hasClass('blank'));
       ...