import { SixelReader, PixelsWriter } from 'sixel-decoder';
const images = {
map8: require('../images/map8.six'),
map16: require('../images/map16.six'),
snake: require('../images/snake.six'),
vimperator3: require('../images/vimperator3.six'),
};
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const buttonsContainer = document.createElement('div');
Object.keys(images).forEach(key => {
const button = document.createElement('button');
button.id = key;
button.textContent = key;
buttonsContainer.appendChild(button, canvas);
});
document.body.insertBefore(buttonsContainer, canvas);
document.body.addEventListener('click', e => {
if (!e.target.matches('button')) {
return;
}
const id = e.target.id;
const sixelString = images[id];
const decoder = new SixelReader();
decoder.setString(sixelString);
decoder.readConfig();
const { width, height } = decoder.size;
canvas.width = width;
canvas.height = height;
const pixels = new Uint8ClampedArray(width * height * 4);
const writer = new PixelsWriter(pixels, { width, height });
decoder.readSixels(writer.onSixel, writer.onCaretMove);
const imageData = new ImageData(pixels, width, height);
ctx.putImageData(imageData, 0, 0, 0, 0, width, height);
});
