Skip to content

Commit f54017f

Browse files
Github-SamuelGithub-Samuel
committed
refactor?: change naming to levels
1 parent 4e30190 commit f54017f

4 files changed

Lines changed: 65 additions & 65 deletions

File tree

‎client/main.lua‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ end
1818
local ToggleLevelsUI = function(show)
1919
levelsVisible = show
2020
if show then
21-
TriggerServerEvent('sd_levels:server:syncData')
21+
TriggerServerEvent('sd-levels:server:syncData')
2222
SetNuiFocus(true, true)
2323
else
2424
SetNuiFocus(false, false)
@@ -49,7 +49,7 @@ RegisterNUICallback('closeUI', function(data, cb)
4949
end)
5050

5151
-- Event handler for receiving levels data from the server
52-
RegisterNetEvent('sd_levels:client:updateLevels', function(serverLevels)
52+
RegisterNetEvent('sd-levels:client:updateLevels', function(serverLevels)
5353
if serverLevels then
5454
levels = serverLevels
5555
UpdateLevelsUI(levels)
@@ -59,31 +59,31 @@ end)
5959
-- Command to open the levels UI
6060
RegisterCommand("levels", function()
6161
ShowLoadingState(true)
62-
TriggerServerEvent('sd_levels:server:syncData')
62+
TriggerServerEvent('sd-levels:server:syncData')
6363
Wait(100)
6464
ShowLoadingState(false)
6565
ToggleLevelsUI(true)
6666
end, false)
6767

6868
AddEventHandler('onResourceStart', function(resourceName)
6969
if GetCurrentResourceName() == resourceName then
70-
TriggerServerEvent('sd_levels:server:syncData')
70+
TriggerServerEvent('sd-levels:server:syncData')
7171
end
7272
end)
7373

7474
RegisterNetEvent('QBCore:Client:OnPlayerLoaded', function()
7575
Wait(500)
76-
TriggerServerEvent('sd_levels:server:syncData')
76+
TriggerServerEvent('sd-levels:server:syncData')
7777
end)
7878

7979
RegisterNetEvent('esx:playerLoaded', function()
8080
Wait(500)
81-
TriggerServerEvent('sd_levels:server:syncData')
81+
TriggerServerEvent('sd-levels:server:syncData')
8282
end)
8383

84-
RegisterNetEvent('sd_levels:radialOpen', function()
84+
RegisterNetEvent('sd-levels:radialOpen', function()
8585
ShowLoadingState(true)
86-
TriggerServerEvent('sd_levels:server:syncData')
86+
TriggerServerEvent('sd-levels:server:syncData')
8787
Wait(100)
8888
ShowLoadingState(false)
8989
ToggleLevelsUI(true)

‎html/app.js‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
1-
let skillsData = [];
1+
let levelsData = [];
22

3-
function updateSkills(skills) {
4-
skillsData = Object.values(skills);
5-
renderSkills();
3+
function updateLevels(levels) {
4+
levelsData = Object.values(levels);
5+
renderLevels();
66
}
77

8-
function renderSkills() {
9-
const skillsGrid = document.getElementById('skills-grid');
10-
skillsGrid.innerHTML = '';
8+
function renderLevels() {
9+
const levelsGrid = document.getElementById('levels-grid');
10+
levelsGrid.innerHTML = '';
1111

12-
skillsData.forEach(skill => {
13-
const skillItem = document.createElement('div');
14-
skillItem.className = 'skill-item';
12+
levelsData.forEach(level => {
13+
const levelItem = document.createElement('div');
14+
levelItem.className = 'level-item';
1515

16-
const progressPercent = skill.progress || (skill.xp % 100);
16+
const progressPercent = level.progress || (level.xp % 100);
1717

18-
skillItem.innerHTML = `
19-
<div class="skill-header">
20-
<span class="skill-name">${skill.name}</span>
21-
<div class="skill-info">
22-
<span class="skill-xp">XP: ${skill.xp}</span>
23-
<span class="skill-level">Level ${skill.level}</span>
18+
levelItem.innerHTML = `
19+
<div class="level-header">
20+
<span class="level-name">${level.name}</span>
21+
<div class="level-info">
22+
<span class="level-xp">XP: ${level.xp}</span>
23+
<span class="level-value">Level ${level.level}</span>
2424
</div>
2525
</div>
26-
<div class="skill-description">${skill.description || 'No description available'}</div>
27-
<div class="skill-progress">
28-
<div class="skill-progress-bar" style="width: ${progressPercent}%">
26+
<div class="level-description">${level.description || 'No description available'}</div>
27+
<div class="level-progress">
28+
<div class="level-progress-bar" style="width: ${progressPercent}%">
2929
<span class="progress-text">${Math.round(progressPercent)}%</span>
3030
</div>
3131
</div>
3232
`;
33-
skillsGrid.appendChild(skillItem);
33+
levelsGrid.appendChild(levelItem);
3434
});
3535
}
3636

@@ -56,13 +56,13 @@ function toggleUI(show) {
5656

5757
function closeUI() {
5858
toggleUI(false);
59-
fetch('https://immense-skills/closeUI', {method: 'POST'});
59+
fetch('https://sd-levels/closeUI', {method: 'POST'});
6060
}
6161

6262
// Event Listeners
6363
window.addEventListener('message', (event) => {
64-
if (event.data.action === 'updateSkills') {
65-
updateSkills(event.data.skills);
64+
if (event.data.action === 'updateLevels') {
65+
updateLevels(event.data.levels);
6666
} else if (event.data.action === 'toggleUI') {
6767
toggleUI(event.data.show);
6868
}
@@ -77,5 +77,5 @@ document.addEventListener('keydown', (event) => {
7777
}
7878
});
7979

80-
// Initialize with empty skills if needed
81-
renderSkills();
80+
// Initialize with empty levels if needed
81+
renderLevels();

‎html/style.css‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
:root {
1010
--header-font: 'Roboto', sans-serif;
11-
--skill-font: 'Roboto', sans-serif;
11+
--level-font: 'Roboto', sans-serif;
1212
--primary-color: #4a90e2;
1313
--secondary-color: #6b7280;
1414
--accent-color: #60a5fa;
@@ -73,7 +73,7 @@ body.active {
7373
0 0 1px rgba(74, 144, 226, 0.1);
7474
}
7575

76-
#skills-container {
76+
#levels-container {
7777
width: 100%;
7878
height: 100%;
7979
padding: 20px;
@@ -133,7 +133,7 @@ h2 {
133133
margin: 0;
134134
}
135135

136-
#skills-grid {
136+
#levels-grid {
137137
display: grid;
138138
grid-template-columns: repeat(4, 1fr);
139139
gap: 15px;
@@ -144,25 +144,25 @@ h2 {
144144
grid-auto-rows: minmax(110px, 110px);
145145
}
146146

147-
#skills-grid::-webkit-scrollbar {
147+
#levels-grid::-webkit-scrollbar {
148148
width: 6px;
149149
}
150150

151-
#skills-grid::-webkit-scrollbar-track {
151+
#levels-grid::-webkit-scrollbar-track {
152152
background: rgba(107, 114, 128, 0.1);
153153
border-radius: 10px;
154154
}
155155

156-
#skills-grid::-webkit-scrollbar-thumb {
156+
#levels-grid::-webkit-scrollbar-thumb {
157157
background: linear-gradient(135deg, rgba(74, 144, 226, 0.5), rgba(107, 114, 128, 0.5));
158158
border-radius: 10px;
159159
}
160160

161-
#skills-grid::-webkit-scrollbar-thumb:hover {
161+
#levels-grid::-webkit-scrollbar-thumb:hover {
162162
background: linear-gradient(135deg, rgba(74, 144, 226, 0.7), rgba(107, 114, 128, 0.7));
163163
}
164164

165-
.skill-description {
165+
.level-description {
166166
font-size: 11.5px;
167167
color: rgba(156, 163, 175, 0.8);
168168
margin-bottom: 6px;
@@ -175,7 +175,7 @@ h2 {
175175
flex-grow: 1;
176176
}
177177

178-
.skill-item {
178+
.level-item {
179179
background: linear-gradient(135deg, rgba(74, 144, 226, 0.05), rgba(107, 114, 128, 0.05));
180180
border: 1px solid var(--border-color);
181181
border-radius: 12px;
@@ -189,7 +189,7 @@ h2 {
189189
justify-content: space-between;
190190
}
191191

192-
.skill-item::before {
192+
.level-item::before {
193193
content: '';
194194
position: absolute;
195195
top: -50%;
@@ -202,29 +202,29 @@ h2 {
202202
opacity: 0;
203203
}
204204

205-
.skill-item:hover::before {
205+
.level-item:hover::before {
206206
transform: rotate(45deg) translateX(100%) translateY(100%);
207207
opacity: 1;
208208
}
209209

210-
.skill-item:hover {
210+
.level-item:hover {
211211
box-shadow: 0 0 30px rgba(74, 144, 226, 0.3),
212212
0 0 60px rgba(74, 144, 226, 0.15),
213213
inset 0 0 20px rgba(74, 144, 226, 0.08);
214214
border-color: rgba(74, 144, 226, 0.5);
215215
background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(107, 114, 128, 0.1));
216216
}
217217

218-
.skill-header {
218+
.level-header {
219219
display: flex;
220220
justify-content: space-between;
221221
align-items: center;
222222
margin-bottom: 6px;
223223
gap: 8px;
224224
}
225225

226-
.skill-name {
227-
font-family: var(--skill-font);
226+
.level-name {
227+
font-family: var(--level-font);
228228
font-size: 13px;
229229
font-weight: 600;
230230
color: var(--accent-color);
@@ -236,13 +236,13 @@ h2 {
236236
max-width: 130px;
237237
}
238238

239-
.skill-info {
239+
.level-info {
240240
display: flex;
241241
align-items: center;
242242
gap: 8px;
243243
}
244244

245-
.skill-xp {
245+
.level-xp {
246246
background: rgba(74, 144, 226, 0.15);
247247
padding: 3px 8px;
248248
border-radius: 12px;
@@ -251,7 +251,7 @@ h2 {
251251
border: 1px solid rgba(74, 144, 226, 0.25);
252252
}
253253

254-
.skill-level {
254+
.level-value {
255255
background: linear-gradient(135deg, #4a90e2, #60a5fa);
256256
padding: 3px 8px;
257257
border-radius: 12px;
@@ -260,7 +260,7 @@ h2 {
260260
font-weight: 600;
261261
}
262262

263-
.skill-progress {
263+
.level-progress {
264264
background: rgba(0, 0, 0, 0.4);
265265
border-radius: 10px;
266266
height: 24px;
@@ -269,7 +269,7 @@ h2 {
269269
overflow: hidden;
270270
}
271271

272-
.skill-progress-bar {
272+
.level-progress-bar {
273273
height: 100%;
274274
background: linear-gradient(90deg, #4a90e2, #60a5fa, #93c5fd);
275275
border-radius: 8px;
@@ -303,7 +303,7 @@ h2 {
303303
}
304304
}
305305

306-
.skill-item.refreshing {
306+
.level-item.refreshing {
307307
animation: pulse 0.5s ease;
308308
}
309309

@@ -318,7 +318,7 @@ h2 {
318318
height: 700px;
319319
}
320320

321-
#skills-grid {
321+
#levels-grid {
322322
grid-template-columns: repeat(4, 1fr);
323323
grid-auto-rows: minmax(105px, 105px);
324324
}
@@ -330,7 +330,7 @@ h2 {
330330
height: 650px;
331331
}
332332

333-
#skills-grid {
333+
#levels-grid {
334334
grid-template-columns: repeat(3, 1fr);
335335
grid-auto-rows: minmax(105px, 105px);
336336
}
@@ -342,7 +342,7 @@ h2 {
342342
height: 600px;
343343
}
344344

345-
#skills-grid {
345+
#levels-grid {
346346
grid-template-columns: repeat(3, 1fr);
347347
}
348348
}
@@ -354,21 +354,21 @@ h2 {
354354
padding: 6px;
355355
}
356356

357-
#skills-grid {
357+
#levels-grid {
358358
grid-template-columns: repeat(3, 1fr);
359359
}
360360

361361
h2 {
362362
font-size: 28px;
363363
}
364364

365-
#skills-container {
365+
#levels-container {
366366
padding: 20px;
367367
}
368368
}
369369

370370
@media (max-width: 1024px) {
371-
#skills-grid {
371+
#levels-grid {
372372
grid-template-columns: repeat(2, 1fr);
373373
}
374374
}

‎html/ui.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Skills UI</title>
6+
<title>Levels UI</title>
77
<link rel="stylesheet" href="style.css">
88
</head>
99
<body>
1010
<div class="tablet-frame" id="tablet-frame" style="display: none;">
1111
<div class="screen-container">
12-
<div id="skills-container">
12+
<div id="levels-container">
1313
<div class="header-wrapper">
1414
<h2>Levels</h2>
1515
<div class="header-buttons">
16-
<button id="close-button" aria-label="Close skills menu">✕</button>
16+
<button id="close-button" aria-label="Close levels menu">✕</button>
1717
</div>
1818
</div>
19-
<div id="skills-grid"></div>
19+
<div id="levels-grid"></div>
2020
</div>
2121
</div>
2222
</div>

0 commit comments

Comments
 (0)