feat (html): Organised html file - Darknight2590

* Rename html/app.js to html/js/app.js * Rename html/config.js to html/js/config.js * Rename html/drawtext.js to html/js/drawtext.js * Rename html/testing.js to html/js/testing.js * Rename html/utils.js to html/js/utils.js * Rename html/style.css to html/css/style.css * Rename html/drawtext.css to html/css/drawtext.css * Update fxmanifest.lua
2026-08-29 01:08:57 +00:00 · 2022-02-17 10:35:01 +02:00
parent 430d40db6a
commit 3b61e13854
8 changed files with 6 additions and 6 deletions
@@ -0,0 +1,124 @@
+let direction = null;
+
+const drawText = async (textData) => {
+    const text = document.getElementById("text");
+    let {position} = textData;
+    switch (textData.position) {
+        case "left":
+            addClass(text, position);
+            direction = "left";
+            break;
+        case "top":
+            addClass(text, position);
+            direction = "top";
+            break;
+        case "right":
+            addClass(text, position);
+            direction = "right";
+            break;
+        default:
+            addClass(text, "left");
+            direction = "left";
+            break;
+    }
+
+    text.innerHTML = textData.text;
+    document.getElementById("drawtext-container").style.display = "block";
+    await sleep(100);
+    addClass(text, "show");
+};
+
+const changeText = async (textData) => {
+    const text = document.getElementById("text");
+    let {position} = textData;
+
+    removeClass(text, "show");
+    addClass(text, "pressed");
+    addClass(text, "hide");
+
+    await sleep(500);
+    removeClass(text, "left");
+    removeClass(text, "right");
+    removeClass(text, "top");
+    removeClass(text, "bottom");
+    removeClass(text, "hide");
+    removeClass(text, "pressed");
+
+    switch (textData.position) {
+        case "left":
+            addClass(text, position);
+            direction = "left";
+            break;
+        case "top":
+            addClass(text, position);
+            direction = "top";
+            break;
+        case "right":
+            addClass(text, position);
+            direction = "right";
+            break;
+        default:
+            addClass(text, "left");
+            direction = "left";
+            break;
+    }
+    text.innerHTML = textData.text;
+
+    await sleep(100);
+    text.classList.add("show");
+};
+
+const hideText = async () => {
+    const text = document.getElementById("text");
+    removeClass(text, "show");
+    addClass(text, "hide");
+
+    setTimeout(() => {
+        removeClass(text, "left");
+        removeClass(text, "right");
+        removeClass(text, "top");
+        removeClass(text, "bottom");
+        removeClass(text, "hide");
+        removeClass(text, "pressed");
+        document.getElementById("drawtext-container").style.display = "none";
+    }, 1000);
+};
+
+const keyPressed = () => {
+    const text = document.getElementById("text");
+    addClass(text, "pressed");
+};
+
+window.addEventListener("message", (event) => {
+    const data = event.data;
+    const action = data.action;
+    const textData = data.data;
+    switch (action) {
+        case "DRAW_TEXT":
+            return drawText(textData);
+        case "CHANGE_TEXT":
+            return changeText(textData);
+        case "HIDE_TEXT":
+            return hideText();
+        case "KEY_PRESSED":
+            return keyPressed();
+        default:
+            return;
+    }
+});
+
+const sleep = (ms) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+const removeClass = (element, name) => {
+    if (element.classList.contains(name)) {
+        element.classList.remove(name);
+    }
+};
+
+const addClass = (element, name) => {
+    if (!element.classList.contains(name)) {
+        element.classList.add(name);
+    }
+};