From 9050f74b02b19679619e90905912ede74d55a252 Mon Sep 17 00:00:00 2001 From: Legonzaur <34353603+Legonzaur@users.noreply.github.com> Date: Fri, 26 Jun 2020 23:01:26 +0200 Subject: [PATCH] Adding help and organizing code --- css/style.css | 12 ++++- index.html | 3 +- js/download.js | 32 ------------- js/functions.js | 123 ++++++++++++++++++++++++++++++++++++++++++++++++ js/script.js | 80 +++++++------------------------ 5 files changed, 154 insertions(+), 96 deletions(-) delete mode 100644 js/download.js create mode 100644 js/functions.js diff --git a/css/style.css b/css/style.css index e76cff5..7890f09 100644 --- a/css/style.css +++ b/css/style.css @@ -1,4 +1,6 @@ -* { +body, +html, +#content { margin: 0; padding: 0; width: 100%; @@ -17,3 +19,11 @@ white-space: nowrap; /* Thanks to Herb Caudill comment */ top: 0; } +#help { + z-index: 1; + position: fixed; + padding: 10px; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.1); +} diff --git a/index.html b/index.html index 3ec6166..b418aac 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,8 @@
a
- +
+ diff --git a/js/download.js b/js/download.js deleted file mode 100644 index d49214f..0000000 --- a/js/download.js +++ /dev/null @@ -1,32 +0,0 @@ -function download(filename, text) { - var element = document.createElement("a"); - element.setAttribute( - "href", - "data:text/plain;charset=utf-8," + encodeURIComponent(text) - ); - element.setAttribute("download", filename); - - element.style.display = "none"; - document.body.appendChild(element); - - element.click(); - - document.body.removeChild(element); -} -function upload() { - return new Promise(function (resolve, reject) { - var element = document.createElement("input"); - element.setAttribute("type", "file"); - element.setAttribute("accept", ".txt"); - - element.style.display = "none"; - document.body.appendChild(element); - - element.addEventListener("input", async function (e) { - text = await element.files[0].text(); - resolve(text); - document.body.removeChild(element); - }); - element.click(); - }); -} diff --git a/js/functions.js b/js/functions.js new file mode 100644 index 0000000..839c375 --- /dev/null +++ b/js/functions.js @@ -0,0 +1,123 @@ +const help = document.getElementById("help"); + +const shiftMessage = "SHIFT + Lclick : Draw Line"; +const ctrlMessage = + "CTRL + Lclick : Fill (does not checks diagonals)\nCTRL + Z : Go back\nCTRL + Y : Go Forth (only available if you gone back)\nCTRL + S : Save current image into a reusable txt file\nCTRL + O : Open previously saved image"; +const ctrlShiftMessage = ""; +const idleMessage = + "F1 : Toggle help\nAny character : Change pencil\nCTRL+\nSHIFT+"; + +help.innerText = idleMessage; +/** + * Prompts the user to save a file + * @param {string} filename Name of the file you want to save + * @param {*} text Data you want to save + */ +function download(filename, text) { + var element = document.createElement("a"); + element.setAttribute( + "href", + "data:text/plain;charset=utf-8," + encodeURIComponent(text) + ); + element.setAttribute("download", filename); + + element.style.display = "none"; + document.body.appendChild(element); + + element.click(); + + document.body.removeChild(element); +} + +/** + * Returns the content of a file uploaded by the user + */ +function upload() { + return new Promise(function (resolve, reject) { + var element = document.createElement("input"); + element.setAttribute("type", "file"); + element.setAttribute("accept", ".txt"); + + element.style.display = "none"; + document.body.appendChild(element); + + element.addEventListener("input", async function (e) { + text = await element.files[0].text(); + resolve(text); + document.body.removeChild(element); + }); + element.click(); + }); +} + +const ctrlHandler = { + z: function (e) { + let backwards = drawHistory.backwards(); + drawGrid = backwards ? backwards : drawGrid; + render(); + }, + y: function (e) { + let forwards = drawHistory.forwards(); + drawGrid = forwards ? forwards : drawGrid; + render(); + }, + s: function (e) { + e.preventDefault(); + download("ascii.txt", JSON.stringify(drawGrid)); + }, + o: async function (e) { + e.preventDefault(); + text = await upload(); + drawGrid = JSON.parse(text); + render(); + }, +}; + +const drawHistory = { + __forwardData: [], + __backwardData: [], + get forwardData() { + return this.__forwardData; + }, + get backwardData() { + return this.__backwardData; + }, + set forwardData(value) { + this.__forwardData = value; + }, + set backwardData(value) { + this.__backwardData = value; + }, + forwards: function () { + if (this.forwardData[0]) { + this.backwardData.unshift(JSON.stringify(drawGrid)); + return JSON.parse(this.forwardData.shift()); + } + }, + backwards: function () { + if (this.backwardData[0]) { + this.forwardData.unshift(JSON.stringify(drawGrid)); + return JSON.parse(this.backwardData.shift()); + } + }, +}; + +/** + * + * @param {event} e keyboard or mouse event + */ +function showHelp(e) { + if (e.ctrlKey && e.shiftKey) { + help.innerText = ctrlShiftMessage; + return; + } + if (e.ctrlKey) { + help.innerText = ctrlMessage; + return; + } + if (e.shiftKey) { + help.innerText = shiftMessage; + return; + } + help.innerText = idleMessage; +} diff --git a/js/script.js b/js/script.js index 5a84c60..068d5bc 100644 --- a/js/script.js +++ b/js/script.js @@ -13,42 +13,6 @@ var width = test.getBoundingClientRect().width; var drawGrid = []; -const drawHistory = { - __forwardData: [], - __backwardData: [], - get forwardData() { - return this.__forwardData; - }, - get backwardData() { - return this.__backwardData; - }, - set forwardData(value) { - this.__forwardData = value; - // title.innerHTML = `B:${this.__backwardData.length} F:${this.__forwardData.length}`; - }, - set backwardData(value) { - this.__backwardData = value; - }, - forwards: function () { - if (this.forwardData[0]) { - this.backwardData.unshift(JSON.stringify(drawGrid)); - // title.innerHTML = `B:${this.__backwardData.length} F:${ - // this.__forwardData.length - 1 - // }`; - return JSON.parse(this.forwardData.shift()); - } - }, - backwards: function () { - if (this.backwardData[0]) { - this.forwardData.unshift(JSON.stringify(drawGrid)); - // title.innerHTML = `B:${this.__backwardData.length - 1} F:${ - // this.__forwardData.length - // }`; - return JSON.parse(this.backwardData.shift()); - } - }, -}; - var textify = new Worker("./js/textify.js"); var previousX; @@ -82,6 +46,7 @@ textify.onmessage = async function (e) { }; content.addEventListener("mousedown", function (e) { + if (e.buttons != 1) return mouseUp; content.addEventListener("mousemove", moveMouse); let x = Math.floor(e.clientX / width); let y = Math.floor(e.clientY / height); @@ -103,36 +68,27 @@ content.addEventListener("mousedown", function (e) { content.addEventListener("mouseup", mouseUp); document.addEventListener("keydown", async function (e) { - //history shit - if (e.ctrlKey == true) { - switch (e.key) { - case "z": - let backwards = drawHistory.backwards(); - drawGrid = backwards ? backwards : drawGrid; - render(); - break; - case "y": - let forwards = drawHistory.forwards(); - drawGrid = forwards ? forwards : drawGrid; - render(); - break; - case "s": - e.preventDefault(); - download("ascii.txt", JSON.stringify(drawGrid)); - break; - case "o": - e.preventDefault(); - text = await upload(); - drawGrid = JSON.parse(text); - render(); - break; - default: - break; - } + showHelp(e); + if (e.ctrlKey && e.shiftKey) { return; } + if (e.ctrlKey) { + ctrlHandler[e.key] ? ctrlHandler[e.key](e) : null; + return; + } + + if (e.key == "F1") { + e.preventDefault(); + help.getAttribute("hidden") + ? help.removeAttribute("hidden") + : help.setAttribute("hidden", true); + } //chage pencil if (e.key.length == 1) { pencil = e.key; } }); + +document.addEventListener("keyup", async function (e) { + showHelp(e); +});