mirror of
https://github.com/esx-framework/esx_core.git
synced 2026-08-29 01:08:54 +00:00
Merge pull request #1712 from Kr3mu/esx_default_menu
feat(esx_menu_default) Redesign of the menu.
This commit is contained in:
Kenshin13
@@ -1,9 +1,8 @@
|
||||
<h1 align='center'>[ESX] Menu Defualt</a></h1><p align='center'><b><a href='https://discord.esx-framework.org/'>Discord</a> - <a href='https://esx-framework.org/'>Website</a> - <a href='https://docs.esx-legacy.com/legacy/installation'>Documentation</a></b></h5>
|
||||
<h1 align='center'>[ESX] Menu Default</a></h1><p align='center'><b><a href='https://discord.esx-framework.org/'>Discord</a> - <a href='https://esx-framework.org/'>Website</a> - <a href='https://docs.esx-legacy.com/legacy/installation'>Documentation</a></b></h5>
|
||||
|
||||
A default List type menu for ESX.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Legal
|
||||
|
||||
|
||||
@@ -4,11 +4,13 @@ GUI.Time = 0
|
||||
local function openMenu(namespace, name, data)
|
||||
CurrentNameSpace = namespace
|
||||
OpenedMenus = OpenedMenus + 1
|
||||
|
||||
data.namespace = namespace
|
||||
data.name = name
|
||||
|
||||
SendNUIMessage({
|
||||
action = "openMenu",
|
||||
namespace = namespace,
|
||||
name = name,
|
||||
data = data,
|
||||
data = data
|
||||
})
|
||||
end
|
||||
|
||||
@@ -18,10 +20,13 @@ local function closeMenu(namespace, name)
|
||||
if OpenedMenus < 0 then
|
||||
OpenedMenus = 0
|
||||
end
|
||||
|
||||
SendNUIMessage({
|
||||
action = "closeMenu",
|
||||
namespace = namespace,
|
||||
name = name,
|
||||
data = {
|
||||
namespace = namespace,
|
||||
name = name,
|
||||
}
|
||||
})
|
||||
end
|
||||
|
||||
@@ -45,6 +50,7 @@ RegisterNUICallback("menu_submit", function(data, cb)
|
||||
if menu.submit ~= nil then
|
||||
menu.submit(data, menu)
|
||||
end
|
||||
|
||||
cb("OK")
|
||||
end)
|
||||
|
||||
@@ -58,6 +64,7 @@ RegisterNUICallback("menu_cancel", function(data, cb)
|
||||
if menu.cancel ~= nil then
|
||||
menu.cancel(data, menu)
|
||||
end
|
||||
|
||||
cb("OK")
|
||||
end)
|
||||
|
||||
@@ -84,7 +91,7 @@ RegisterNUICallback("menu_change", function(data, cb)
|
||||
cb("OK")
|
||||
end)
|
||||
|
||||
ESX.RegisterInput("menu_default_enter", "Submit menu item", "keyboard", "RETURN", function()
|
||||
ESX.RegisterInput("menu_default_enter", "Submit menu item", "KEYBOARD", "RETURN", function()
|
||||
if OpenedMenus > 0 and (GetGameTimer() - GUI.Time) > 200 then
|
||||
SendNUIMessage({
|
||||
action = "controlPressed",
|
||||
@@ -94,7 +101,7 @@ ESX.RegisterInput("menu_default_enter", "Submit menu item", "keyboard", "RETURN"
|
||||
end
|
||||
end)
|
||||
|
||||
ESX.RegisterInput("menu_default_backspace", "Close menu", "keyboard", "BACK", function()
|
||||
ESX.RegisterInput("menu_default_backspace", "Close menu", "KEYBOARD", "BACK", function()
|
||||
if OpenedMenus > 0 then
|
||||
SendNUIMessage({
|
||||
action = "controlPressed",
|
||||
@@ -104,7 +111,7 @@ ESX.RegisterInput("menu_default_backspace", "Close menu", "keyboard", "BACK", fu
|
||||
end
|
||||
end)
|
||||
|
||||
ESX.RegisterInput("menu_default_top", "Change menu focus to top item", "keyboard", "UP", function()
|
||||
ESX.RegisterInput("menu_default_top", "Change menu focus to top item", "KEYBOARD", "UP", function()
|
||||
if OpenedMenus > 0 then
|
||||
SendNUIMessage({
|
||||
action = "controlPressed",
|
||||
@@ -114,7 +121,7 @@ ESX.RegisterInput("menu_default_top", "Change menu focus to top item", "keyboard
|
||||
end
|
||||
end)
|
||||
|
||||
ESX.RegisterInput("menu_default_down", "Change menu focus to down item", "keyboard", "DOWN", function()
|
||||
ESX.RegisterInput("menu_default_down", "Change menu focus to down item", "KEYBOARD", "DOWN", function()
|
||||
if OpenedMenus > 0 then
|
||||
SendNUIMessage({
|
||||
action = "controlPressed",
|
||||
@@ -124,7 +131,7 @@ ESX.RegisterInput("menu_default_down", "Change menu focus to down item", "keyboa
|
||||
end
|
||||
end)
|
||||
|
||||
ESX.RegisterInput("menu_default_left", "Change menu slider to left", "keyboard", "LEFT", function()
|
||||
ESX.RegisterInput("menu_default_left", "Change menu slider to left", "KEYBOARD", "LEFT", function()
|
||||
if OpenedMenus > 0 then
|
||||
SendNUIMessage({
|
||||
action = "controlPressed",
|
||||
@@ -134,7 +141,7 @@ ESX.RegisterInput("menu_default_left", "Change menu slider to left", "keyboard",
|
||||
end
|
||||
end)
|
||||
|
||||
ESX.RegisterInput("menu_default_right", "Change menu slider to right", "keyboard", "RIGHT", function()
|
||||
ESX.RegisterInput("menu_default_right", "Change menu slider to right", "KEYBOARD", "RIGHT", function()
|
||||
if OpenedMenus > 0 then
|
||||
SendNUIMessage({
|
||||
action = "controlPressed",
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
fx_version 'adamant'
|
||||
fx_version 'cerulean'
|
||||
|
||||
game 'gta5'
|
||||
description 'A basic menu system for ESX Legacy.'
|
||||
lua54 'yes'
|
||||
version '1.13.3'
|
||||
version '1.13.0'
|
||||
|
||||
client_scripts { '@es_extended/imports.lua', 'client/main.lua' }
|
||||
|
||||
ui_page { 'html/ui.html' }
|
||||
ui_page 'web/build/index.html'
|
||||
|
||||
files { 'html/ui.html', 'html/css/app.css', 'html/js/mustache.min.js', 'html/js/app.js' }
|
||||
files { 'web/build/index.html', 'web/build/**/*' }
|
||||
|
||||
dependencies { 'es_extended' }
|
||||
|
||||
@@ -1,198 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
position: absolute;
|
||||
min-width: 20.8333vw;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.9259vh;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.menu-container.align-left {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) scale(var(--scale, 1));
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.menu-container.align-top-left {
|
||||
left: 4rem;
|
||||
top: 0.8rem;
|
||||
transform: scale(var(--scale, 1));
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
.menu-container.align-top {
|
||||
left: 50%;
|
||||
top: 0.8rem;
|
||||
transform: translateX(-50%) scale(var(--scale, 1));
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
.menu-container.align-top-right {
|
||||
right: 3rem;
|
||||
top: 0.8rem;
|
||||
transform: scale(var(--scale, 1));
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
.menu-container.align-right {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) scale(var(--scale, 1));
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.menu-container.align-bottom-right {
|
||||
right: 3rem;
|
||||
bottom: 0.8rem;
|
||||
transform: scale(var(--scale, 1));
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
|
||||
.menu-container.align-bottom {
|
||||
left: 50%;
|
||||
bottom: 0.8rem;
|
||||
transform: translateX(-50%) scale(var(--scale, 1));
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
.menu-container.align-bottom-left {
|
||||
left: 4rem;
|
||||
bottom: 0.8rem;
|
||||
transform: scale(var(--scale, 1));
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
.menu-container.align-center {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) scale(var(--scale, 1));
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.menu-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: .5208vw;
|
||||
color: #FFF;
|
||||
font-family: Poppins;
|
||||
font-size: .8333vw;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: .4167vw;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.backspace-btn, .close-btn {
|
||||
width: 10.6771vw;
|
||||
height: 6.0185vh;
|
||||
border-radius: .2604vw;
|
||||
background: #161616;
|
||||
}
|
||||
|
||||
.menu-button:hover {
|
||||
background-color: #252525;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.9259vh;
|
||||
font-family: "Poppins", sans-serif;
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
background-color: #161616;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
min-width: 20.4688vw;
|
||||
min-height: 6.0185vh;
|
||||
padding-bottom: 0.2778vh;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border-radius: .2604vw;
|
||||
background: #FB9B04;
|
||||
}
|
||||
|
||||
.menu .head {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #252525;
|
||||
font-family: Poppins;
|
||||
font-size: 1.25vw;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu .menu-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.9259vh;
|
||||
max-height: 41.6667vh;
|
||||
overflow-y: auto;
|
||||
font-weight: 550;
|
||||
margin-bottom: 0.1852vh;
|
||||
}
|
||||
|
||||
.menu .menu-items .menu-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.0833vw;
|
||||
min-width: 20.4688vw;
|
||||
min-height: 6.0185vh;
|
||||
border-radius: .2604vw;
|
||||
background: #252525;
|
||||
color: #FFF;
|
||||
font-family: Poppins;
|
||||
font-size: .8333vw;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.menu .menu-items .menu-item.selected {
|
||||
border: 2px solid #FB9B04;
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .4167vw 0.9259vh;
|
||||
}
|
||||
|
||||
.menu-item-icon {
|
||||
font-size: 1vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-item.selected {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.fas {
|
||||
color: white;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@@ -1,399 +0,0 @@
|
||||
(function () {
|
||||
let MenuTpl =
|
||||
'<div id="menu_{{_namespace}}_{{_name}}" class="menu-container{{#align}} align-{{align}}{{/align}}" style="transform: scale({{scale}});">' +
|
||||
'<div class="menu">' +
|
||||
'<div class="head"><span>{{{title}}}</span></div>' +
|
||||
'<div class="menu-items">' +
|
||||
"{{#elements}}" +
|
||||
'<div class="menu-item {{#selected}}selected{{/selected}}">' +
|
||||
'{{#icon}}<div class="menu-item-icon"><i class="fas fa-{{icon}}"></i></div>{{/icon}}' +
|
||||
'<div class="menu-item-label">{{{label}}}{{#isSlider}} : <{{{sliderLabel}}}>{{/isSlider}}</div>' +
|
||||
"</div>" +
|
||||
"{{/elements}}" +
|
||||
"</div>" +
|
||||
'</div>' +
|
||||
'<div class="menu-buttons">' +
|
||||
'<div class="menu-button backspace-btn"><i class="fa-solid fa-delete-left"></i> {{locales.backspace}}</div>' +
|
||||
'<div class="menu-button close-btn"><i class="fa-solid fa-right-to-bracket"></i> {{locales.select}}</div>' +
|
||||
'</div>' +
|
||||
"</div>";
|
||||
window.ESX_MENU = {};
|
||||
ESX_MENU.ResourceName = "esx_menu_default";
|
||||
ESX_MENU.opened = {};
|
||||
ESX_MENU.focus = [];
|
||||
ESX_MENU.pos = {};
|
||||
ESX_MENU.locales = {
|
||||
backspace: "BACK",
|
||||
select: "SELECT"
|
||||
};
|
||||
|
||||
ESX_MENU.open = function (namespace, name, data) {
|
||||
if (typeof ESX_MENU.opened[namespace] === "undefined") {
|
||||
ESX_MENU.opened[namespace] = {};
|
||||
}
|
||||
|
||||
if (typeof ESX_MENU.opened[namespace][name] != "undefined") {
|
||||
ESX_MENU.close(namespace, name);
|
||||
}
|
||||
|
||||
if (typeof ESX_MENU.pos[namespace] === "undefined") {
|
||||
ESX_MENU.pos[namespace] = {};
|
||||
}
|
||||
|
||||
if (data.locales) {
|
||||
ESX_MENU.locales = data.locales;
|
||||
}
|
||||
|
||||
data.scale = data.scale || 1;
|
||||
|
||||
for (let i = 0; i < data.elements.length; i++) {
|
||||
if (typeof data.elements[i].type === "undefined") {
|
||||
data.elements[i].type = "default";
|
||||
}
|
||||
}
|
||||
|
||||
data._index = ESX_MENU.focus.length;
|
||||
data._namespace = namespace;
|
||||
data._name = name;
|
||||
data.locales = ESX_MENU.locales;
|
||||
|
||||
for (let i = 0; i < data.elements.length; i++) {
|
||||
data.elements[i]._namespace = namespace;
|
||||
data.elements[i]._name = name;
|
||||
}
|
||||
|
||||
ESX_MENU.opened[namespace][name] = data;
|
||||
ESX_MENU.pos[namespace][name] = 0;
|
||||
|
||||
for (let i = 0; i < data.elements.length; i++) {
|
||||
if (data.elements[i].selected) {
|
||||
ESX_MENU.pos[namespace][name] = i;
|
||||
} else {
|
||||
data.elements[i].selected = false;
|
||||
}
|
||||
}
|
||||
|
||||
ESX_MENU.focus.push({
|
||||
namespace: namespace,
|
||||
name: name,
|
||||
});
|
||||
|
||||
ESX_MENU.render();
|
||||
$(document.getElementById("menu_" + namespace + "_" + name))
|
||||
.find(".menu-item.selected")[0]
|
||||
.scrollIntoView();
|
||||
};
|
||||
|
||||
ESX_MENU.close = function (namespace, name) {
|
||||
delete ESX_MENU.opened[namespace][name];
|
||||
|
||||
for (let i = 0; i < ESX_MENU.focus.length; i++) {
|
||||
if (ESX_MENU.focus[i].namespace === namespace && ESX_MENU.focus[i].name === name) {
|
||||
ESX_MENU.focus.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
ESX_MENU.render();
|
||||
};
|
||||
|
||||
ESX_MENU.render = function () {
|
||||
let menuContainer = document.getElementById("menus");
|
||||
let focused = ESX_MENU.getFocused();
|
||||
menuContainer.innerHTML = "";
|
||||
$(menuContainer).hide();
|
||||
|
||||
for (let namespace in ESX_MENU.opened) {
|
||||
for (let name in ESX_MENU.opened[namespace]) {
|
||||
let menuData = ESX_MENU.opened[namespace][name];
|
||||
let view = JSON.parse(JSON.stringify(menuData));
|
||||
|
||||
for (let i = 0; i < menuData.elements.length; i++) {
|
||||
let element = view.elements[i];
|
||||
|
||||
switch (element.type) {
|
||||
case "default":
|
||||
break;
|
||||
|
||||
case "slider": {
|
||||
element.isSlider = true;
|
||||
element.sliderLabel = typeof element.options === "undefined" ? element.value : element.options[element.value];
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (i === ESX_MENU.pos[namespace][name]) {
|
||||
element.selected = true;
|
||||
}
|
||||
}
|
||||
|
||||
let menu = $(Mustache.render(MenuTpl, view))[0];
|
||||
$(menu).hide();
|
||||
menuContainer.appendChild(menu);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof focused != "undefined") {
|
||||
$(document.getElementById("menu_" + focused.namespace + "_" + focused.name)).show();
|
||||
}
|
||||
|
||||
$(menuContainer).show();
|
||||
};
|
||||
|
||||
ESX_MENU.submit = function (namespace, name, data) {
|
||||
$.post(
|
||||
"http://" + ESX_MENU.ResourceName + "/menu_submit",
|
||||
JSON.stringify({
|
||||
_namespace: namespace,
|
||||
_name: name,
|
||||
current: data,
|
||||
elements: ESX_MENU.opened[namespace][name].elements,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
ESX_MENU.cancel = function (namespace, name) {
|
||||
$.post(
|
||||
"http://" + ESX_MENU.ResourceName + "/menu_cancel",
|
||||
JSON.stringify({
|
||||
_namespace: namespace,
|
||||
_name: name,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
ESX_MENU.change = function (namespace, name, data) {
|
||||
$.post(
|
||||
"http://" + ESX_MENU.ResourceName + "/menu_change",
|
||||
JSON.stringify({
|
||||
_namespace: namespace,
|
||||
_name: name,
|
||||
current: data,
|
||||
elements: ESX_MENU.opened[namespace][name].elements,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
ESX_MENU.getFocused = function () {
|
||||
return ESX_MENU.focus[ESX_MENU.focus.length - 1];
|
||||
};
|
||||
|
||||
window.onData = (data) => {
|
||||
switch (data.action) {
|
||||
case "openMenu": {
|
||||
ESX_MENU.open(data.namespace, data.name, data.data);
|
||||
break;
|
||||
}
|
||||
|
||||
case "closeMenu": {
|
||||
ESX_MENU.close(data.namespace, data.name);
|
||||
break;
|
||||
}
|
||||
|
||||
case "controlPressed": {
|
||||
switch (data.control) {
|
||||
case "ENTER": {
|
||||
let focused = ESX_MENU.getFocused();
|
||||
|
||||
if (typeof focused != "undefined") {
|
||||
let menu = ESX_MENU.opened[focused.namespace][focused.name];
|
||||
let pos = ESX_MENU.pos[focused.namespace][focused.name];
|
||||
let elem = menu.elements[pos];
|
||||
|
||||
if (menu.elements.length > 0) {
|
||||
ESX_MENU.submit(focused.namespace, focused.name, elem);
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case "BACKSPACE": {
|
||||
let focused = ESX_MENU.getFocused();
|
||||
|
||||
if (typeof focused != "undefined") {
|
||||
ESX_MENU.cancel(focused.namespace, focused.name);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case "TOP": {
|
||||
let focused = ESX_MENU.getFocused();
|
||||
|
||||
if (typeof focused != "undefined") {
|
||||
let menu = ESX_MENU.opened[focused.namespace][focused.name];
|
||||
let pos = ESX_MENU.pos[focused.namespace][focused.name];
|
||||
|
||||
if (pos > 0) {
|
||||
ESX_MENU.pos[focused.namespace][focused.name]--;
|
||||
} else {
|
||||
ESX_MENU.pos[focused.namespace][focused.name] = menu.elements.length - 1;
|
||||
}
|
||||
|
||||
let elem = menu.elements[ESX_MENU.pos[focused.namespace][focused.name]];
|
||||
|
||||
for (let i = 0; i < menu.elements.length; i++) {
|
||||
if (i === ESX_MENU.pos[focused.namespace][focused.name]) {
|
||||
menu.elements[i].selected = true;
|
||||
} else {
|
||||
menu.elements[i].selected = false;
|
||||
}
|
||||
}
|
||||
|
||||
ESX_MENU.change(focused.namespace, focused.name, elem);
|
||||
ESX_MENU.render();
|
||||
|
||||
$(document.getElementById("menu_" + focused.namespace + "_" + focused.name))
|
||||
.find(".menu-item.selected")[0]
|
||||
.scrollIntoView();
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case "DOWN": {
|
||||
let focused = ESX_MENU.getFocused();
|
||||
|
||||
if (typeof focused != "undefined") {
|
||||
let menu = ESX_MENU.opened[focused.namespace][focused.name];
|
||||
let pos = ESX_MENU.pos[focused.namespace][focused.name];
|
||||
let length = menu.elements.length;
|
||||
|
||||
if (pos < length - 1) {
|
||||
ESX_MENU.pos[focused.namespace][focused.name]++;
|
||||
} else {
|
||||
ESX_MENU.pos[focused.namespace][focused.name] = 0;
|
||||
}
|
||||
|
||||
let elem = menu.elements[ESX_MENU.pos[focused.namespace][focused.name]];
|
||||
|
||||
for (let i = 0; i < menu.elements.length; i++) {
|
||||
if (i === ESX_MENU.pos[focused.namespace][focused.name]) {
|
||||
menu.elements[i].selected = true;
|
||||
} else {
|
||||
menu.elements[i].selected = false;
|
||||
}
|
||||
}
|
||||
|
||||
ESX_MENU.change(focused.namespace, focused.name, elem);
|
||||
ESX_MENU.render();
|
||||
|
||||
$(document.getElementById("menu_" + focused.namespace + "_" + focused.name))
|
||||
.find(".menu-item.selected")[0]
|
||||
.scrollIntoView();
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case "LEFT": {
|
||||
let focused = ESX_MENU.getFocused();
|
||||
|
||||
if (typeof focused != "undefined") {
|
||||
let menu = ESX_MENU.opened[focused.namespace][focused.name];
|
||||
let pos = ESX_MENU.pos[focused.namespace][focused.name];
|
||||
let elem = menu.elements[pos];
|
||||
|
||||
switch (elem.type) {
|
||||
case "default":
|
||||
break;
|
||||
|
||||
case "slider": {
|
||||
let min = typeof elem.min === "undefined" ? 0 : elem.min;
|
||||
|
||||
if (elem.value > min) {
|
||||
elem.value--;
|
||||
ESX_MENU.change(focused.namespace, focused.name, elem);
|
||||
}
|
||||
|
||||
ESX_MENU.render();
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
$(document.getElementById("menu_" + focused.namespace + "_" + focused.name))
|
||||
.find(".menu-item.selected")[0]
|
||||
.scrollIntoView();
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case "RIGHT": {
|
||||
let focused = ESX_MENU.getFocused();
|
||||
|
||||
if (typeof focused != "undefined") {
|
||||
let menu = ESX_MENU.opened[focused.namespace][focused.name];
|
||||
let pos = ESX_MENU.pos[focused.namespace][focused.name];
|
||||
let elem = menu.elements[pos];
|
||||
|
||||
switch (elem.type) {
|
||||
case "default":
|
||||
break;
|
||||
|
||||
case "slider": {
|
||||
if (typeof elem.options != "undefined" && elem.value < elem.options.length - 1) {
|
||||
elem.value++;
|
||||
ESX_MENU.change(focused.namespace, focused.name, elem);
|
||||
}
|
||||
|
||||
if (typeof elem.max != "undefined" && elem.value < elem.max) {
|
||||
elem.value++;
|
||||
ESX_MENU.change(focused.namespace, focused.name, elem);
|
||||
}
|
||||
|
||||
ESX_MENU.render();
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
$(document.getElementById("menu_" + focused.namespace + "_" + focused.name))
|
||||
.find(".menu-item.selected")[0]
|
||||
.scrollIntoView();
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function (e) {
|
||||
window.addEventListener("message", (event) => {
|
||||
onData(event.data);
|
||||
});
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
if (event.target.closest('.backspace-btn')) {
|
||||
let focused = ESX_MENU.getFocused();
|
||||
if (typeof focused != "undefined") {
|
||||
ESX_MENU.cancel(focused.namespace, focused.name);
|
||||
}
|
||||
}
|
||||
|
||||
if (event.target.closest('.close-btn')) {
|
||||
let focused = ESX_MENU.getFocused();
|
||||
if (typeof focused != "undefined") {
|
||||
ESX_MENU.close(focused.namespace, focused.name);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
})();
|
||||
-347
@@ -1,347 +0,0 @@
|
||||
(function defineMustache(global, factory) {
|
||||
if (typeof exports === "object" && exports && typeof exports.nodeName !== "string") {
|
||||
factory(exports);
|
||||
} else if (typeof define === "function" && define.amd) {
|
||||
define(["exports"], factory);
|
||||
} else {
|
||||
global.Mustache = {};
|
||||
factory(global.Mustache);
|
||||
}
|
||||
})(this, function mustacheFactory(mustache) {
|
||||
var objectToString = Object.prototype.toString;
|
||||
var isArray =
|
||||
Array.isArray ||
|
||||
function isArrayPolyfill(object) {
|
||||
return objectToString.call(object) === "[object Array]";
|
||||
};
|
||||
function isFunction(object) {
|
||||
return typeof object === "function";
|
||||
}
|
||||
function typeStr(obj) {
|
||||
return isArray(obj) ? "array" : typeof obj;
|
||||
}
|
||||
function escapeRegExp(string) {
|
||||
return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
|
||||
}
|
||||
function hasProperty(obj, propName) {
|
||||
return obj != null && typeof obj === "object" && propName in obj;
|
||||
}
|
||||
var regExpTest = RegExp.prototype.test;
|
||||
function testRegExp(re, string) {
|
||||
return regExpTest.call(re, string);
|
||||
}
|
||||
var nonSpaceRe = /\S/;
|
||||
function isWhitespace(string) {
|
||||
return !testRegExp(nonSpaceRe, string);
|
||||
}
|
||||
var entityMap = { "&": "&", "<": "<", ">": ">", '"': """, "'": "'", "/": "/", "`": "`", "=": "=" };
|
||||
function escapeHtml(string) {
|
||||
return String(string).replace(/[&<>"'`=\/]/g, function fromEntityMap(s) {
|
||||
return entityMap[s];
|
||||
});
|
||||
}
|
||||
var whiteRe = /\s*/;
|
||||
var spaceRe = /\s+/;
|
||||
var equalsRe = /\s*=/;
|
||||
var curlyRe = /\s*\}/;
|
||||
var tagRe = /#|\^|\/|>|\{|&|=|!/;
|
||||
function parseTemplate(template, tags) {
|
||||
if (!template) return [];
|
||||
var sections = [];
|
||||
var tokens = [];
|
||||
var spaces = [];
|
||||
var hasTag = false;
|
||||
var nonSpace = false;
|
||||
function stripSpace() {
|
||||
if (hasTag && !nonSpace) {
|
||||
while (spaces.length) delete tokens[spaces.pop()];
|
||||
} else {
|
||||
spaces = [];
|
||||
}
|
||||
hasTag = false;
|
||||
nonSpace = false;
|
||||
}
|
||||
var openingTagRe, closingTagRe, closingCurlyRe;
|
||||
function compileTags(tagsToCompile) {
|
||||
if (typeof tagsToCompile === "string") tagsToCompile = tagsToCompile.split(spaceRe, 2);
|
||||
if (!isArray(tagsToCompile) || tagsToCompile.length !== 2) throw new Error("Invalid tags: " + tagsToCompile);
|
||||
openingTagRe = new RegExp(escapeRegExp(tagsToCompile[0]) + "\\s*");
|
||||
closingTagRe = new RegExp("\\s*" + escapeRegExp(tagsToCompile[1]));
|
||||
closingCurlyRe = new RegExp("\\s*" + escapeRegExp("}" + tagsToCompile[1]));
|
||||
}
|
||||
compileTags(tags || mustache.tags);
|
||||
var scanner = new Scanner(template);
|
||||
var start, type, value, chr, token, openSection;
|
||||
while (!scanner.eos()) {
|
||||
start = scanner.pos;
|
||||
value = scanner.scanUntil(openingTagRe);
|
||||
if (value) {
|
||||
for (var i = 0, valueLength = value.length; i < valueLength; ++i) {
|
||||
chr = value.charAt(i);
|
||||
if (isWhitespace(chr)) {
|
||||
spaces.push(tokens.length);
|
||||
} else {
|
||||
nonSpace = true;
|
||||
}
|
||||
tokens.push(["text", chr, start, start + 1]);
|
||||
start += 1;
|
||||
if (chr === "\n") stripSpace();
|
||||
}
|
||||
}
|
||||
if (!scanner.scan(openingTagRe)) break;
|
||||
hasTag = true;
|
||||
type = scanner.scan(tagRe) || "name";
|
||||
scanner.scan(whiteRe);
|
||||
if (type === "=") {
|
||||
value = scanner.scanUntil(equalsRe);
|
||||
scanner.scan(equalsRe);
|
||||
scanner.scanUntil(closingTagRe);
|
||||
} else if (type === "{") {
|
||||
value = scanner.scanUntil(closingCurlyRe);
|
||||
scanner.scan(curlyRe);
|
||||
scanner.scanUntil(closingTagRe);
|
||||
type = "&";
|
||||
} else {
|
||||
value = scanner.scanUntil(closingTagRe);
|
||||
}
|
||||
if (!scanner.scan(closingTagRe)) throw new Error("Unclosed tag at " + scanner.pos);
|
||||
token = [type, value, start, scanner.pos];
|
||||
tokens.push(token);
|
||||
if (type === "#" || type === "^") {
|
||||
sections.push(token);
|
||||
} else if (type === "/") {
|
||||
openSection = sections.pop();
|
||||
if (!openSection) throw new Error('Unopened section "' + value + '" at ' + start);
|
||||
if (openSection[1] !== value) throw new Error('Unclosed section "' + openSection[1] + '" at ' + start);
|
||||
} else if (type === "name" || type === "{" || type === "&") {
|
||||
nonSpace = true;
|
||||
} else if (type === "=") {
|
||||
compileTags(value);
|
||||
}
|
||||
}
|
||||
openSection = sections.pop();
|
||||
if (openSection) throw new Error('Unclosed section "' + openSection[1] + '" at ' + scanner.pos);
|
||||
return nestTokens(squashTokens(tokens));
|
||||
}
|
||||
function squashTokens(tokens) {
|
||||
var squashedTokens = [];
|
||||
var token, lastToken;
|
||||
for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
|
||||
token = tokens[i];
|
||||
if (token) {
|
||||
if (token[0] === "text" && lastToken && lastToken[0] === "text") {
|
||||
lastToken[1] += token[1];
|
||||
lastToken[3] = token[3];
|
||||
} else {
|
||||
squashedTokens.push(token);
|
||||
lastToken = token;
|
||||
}
|
||||
}
|
||||
}
|
||||
return squashedTokens;
|
||||
}
|
||||
function nestTokens(tokens) {
|
||||
var nestedTokens = [];
|
||||
var collector = nestedTokens;
|
||||
var sections = [];
|
||||
var token, section;
|
||||
for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
|
||||
token = tokens[i];
|
||||
switch (token[0]) {
|
||||
case "#":
|
||||
case "^":
|
||||
collector.push(token);
|
||||
sections.push(token);
|
||||
collector = token[4] = [];
|
||||
break;
|
||||
case "/":
|
||||
section = sections.pop();
|
||||
section[5] = token[2];
|
||||
collector = sections.length > 0 ? sections[sections.length - 1][4] : nestedTokens;
|
||||
break;
|
||||
default:
|
||||
collector.push(token);
|
||||
}
|
||||
}
|
||||
return nestedTokens;
|
||||
}
|
||||
function Scanner(string) {
|
||||
this.string = string;
|
||||
this.tail = string;
|
||||
this.pos = 0;
|
||||
}
|
||||
Scanner.prototype.eos = function eos() {
|
||||
return this.tail === "";
|
||||
};
|
||||
Scanner.prototype.scan = function scan(re) {
|
||||
var match = this.tail.match(re);
|
||||
if (!match || match.index !== 0) return "";
|
||||
var string = match[0];
|
||||
this.tail = this.tail.substring(string.length);
|
||||
this.pos += string.length;
|
||||
return string;
|
||||
};
|
||||
Scanner.prototype.scanUntil = function scanUntil(re) {
|
||||
var index = this.tail.search(re),
|
||||
match;
|
||||
switch (index) {
|
||||
case -1:
|
||||
match = this.tail;
|
||||
this.tail = "";
|
||||
break;
|
||||
case 0:
|
||||
match = "";
|
||||
break;
|
||||
default:
|
||||
match = this.tail.substring(0, index);
|
||||
this.tail = this.tail.substring(index);
|
||||
}
|
||||
this.pos += match.length;
|
||||
return match;
|
||||
};
|
||||
function Context(view, parentContext) {
|
||||
this.view = view;
|
||||
this.cache = { ".": this.view };
|
||||
this.parent = parentContext;
|
||||
}
|
||||
Context.prototype.push = function push(view) {
|
||||
return new Context(view, this);
|
||||
};
|
||||
Context.prototype.lookup = function lookup(name) {
|
||||
var cache = this.cache;
|
||||
var value;
|
||||
if (cache.hasOwnProperty(name)) {
|
||||
value = cache[name];
|
||||
} else {
|
||||
var context = this,
|
||||
names,
|
||||
index,
|
||||
lookupHit = false;
|
||||
while (context) {
|
||||
if (name.indexOf(".") > 0) {
|
||||
value = context.view;
|
||||
names = name.split(".");
|
||||
index = 0;
|
||||
while (value != null && index < names.length) {
|
||||
if (index === names.length - 1) lookupHit = hasProperty(value, names[index]);
|
||||
value = value[names[index++]];
|
||||
}
|
||||
} else {
|
||||
value = context.view[name];
|
||||
lookupHit = hasProperty(context.view, name);
|
||||
}
|
||||
if (lookupHit) break;
|
||||
context = context.parent;
|
||||
}
|
||||
cache[name] = value;
|
||||
}
|
||||
if (isFunction(value)) value = value.call(this.view);
|
||||
return value;
|
||||
};
|
||||
function Writer() {
|
||||
this.cache = {};
|
||||
}
|
||||
Writer.prototype.clearCache = function clearCache() {
|
||||
this.cache = {};
|
||||
};
|
||||
Writer.prototype.parse = function parse(template, tags) {
|
||||
var cache = this.cache;
|
||||
var tokens = cache[template];
|
||||
if (tokens == null) tokens = cache[template] = parseTemplate(template, tags);
|
||||
return tokens;
|
||||
};
|
||||
Writer.prototype.render = function render(template, view, partials) {
|
||||
var tokens = this.parse(template);
|
||||
var context = view instanceof Context ? view : new Context(view);
|
||||
return this.renderTokens(tokens, context, partials, template);
|
||||
};
|
||||
Writer.prototype.renderTokens = function renderTokens(tokens, context, partials, originalTemplate) {
|
||||
var buffer = "";
|
||||
var token, symbol, value;
|
||||
for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
|
||||
value = undefined;
|
||||
token = tokens[i];
|
||||
symbol = token[0];
|
||||
if (symbol === "#") value = this.renderSection(token, context, partials, originalTemplate);
|
||||
else if (symbol === "^") value = this.renderInverted(token, context, partials, originalTemplate);
|
||||
else if (symbol === ">") value = this.renderPartial(token, context, partials, originalTemplate);
|
||||
else if (symbol === "&") value = this.unescapedValue(token, context);
|
||||
else if (symbol === "name") value = this.escapedValue(token, context);
|
||||
else if (symbol === "text") value = this.rawValue(token);
|
||||
if (value !== undefined) buffer += value;
|
||||
}
|
||||
return buffer;
|
||||
};
|
||||
Writer.prototype.renderSection = function renderSection(token, context, partials, originalTemplate) {
|
||||
var self = this;
|
||||
var buffer = "";
|
||||
var value = context.lookup(token[1]);
|
||||
function subRender(template) {
|
||||
return self.render(template, context, partials);
|
||||
}
|
||||
if (!value) return;
|
||||
if (isArray(value)) {
|
||||
for (var j = 0, valueLength = value.length; j < valueLength; ++j) {
|
||||
buffer += this.renderTokens(token[4], context.push(value[j]), partials, originalTemplate);
|
||||
}
|
||||
} else if (typeof value === "object" || typeof value === "string" || typeof value === "number") {
|
||||
buffer += this.renderTokens(token[4], context.push(value), partials, originalTemplate);
|
||||
} else if (isFunction(value)) {
|
||||
if (typeof originalTemplate !== "string") throw new Error("Cannot use higher-order sections without the original template");
|
||||
value = value.call(context.view, originalTemplate.slice(token[3], token[5]), subRender);
|
||||
if (value != null) buffer += value;
|
||||
} else {
|
||||
buffer += this.renderTokens(token[4], context, partials, originalTemplate);
|
||||
}
|
||||
return buffer;
|
||||
};
|
||||
Writer.prototype.renderInverted = function renderInverted(token, context, partials, originalTemplate) {
|
||||
var value = context.lookup(token[1]);
|
||||
if (!value || (isArray(value) && value.length === 0)) return this.renderTokens(token[4], context, partials, originalTemplate);
|
||||
};
|
||||
Writer.prototype.renderPartial = function renderPartial(token, context, partials) {
|
||||
if (!partials) return;
|
||||
var value = isFunction(partials) ? partials(token[1]) : partials[token[1]];
|
||||
if (value != null) return this.renderTokens(this.parse(value), context, partials, value);
|
||||
};
|
||||
Writer.prototype.unescapedValue = function unescapedValue(token, context) {
|
||||
var value = context.lookup(token[1]);
|
||||
if (value != null) return value;
|
||||
};
|
||||
Writer.prototype.escapedValue = function escapedValue(token, context) {
|
||||
var value = context.lookup(token[1]);
|
||||
if (value != null) return mustache.escape(value);
|
||||
};
|
||||
Writer.prototype.rawValue = function rawValue(token) {
|
||||
return token[1];
|
||||
};
|
||||
mustache.name = "mustache.js";
|
||||
mustache.version = "2.3.0";
|
||||
mustache.tags = ["{{", "}}"];
|
||||
var defaultWriter = new Writer();
|
||||
mustache.clearCache = function clearCache() {
|
||||
return defaultWriter.clearCache();
|
||||
};
|
||||
mustache.parse = function parse(template, tags) {
|
||||
return defaultWriter.parse(template, tags);
|
||||
};
|
||||
mustache.render = function render(template, view, partials) {
|
||||
if (typeof template !== "string") {
|
||||
throw new TypeError('Invalid template! Template should be a "string" ' + 'but "' + typeStr(template) + '" was given as the first ' + "argument for mustache#render(template, view, partials)");
|
||||
}
|
||||
return defaultWriter.render(template, view, partials);
|
||||
};
|
||||
mustache.to_html = function to_html(template, view, partials, send) {
|
||||
var result = mustache.render(template, view, partials);
|
||||
if (isFunction(send)) {
|
||||
send(result);
|
||||
} else {
|
||||
return result;
|
||||
}
|
||||
};
|
||||
mustache.escape = escapeHtml;
|
||||
mustache.Scanner = Scanner;
|
||||
mustache.Context = Context;
|
||||
mustache.Writer = Writer;
|
||||
return mustache;
|
||||
});
|
||||
@@ -1,21 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="nui://esx_menu_default/html/css/app.css" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
|
||||
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="menus"></div>
|
||||
|
||||
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||
<script src="nui://esx_menu_default/html/js/mustache.min.js" type="text/javascript"></script>
|
||||
<script src="nui://esx_menu_default/html/js/app.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:react-hooks/recommended",
|
||||
],
|
||||
ignorePatterns: ["dist", ".eslintrc.cjs"],
|
||||
parser: "@typescript-eslint/parser",
|
||||
plugins: ["react-refresh"],
|
||||
rules: {
|
||||
"react-refresh/only-export-components": [
|
||||
"warn",
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Dependencies
|
||||
node_modules
|
||||
.pnpm-store
|
||||
.npm
|
||||
|
||||
# Build outputs
|
||||
*.local
|
||||
|
||||
# Environment files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# OS generated files
|
||||
Thumbs.db
|
||||
.DS_Store
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.2.0/css/pro.min.css" rel="stylesheet">
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ESX Menu Default</title>
|
||||
<script type="module" crossorigin src="./assets/index-Begvl3m4.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="./assets/index-DB0yiboF.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.2.0/css/pro.min.css" rel="stylesheet">
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ESX Menu Default</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,56 @@
|
||||
{
|
||||
"name": "web",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"dev": "vite",
|
||||
"start:game": "vite build --watch",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Err",
|
||||
"license": "ISC",
|
||||
"packageManager": "pnpm@10.13.1",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"@tailwindcss/vite": "^4.0.15",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.5.0",
|
||||
"lucide-react": "^0.525.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.13.13",
|
||||
"@types/react": "^19.0.12",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@typescript-eslint/eslint-plugin": "^8.28.0",
|
||||
"@typescript-eslint/parser": "^8.28.0",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.23.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.3"
|
||||
},
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
"esbuild"
|
||||
]
|
||||
}
|
||||
}
|
||||
+3046
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,96 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNuiEvent } from "@/hooks/useNuiEvent";
|
||||
import { AnimatePresence, HTMLMotionProps, motion } from "framer-motion";
|
||||
import Menu from "@/components/menu";
|
||||
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
||||
|
||||
export interface Element {
|
||||
label: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
icon?: IconProp;
|
||||
value?: number;
|
||||
type?: "slider";
|
||||
min: number;
|
||||
max: number;
|
||||
options?: string[];
|
||||
usable?: boolean;
|
||||
unselectable?: boolean;
|
||||
disableRightArrow?: boolean;
|
||||
}
|
||||
|
||||
export interface MenuData {
|
||||
title: string;
|
||||
namespace: string;
|
||||
name: string;
|
||||
align: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" | "left-center" | "right-center";
|
||||
elements: Element[];
|
||||
}
|
||||
|
||||
export interface CloseData {
|
||||
namespace: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const visibility_animation: HTMLMotionProps<"div"> = {
|
||||
initial: { opacity: 0 },
|
||||
animate: {
|
||||
opacity: 1,
|
||||
transition: { duration: 0.3, ease: [0, 0, 0.2, 1] },
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
transition: { duration: 0.3, ease: [0.4, 0, 1, 1] },
|
||||
},
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [_, setCreatedMenus] = useState<Record<string, MenuData[]>>({});
|
||||
|
||||
const [currentMenu, setCurrentMenu] = useState<MenuData | null>(null);
|
||||
|
||||
useNuiEvent<MenuData>("openMenu", (data) => {
|
||||
setCreatedMenus((prev) => {
|
||||
const list = prev[data.namespace] ?? [];
|
||||
return {
|
||||
...prev,
|
||||
[data.namespace]: [...list, data],
|
||||
};
|
||||
});
|
||||
|
||||
console.log(JSON.stringify(data));
|
||||
|
||||
setCurrentMenu(data);
|
||||
});
|
||||
|
||||
useNuiEvent<CloseData>("closeMenu", ({ namespace, name }) => {
|
||||
setCreatedMenus((prev) => {
|
||||
const list = prev[namespace] ?? [];
|
||||
const nextList = list.filter((m) => m.name !== name);
|
||||
|
||||
const next = { ...prev };
|
||||
if (nextList.length > 0) {
|
||||
next[namespace] = nextList;
|
||||
} else {
|
||||
delete next[namespace];
|
||||
}
|
||||
|
||||
const all = Object.values(next).flat();
|
||||
setCurrentMenu(all.length > 0 ? all[all.length - 1] : null);
|
||||
|
||||
return next;
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{currentMenu && (
|
||||
<motion.div key={`${currentMenu.namespace}:${currentMenu.name}`} {...visibility_animation}>
|
||||
<Menu data={currentMenu} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,67 @@
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { Element } from "@/app/App";
|
||||
|
||||
interface Props {
|
||||
element: Element;
|
||||
isSelected?: boolean;
|
||||
}
|
||||
|
||||
const MenuButton: React.FC<Props> = ({ element, isSelected }) => {
|
||||
const { label, description, icon, usable, disableRightArrow, unselectable } =
|
||||
element;
|
||||
const base = "rounded-[4px] flex items-center p-4 gap-4 justify-between";
|
||||
const sel = isSelected
|
||||
? "bg-[#FB9B041A] border border-[#FB9B04]"
|
||||
: "bg-[#252525] border border-transparent";
|
||||
|
||||
const unSelectable = unselectable ? "opacity-80" : "";
|
||||
|
||||
return (
|
||||
<div className={`${base} ${sel} ${unSelectable}`}>
|
||||
<div className="flex items-center gap-4">
|
||||
{icon && (
|
||||
<FontAwesomeIcon
|
||||
className="size-6"
|
||||
icon={icon}
|
||||
color={isSelected ? "#FB9B04" : undefined}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col justify-center">
|
||||
{description ? (
|
||||
<>
|
||||
<p
|
||||
className={`font-semibold ${
|
||||
isSelected ? "text-[#FB9B04]" : "text-neutral-100"
|
||||
}`}
|
||||
dangerouslySetInnerHTML={{ __html: label }}
|
||||
/>
|
||||
<p
|
||||
className={`text-sm font-normal ${
|
||||
isSelected ? "text-[#FB9B04]" : "text-neutral-200"
|
||||
}`}
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<p
|
||||
className={`text-sm font-normal ${
|
||||
isSelected ? "text-[#FB9B04]" : "text-neutral-200"
|
||||
}`}
|
||||
dangerouslySetInnerHTML={{ __html: label }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{usable !== false &&
|
||||
disableRightArrow !== true &&
|
||||
unselectable !== true && (
|
||||
<ArrowRight color={isSelected ? "#FB9B04" : "white"} size="1.6rem" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuButton;
|
||||
@@ -0,0 +1,78 @@
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Element } from "@/app/App";
|
||||
|
||||
interface Props {
|
||||
element: Element;
|
||||
isSelected?: boolean;
|
||||
}
|
||||
|
||||
const MenuSlider: React.FC<Props> = ({ element, isSelected }) => {
|
||||
const { label, description, icon, unselectable } = element;
|
||||
|
||||
const options = (element as Element).options as string[] | undefined;
|
||||
|
||||
const min = options ? 0 : element.min ?? 0;
|
||||
const max = options ? Math.max(0, options.length - 1) : element.max ?? 0;
|
||||
|
||||
const rawValue = element.value ?? min;
|
||||
const value = Math.min(max, Math.max(min, rawValue));
|
||||
|
||||
const base = "rounded-[4px] flex items-center p-4 gap-4 justify-between";
|
||||
const sel = isSelected
|
||||
? "bg-[#FB9B041A] border border-[#FB9B04]"
|
||||
: "bg-[#252525] border border-transparent";
|
||||
const text = isSelected ? "text-[#FB9B04]" : "text-neutral-100";
|
||||
|
||||
const unSelectable = unselectable ? "opacity-50" : ""
|
||||
|
||||
return (
|
||||
<div className={`${base} ${sel} ${unSelectable}`}>
|
||||
<div className="flex items-center gap-4">
|
||||
{icon && (
|
||||
<FontAwesomeIcon
|
||||
className="size-6"
|
||||
icon={icon}
|
||||
color={isSelected ? "#FB9B04" : undefined}
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-col justify-center">
|
||||
{description ? (
|
||||
<>
|
||||
<p
|
||||
className={`font-semibold ${text}`}
|
||||
dangerouslySetInnerHTML={{ __html: label }}
|
||||
/>
|
||||
<p
|
||||
className={`text-sm font-normal ${
|
||||
isSelected ? "text-[#FB9B04]" : "text-neutral-200"
|
||||
}`}
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<p
|
||||
className={`text-sm font-normal ${text}`}
|
||||
dangerouslySetInnerHTML={{ __html: label }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 select-none">
|
||||
<ChevronLeft color={isSelected ? "#FB9B04" : "white"} />
|
||||
{options ? (
|
||||
<span
|
||||
className={`${text} whitespace-nowrap overflow-hidden text-ellipsis`}
|
||||
dangerouslySetInnerHTML={{ __html: options[value] ?? "" }}
|
||||
/>
|
||||
) : (
|
||||
<span className={`${text} w-6 text-center`}>{value}</span>
|
||||
)}
|
||||
<ChevronRight color={isSelected ? "#FB9B04" : "white"} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuSlider;
|
||||
@@ -0,0 +1,140 @@
|
||||
import { useReducer, useState, useRef, useEffect } from "react";
|
||||
import { fetchNui } from "@/utils/fetchNui";
|
||||
import { useControls } from "@/hooks/useControls";
|
||||
import { MenuData } from "@/app/App";
|
||||
import MenuButton from "./menu-button";
|
||||
import MenuSlider from "./menu-slider";
|
||||
import { GetPosition } from "@/utils/getPosition";
|
||||
|
||||
interface Props {
|
||||
data: MenuData;
|
||||
}
|
||||
|
||||
const Menu: React.FC<Props> = ({ data }) => {
|
||||
const [position, setPosition] = useState(0);
|
||||
const [, forceRender] = useReducer((v) => v + 1, 0);
|
||||
const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
|
||||
const elements = data.elements;
|
||||
|
||||
const payload = () => ({
|
||||
_namespace: data.namespace,
|
||||
_name: data.name,
|
||||
current: elements[position],
|
||||
elements,
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
const el = elements[position];
|
||||
if (el?.usable === false) return;
|
||||
|
||||
fetchNui("menu_submit", payload());
|
||||
};
|
||||
|
||||
const cancel = () =>
|
||||
fetchNui("menu_cancel", { _namespace: data.namespace, _name: data.name });
|
||||
|
||||
const change = () => {
|
||||
const el = elements[position];
|
||||
if (el?.usable === false) return;
|
||||
|
||||
fetchNui("menu_change", payload());
|
||||
};
|
||||
|
||||
const stepSelectedSlider = (delta: number) => {
|
||||
const el = elements[position];
|
||||
|
||||
if (el?.usable === false) return;
|
||||
if (el?.type !== "slider") return;
|
||||
|
||||
const options = (el as any).options as string[] | undefined;
|
||||
|
||||
const min = options ? 0 : el.min ?? 0;
|
||||
const max = options ? Math.max(0, options.length - 1) : el.max ?? 0;
|
||||
|
||||
const cur = (el.value ?? min) + delta;
|
||||
|
||||
if (cur > max) {
|
||||
el.value = min;
|
||||
} else if (cur < min) {
|
||||
el.value = max;
|
||||
} else {
|
||||
el.value = cur;
|
||||
}
|
||||
|
||||
forceRender();
|
||||
change();
|
||||
};
|
||||
|
||||
useControls({
|
||||
elements,
|
||||
position,
|
||||
setPosition: (updater) => {
|
||||
setPosition(updater);
|
||||
change();
|
||||
},
|
||||
submit,
|
||||
cancel,
|
||||
changeLeft: () => stepSelectedSlider(-1),
|
||||
changeRight: () => stepSelectedSlider(1),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const el = itemRefs.current[position];
|
||||
if (el) {
|
||||
el.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center",
|
||||
inline: "nearest",
|
||||
});
|
||||
}
|
||||
}, [position]);
|
||||
|
||||
useEffect(() => {
|
||||
if (elements[position]?.unselectable) {
|
||||
const firstSelectable = elements.findIndex((el) => !el.unselectable);
|
||||
if (firstSelectable !== -1) setPosition(firstSelectable);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={`absolute ${GetPosition(data.align)}`}>
|
||||
<div className="w-[26rem] h-fit max-h-[42rem] bg-[#161616] p-4 rounded-[10px] flex flex-col gap-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1
|
||||
className="font-bold uppercase text-xl my-2 text-neutral-100"
|
||||
dangerouslySetInnerHTML={{ __html: data.title }}
|
||||
/>
|
||||
<img
|
||||
className="h-10"
|
||||
src="https://media.discordapp.net/attachments/1370464258382368918/1409914889174257724/esxLogo-sNwPFb_p.png?ex=68af1d10&is=68adcb90&hm=5ce71e8e56c92753b9718188e2c930fb1682d1debae6a63d7ff6b255d2c6ce55&=&format=webp&quality=lossless&width=350&height=350"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto h-full flex flex-col gap-4">
|
||||
{elements.map((element, index) => {
|
||||
const isSelected = index === position;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`wrapper-${element.name || element.label}-${index}`}
|
||||
ref={(el: HTMLDivElement | null) => {
|
||||
itemRefs.current[index] = el;
|
||||
}}
|
||||
>
|
||||
{element.type === "slider" ? (
|
||||
<MenuSlider element={element} isSelected={isSelected} />
|
||||
) : (
|
||||
<MenuButton element={element} isSelected={isSelected} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Menu;
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
export type Control = "TOP" | "DOWN" | "ENTER" | "BACKSPACE" | "LEFT" | "RIGHT";
|
||||
|
||||
interface Props {
|
||||
elements: any[];
|
||||
position: number;
|
||||
setPosition: (p: number | ((prev: number) => number)) => void;
|
||||
submit: () => void;
|
||||
cancel: () => void;
|
||||
changeLeft: () => void;
|
||||
changeRight: () => void;
|
||||
}
|
||||
|
||||
export const useControls = ({
|
||||
elements,
|
||||
position,
|
||||
setPosition,
|
||||
submit,
|
||||
cancel,
|
||||
changeLeft,
|
||||
changeRight,
|
||||
}: Props) => {
|
||||
useEffect(() => {
|
||||
const onMessage = (
|
||||
ev: MessageEvent<{ action: string; control: Control }>
|
||||
) => {
|
||||
if (ev.data.action !== "controlPressed") return;
|
||||
|
||||
const skipUp = (p: number) => {
|
||||
let next = p === 0 ? elements.length - 1 : p - 1;
|
||||
while (elements[next]?.unselectable) {
|
||||
next = next === 0 ? elements.length - 1 : next - 1;
|
||||
}
|
||||
return next;
|
||||
};
|
||||
|
||||
const skipDown = (p: number) => {
|
||||
let next = p === elements.length - 1 ? 0 : p + 1;
|
||||
while (elements[next]?.unselectable) {
|
||||
next = next === elements.length - 1 ? 0 : next + 1;
|
||||
}
|
||||
return next;
|
||||
};
|
||||
|
||||
switch (ev.data.control) {
|
||||
case "TOP":
|
||||
setPosition((p) => skipUp(typeof p === "number" ? p : position));
|
||||
break;
|
||||
case "DOWN":
|
||||
setPosition((p) => skipDown(typeof p === "number" ? p : position));
|
||||
break;
|
||||
case "ENTER":
|
||||
if (!elements[position]?.unselectable) submit();
|
||||
break;
|
||||
case "BACKSPACE":
|
||||
cancel();
|
||||
break;
|
||||
case "LEFT":
|
||||
changeLeft();
|
||||
break;
|
||||
case "RIGHT":
|
||||
changeRight();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("message", onMessage);
|
||||
return () => window.removeEventListener("message", onMessage);
|
||||
}, [
|
||||
elements,
|
||||
position,
|
||||
setPosition,
|
||||
submit,
|
||||
cancel,
|
||||
changeLeft,
|
||||
changeRight,
|
||||
]);
|
||||
};
|
||||
@@ -0,0 +1,47 @@
|
||||
// yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/hooks/useNuiEvent.ts
|
||||
import { MutableRefObject, useEffect, useRef } from 'react';
|
||||
import { noop } from '../utils/misc';
|
||||
|
||||
interface NuiMessageData<T = unknown> {
|
||||
action: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
type NuiHandlerSignature<T> = (data: T) => void;
|
||||
|
||||
/**
|
||||
* A hook that manage events listeners for receiving data from the client scripts
|
||||
* @param action The specific `action` that should be listened for.
|
||||
* @param handler The callback function that will handle data relayed by this hook
|
||||
*
|
||||
* @example
|
||||
* useNuiEvent<{visibility: true, wasVisible: 'something'}>('setVisible', (data) => {
|
||||
* // whatever logic you want
|
||||
* })
|
||||
*
|
||||
**/
|
||||
|
||||
export const useNuiEvent = <T = any>(action: string, handler: (data: T) => void) => {
|
||||
const savedHandler: MutableRefObject<NuiHandlerSignature<T>> = useRef(noop);
|
||||
|
||||
// Make sure we handle for a reactive handler
|
||||
useEffect(() => {
|
||||
savedHandler.current = handler;
|
||||
}, [handler]);
|
||||
|
||||
useEffect(() => {
|
||||
const eventListener = (event: MessageEvent<NuiMessageData<T>>) => {
|
||||
const { action: eventAction, data } = event.data;
|
||||
|
||||
if (savedHandler.current) {
|
||||
if (eventAction === action) {
|
||||
savedHandler.current(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('message', eventListener);
|
||||
// Remove Event Listener on component cleanup
|
||||
return () => window.removeEventListener('message', eventListener);
|
||||
}, [action]);
|
||||
};
|
||||
@@ -0,0 +1,120 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 0.5rem;
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-fonoreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar-background: 0 0% 9%;
|
||||
--sidebar-foreground: 0 0% 98%;
|
||||
--sidebar-primary: 225 84% 49%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 0 0% 15%;
|
||||
--sidebar-accent-foreground: 0 0% 98%;
|
||||
--sidebar-border: 0 0% 100% / 10%;
|
||||
--sidebar-ring: 0 0% 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-transparent w-[100vw] h-[100vh] text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: "Poppins", sans-serif !important;
|
||||
text-rendering: optimizeLegibility !important;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
-moz-osx-font-smoothing: grayscale !important;
|
||||
color-scheme: normal !important;
|
||||
background-color: none !important;
|
||||
overflow: hidden !important;
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font-size: 1.2vh !important;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./app/App";
|
||||
import { fas } from "@fortawesome/free-solid-svg-icons";
|
||||
import { far } from "@fortawesome/free-regular-svg-icons";
|
||||
import { fab } from "@fortawesome/free-brands-svg-icons";
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { isEnvBrowser } from "./utils/misc";
|
||||
import ErrorBoundary from "./providers/errorBoundary";
|
||||
import { ThemeProvider } from "./providers/themeProvider";
|
||||
|
||||
library.add(fas, far, fab);
|
||||
|
||||
if (isEnvBrowser()) {
|
||||
const root = document.getElementById("root");
|
||||
// https://i.imgur.com/iPTAdYV.png - Night time img
|
||||
// https://i.imgur.com/3pzRj9n.png - Day time img
|
||||
//
|
||||
// root!.style.backgroundImage = 'url("/images/carShader.png")';
|
||||
root!.style.backgroundSize = "cover";
|
||||
root!.style.backgroundRepeat = "no-repeat";
|
||||
root!.style.backgroundPosition = "center";
|
||||
}
|
||||
|
||||
const root = document.getElementById("root");
|
||||
|
||||
createRoot(root!).render(
|
||||
<StrictMode>
|
||||
<ErrorBoundary>
|
||||
{" "}
|
||||
{/* Catches JS errors without hiding UI and keeps the app running */}
|
||||
<ThemeProvider defaultTheme="dark">
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
</ErrorBoundary>
|
||||
</StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,25 @@
|
||||
// yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/providers/errorBoundary.tsx
|
||||
import { fetchNui } from '@/utils/fetchNui';
|
||||
import { Component, ReactNode, ErrorInfo } from 'react';
|
||||
|
||||
class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
|
||||
constructor(props: { children: ReactNode }) {
|
||||
super(props);
|
||||
this.state = { hasError: false };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(err: Error) {
|
||||
return { hasError: true };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, info: ErrorInfo) {
|
||||
console.error(error, info)
|
||||
this.setState({ hasError: false });
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.state.hasError ? null : this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default ErrorBoundary;
|
||||
@@ -0,0 +1,73 @@
|
||||
import { createContext, useContext, useEffect, useState } from "react"
|
||||
|
||||
type Theme = "dark" | "light" | "system"
|
||||
|
||||
type ThemeProviderProps = {
|
||||
children: React.ReactNode
|
||||
defaultTheme?: Theme
|
||||
storageKey?: string
|
||||
}
|
||||
|
||||
type ThemeProviderState = {
|
||||
theme: Theme
|
||||
setTheme: (theme: Theme) => void
|
||||
}
|
||||
|
||||
const initialState: ThemeProviderState = {
|
||||
theme: "system",
|
||||
setTheme: () => null,
|
||||
}
|
||||
|
||||
const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
defaultTheme = "system",
|
||||
storageKey = "vite-ui-theme",
|
||||
...props
|
||||
}: ThemeProviderProps) {
|
||||
const [theme, setTheme] = useState<Theme>(
|
||||
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement
|
||||
|
||||
root.classList.remove("light", "dark")
|
||||
|
||||
if (theme === "system") {
|
||||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
|
||||
.matches
|
||||
? "dark"
|
||||
: "light"
|
||||
|
||||
root.classList.add(systemTheme)
|
||||
return
|
||||
}
|
||||
|
||||
root.classList.add(theme)
|
||||
}, [theme])
|
||||
|
||||
const value = {
|
||||
theme,
|
||||
setTheme: (theme: Theme) => {
|
||||
localStorage.setItem(storageKey, theme)
|
||||
setTheme(theme)
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProviderContext.Provider {...props} value={value}>
|
||||
{children}
|
||||
</ThemeProviderContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export const useTheme = () => {
|
||||
const context = useContext(ThemeProviderContext)
|
||||
|
||||
if (context === undefined)
|
||||
throw new Error("useTheme must be used within a ThemeProvider")
|
||||
|
||||
return context
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
// yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/utils/debugData.ts
|
||||
import { isEnvBrowser } from './misc';
|
||||
|
||||
interface DebugEvent<T = any> {
|
||||
action: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
/**
|
||||
* Emulates dispatching an event using SendNuiMessage in the lua scripts.
|
||||
* This is used when developing in browser
|
||||
*
|
||||
* @param events - The event you want to cover
|
||||
* @param timer - How long until it should trigger (ms)
|
||||
*/
|
||||
export const debugData = <P>(events: DebugEvent<P>[], timer = 1000): void => {
|
||||
if (process.env.NODE_ENV === 'development' && isEnvBrowser()) {
|
||||
for (const event of events) {
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(
|
||||
new MessageEvent('message', {
|
||||
data: {
|
||||
action: event.action,
|
||||
data: event.data,
|
||||
},
|
||||
})
|
||||
);
|
||||
}, timer);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
// yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/utils/fetchNui.ts
|
||||
/**
|
||||
* Simple wrapper around fetch API tailored for CEF/NUI use. This abstraction
|
||||
* can be extended to include AbortController if needed or if the response isn't
|
||||
* JSON. Tailor it to your needs.
|
||||
*
|
||||
* @param eventName - The endpoint eventname to target
|
||||
* @param data - Data you wish to send in the NUI Callback
|
||||
*
|
||||
* @return returnData - A promise for the data sent back by the NuiCallbacks CB argument
|
||||
*/
|
||||
|
||||
const fetch = window.fetch;
|
||||
// @ts-expect-error
|
||||
window.fetch = () => {};
|
||||
// @ts-expect-error
|
||||
window.XMLHttpRequest = window.fetch;
|
||||
|
||||
export async function fetchNui<T = any>(eventName: string, data?: any): Promise<T> {
|
||||
const options = {
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=UTF-8',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
};
|
||||
|
||||
const resourceName = (window as any).GetParentResourceName
|
||||
? (window as any).GetParentResourceName()
|
||||
: 'err_boilerplate';
|
||||
|
||||
const resp = await fetch(`https://${resourceName}/${eventName}`, options);
|
||||
const respFormatted = await resp.json();
|
||||
|
||||
return respFormatted;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
export const GetPosition = (pos: string) => {
|
||||
|
||||
pos = pos ? pos : "right-center"
|
||||
|
||||
if (pos == "center") {
|
||||
return "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||||
}
|
||||
|
||||
const classes: string[] = [];
|
||||
|
||||
|
||||
if (pos.includes("top")) {
|
||||
classes.push("top-4");
|
||||
} else if (pos.includes("center")) {
|
||||
classes.push("top-1/2", "-translate-y-1/2");
|
||||
} else {
|
||||
classes.push("bottom-4");
|
||||
}
|
||||
|
||||
if (pos.includes("left")) {
|
||||
classes.push("left-4");
|
||||
} else {
|
||||
classes.push("right-4");
|
||||
}
|
||||
|
||||
return classes.join(" ");
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
// Will return whether the current environment is in a regular browser
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
// and not CEF
|
||||
export const isEnvBrowser = (): boolean => !(window as any).invokeNative;
|
||||
|
||||
// Basic no operation function
|
||||
export const noop = () => { };
|
||||
|
||||
export const IsInputFocused = () => {
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const checkFocused = () => {
|
||||
const element = document.activeElement as HTMLElement | null;
|
||||
|
||||
if (element) {
|
||||
setIsFocused(
|
||||
element.tagName == "INPUT" ||
|
||||
element.tagName == "TEXTAREA" ||
|
||||
element.tagName == "SELECT"
|
||||
);
|
||||
} else {
|
||||
setIsFocused(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("focusin", checkFocused);
|
||||
document.addEventListener("focusout", checkFocused);
|
||||
|
||||
checkFocused();
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("focusin", checkFocused);
|
||||
document.removeEventListener("focusout", checkFocused);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return isFocused;
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,67 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: ["selector", "class"],
|
||||
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
colors: {
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
chart: {
|
||||
1: "hsl(var(--chart-1))",
|
||||
2: "hsl(var(--chart-2))",
|
||||
3: "hsl(var(--chart-3))",
|
||||
4: "hsl(var(--chart-4))",
|
||||
5: "hsl(var(--chart-5))",
|
||||
},
|
||||
sidebar: {
|
||||
DEFAULT: "hsl(var(--sidebar-background))",
|
||||
foreground: "hsl(var(--sidebar-foreground))",
|
||||
primary: "hsl(var(--sidebar-primary))",
|
||||
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
|
||||
accent: "hsl(var(--sidebar-accent))",
|
||||
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
|
||||
border: "hsl(var(--sidebar-border))",
|
||||
ring: "hsl(var(--sidebar-ring))",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import * as path from "path";
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import tailwindcss from 'tailwindcss';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
tailwindcss,
|
||||
autoprefixer,
|
||||
],
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
},
|
||||
base: './',
|
||||
build: {
|
||||
outDir: 'build',
|
||||
target: 'esnext',
|
||||
},
|
||||
esbuild: {
|
||||
logOverride: { 'this-is-undefined-in-esm': 'silent' },
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user