8x8 Pixel Art JavaScript library

This commit is contained in:
Computer construction kit SmartyKit 2021-01-28 22:50:09 +03:00 committed by GitHub
parent 45d32ed9c8
commit 89fca92161
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

117
index.js Normal file
View File

@ -0,0 +1,117 @@
let matrix = [];
let anim = "";
let hexOut = "";
function main() {
for (let i = 0; i < 8; i++) {
matrix[i] = [];
for (let j = 0; j < 8; j++) {
matrix[i][j] = 0;
document.getElementById(`cell_${i}-${j}`).onclick = cellOnClick;
}
}
document.getElementById("file").onchange = handleFileSelect;
document.getElementById("addFrame").onclick = handleFrameAdd;
document.getElementById("open").onclick = (e) => {
document.getElementById("file").click();
e.preventDefault();
};
updateOut();
}
function handleFileSelect(e) {
let file = e.target.files[0]; // FileList object
let reader = new FileReader();
reader.onload = (e) => {
processOpenedFile(e.target.result);
};
reader.readAsText(file);
}
function handleFrameAdd(e) {
anim += hexOut;
document.getElementById("anim").innerText = anim;
e.preventDefault();
}
function processOpenedFile(data) {
let pairs = [];
for(let i = 0; i < data.length; i += 2) {
pairs[pairs.length] = data.substr(i, 2);
}
for (let i = 0; i < 8; i++) {
let bits = "";
let n = parseInt(pairs[i], 16);
for (let i = 128; i >= 1; i /= 2) {
bits += n & i ? '1' : '0';
}
for (let z = 0; z < 8; z++) {
matrix[i][z] = parseInt(bits.charAt(z), 10);
}
}
updateOut(true);
}
function cellOnClick(e) {
let id = e.srcElement.id;
let cord = id.split("_")[1].split("-");
let x = cord[0];
let y = cord[1];
if (matrix[x][y] === 0) {
e.srcElement.classList.add("cell-active");
matrix[x][y] = 1;
} else {
e.srcElement.classList.remove("cell-active");
matrix[x][y] = 0;
}
updateOut();
}
function updateOut(redraw) {
let hexString = "";
hexOut = "";
for (let i = 0; i < 8; i++) {
let binString = "";
for (let j = 0; j < 8; j++) { //for (let j = 7; j >= 0; j--) {
binString += matrix[i][j];
if (redraw) {
let elem = document.getElementById(`cell_${i}-${j}`);
if (matrix[i][j] === 0) {
elem.classList.remove("cell-active");
} else {
elem.classList.add("cell-active");
}
}
}
let n = parseInt(binString, 2).toString(16).toUpperCase();
if (n.length === 1)
n = "0" + n;
document.getElementById(`hexLabel-${i}`).innerHTML = n;
document.getElementById(`binLabel-${i}`).innerHTML = binString;
hexString += n;
hexOut += n;
}
document.getElementById("download").href = `data:text/plain;charset=utf-8,%EF%BB%BF${encodeURIComponent(hexOut)}`;
document.getElementById("out").innerText = hexString;
}
main();