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="rawr"></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;
}

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

JavaScript

function build(col, row) {
    $('#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_' + i + '-' + j
            }));
        }
        t_table.append(t_row);
    }
    $('#wrapper').html(t_table);
    $('#c_' + (row - 1) + '-0').addClass('start');
    $('#c_0-' + (col - 1)).addClass('end');
}

function findIdByPos(x, y) {
    var _x = $(this).pageX; //left
    var _y = $(this).pageY; //top
}

$(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) {
        $(this).toggleClass('blank selected');
        $('.main_table').delegate('.cell:not(.start,.end)', 'mousemove', function(event) {
            var old = $('.main_table').data('curr_cell');
            var current = $(this).attr('id');
            if ((typeof old === 'undefined') || old !== current) {
                $('#test').html(current);
                $(this).toggleClass('blank selected');
            }
            $('.main_table').data('curr_cell', current);
        }).live('mouseup', function(event) {
            $('.main_table').undelegate('.cell:not(.start,.end)', 'mousemove');
            $('.main_table').removeData('curr_cell');
        });
        $('#test').html($(this).attr('id'));
    }).delegate('.cell.start, .cell.end', 'mousedown', function(event) {
       ...