Редактор для игры Вампир

by vovkasolovev

HTML

<table>
    <tr>
        <td></td>
        <td class="toolbar">
            <input id="deleteColumn" type="button" value="-" class="cell_button"><input id="addColumn" type="button" value="+"  class="cell_button"><input id="addColumnRock" type="button" value="+"  class="cell_button cell_1">
            <div class="tools">
                <input id="empty" type="button" value="0" class="cell_0 button">
                <input id="rock" type="button" value="1" class="cell_1 button selected">
                <input id="coin" type="button" value="2" class="cell_2 button">
                <input id="player" type="button" value="3" class="cell_3 button">
                <input id="vampire" type="button" value="a" class="cell_a button">
                <input id="diamond" type="button" value="8" class="cell_8 button">
            </div>
        </td>
    </tr>
    <tr>
        <td class="toolbar">
            <input id="deleteRow" type="button" value="-" class="cell_button">
            </br>
            <input id="addRow" type="button" value="+" class="cell_button">
            </br>
            <input id="addRowRock" type="button" value="+" class="cell_button cell_1">                
       </td>
        <td>
<table id="vampires_gold">
<tbody><tr><td><div class="cell cell_3">3</div></td>
<td><div class="cell cell_0">0</div></td></tr>
<tr><td><div class="cell cell_0">0</div></td>
<td><div class="cell cell_0">0</div></td></tr>
</tbody></table>
        </td>
    </tr>
</table>
<table class="table_textarea"><tr>
<td>
<h3>Уровень цифрами</h3>
         <input id="save_number" type="button" value="Сохранить ↓" class="ui"> 
             <input id="load_number" type="button" value="Загрузить ↑" class="ui"> 
    <textarea id="number_table"></textarea></td>
        
    <td>
<h3>Уровень кодом</h3>
    <input id="text" type="button" value="Получить массив для кода ↓" class="ui">
    <textarea id="text_level" readonly></textarea></td>
<td>
<h3>Уровень таблицей</h3>
    <input...

CSS

body{font-family: sans-serif; padding: 10px; background: #3c6140;}
table{border-collapse: collapse;
border-spacing: 0;}
 td {
    vertical-align:top;
}
#vampires_gold {
    background: #64963A;
    border: 3px solid white;
    box-shadow:0 4px 5px 4px rgba(0,18,72,0.1) inset,0 4px 60px rgba(0,18,72,0.5) inset, 0 0 15px -1px black;
}
#vampires_gold tr{
    transition : all 0.5s ease;
}
#vampires_gold td {
    border:1px solid rgba(255,255,255,0.1); transition : all 0.5s ease-in;
}
#vampires_gold div {
    width:34px;
    height: 34px;
    vertical-align: top;
    text-align: left;
    line-height: 10px;
    display: inline-block;
    padding: 3px;
    font-size:0;
}


#vampires_gold .hover{background: rgba(255,255,255,0.07);}
.tools {
    margin-left: 50px; display: inline-block;
}
.button {
width:40px;
height:40px;
margin:0 5px 5px 0;
border: 1px solid lightgray;
text-shadow: 0 0 1px black,  0 0 3px black,  0 0 5px black , 0 0 7px black;
background-size: 100% 100%;
background-repeat: no-repeat;
color: white; font-weight: bold; font-size: 0.8em;
    border-radius:10px;
}
.button.selected {
    border: 3px solid black;
    box-shadow: 0 0 10px 2px white;
    background-color: white;
}
.cell_button {
background-size: 100% 100%;
width:40px;
height:40px;
}
.ui{font-size:0.8em; padding: 5px;}
.last_action{box-shadow: 0 0 3px 3px white;}
.different{box-shadow: 0 0 3px yellow;}


.cell{background-size: 0% 0%; transition : all 0.1s ease-out;
background-position: center center;
background-repeat: no-repeat;
    color: transparent; font-weight: bold; font-size: 0.8em;

}
.cell_0 {}
.cell_1 {background-size: 100% 100%;
    background-image: url('http://dev.podhod.ru/vampire/img/rock.png')
}
.cell_2 {background-size: 100% 100%;
    background-image: url('http://dev.podhod.ru/vampire/img/coin.png')
}
.cell_3 {background-size: 100% 100%;
    background-image: url('http://dev.podhod.ru/vampire/img/player.png')
}
.cell_a {background-size: 100% 100%;
    background-image:...

JavaScript

$(document).ready(function(){    
    var minSize = 2;
    var maxSize = 14;
    var n = 2;
    var m = 2;
    var newCell = '<td><div class="cell cell_0">0</div></td>';
    var newCellRock = '<td><div class="cell cell_1">1</div></td>';    
    
    $("#addColumn").click(function () {
        if ($('#vampires_gold tr:first-child td').index() <= maxSize) {
            $('#vampires_gold tr').append(newCell);
            n++;
        };
    });

    $("#addColumnRock").click(function () {
        if ($('#vampires_gold tr:first-child td').index() <= maxSize) {
            $('#vampires_gold tr').append(newCellRock);
            n++;
        };
    });    
    
    $("#deleteColumn").click(function () {
        if ($('#vampires_gold tr:first-child td').index() + 1 > minSize) {
            $('#vampires_gold tr td:last-child').remove();
            n--;
        };
    });

    $("#addRow").click(function () {
        if ($('#vampires_gold tr').index() <= maxSize) {
            addTableRow($('#vampires_gold'),0);
            m++;
        };
    });

    $("#addRowRock").click(function () {
        if ($('#vampires_gold tr').index() <= maxSize) {
            addTableRow($('#vampires_gold'),1);
            m++;
        };
    });    
    
    $("#deleteRow").click(function () {
        if ($('#vampires_gold tr').index() + 1 > minSize) {
            $('#vampires_gold tr:last-child').remove();
            n--;
        };
    });

    function addTableRow(jQtable,item) {
        jQtable.each(function () {
            var $table = $(this);
            // Number of td's in the last table row
            var n = $('tr:last td', this).length;
            var tds = '<tr>';
            for (var i = 0; i < n; i++) {
                if(item == '0'){tds += newCell;}else{tds += newCellRock;}
            }
            tds += '</tr>';
            if ($('tbody', this).length > 0) {
                $('tbody', this).append(tds);
            } else {
                $(this).append(tds);
     ...