Tile Level Editor

by wio_dude

HTML

<script src="https://c42e84c6151ed6b429a16892712cec126576af4b-www.googledrive.com/host/0B-7mebXZly7iOVBvV0VYenNuemc/"></script>
<div class="frame">
<canvas id="tile-selector" width="265" height="199"></canvas>
</div>
<img id="tile-map" src="https://i.imgur.com/tYqFRlp.png" />
<br />
Level Dimensions: <input type="text" id="rows" class="dimension" value="10" /> x <input type="text" id="columns" class="dimension" value="20" />
<br />
<input type="button" id="update" value="Update" />
<div id="canvas-container"></div>
<div class="frame">
<canvas id="editor"></canvas>
</div>
<br/>
Save:
<br />
<textarea id="save" readonly></textarea>
<br/>
Load:
<br />
<textarea id="load"></textarea>
<br />
<input type="button" id="load-data" value="load"/>

CSS

input.dimension {
    width: 30px;
}
textarea {
    width: 500px;
    height: 100px;
}
canvas {
    cursor: hand;
    cursor: pointer;
    box-sizing: border-box;
}
.frame {
    border: 5px solid black;
    display: inline-block;
    line-height: 0;
}
#tile-map {
    display: none;   
}
}

JavaScript

function updateDimensions() {
    var size = parseInt(E.blockSize.value, 10);
    GRIDSIZE.width = size;
    GRIDSIZE.height = size;
    var width = parseInt(E.width.value, 10);
    var height = parseInt(E.height.value, 10);
    L = L.resize(width, height, EMPTY_TILE);
    E.editor.width = width * GRIDSIZE.width;
    E.editor.height = height * GRIDSIZE.height;
    E.save.value = L.save();
}

function loadLevel() {
    L.load(E.load.value);
    renderCanvas();
}

function EventManager(binding) {
    this.binding = binding || null;
    this.events = {};
}
EventManager.addEventListener = function(type, listener) {
    if (typeof this.events[type] === 'undefined') {
        this.events[type] = new Array(1);
    }
    this.events[type][0] = listener;
};
EventManager.dispatchEvent = function(type, event) {
    if (typeof this.events[type] !== 'undefined') {
        var listeners = this.events[type];
        for (var i = 0; i < listners.length; i++) {
            listeners[i].call(this.binding, event);
        }
    }
};

function Sprite(image, x, y, width, height) {
    this.image = image;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}
Sprite.prototype.draw = function(context, x, y, width, height) {
    context.drawImage(this.image, this.x, this.y, this.width, this.height,
                 x, y, width, height);
};

function Grid(rows, columns, cellWidth, cellHeight, lineSize) {
    this.rows = rows;
    this.columns = columns;
    this.cellWidth = cellWidth;
    this.cellHeight = cellHeight;
    this.lineSize = lineSize;
}
Grid.prototype.getRow = function(y) {
    return Math.floor((y - this.lineSize) / this.getFrameHeight());
};
Grid.prototype.getColumn = function(x) {
    return Math.floor((x - this.lineSize) / this.getFrameWidth());
};
Grid.prototype.getCellX = function(column) {
    return column * this.getFrameWidth() + this.lineSize;  
};
Grid.prototype.getCellY = function(row) {
    return row * this.getFrameHeight() +...