diff --git a/client/drawtext.lua b/client/drawtext.lua
new file mode 100644
index 0000000..4ae4a37
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/fxmanifest.lua b/fxmanifest.lua
index b63a753..2ac3392 100644
--- a/fxmanifest.lua
+++ b/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 {
@@ -39,6 +40,7 @@ ui_page 'html/index.html'
files {
'html/index.html',
'html/style.css',
+ 'html/drawtext.css',
'html/*.js'
}
diff --git a/html/drawtext.css b/html/drawtext.css
new file mode 100644
index 0000000..3892a85
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/html/drawtext.js b/html/drawtext.js
new file mode 100644
index 0000000..544b450
--- /dev/null
+++ b/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);
+ }
+};
\ No newline at end of file
diff --git a/html/index.html b/html/index.html
index 5abf792..3d39174 100644
--- a/html/index.html
+++ b/html/index.html
@@ -31,11 +31,16 @@
defer
>
+
+
+