From 89fca921619d1db539992d6d8033e87c230fbe9b Mon Sep 17 00:00:00 2001 From: Computer construction kit SmartyKit <42343604+smartykit@users.noreply.github.com> Date: Thu, 28 Jan 2021 22:50:09 +0300 Subject: [PATCH] 8x8 Pixel Art JavaScript library --- index.js | 117 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 index.js diff --git a/index.js b/index.js new file mode 100644 index 0000000..d9e6e9d --- /dev/null +++ b/index.js @@ -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(); \ No newline at end of file