legonzaur/Ascii
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding help and organizing code

Browse Source
This commit is contained in:
Legonzaur
2020-06-26 23:01:26 +02:00
parent 38ad774754
commit 9050f74b02
5 changed files with 154 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+11 -1
View File
@@ -1,4 +1,6 @@
* { body,
html,
#content {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@@ -17,3 +19,11 @@
white-space: nowrap; /* Thanks to Herb Caudill comment */ white-space: nowrap; /* Thanks to Herb Caudill comment */
top: 0; top: 0;
} }
#help {
z-index: 1;
position: fixed;
padding: 10px;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
}
index.html
+2 -1
View File
@@ -22,7 +22,8 @@
<body> <body>
<div id="content"></div> <div id="content"></div>
<div id="Test">a</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/drawFunctions.js"></script>
<script src="js/script.js"></script> <script src="js/script.js"></script>
</body> </body>
js/download.js
-32
View File
@@ -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();
});
}
js/functions.js
+123
View File
@@ -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;
}
js/script.js
+18 -62
View File
@@ -13,42 +13,6 @@ var width = test.getBoundingClientRect().width;
var drawGrid = []; 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 textify = new Worker("./js/textify.js");
var previousX; var previousX;
@@ -82,6 +46,7 @@ textify.onmessage = async function (e) {
}; };
content.addEventListener("mousedown", function (e) { content.addEventListener("mousedown", function (e) {
if (e.buttons != 1) return mouseUp;
content.addEventListener("mousemove", moveMouse); content.addEventListener("mousemove", moveMouse);
let x = Math.floor(e.clientX / width); let x = Math.floor(e.clientX / width);
let y = Math.floor(e.clientY / height); let y = Math.floor(e.clientY / height);
@@ -103,36 +68,27 @@ content.addEventListener("mousedown", function (e) {
content.addEventListener("mouseup", mouseUp); content.addEventListener("mouseup", mouseUp);
document.addEventListener("keydown", async function (e) { document.addEventListener("keydown", async function (e) {
//history shit showHelp(e);
if (e.ctrlKey == true) { if (e.ctrlKey && e.shiftKey) {
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;
}
return; 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 //chage pencil
if (e.key.length == 1) { if (e.key.length == 1) {
pencil = e.key; pencil = e.key;
} }
}); });
document.addEventListener("keyup", async function (e) {
showHelp(e);
});