feat (drawtext): Added IdrisDose/qb-drawtext to core to hopefully slow down the usage of drawtext3d.

client/drawtext.lua

@@ -0,0 +1,60 @@
+local function HideText()
+    SendNUIMessage({
+        action = 'HIDE_TEXT',
+    })
+end
+
+local function DrawText(text, position)
+    if (not type(position) == "string") then position = "left" end
+
+    SendNUIMessage({
+        action = 'DRAW_TEXT',
+        data = {
+            text = text,
+            position = position
+        }
+    })
+end
+
+local function ChangeText(text, position)
+    if (not type(position) == "string") then position = "left" end
+
+    SendNUIMessage({
+        action = 'CHANGE_TEXT',
+        data = {
+            text = text,
+            position = position
+        }
+    })
+end
+
+local function KeyPressed()
+    Citizen.CreateThread(function() -- Not sure if a thread is needed but why not eh?
+        SendNUIMessage({
+            action = 'KEY_PRESSED',
+        })
+        Wait(500)
+        HideText()
+    end)
+end
+
+RegisterNetEvent('qb-core:client:DrawText', function(text, position)
+    DrawText(text, position)
+end)
+
+RegisterNetEvent('qb-core:client:ChangeText', function(text, position)
+    ChangeText(text, position)
+end)
+
+RegisterNetEvent('qb-core:client:HideText', function()
+    HideText()
+end)
+
+RegisterNetEvent('qb-core:client:KeyPressed', function()
+    KeyPressed()
+end)
+
+exports('DrawText', DrawText)
+exports('ChangeText', ChangeText)
+exports('HideText', HideText)
+exports('KeyPressed', KeyPressed)

fxmanifest.lua

@@ -20,7 +20,8 @@ client_scripts {
 	'client/main.lua',
 	'client/functions.lua',
 	'client/loops.lua',
-	'client/events.lua'
+	'client/events.lua',
+	'client/drawtext.lua'
 }
 
 server_scripts {
@@ -38,6 +39,7 @@ ui_page 'html/index.html'
 files {
 	'html/index.html',
 	'html/style.css',
+	'html/drawtext.css',
 	'html/*.js'
 }
 

html/drawtext.css

@@ -0,0 +1,76 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap");
+:root {
+    --primary-bg: rgba(23, 23, 23, 90%);
+    --active-bg: #dc143c;
+    --font-color: white;
+}
+
+#drawtext-container {
+    display: none;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    font-family: "Poppins", sans-serif !important;
+    font-weight: 300;
+}
+.text {
+    position: absolute;
+    background: var(--primary-bg);
+    color: var(--font-color);
+    margin-top: 0.5rem;
+    padding: 0.45rem;
+    border-radius: 0.15rem;
+    box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
+}
+
+.text.pressed {
+    background: var(--active-bg);
+}
+
+.top {
+    left: 45vw;
+    top: -100px;
+}
+.top.show {
+    transition: 0.5s;
+    top: 10px;
+    opacity: 1;
+}
+.top.hide {
+    transition: 0.5s;
+    top: -100px;
+    opacity: 0;
+}
+
+.right {
+    top: 50%;
+    right: -100px;
+}
+.right.show {
+    transition: 0.5s;
+    right: 10px;
+    opacity: 1;
+}
+.right.hide {
+    transition: 0.5s;
+    right: -100px;
+    opacity: 0;
+}
+
+.left {
+    top: 50%;
+    left: -100px;
+}
+
+.left.show {
+    transition: 0.5s;
+    left: 10px;
+    opacity: 1;
+}
+.left.hide {
+    transition: 0.5s;
+    left: -100px;
+    opacity: 0;
+}

html/drawtext.js

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

html/index.html

@@ -31,11 +31,16 @@
       defer
     ></script>
     <script type="module" src="app.js"></script>
+    <script src="drawtext.js"></script>
+    <link rel="stylesheet" href="drawtext.css">
   </head>
   <body style="font-family: 'Poppins', sans-serif">
     <div
       id="q-app"
       style="min-height: 100vh"
     ></div>
+    <div id="drawtext-container">
+      <div id="text" class="text"></div>
+    </div>
   </body>
 </html>

html/style.css

@@ -1,3 +1,7 @@
+html::-webkit-scrollbar {
+    display: none;
+}
+
 .success {
     background-color: rgba(23, 23, 23, 90%);
     border-radius: 10px;