Skip to content

Commit 3463b99

Browse files
Musiker15Musiker15
committed
Update v2.1.2
* Added new Design for Notifications * Better performance for showCoords Command
1 parent 1b3d654 commit 3463b99

File tree

7 files changed

+170
-81
lines changed

7 files changed

+170
-81
lines changed

‎client/cl_showCoords.lua

+12-12
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ local showCoords = false
22

33
RegisterNetEvent('msk_core:showCoords', function()
44
showCoords = not showCoords
5+
6+
if showCoords then
7+
CreateThread(startShowCoordsThread)
8+
end
59
end)
610

711
local DrawGenericText = function(text)
@@ -17,19 +21,15 @@ local DrawGenericText = function(text)
1721
DrawText(0.40, 0.00)
1822
end
1923

20-
CreateThread(function()
21-
while true do
22-
local sleep = 500
23-
24-
if showCoords then
25-
sleep = 0
26-
local playerPed = PlayerPedId()
27-
local playerX, playerY, playerZ = table.unpack(GetEntityCoords(playerPed))
28-
local playerH = GetEntityHeading(playerPed)
24+
startShowCoordsThread = function()
25+
while showCoords do
26+
local sleep = 1
27+
local playerPed = PlayerPedId()
28+
local playerX, playerY, playerZ = table.unpack(GetEntityCoords(playerPed))
29+
local playerH = GetEntityHeading(playerPed)
2930

30-
DrawGenericText(("~g~X~w~ = ~r~%s ~g~Y~w~ = ~r~%s ~g~Z~w~ = ~r~%s ~g~H~w~ = ~r~%s~s~"):format(MSK.Round(playerX, 2), MSK.Round(playerY, 2), MSK.Round(playerZ, 2), MSK.Round(playerH, 2)))
31-
end
31+
DrawGenericText(("~g~X~w~ = ~r~%s ~g~Y~w~ = ~r~%s ~g~Z~w~ = ~r~%s ~g~H~w~ = ~r~%s~s~"):format(MSK.Round(playerX, 2), MSK.Round(playerY, 2), MSK.Round(playerZ, 2), MSK.Round(playerH, 2)))
3232

3333
Wait(sleep)
3434
end
35-
end)
35+
end

‎client/main.lua

+24-5
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,22 @@ exports('getCoreObject', function()
3333
return MSK
3434
end)
3535

36-
MSK.Notification = function(title, message, info, time)
36+
MSK.Notification = function(title, message, typ, duration)
3737
if Config.Notification == 'native' then
3838
SetNotificationTextEntry('STRING')
3939
AddTextComponentString(message)
4040
DrawNotification(false, true)
4141
elseif Config.Notification == 'okok' then
42-
exports['okokNotify']:Alert(title, message, time or 5000, info or 'info')
42+
exports['okokNotify']:Alert(title, message, duration or 5000, typ or 'info')
4343
elseif Config.Notification == 'custom' then
44-
Config.customNotification(title, message, info, time)
44+
Config.customNotification(title, message, typ or 'info', duration or 5000)
4545
else
4646
SendNUIMessage({
4747
action = 'notify',
4848
title = title,
4949
message = message,
50-
info = info or 'general',
51-
time = time or 5000
50+
type = Config.NotifyTypes[typ] or {icon = 'fas fa-info-circle', color = '#75D6FF'},
51+
time = duration or 5000
5252
})
5353
end
5454
end
@@ -146,6 +146,25 @@ MSK.GetPedMugshot = function(ped, transparent)
146146
end
147147
exports('GetPedMugshot', MSK.GetPedMugshot)
148148

149+
MSK.Progressbar = function(time, text, color)
150+
SendNUIMessage({
151+
action = 'progressBarStart',
152+
time = time,
153+
text = text or '',
154+
color = color or Config.progressColor,
155+
})
156+
end
157+
MSK.ProgressStart = MSK.Progressbar
158+
exports('Progressbar', MSK.Progressbar)
159+
exports('ProgressStart', MSK.Progressbar)
160+
161+
MSK.ProgressStop = function()
162+
SendNUIMessage({
163+
action = 'progressBarStop',
164+
})
165+
end
166+
exports('ProgressStop', MSK.ProgressStop)
167+
149168
RegisterNetEvent("msk_core:notification")
150169
AddEventHandler("msk_core:notification", function(title, message, info, time)
151170
MSK.Notification(title, message, info, time)

‎config.lua

+10-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,16 @@ Config.showCoords = {
1919
-- Set to 'custom' for Config.customNotification()
2020
Config.Notification = 'msk'
2121

22-
Config.customNotification = function(title, message, info, time)
22+
Config.NotifyTypes = {
23+
-- https://fontawesome.com/icons
24+
['general'] = {icon = 'fa-solid fa-circle-info', color = '#ffffff'},
25+
['info'] = {icon = 'fa-solid fa-circle-info', color = '#75d6ff'},
26+
['success'] = {icon = 'fa-solid fa-shield-check', color = '#76ee62'},
27+
['warning'] = {icon = 'fa-solid fa-triangle-exclamation', color = '#ffcb11'},
28+
['error'] = {icon = 'fa-solid fa-circle-exclamation', color = '#ff4a4a'},
29+
}
30+
31+
Config.customNotification = function(title, message, typ, duration)
2332
-- Set Config.Notification = 'custom'
2433
-- Add your own clientside Notification here
2534
end

‎fxmanifest.lua

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ games { 'gta5' }
44
author 'Musiker15 - MSK Scripts'
55
name 'msk_core'
66
description 'Core functions for MSK Scripts'
7-
version '2.1.1'
7+
version '2.1.2'
88

99
lua54 'yes'
1010

‎html/css/notify.css

+94-32
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,107 @@
11
.notify-wrapper {
22
position: absolute;
3-
left: 2vh; /* Change this to left or right */
4-
top: 10vh; /* Change this for the height */
3+
left: 2vh;
4+
top: 5vh;
55
font-size: 1.8vh;
6-
font-family: 'Montserrat', sans-serif;
6+
font-family: 'Inter';
77
}
88

9-
.notify-div{
10-
box-sizing: border-box;
11-
display: flex;
12-
align-items: center;
13-
padding-left: 2vh;
14-
padding-right: 2vh;
15-
margin-top: 2vh;
16-
width: 44vh;
17-
min-height: 8vh;
9+
.notify {
10+
position: relative;
11+
max-width:30vh;
12+
min-width:30vh;
13+
margin-top:2vh;
14+
font-size:2vh;
15+
padding:0vh 0vh 2vh 0vh;
16+
background: repeating-linear-gradient(
17+
-55deg,
18+
rgba(56, 56, 56, 0.36),
19+
rgba(56, 56, 56, 0.36) 1.0vh,
20+
rgba(56, 56, 56, 0.4), 1.0vh,
21+
rgba(56, 56, 56, 0.4) 2.0vh
22+
);
23+
background-color:rgb(0, 0, 0);
24+
border-radius:0.6vh;
25+
box-shadow:0vh 0vh 2vh 0vh rgba(0, 0, 0, 0.8) inset;
26+
}
27+
28+
.notify-title-banner {
29+
position: relative;
30+
width:100%;
31+
height:4vh;
32+
border-top-right-radius:0.4vh;
33+
border-top-left-radius:0.4vh;
34+
background:rgba(255, 255, 255, 0.04);
35+
border-width: 0.1vh;
36+
border-style: solid;
37+
border-top:none;
38+
border-right:none;
39+
border-left:none;
40+
border-image: radial-gradient(#00000000, rgba(255, 255, 255, 0.123), #00000000) 1;
41+
box-shadow:0vh 0vh 4vh rgba(0, 0, 0, 0.294);
42+
font-size:1.6vh;
43+
font-weight:500;
44+
padding-left:2vh;
45+
color:rgb(0, 255, 0);
46+
/* text-transform:uppercase; */
47+
}
48+
49+
.title {
50+
position: relative;
51+
top:50%;
52+
transform:translateY(-50%);
53+
}
54+
55+
.notify-text {
56+
position: relative;
57+
font-size:1.4vh;
58+
padding-top:1.2vh;
59+
padding-left:2vh;
60+
padding-right:2vh;
61+
color:rgb(182, 182, 182);
62+
font-weight:400;
63+
font-weight:600;
64+
padding-bottom:1.4vh;
65+
-webkit-text-stroke:0.02vh rgb(0, 0, 0);
66+
text-shadow:rgb(0, 0, 0) 0vh 0vh 0.8vh;
67+
}
1868

19-
background: linear-gradient(93.25deg, #4F4F4F 0%, #0C0C0C 100%);
20-
border-left: 0.44vh solid #FFCB11;
21-
box-shadow: 0vh 0.8vh 0.7 -0.2vh rgba(0, 0, 0, 0.35);
22-
border-radius: 1.34vh;
69+
.notify-progress {
70+
position: absolute;
71+
width:86%;
72+
left:2vh;
73+
height:0.4vh;
74+
bottom:2vh;
75+
border-radius:0.4vh;
76+
background:rgba(0, 0, 0, 0.322);
2377
}
2478

25-
.notify-icon-box{
26-
box-sizing: border-box;
27-
padding: 1.2vh;
28-
display: flex;
29-
justify-content: center;
30-
align-items: center;
31-
background: #353535;
32-
box-shadow: 0vh 0.4vh 0.4vh rgba(0, 0, 0, 0.47);
33-
border-radius: 0.8vh;
34-
transform: rotate(-45deg);
79+
.notify-progress-inner {
80+
position: relative;
81+
width:50%;
82+
height:0.4vh;
83+
border-radius:0.4vh;
84+
background:rgb(0, 255, 0);
3585
}
3686

37-
.notify-icon-box i{
38-
transform: rotate(45deg);
39-
font-size: 2.3vh;
87+
@keyframes NotifyIn {
88+
from {
89+
opacity:0;
90+
left:-4vh;
91+
}
92+
to {
93+
opacity:1.0;
94+
left:0vh;
95+
}
4096
}
4197

42-
.notify-text-box{
43-
margin-left: 2.5vh;
44-
align-self: baseline;
98+
@keyframes NotifyOut {
99+
from {
100+
opacity:1.0;
101+
left:0vh;
102+
}
103+
to {
104+
opacity:0;
105+
left:-4vh;
106+
}
45107
}

‎html/index.html

+13-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
99
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,500,700,900&display=swap" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
1011

1112
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
1213

@@ -20,7 +21,18 @@
2021

2122
<body>
2223
<!-- MSK Notify -->
23-
<div class="d-grid notify-wrapper"></div>
24+
<div class="notify-wrapper">
25+
<div class="notify" style="display:none">
26+
<div class="notify-title-banner">
27+
<div class="title"><i class="fa-solid fa-shield-check"></i> Information</div>
28+
</div>
29+
<div class="notify-text">This is a Notification</div>
30+
<div class="notify-progress">
31+
<div class="notify-progress-inner"></div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
2436

2537
<!-- MSK Input -->
2638
<div class="msk-input-container">

‎html/script.js

+16-29
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $(document).ready(function() {
1010
const data = event.data
1111

1212
if (data.action == 'notify') {
13-
notification(data.title, data.message, data.info, data.time);
13+
notification(data.title, data.message, data.type, data.time);
1414
} else if (data.action == 'openInput') {
1515
isInputOpen = true
1616
var input = 'small-input'
@@ -74,22 +74,6 @@ function playSound(sound, volume) {
7474
MSK Notification
7575
---------------- */
7676

77-
const icons = {
78-
"general" : "fas fa-warehouse",
79-
"info" : "fas fa-info-circle",
80-
"success" : "fas fa-check-circle",
81-
"error" : "fas fa-exclamation-circle",
82-
"warning" : "fas fa-exclamation-triangle"
83-
}
84-
85-
const colours = {
86-
"general" : "#FFFFFF",
87-
"info" : "#75D6FF",
88-
"success" : "#76EE62",
89-
"error" : "#FF4A4A",
90-
"warning" : "#FFCB11"
91-
}
92-
9377
const colors = {
9478
"~r~": "red",
9579
"~b~": "#378cbf",
@@ -112,7 +96,7 @@ const replaceColors = (str, obj) => {
11296
return strToReplace
11397
}
11498

115-
notification = (title, message, info, time) => {
99+
notification = (title, message, type, duration) => {
116100
for (color in colors) {
117101
if (message.includes(color)) {
118102
let obj = {};
@@ -125,24 +109,27 @@ notification = (title, message, info, time) => {
125109
}
126110

127111
const notification = $(`
128-
<div class="notify-div wrapper" style="border-left: 0.5vh solid ${colours[info]}; ">
129-
<div class="notify-icon-box" style="border: 0.2vh solid ${colours[info]};">
130-
<i class="${icons[info]} fa-ms notify-icon" style="color: ${colours[info]}"></i>
112+
<div class="notify">
113+
<div class="notify-title-banner">
114+
<div class="title" style="color:${type.color}"><i class="${type.icon}"></i> ${title}</div>
131115
</div>
132-
133-
<div class="notify-text-box">
134-
<p style="color:${colours[info]}; font-size: 2vh; font-weight: 500; margin-bottom: 0vh; margin-top: 1vh;">${title}</p>
135-
<p style="margin-top: 0; color: rgba(247, 247, 247, 0.75);">${message}</p>
116+
<div class="notify-text">${message}</div>
117+
<div class="notify-progress">
118+
<div class="notify-progress-inner" style="background:${type.color};animation:load ${duration / 1000}s normal forwards"></div>
136119
</div>
137120
</div>
138-
`).appendTo(`.notify-wrapper`);
121+
`).prependTo(`.notify-wrapper`);
139122

140-
notification.fadeIn("slow");
123+
notification.show();
124+
notification.css("animation", "NotifyIn 1s")
141125
playSound("notification.mp3", 0.25);
142126

143127
setTimeout(() => {
144-
notification.fadeOut("slow");
145-
}, time);
128+
notification.css("animation", "NotifyOut 1s")
129+
setTimeout(() => {
130+
notification.hide()
131+
}, 800);
132+
}, duration);
146133

147134
return notification;
148135
}

0 commit comments

Comments
 (0)