index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>RLE sprite editor</title>
    <meta name="description" content="Editor and converter for Run Length Encoded sprites">
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#282828">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html, body { height: 100%; position: relative; overflow-x: hidden; }
        body { font-family: sans-serif; background: #282828; color: white; }
        * { margin: 0; padding: 0; box-sizing: border-box; font-size: 1rem; text-align: center; }
        canvas { image-rendering: pixelated; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQoU2N89+7dfwYkICgoiMxlYKSDgv///6O44f3796huoL0CAPpyKx1ry0n4AAAAAElFTkSuQmCC') repeat top left; }
        button { height: 3rem; padding: 0 1rem; vertical-align: middle; background: white; border: 0; border-radius: 1.5rem; min-width: 3rem; line-height: 3rem; cursor: pointer; }
        .block { display: block; margin: 1rem auto; }
        input:not([type="checkbox"]):not([type="file"]) { vertical-align: middle; background: white; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5); border: 0; border-radius: .25rem; height: 3rem; width: calc(100% - 2rem); max-width: 16rem; }
        input.small:not([type="checkbox"]):not([type="file"]) { max-width: 3rem; }
        input.medium:not([type="checkbox"]):not([type="file"]) { max-width: 8rem; }
        input:not([type="checkbox"]):not([type="file"]):disabled { background: #828282; }
        a { color: white; }
        .color-patch { display: inline-block; vertical-align: middle; width: 3rem; height: 3rem; line-height: 3rem; border: 1px white solid; border-radius: .25rem; cursor: pointer; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQoU2N89+7dfwYkICgoiMxlYKSDgv///6O44f3796huoL0CAPpyKx1ry0n4AAAAAElFTkSuQmCC') repeat top left; }
        .color-patch svg { width: 1rem; height: 1rem; margin: 1rem; filter: drop-shadow( 0px 0px 2px rgba(255, 255, 255, 1)); }
    </style>
</head>
<body>
<canvas id="canvas" class="block"></canvas>
<div class="block">
    <input type="text" id="frameInput" title="Current frame string">
</div>
<div class="block">
    <button title="Play animation" onclick="playing = true;">&rtrif;</button>
    <button title="Pause animation" onclick="playing = false;">&FilledSmallSquare;</button>
    <button title="Previous frame" onclick="playing = false; data.currentFrame = (data.currentFrame - 1 + data.frames.split('|').length) % data.frames.split('|').length;">&laquo;</button>
    <button title="Next frame" onclick="playing = false; data.currentFrame = (data.currentFrame + 1) % data.frames.split('|').length;">&raquo;</button>
</div>
<div class="block">
    <button onclick="flipHorizontal()" title="Flip horizontal">&harr;</button>
    <button onclick="flipVertical()" title="Flip vertical">&varr;</button>
    <button onclick="rotateCW()" title="Rotate 90° CW">&orarr;</button>
    <button onclick="rotateCCW()" title="Rotate 90° CCW">&olarr;</button>
</div>
<div class="block">
    <button onclick="removeFrame()" title="Delete frame">&xotime;</button>
    <button onclick="addFrame()" title="Duplicate frame">&xoplus;</button>
    <button onclick="moveFrameUp()" title="Move frame up">&uarr;</button>
    <button onclick="moveFrameDown()" title="Move frame down">&darr;</button>
</div>
<canvas id="spritesheet" class="block"></canvas>
<div class="block">
    <input type="number" class="small" inputmode="numeric" pattern="[0-9]*" name="frameWidth" title="Frame width">
    <input type="number" class="small" inputmode="numeric" pattern="[0-9]*" name="frameHeight" title="Frame height">
    <input type="number" class="small" inputmode="numeric" pattern="[0-9]*" name="nFramesWide" title="Horizontal number of frames in spritesheet">
    <input type="number" class="small" inputmode="numeric" pattern="[0-9]*" name="fps" title="Frames per second">
</div>
<div class="block">
    <div class="color-patch" onclick="data.pendingColorKey = undefined;"></div>
    <input type="text" maxlength="1" class="small" title="Transparent key" name="transparentKey" onfocus="data.pendingColorKey = undefined;">
    <input type="text" class="medium" value="transparent" title="Transparent color" disabled>
    <button onclick="addColorBlock()" title="Add color">&xoplus;</button>
</div>
<div id="colorBlocks">
</div>
<div class="block">
    <button onclick="window.location.hash = btoa(JSON.stringify(data)); copyStringToClipboard(window.location, this);">share</button>
    <button onclick="copyStringToClipboard(data.frames, this)">string</button>
    <button onclick="copyStringToClipboard(getCode(), this)">code</button>
    <a href="#" id="exportButton" download="spritesheet.png"><button>sheet</button></a>
</div>
<div class="block">
    <input type="file" onchange="handleFile(this)">
</div>
<div class="block">
    <label><input type="checkbox" onchange="autoSave = this.checked;" class="autosave"> <span>autosave</span></label>
</div>
<div class="block">
    <a href="https://github.com/Quinten/RLE-sprite-editor" target="_blank" rel="noopener">read me</a>
</div>
<script>

let getColorBlock = (key, color) => `
    <div class="block">
        <div class="color-patch" style="background: ${color}" onclick='data.pendingColorKey = this.parentElement.querySelector("[title=\\"Key\\"]").value;'></div>
        <input type="text" maxlength="1" class="small" title="Key" onfocus="data.pendingColorKey = this.value;" onblur="updateColorKey(this)" value="${key}">
        <input type="text" class="medium" title="Color" onblur="updateColor(this)"  value="${color}">
        <button onclick="removeColor(this)" title="Delete color">&xotime;</button>
    </div>`;

let getCode = _ => `(_ => {
let frameWidth = ${frameWidth};
let frameHeight = ${frameHeight};
let frames = "${data.frames}";
let palette = ${JSON.stringify(data.colors)};
let fps = ${data.fps};
let currentFrame = 0;
let timer = 0;
let canvas = document.createElement('canvas');
canvas.width = frameWidth;
canvas.height = frameHeight;
document.body.appendChild(canvas);
let ctx = canvas.getContext('2d');
let onF = time => {
    if (timer < time - 1000 / fps) {
        timer = time;
        currentFrame = (currentFrame + 1) % (frames.split('|').length);
    }
    ctx.clearRect(0, 0, frameWidth, frameHeight);
    let frameData = frames.split('|')[currentFrame];
    frameData = frameData.replace(/(\\D)(\\d+)/g, (_, char, count) => char.repeat(count));
    [...frameData].forEach((c, i) => {
        let color = palette[c];
        if (color === undefined) {
            return;
        }
        let x = i % frameWidth;
        let y = Math.floor(i / frameWidth);
        ctx.fillStyle = color;
        ctx.fillRect(x, y, 1, 1);
    });
    requestAnimationFrame(onF);
};
onF();
})();
`;

let playing = false;
let mask = true;
spritesheet.addEventListener('contextmenu', e => {
    mask = false;
});

let seed = "eyJmcmFtZXMiOiIkMkE0JDRBNCQ0QTQkNEE0fCQxMEE0JDRBNCQ0QTQkNEE0fCQxOEE0JDRBNCQ0QTQkNEE0fCQyNkE0JDRBNCQ0QTQkNEE0fCQzNEE0JDRBNCQ0QTQkNEE0IiwiZnBzIjoxMiwiZnJhbWVXaWR0aCI6OCwiZnJhbWVIZWlnaHQiOjgsImN1cnJlbnRGcmFtZSI6MCwibkZyYW1lc1dpZGUiOjUsInRyYW5zcGFyZW50S2V5IjoiJCIsImNvbG9ycyI6eyJBIjoiIzc4Nzg3OCJ9fQ==";

let autoSave = true;

let startData = JSON.parse(atob(seed));
let savedData = localStorage.getItem('RLE-sprite-editor-savefile');
if (savedData !== null) {
    startData = JSON.parse(atob(savedData));
}

if (window.location.hash !== "") {
    let hashSeed = window.location.hash.slice(1);
    try {
        startData = JSON.parse(atob(hashSeed));
        autoSave = false;
    } catch (err) {
    }
}

document.querySelector('.autosave').checked = autoSave;

let {
    frameWidth,
    frameHeight,
    currentFrame,
    nFramesWide,
    transparentKey,
    aniStart = 0,
    aniEnd = startData.frames.split('|').length - 1,
    pendingColorKey = undefined,
    drawMode = 0
} = startData;

let data = {
    frames: startData.frames,
    colors: startData.colors,
    fps: startData.fps,
    get pendingColorKey() {
        return pendingColorKey;
    },
    set pendingColorKey(v) {
        if (pendingColorKey === v) {
            data.drawMode = (data.drawMode + 1) % 2;
        } else {
            data.drawMode = 0;
        }
        pendingColorKey = v;
        document.querySelectorAll('.color-patch').forEach(patch => {
            patch.innerHTML = '';
        });
        let input = document.querySelector('[value="transparent"]');
        if (pendingColorKey !== undefined) {
            input = document.querySelector('[value="' + pendingColorKey + '"]');
            if (input === null) {
                input = document.querySelector('[value="transparent"]');
            }
        }
        let icons = [
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"/></svg>',
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M512 320s-64 92.65-64 128c0 35.35 28.66 64 64 64s64-28.65 64-64-64-128-64-128zm-9.37-102.94L294.94 9.37C288.69 3.12 280.5 0 272.31 0s-16.38 3.12-22.62 9.37l-81.58 81.58L81.93 4.76c-6.25-6.25-16.38-6.25-22.62 0L36.69 27.38c-6.24 6.25-6.24 16.38 0 22.62l86.19 86.18-94.76 94.76c-37.49 37.48-37.49 98.26 0 135.75l117.19 117.19c18.74 18.74 43.31 28.12 67.87 28.12 24.57 0 49.13-9.37 67.87-28.12l221.57-221.57c12.5-12.5 12.5-32.75.01-45.25zm-116.22 70.97H65.93c1.36-3.84 3.57-7.98 7.43-11.83l13.15-13.15 81.61-81.61 58.6 58.6c12.49 12.49 32.75 12.49 45.24 0s12.49-32.75 0-45.24l-58.6-58.6 58.95-58.95 162.44 162.44-48.34 48.34z"/></svg>'
        ];
        input.parentElement.querySelector('.color-patch').innerHTML = icons[data.drawMode];
    },
    get drawMode() {
        return drawMode;
    },
    set drawMode(v) {
        drawMode = v;
    },
    get aniStart() {
        return aniStart;
    },
    set aniStart(v) {
        aniStart = v;
    },
    get aniEnd() {
        return aniEnd;
    },
    set aniEnd(v) {
        aniEnd = v;
    },
    get frameWidth() {
        return frameWidth;
    },
    set frameWidth (v) {
        let delta = v - frameWidth;
        if (delta > 0) {
            let pad = '';
            while (pad.length < delta) {
                pad = pad + transparentKey;
            }
            data.frames = encodedFrames(data.frames.split('|').map(f => decodedFrames(f).split('').map((char, index) => (index % frameWidth === frameWidth - 1) ? char + pad : char).join('')).join('|'));
            this.currentFrame = this.currentFrame;
        } else if ( delta < 0) {
            data.frames = encodedFrames(data.frames.split('|').map(f => decodedFrames(f).split('').map((char, index) => (index % frameWidth >= v) ? '' : char).join('')).join('|'));
            this.currentFrame = this.currentFrame;
        }
        frameWidth = v;
        onR();
    },
    get frameHeight() {
        return frameHeight;
    },
    set frameHeight(v) {
        frameHeight = v;
        onR();
    },
    get currentFrame() {
        return currentFrame;
    },
    set currentFrame(v) {
        currentFrame = v;
        frameInput.value = this.frames.split('|')[v];
        if (!playing) {
            mask = true;
        }
    },
    get nFramesWide() {
        return nFramesWide;
    },
    set nFramesWide (v) {
        nFramesWide = v;
        document.querySelector('[name="nFramesWide"').value = nFramesWide;
        onR();
    },
    get transparentKey() {
        return transparentKey;
    },
    set transparentKey (v) {
        this.frames = this.frames.split(transparentKey).join(v);
        transparentKey = v;
        this.currentFrame = this.currentFrame;
    }
};

data.currentFrame = 0;

let decodedFrames = str => str.replace(/(\D)(\d+)/g, (_, char, count) => char.repeat(count));
let encodedFrames = str => str.split('').reduce((acc, char) => {
    if (char === '|') {
        return acc + char;
    }
    if (acc.length === 1) {
        acc = acc + '1';
    }
    if (char === acc.replace(/\d*$/, '').slice(-1)) {
        return acc.replace(/\d*$/, oldNumber => Number(oldNumber) + 1);
    }
    return acc + char + '1';
});

let removeDoubles = _ => data.frames = encodedFrames(decodedFrames(data.frames));

Object.keys(data.colors).forEach(key => {
    colorBlocks.innerHTML = colorBlocks.innerHTML + getColorBlock(key, data.colors[key]);
});

data.pendingColorKey = pendingColorKey;

let addColorBlock = _ => {
    let num = 65;
    let key = String.fromCharCode(num);
    while (key === transparentKey || Object.keys(data.colors).indexOf(key) > -1) {
        num = num + 1;
        key = String.fromCharCode(num);
    }
    data.colors[key] = '#000000';
    colorBlocks.innerHTML = colorBlocks.innerHTML + getColorBlock(key, data.colors[key]);
};

let removeColor = el => {
    let block = el.parentElement;
    let key = block.querySelector('[title="Key"]').value;
    data.frames = data.frames.split(key).join(transparentKey);
    removeDoubles();
    data.currentFrame = data.currentFrame;
    delete data.colors[key];
    block.remove();
};

let updateColorKey = el => {
    if (pendingColorKey === undefined) {
        return;
    }
    let color = data.colors[pendingColorKey];
    delete data.colors[pendingColorKey];
    data.colors[el.value] = color;
    data.frames = data.frames.split(pendingColorKey).join(el.value);
    data.currentFrame = data.currentFrame;
};

let updateColor = el => {
    let block = el.parentElement;
    let key = block.querySelector('[title="Key"]').value;
    data.colors[key] = el.value;
    block.querySelector('.color-patch').style.background = el.value;
    data.pendingColorKey = key;
};

Object.keys(data).forEach(key => {
    let input = document.querySelector('[name="' + key + '"');
    if (input === null) {
        return;
    }
    input.value = data[key];
    input.addEventListener('blur', e => {
        if (input.type === 'number') {
            data[key] = Number(input.value);
        } else {
            data[key] = input.value;
        }
    });
});

frameInput.addEventListener('keyup', e => {
    let frames = data.frames.split('|');
    let values = frameInput.value.split('|');
    frames.splice(currentFrame, 1, ...values);
    data.frames = frames.join('|');
    onR();
    data.currentFrame = currentFrame;
});

let removeFrame = _ => {
    let frames = data.frames.split('|');
    if (frames.length === data.nFramesWide) {
        data.nFramesWide = data.nFramesWide - 1 || 1;
    }
    frames.splice(currentFrame, 1);
    data.frames = frames.join('|');
    data.currentFrame = (currentFrame % frames.length) || 0;
    onR();
};

let addFrame = _ => {
    let frames = data.frames.split('|');
    if (frames.length === data.nFramesWide) {
        data.nFramesWide = data.nFramesWide + 1;
    }
    let newFrame = frames[currentFrame];
    frames.splice(currentFrame, 0, newFrame);
    data.frames = frames.join('|');
    data.currentFrame = currentFrame + 1;
    onR();
};

let moveFrameUp = _ => {
    let frames = data.frames.split('|');
    let newFrame = frames[currentFrame];
    frames.splice(currentFrame, 1);
    data.currentFrame = (currentFrame + 1) % (frames.length + 1);
    frames.splice(currentFrame, 0, newFrame);
    data.frames = frames.join('|');
};

let moveFrameDown = _ => {
    let frames = data.frames.split('|');
    let newFrame = frames[currentFrame];
    frames.splice(currentFrame, 1);
    data.currentFrame = (currentFrame + frames.length) % (frames.length + 1);
    frames.splice(currentFrame, 0, newFrame);
    data.frames = frames.join('|');
};

let flipHorizontal = _ => {
    let frames = data.frames.split('|');
    let newFrame = frames[currentFrame];
    newFrame = decodedFrames(newFrame);
    if (newFrame.length < frameWidth * frameHeight) {
        newFrame = newFrame + transparentKey.repeat(frameWidth * frameHeight - newFrame.length);
    } else if (newFrame.length > frameWidth * frameHeight) {
        newFrame = newFrame.substr(0, frameWidth * frameHeight);
    }
    newFrame = newFrame.match(new RegExp(`.{1,${frameWidth}}`, 'g'));
    newFrame = newFrame.map(line => line.split('').reverse().join(''));
    newFrame = newFrame.join('');
    newFrame = encodedFrames(newFrame);
    frames.splice(currentFrame, 1, newFrame);
    data.frames = frames.join('|');
    data.currentFrame = currentFrame;
};

let flipVertical = _ => {
    let frames = data.frames.split('|');
    let newFrame = frames[currentFrame];
    newFrame = decodedFrames(newFrame);
    if (newFrame.length < frameWidth * frameHeight) {
        newFrame = newFrame + transparentKey.repeat(frameWidth * frameHeight - newFrame.length);
    } else if (newFrame.length > frameWidth * frameHeight) {
        newFrame = newFrame.substr(0, frameWidth * frameHeight);
    }
    newFrame = newFrame.match(new RegExp(`.{1,${frameWidth}}`, 'g'));
    newFrame = newFrame.reverse();
    newFrame = newFrame.join('');
    newFrame = encodedFrames(newFrame);
    frames.splice(currentFrame, 1, newFrame);
    data.frames = frames.join('|');
    data.currentFrame = currentFrame;
};

let rotateCW = _ => {
    let frames = data.frames.split('|');
    let newFrame = frames[currentFrame];
    newFrame = decodedFrames(newFrame);
    if (newFrame.length < frameWidth * frameHeight) {
        newFrame = newFrame + transparentKey.repeat(frameWidth * frameHeight - newFrame.length);
    } else if (newFrame.length > frameWidth * frameHeight) {
        newFrame = newFrame.substr(0, frameWidth * frameHeight);
    }
    newFrame = newFrame.match(new RegExp(`.{1,${frameWidth}}`, 'g'));
    newFrame = newFrame.reverse();
    newFrame = newFrame.map((line, index) => newFrame.reduce((result, line) => result + line[index], ''));
    newFrame = newFrame.map(line => line + ((line.length < frameWidth) ? transparentKey.repeat(frameWidth - line.length) : ''));
    newFrame = newFrame.join('');
    newFrame = encodedFrames(newFrame);
    frames.splice(currentFrame, 1, newFrame);
    data.frames = frames.join('|');
    data.currentFrame = currentFrame;
};

let rotateCCW = _ => {
    let frames = data.frames.split('|');
    let newFrame = frames[currentFrame];
    newFrame = decodedFrames(newFrame);
    if (newFrame.length < frameWidth * frameHeight) {
        newFrame = newFrame + transparentKey.repeat(frameWidth * frameHeight - newFrame.length);
    } else if (newFrame.length > frameWidth * frameHeight) {
        newFrame = newFrame.substr(0, frameWidth * frameHeight);
    }
    newFrame = newFrame.match(new RegExp(`.{1,${frameWidth}}`, 'g'));
    newFrame = newFrame.map(line => line.split('').reverse().join(''));
    newFrame = newFrame.map((line, index) => newFrame.reduce((result, line) => result + line[index], ''));
    newFrame = newFrame.map(line => line + ((line.length < frameWidth) ? transparentKey.repeat(frameWidth - line.length) : ''));
    newFrame = newFrame.join('');
    newFrame = encodedFrames(newFrame);
    frames.splice(currentFrame, 1, newFrame);
    data.frames = frames.join('|');
    data.currentFrame = currentFrame;
};

// the 2d drawing api
let ctx = canvas.getContext('2d');
//console.log(ctx);
let ctxSheet = spritesheet.getContext('2d');

// resize canvas with window
let wWidth = window.innerWidth;
let wHeight = window.innerHeight;
let resizeTOID = 0;
let onR = e => {
    clearTimeout(resizeTOID);
    resizeTOID = setTimeout(_ => {
        canvas.width = frameWidth;
        canvas.height = frameHeight;
        //let w = Math.min(Math.floor(wWidth / frameWidth), 32) * frameWidth;
        let w = Math.min(wWidth - 40, wHeight / frameHeight * frameWidth - 40);
        let h = w / frameWidth * frameHeight;
        canvas.style.width = w + 'px';
        canvas.style.height = h + 'px';
        spritesheet.width = frameWidth * nFramesWide;
        spritesheet.height = frameHeight * Math.ceil(data.frames.split('|').length / nFramesWide);
        w = Math.min(Math.floor(wWidth / spritesheet.width), 4) * spritesheet.width;
        h = w / frameWidth / nFramesWide * frameHeight * Math.ceil(data.frames.split('|').length / nFramesWide);
        spritesheet.style.width = w + 'px';
        spritesheet.style.height = h + 'px';
    }, 40);
};
onR();
window.addEventListener('resize', function () {
    wWidth = window.innerWidth;
    wHeight = window.innerHeight;
    onR();
});

// animation loop
let timer = 0;
let onF = time => {

    if (timer < time - 1000 / data.fps) {
        timer = time;
        if (playing) {
            data.currentFrame = data.currentFrame + 1;
            if (data.currentFrame > aniEnd) {
                data.currentFrame = aniStart;
            }
        }
    }

    // clear canvas
    ctx.clearRect(0, 0, frameWidth, frameHeight);

    // draw stuff
    let frameData = data.frames.split('|')[currentFrame];
    if (frameData !== undefined) {
        frameData = frameData.replace(/(\D)(\d+)/g, (_, char, count) => char.repeat(count));
        [...frameData].forEach((c, i) => {
            let color = data.colors[c];
            if (color === undefined) {
                return;
            }
            let x = i % data.frameWidth;
            let y = Math.floor(i / data.frameWidth);
            ctx.fillStyle = color;
            ctx.fillRect(x, y, 1, 1);
        });
    }

    // clear spritesheet
    ctxSheet.clearRect(0, 0, spritesheet.width, spritesheet.height);

    // draw spritesheet
    data.frames.split('|').forEach((fData, offset) => {
        ctxSheet.save();
        ctxSheet.translate((offset % data.nFramesWide) * data.frameWidth, Math.floor(offset / data.nFramesWide) * frameHeight);
        frameData = fData.replace(/(\D)(\d+)/g, (_, char, count) => char.repeat(count));
        [...frameData].forEach((c, i) => {
            let color = data.colors[c];
            if (color === undefined) {
                return;
            }
            let x = i % data.frameWidth;
            let y = Math.floor(i / data.frameWidth);
            ctxSheet.fillStyle = color;
            ctxSheet.fillRect(x, y, 1, 1);
        });
        ctxSheet.restore();
    });

    exportButton.setAttribute('href', spritesheet.toDataURL());

    // indicate frames included in animation
    if (mask === true) {
        let offset = 0;
        while (offset < Math.ceil(data.frames.split('|').length / nFramesWide) * nFramesWide) {
            ctxSheet.save();
            ctxSheet.translate((offset % data.nFramesWide) * data.frameWidth, Math.floor(offset / data.nFramesWide) * frameHeight);
            if (offset === currentFrame) {
                // nothing
            } else if (offset >= aniStart && offset <= aniEnd) {
                ctxSheet.fillStyle = 'rgba(0, 0, 0, .15)';
                ctxSheet.fillRect(0, 0, frameWidth, frameHeight);
            } else {
                ctxSheet.fillStyle = 'rgba(0, 0, 0, .35)';
                ctxSheet.fillRect(0, 0, frameWidth, frameHeight);
            }
            ctxSheet.restore();
            offset = offset + 1;
        }
    }

    if (autoSave) {
        localStorage.setItem('RLE-sprite-editor-savefile', btoa(JSON.stringify(data)));
    }

    // request next frame
    requestAnimationFrame(onF);
};
setTimeout(onF, 50, 0);

// register service worker for PWA
if ('serviceWorker' in navigator) {
    window.addEventListener('load', e => {
        navigator.serviceWorker.register('./sw.js').then(registration => {
            //console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, err => {
            //console.log('ServiceWorker registration failed: ', err);
        });
    });
}

let copyStringToClipboard = (str, target) => {
   let oldHtml = target.innerHTML;
   target.innerHTML = 'Copied!';
   let el = document.createElement('textarea');
   el.value = str;
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   el.select();
   document.execCommand('copy');
   document.body.removeChild(el);
   setTimeout(_ => {
        target.innerHTML = oldHtml;
   }, 750);
}

let handleFile = el => {
    let file = el.files[0];
    let fileReader = new FileReader();
    fileReader.addEventListener('load', _ => {
        let src = fileReader.result;
        let img = new Image();
        img.addEventListener('load', _ => {
            let nFramesW = Math.floor(img.width / frameWidth);
            let nFramesH = Math.floor(img.height / frameHeight);
            let nFrames = nFramesW * nFramesH;
            let frames = [];
            let colors = {};
            let num = 64;
            let tmpCanvas = document.createElement('canvas');
            let tmpCtx = tmpCanvas.getContext('2d');
            tmpCanvas.width = frameWidth;
            tmpCanvas.height = frameHeight;
            while(frames.length < nFrames) {
                let frame = '';
                let i = frames.length;
                let sx = i % nFramesW * frameWidth;
                let sy = Math.floor(i / nFramesW) * frameHeight;
                tmpCtx.clearRect(0, 0, frameWidth, frameHeight);
                tmpCtx.drawImage(img, sx, sy, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
                while (frame.length < frameWidth * frameHeight) {
                    let px = frame.length % frameWidth;
                    let py = Math.floor(frame.length / frameWidth);
                    let [r, g, b, a] = tmpCtx.getImageData(px, py, 1, 1).data;
                    let color = '';
                    if (a === 0) {
                        color = 'transparent';
                    } else if (a === 255) {
                        color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
                    } else {
                        color = `rgba(${r}, ${g}, ${b}, ${a/255})`;
                    }
                    let key = transparentKey;
                    if (color !== 'transparent') {
                        if (Object.keys(colors).map(c => colors[c]).indexOf(color) === -1) {
                            while (key === transparentKey) {
                                num = num + 1;
                                key = String.fromCharCode(num);
                                colors[key] = color;
                            }
                        } else {
                            key = Object.keys(colors).reduce((acc, k) => (colors[k] === color) ? k : acc);
                        }
                    }
                    frame = frame + key;
                }
                frames.push(encodedFrames(frame));
            }
            data.colors = colors;
            colorBlocks.innerHTML = '';
            Object.keys(data.colors).forEach(key => {
                colorBlocks.innerHTML = colorBlocks.innerHTML + getColorBlock(key, data.colors[key]);
            });
            data.frames = frames.join('|');
            data.currentFrame = data.currentFrame;
            data.nFramesWide = nFramesW;
        });
        img.src = src;
    }, false);
    fileReader.readAsDataURL(file);
};

let nSpritsheetClicks = 0;
spritesheet.addEventListener('mousedown', e => {

    nSpritsheetClicks = nSpritsheetClicks + 1;

    let viewportOffset = spritesheet.getBoundingClientRect();
    let left = viewportOffset.left;
    let top = viewportOffset.top;

    let pointerX = (e.clientX - left) / Number(spritesheet.style.width.replace('px', ''));
    let pointerY = (e.clientY - top) /  Number(spritesheet.style.height.replace('px', ''));

    let gridX = Math.floor(pointerX * nFramesWide);
    let gridY = Math.floor(pointerY * Math.ceil(data.frames.split('|').length / nFramesWide));

    let f = gridY * nFramesWide + gridX;

    if (nSpritsheetClicks % 2) {
        data.currentFrame = f;
        data.aniStart = f;
        data.aniEnd = f;
    } else {
        if (f < data.aniStart) {
            data.aniEnd = data.aniStart;
            data.currentFrame = f;
            data.aniStart = f;
        } else {
            data.aniEnd = f;
            data.currentFrame = f;
        }
    }
});

canvas.addEventListener('mousedown', e => {

    let viewportOffset = canvas.getBoundingClientRect();
    let left = viewportOffset.left;
    let top = viewportOffset.top;

    let pointerX = (e.clientX - left) / Number(canvas.style.width.replace('px', ''));
    let pointerY = (e.clientY - top) /  Number(canvas.style.height.replace('px', ''));

    let gridX = Math.floor(pointerX * frameWidth);
    let gridY = Math.floor(pointerY * frameHeight);

    let f = gridY * frameWidth + gridX;

    let key = pendingColorKey || transparentKey;

    let frames = data.frames.split('|');
    let frame = decodedFrames(frames[currentFrame]);
    let pixels = [];
    let drawModes = [
        () => {
            while (frame.length < f) {
                frame = frame + transparentKey;
            }
            pixels = [...frame];
            pixels.splice(f, 1, key);
        },
        () => {
            while (frame.length < frameWidth * frameHeight) {
                frame = frame + transparentKey;
            }
            pixels = [...frame];
            let matches = [];
            let checkConnection = (index, color) => {
                if (
                    pixels[index] === undefined ||
                    pixels[index] !== color ||
                    matches.indexOf(index) > -1
                ) {
                    return;
                }
                matches.push(index);
                checkConnection(index - frameWidth, color),
                checkConnection(index + frameWidth, color);
                if (index % frameWidth !== 0) {
                    checkConnection(index - 1, color);
                }
                if (index % frameWidth !== frameWidth - 1) {
                    checkConnection(index + 1, color);
                }
            };
            checkConnection(
                f,
                pixels[f]
            );
            matches.forEach(toRPL => {
                pixels[toRPL] = key;
            });
        }
    ];
    drawModes[data.drawMode]();

    frame = encodedFrames(pixels.join(''));
    frames.splice(currentFrame, 1, frame);
    data.frames = frames.join('|');
    onR();
    data.currentFrame = currentFrame;
});

</script>
</body>
</html>