Road tool

OWOP.tool.addToolObject(new OWOP.tool.class("Road", OWOP.cursors.paste, OWOP.fx.player.NONE, OWOP.RANK.ADMIN, function (tool) {
    var canvas = document.createElement("canvas");
    canvas.width = canvas.height = 0;

    var xPos = null;
    var yPos = null;
    var progress = 0;

    var width = 1;
    var height = 1;
    var speed = 30;

    var optWin = new OWOP.windowSys.class.window("Road Tool", {}, function(wdow) {
        var style = document.createElement("style");
        style.innerHTML = "label {color:#fff;display:block;}";
        wdow.container.appendChild(style);

        var widthInput = document.createElement("input");
        widthInput.id = "road-width";
        var heightInput = document.createElement("input");
        heightInput.id = "road-height";
        var speedInput = document.createElement("input");
        speedInput.id = "road-speed";
        widthInput.type = heightInput.type = speedInput.type = "number";
        widthInput.addEventListener("input", function() {
            width = parseInt(this.value) || 0;
        });
        heightInput.addEventListener("input", function() {
            height = parseInt(this.value) || 0;
        });
        speedInput.addEventListener("input", function() {
            speed = parseFloat(this.value) || 0;
        });

        var widthLabel = document.createElement("label");
        var heightLabel = document.createElement("label");
        var speedLabel = document.createElement("label");
        widthLabel.for = widthInput.id;
        heightLabel.for = heightInput.id;
        speedLabel.for = speedInput.id;
        widthLabel.innerHTML = "Width: ";
        heightLabel.innerHTML = "Height: ";
        speedLabel.innerHTML = "Speed: ";
        widthLabel.appendChild(widthInput);
        heightLabel.appendChild(heightInput);
        speedLabel.appendChild(speedInput);

        wdow.container.appendChild(widthLabel);
        wdow.container.appendChild(heightLabel);
        wdow.container.appendChild(speedLabel);

        var button = document.createElement("button");
        button.innerHTML = "Lay";
        var running = false;
        button.addEventListener("click", function() {
            if (xPos === null || yPos === null) {
                return;
            }

            if (!running) {
                tool.setEvent("tick", tick);
                button.innerHTML = "Cancel";
            } else {
                tool.setEvent("tick", null);
                button.innerHTML = "Lay";
                progress = 0;
                ticks = 0;
            }
            running = !running;
        });
        wdow.container.appendChild(button);
    }).move(window.innerWidth - 240, 32);

    tool.setFxRenderer(function (fx, ctx, time) {
        if (!fx.extra.isLocalPlayer || !(canvas.width && canvas.height)) {
            return;
        }

        var z = OWOP.camera.zoom;
        var x = xPos !== null ? xPos : Math.floor(fx.extra.player.tileX / 16);
        var y = yPos !== null ? yPos : Math.floor(fx.extra.player.tileY / 16);
        var fxx = x * 16 - OWOP.camera.x;
        var fxy = y * 16 - OWOP.camera.y;

        var pattern = ctx.createPattern(canvas, "repeat");

        ctx.globalAlpha = 0.5 + Math.sin(time / 500) / 4;
        ctx.strokeStyle = "#000000";
        ctx.scale(z, z);
        ctx.rect(fxx, fxy, canvas.width * width, canvas.height * height);
        ctx.fillStyle = pattern;
        ctx.fill();
        ctx.scale(1 / z, 1 / z);
        ctx.globalAlpha = 0.8;
        ctx.strokeRect(fxx * z, fxy * z, canvas.width * width * z, canvas.height * height * z);
        return 0;
    });

    var ticks = 0;
    function tick() {
        ticks += speed / 30;

        while (ticks >= 1) {
            ticks--;

            var chunkX = Math.floor(progress / (canvas.height / 16 * height));
            var chunkY = (progress % (canvas.height / 16 * height));

            var imgX = chunkX % (canvas.width / 16);
            var imgY = chunkY % (canvas.height / 16);

            var data = new Uint32Array(16 * 16);
            var imgData = canvas.getContext("2d").getImageData(imgX * 16, imgY * 16, 16, 16).data;
            for (var i=0, j=0; i<16*16; i++, j+=4) {
                data[i] = imgData[j + 2] << 16 | imgData[j + 1] << 8 | imgData[j];
            }

            OWOP.net.protocol.setChunk(xPos + chunkX, yPos + chunkY, data);

            progress++;

            if (progress == (canvas.height / 16 * height * canvas.width / 16 * width)) {
                ticks = 0;
                progress = 0;
                tool.setEvent("tick", null);
            }
        }
    }

    tool.setEvent("mousedown mousemove", function (mouse) {
        if (mouse.buttons & 3 && progress === 0) {
            xPos = Math.floor(mouse.tileX / 16);
            yPos = Math.floor(mouse.tileY / 16);
        }
    });

    tool.setEvent("select", function() {
        OWOP.windowSys.addWindow(optWin);

        var input = document.createElement("input");
        input.type = "file";
        input.accept = "image/*";
        input.addEventListener("change", function(event) {
            if (!input.files || !input.files[0]) {
                return;
            }

            var reader = new FileReader();
            reader.addEventListener("load", function(e) {
                var image = new Image();
                image.addEventListener("load", function() {
                    if (canvas.width % 16 || canvas.width % 16) {
                        throw "Image size needs to be multiples of 16";
                    }

                    canvas.width = image.width;
                    canvas.height = image.height;
                    canvas.getContext("2d").drawImage(image, 0, 0);
                    console.log("Loaded image");
                });
                image.src = reader.result;
            });
            reader.readAsDataURL(input.files[0]);
        });
        input.click();
    });

    tool.setEvent("deselect", function() {
        OWOP.windowSys.delWindow(optWin);
    });
}));