You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.9 KiB
107 lines
3.9 KiB
const WIDTH = 48;
|
|
const HEIGHT = 24;
|
|
|
|
// State
|
|
let brushColor = '';
|
|
let mouseDown = false;
|
|
document.body.addEventListener('mouseup', () => mouseDown = false);
|
|
document.body.addEventListener('mouseenter', () => mouseDown = false);
|
|
|
|
// Container
|
|
const container = document.createElement('div');
|
|
container.className = 'container';
|
|
container.style.width = `${WIDTH * 16}px`;
|
|
|
|
// Canvas
|
|
const canvas = document.createElement('div');
|
|
canvas.className = 'canvas';
|
|
canvas.addEventListener('mousedown', () => mouseDown = true);
|
|
const pixels = [];
|
|
for(let y = 0; y < HEIGHT; y++) {
|
|
const pxRow = [];
|
|
const row = document.createElement('div');
|
|
row.className = 'row';
|
|
for(let x = 0; x < WIDTH; x++) {
|
|
const pixel = document.createElement('div');
|
|
pixel.className = 'pixel';
|
|
pixel.addEventListener('click', () => pixel.style.backgroundColor = brushColor);
|
|
pixel.addEventListener('mouseover', () => {
|
|
if(!mouseDown) return;
|
|
pixel.style.backgroundColor = brushColor;
|
|
});
|
|
row.appendChild(pixel);
|
|
pxRow.push(pixel);
|
|
}
|
|
canvas.appendChild(row);
|
|
pixels.push(pxRow);
|
|
}
|
|
container.appendChild(canvas);
|
|
|
|
// Palette
|
|
const colors = ['#b23232', '#ff4848', '#ff6c6c', '#e59b40', '#ffad48', '#ffc57e', '#e5de40', '#fff748', '#fffa91', '#39cc4b', '#48ff5e', '#91ff9e', '#3248b2', '#4867ff', '#91a3ff', '#6432b2', '#8f48ff', '#bb91ff', '#7c2b99', '#cf48ff', '#e291ff', '#000000', '#323232', '#666666', '#999999', '#cccccc', '#ffffff', '#3a2119', '#512e23', '#754233', '#90675b', '#ac8d84'];
|
|
const palette = document.createElement('div');
|
|
palette.className = 'palette';
|
|
for(let color of colors) {
|
|
const swatch = document.createElement('div');
|
|
swatch.className = 'swatch';
|
|
swatch.style.backgroundColor = color;
|
|
swatch.addEventListener('click', () => {
|
|
brushColor = color;
|
|
title.style.backgroundColor = color;
|
|
});
|
|
palette.appendChild(swatch);
|
|
}
|
|
const title = document.createElement('h2');
|
|
title.innerText = 'BRUSH COLOR';
|
|
palette.appendChild(title);
|
|
container.appendChild(palette);
|
|
|
|
// File reader
|
|
/*
|
|
<input type='file' id='fileinput'>
|
|
<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
|
|
*/
|
|
const fileDiv = document.createElement('div');
|
|
const fileInput = document.createElement('input');
|
|
fileInput.setAttribute('type', 'file');
|
|
fileDiv.appendChild(fileInput);
|
|
const btnLoad = document.createElement('input');
|
|
btnLoad.setAttribute('type', 'button');
|
|
btnLoad.setAttribute('value', 'Load');
|
|
btnLoad.addEventListener('click', () => {
|
|
const reader = new FileReader();
|
|
reader.addEventListener('load', () => {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.setAttribute('visibility', 'hidden');
|
|
canvas.width = img.width;
|
|
canvas.height = img.height;
|
|
document.body.appendChild(canvas);
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.drawImage(img, 0, 0, img.width, img.height);
|
|
for(let y = 0; y < img.height / 16; y++) {
|
|
for(let x = 0; x < img.width / 16; x++) {
|
|
const p = ctx.getImageData(x * 16 + 8, y * 16 + 8, 1, 1).data;
|
|
const hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
|
|
if(y >= pixels.length) continue;
|
|
if(x >= pixels[y].length) continue;
|
|
pixels[y][x].style.backgroundColor = hex;
|
|
}
|
|
}
|
|
document.body.removeChild(canvas);
|
|
};
|
|
img.src = reader.result;
|
|
}, false);
|
|
reader.readAsDataURL(fileInput.files[0]);
|
|
});
|
|
fileDiv.appendChild(btnLoad);
|
|
|
|
function rgbToHex(r, g, b) {
|
|
if (r > 255 || g > 255 || b > 255)
|
|
throw "Invalid color component";
|
|
return ((r << 16) | (g << 8) | b).toString(16);
|
|
}
|
|
|
|
document.body.appendChild(container);
|
|
document.body.appendChild(fileDiv);
|
|
|