Adding help and organizing code

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);
+});