Adding help and organizing code

2020-06-26 23:01:26 +02:00
parent 38ad774754
commit 9050f74b02
5 changed files with 154 additions and 96 deletions
@@ -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);
+}
@@ -22,7 +22,8 @@
  <body>
    <div id="content"></div>
    <div id="Test">a</div>
-    <script src="js/download.js"></script>
+    <div id="help"></div>
+    <script src="js/functions.js"></script>
    <script src="js/drawFunctions.js"></script>
    <script src="js/script.js"></script>
  </body>
@@ -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();
-  });
-}
@@ -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;
+}
@@ -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);
+});