diff --git a/[esx]/esx_textui/TextUI.lua b/[esx]/esx_textui/TextUI.lua index 5753cd74..b6794a97 100644 --- a/[esx]/esx_textui/TextUI.lua +++ b/[esx]/esx_textui/TextUI.lua @@ -1,3 +1,7 @@ +Debug = false + +---@param message any +---@param type string local function TextUI(message, type) SendNUIMessage({ action = 'show', @@ -15,4 +19,22 @@ end exports('TextUI', TextUI) exports('HideUI', HideUI) RegisterNetEvent('ESX:TextUI', TextUI) -RegisterNetEvent('ESX:HideUI', HideUI) \ No newline at end of file +RegisterNetEvent('ESX:HideUI', HideUI) + +if Debug then + RegisterCommand("textui:error", function() + TriggerEvent("ESX:TextUI", "i ~r~love~s~ donuts", "error") + end) + + RegisterCommand("textui:success", function() + TriggerEvent("ESX:TextUI", "i ~r~love~s~ donuts", "success") + end) + + RegisterCommand("textui:info", function() + TriggerEvent("ESX:TextUI", "i ~r~love~s~ donuts", "info") + end) + + RegisterCommand("textui:hide", function() + TriggerEvent("ESX:HideUI") + end) +end diff --git a/[esx]/esx_textui/nui/css/style.css b/[esx]/esx_textui/nui/css/style.css index 61d24738..5f8d2726 100644 --- a/[esx]/esx_textui/nui/css/style.css +++ b/[esx]/esx_textui/nui/css/style.css @@ -6,9 +6,77 @@ * { padding: 0; margin: 0; + border: 0; + box-sizing: border-box; } body { color: var(--color); font-family: sans-serif; -} \ No newline at end of file +} + +.notify { + display: none; + position: absolute; + right: 2%; + bottom: 50%; + flex: auto; + min-width: 15%; + width: fit-content; + height: 50px; + background: rgba(5,5,5,.9); + border-radius: .5rem; + animation: growDown 300ms ease-in-out; + align-items: center; +} + +.error { + border-left: 5px solid #c0392b; +} + +.success { + border-left: 5px solid #2ecc71; +} + +.info { + border-left: 5px solid #2980b9; +} + +.innerText { + padding-left: .4rem; + padding-right: .4rem; + padding-top: 12.5px; + width: 100%; + height: 100%; +} + +.innerText .icon { + float: left; +} + +.innerText .text { + display: inline-block; + margin-left: .5rem; + margin-top: 4px; +} + + +@keyframes growDown { + 0% { + transform: scaleY(0); + } + 80% { + transform: scaleY(1.1) + } + 100% { + transform: scaleY(1) + } +} + +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48 +} diff --git a/[esx]/esx_textui/nui/index.html b/[esx]/esx_textui/nui/index.html index b1f1e739..97002883 100644 --- a/[esx]/esx_textui/nui/index.html +++ b/[esx]/esx_textui/nui/index.html @@ -1,94 +1,30 @@ - + -
+
- + info

- + check_circle

- + error

- - \ No newline at end of file diff --git a/[esx]/esx_textui/nui/js/script.js b/[esx]/esx_textui/nui/js/script.js index 816f2cbe..3afca1e3 100644 --- a/[esx]/esx_textui/nui/js/script.js +++ b/[esx]/esx_textui/nui/js/script.js @@ -1,126 +1,85 @@ -const w = window -const doc = document -let blackc = {'color': '#000'}; -let redc = {'color': '#F00'}; -let greenc = {'color': '#0F0'}; -let bluec = {'color': '#00F'}; -let yellowc = {'color': '#ff0'}; -let greyc = {'color': '#808080'}; -let darkgreyc = {'color': '#a9a9a9'}; -let orangec = {'color': '#FFA500'}; -let purplec = {'color': '#800080'}; -let whitec = {'color': '#FFF'}; +const w = window; +const doc = document; +let lastType = ""; + +// Gets the current icon it needs to use. +const types = { + ["success"]: { + ["message"]: "successMessage", + ["id"]: "notifySuccess", + }, + ["error"]: { + ["message"]: "errorMessage", + ["id"]: "notifyError", + }, + ["info"]: { + ["message"]: "infoMessage", + ["id"]: "notifyInfo", + } +} + +// the color codes example `i ~r~love~s~ donuts` +const codes = { + "~r~": "red", + "~b~": "blue", + "~g~": "green", + "~y~": "yellow", + "~p~": "purple", + "~c~": "grey", + "~m~": "#212121", + "~u~": "black", + "~o~": "orange" +} + +w.addEventListener('message', (event) => { + if (event.data.action === "show") { + if (lastType) { + doc.getElementById(lastType).style.display = "none"; + notification({ + type: event.data.type, + message: event.data.message + }); + } else { + notification({ + type: event.data.type, + message: event.data.message + }); + } + } else + if (event.data.action === "hide") { + if (lastType !== "") { + doc.getElementById(lastType).style.display = "none" + } else { + console.log("There isn't a textUI displaying!?") + } + } +}); + +const replaceColors = (str, obj) => { + let strToReplace = str + + for (let id in obj) { + strToReplace = strToReplace.replace(new RegExp(id, 'g'), obj[id]) + } + + return strToReplace +} + +notification = (data) => { + for (color in codes) { + if (data["message"].includes(color)) { + let objArr = {}; + objArr[color] = ``; + objArr["~s~"] = ""; + + let newStr = replaceColors(data["message"], objArr); + + data["message"] = newStr; + } + } + + doc.getElementById(types[data.type]["id"]).style.display = "block"; + lastType = types[data.type]["id"] + doc.getElementById(types[data.type]["message"]).innerHTML = data["message"] -$(function () { - w.addEventListener('message', function(e) { - $(".text").text('') - if (e.data.action === "show") { - if (e.data.type === "info") { - - finalarr = conv(e.data.message) - - $(".text").append(finalarr); - finalarr = [] - doc.getElementById("notifyInfo").style.display = "block"; - } else if (e.data.type === "error") { - finalarr = conv(e.data.message) - - $(".text").append(finalarr); - finalarr = [] - doc.getElementById("notifyError").style.display = "block"; - } else if (e.data.type === "success") { - finalarr = conv(e.data.message) - - $(".text").append(finalarr); - finalarr = [] - doc.getElementById("notifySuccess").style.display = "block"; - } - } else if (e.data.action === "hide") { - doc.getElementById("notifyInfo").style.display = "none"; - doc.getElementById("notifyError").style.display = "none"; - doc.getElementById("notifySuccess").style.display = "none"; - } - }) -}) - -function conv(spoop) { - let finalarr = [] - var arr = spoop.split("~") - for (let i = 0; i < arr.length; i++) { - let arr1 = arr[i] - - let redTrue = arr1.startsWith("r") - let greenTrue = arr1.startsWith("g") - let whiteTrue = arr1.startsWith("w") - let blackTrue = arr1.startsWith("u") - let blueTrue = arr1.startsWith("b") - let yellowTrue = arr1.startsWith("y") - let greyTrue = arr1.startsWith("c") - let darkgreyTrue = arr1.startsWith("m") - let orangeTrue = arr1.startsWith("o") - let purpleTrue = arr1.startsWith("p") - x = i + 1 - if (i == 0) { - if (arr1.startsWith("~")) { - - } else { - let arr3 = $('' + arr[i] + ''); - arr3.css(whitec) - - finalarr.push(arr3) - } - } - - if (redTrue) { - arr3 = PushData(arr[x], redc) - - finalarr.push(arr3) - } else if (greenTrue) { - arr3 = PushData(arr[x], greenc) - - finalarr.push(arr3) - } else if (whiteTrue) { - arr3 = PushData(arr[x], whitec) - - finalarr.push(arr3) - } else if (blackTrue) { - arr3 = PushData(arr[x], blackc) - - finalarr.push(arr3) - } else if (blueTrue) { - arr3 = PushData(arr[x], bluec) - - finalarr.push(arr3) - } else if (yellowTrue) { - arr3 = PushData(arr[x], yellowc) - - finalarr.push(arr3) - } else if (greyTrue) { - arr3 = PushData(arr[x], greyc) - - finalarr.push(arr3) - } else if (darkgreyTrue) { - arr3 = PushData(arr[x], darkgreyc) - - finalarr.push(arr3) - } else if (orangeTrue) { - arr3 = PushData(arr[x], orangec) - - finalarr.push(arr3) - } else if (purpleTrue) { - arr3 = PushData(arr[x], purplec) - finalarr.push(arr3) - } - - - } - return finalarr } -function PushData(data, color) { - - - let arr3 = $('' + data + ''); - arr3.css(color) - - return arr3 -} \ No newline at end of file