Update v1.7.3

Musiker15 · Musiker15 · commit 9e7cf7c54526 · 2023-03-31T02:16:49.000+02:00
* Added new Notification NUI
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-1.7.2
+1.7.3
diff --git a/client.lua b/client.lua
@@ -31,10 +31,21 @@ MSK.Trim = function(str, bool)
     return (str:gsub("%s+", ""))
 end
 
-MSK.Notification = function(text)
-    SetNotificationTextEntry('STRING')
-    AddTextComponentString(text)
-	DrawNotification(false, true)
+MSK.Notification = function(message, info, duration, playSound)
+    if Config.Notification == 'native' then
+        SetNotificationTextEntry('STRING')
+        AddTextComponentString(message)
+        DrawNotification(false, true)
+    else
+        SendNUIMessage({
+            message = message,
+            duration = duration or 5000,
+            type = info or 'default',
+            map = IsRadarEnabled()
+        })
+    end
+
+    if playSound then PlaySoundFrontend(-1, "ATM_WINDOW", "HUD_FRONTEND_DEFAULT_SOUNDSET", 1) end
 end
 
 MSK.HelpNotification = function(text)
@@ -189,8 +200,8 @@ AddEventHandler("msk_core:responseCallback", function(requestId, ...)
 end)
 
 RegisterNetEvent("msk_core:notification")
-AddEventHandler("msk_core:notification", function(text)
-    MSK.Notification(text)
+AddEventHandler("msk_core:notification", function(message, info, duration, playSound)
+    MSK.Notification(message, info, duration, playSound)
 end)
 
 RegisterNetEvent('msk_core:advancedNotification')
diff --git a/config.lua b/config.lua
@@ -9,4 +9,8 @@ Config.showCoords = {
     enable = true,
     command = 'coords',
     groups = {'superadmin', 'admin'}
-}
+}
+----------------------------------------------------------------
+-- Set to 'native' for FiveM Native Notification
+-- Set to 'nui' for NUI Notification
+Config.Notification = 'nui'
diff --git a/fxmanifest.lua b/fxmanifest.lua
@@ -4,7 +4,7 @@ games { 'gta5' }
 author 'Musiker15 - MSK Scripts'
 name 'msk_core'
 description 'Core functions for MSK Scripts'
-version '1.7.2'
+version '1.7.3'
 
 lua54 'yes'
 
@@ -28,6 +28,14 @@ files {
 	'import.lua'
 }
 
+ui_page 'html/index.html'
+
+files {
+	'html/index.html',
+	'html/style.css',
+	'html/script.js'
+}
+
 dependencies {
     'oxmysql'
 }
diff --git a/html/index.html b/html/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>MSK Notify</title>
+        <link rel="stylesheet" href="style.css">
+        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    </head>
+    <body>
+        <div class="container mapOff">
+        </div>
+    </body>
+    <script src="script.js" type="text/javascript"></script>
+</html>
diff --git a/html/script.js b/html/script.js
@@ -0,0 +1,56 @@
+window.addEventListener('message', (event) => {
+    if (event.data.map == true) {
+        $('.container').removeClass('mapOff').addClass('mapOn');
+    } else {
+        $('.container').removeClass('mapOn').addClass('mapOff');
+    }
+
+    notification(event.data.message, event.data.duration, event.data.type);
+})
+
+const colors = {
+    "~r~": "red",
+    "~b~": "#378cbf",
+    "~g~": "green",
+    "~y~": "yellow",
+    "~p~": "purple",
+    "~c~": "grey",
+    "~m~": "#212121",
+    "~u~": "black",
+    "~o~": "orange"
+}
+
+const replaceColors = (str, obj) => {
+    let strToReplace = str;
+
+    for (let id in obj) {
+        strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
+    }
+
+    return strToReplace
+}
+
+notification = (message, duration, type) => {
+    for (color in colors) {
+        if (message.includes(color)) {
+            let obj = {};
+
+            obj[color] = `<span style='color: ${colors[color]}'>`;
+            obj['~s~'] = '</span>';
+
+            message = replaceColors(message, obj);
+        }
+    }
+
+    const notification = $(`
+        <div class="notify" id="${type}">
+            <p>${message}</p>
+        </div>
+    `).appendTo(`.container`);
+
+    setTimeout(() => {
+        notification.fadeOut(700);
+    }, duration);
+
+    return notification;
+}
diff --git a/html/style.css b/html/style.css
@@ -0,0 +1,93 @@
+#default {
+    background-color: rgba(0, 0, 0, 0.445);
+    border: gray 0.1vw solid;
+}
+
+#info {
+    background: radial-gradient(40vh circle at 0 -60%,#02021b,#00000000);
+    border: darkblue 0.1vw solid;
+}
+
+#success {
+    background: radial-gradient(40vh circle at 0 -60%,#041b02,#00000000);
+    border: green 0.1vw solid;
+}
+
+#error {
+    background: radial-gradient(40vh circle at 0 -60%,#1b0202,#00000000);
+    border: darkred 0.1vw solid;
+}
+
+#warning {
+    background: radial-gradient(40vh circle at 0 -60%,#1b1002,#00000000);
+    border: darkorange 0.1vw solid;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.container {
+    display: block;
+    position: absolute;
+    left: 1.5vw;
+    width: 15%;
+    height: 50%;
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.mapOff {
+    bottom: 2vw;
+}
+
+.mapOn {
+    bottom: 12vw;
+}
+
+.notify {
+    position: relative;
+    padding: .6vw;
+    margin-top: 1vw;
+    max-width: 100%;
+    border-radius: .5vw;
+    animation: fadeIn .5s ease 0s 1 normal forwards;
+    box-shadow: 0 0 5px black;
+}
+
+.notify p {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    font-size: .7vw;
+    font-weight: 500;
+    color: white;
+    padding-left: .2vw;
+    text-align: left;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        transform: translateX(-300px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateX(-300px);
+    }
+}
diff --git a/server.lua b/server.lua
@@ -125,8 +125,8 @@ MSK.RegisterCommand = function(name, group, cb, console, framework, suggestion)
     end
 end
 
-MSK.Notification = function(src, text)
-    TriggerClientEvent('msk_core:notification', src, text)
+MSK.Notification = function(src, message, info, duration, playSound)
+    TriggerClientEvent('msk_core:notification', src, message, info, duration, playSound)
 end
 
 MSK.AdvancedNotification = function(src, text, title, subtitle, icon, flash, icontype)
