[HELP] Custom Menu

x0Z3ro0x · 2022-02-16T03:04:55.955Z

Forgive me if this has already been asked. I searched a bit on google and in the search feature here on the forums. I found lots of users creating their own menus however they were using NativeUI, RageUI, MenuV, ESX, or some other pre-built menu. I didn’t find any results of users looking to build their own menu 100% from scratch which is what I have done and require assistance on.

I have created a resource to draw a marker and display a menu upon button press. The assistance I require is correctly populating the menu with data and navigating it.

I have managed to populate the menu using an html table, however I haven’t had much success in navigating the table data. This leads me to believe that using a table is not the correct way to add data to a menu. My end goal is to be able to navigate the table data (or rather menu) using arrow keys and then have ‘enter’ call on code.

Here is what I have done so far -

Skipping the boring details, I draw a marker based on user distance from it, same for a button prompt. Then when the user presses E I trigger my event which just sends an NUI message to a javascript listener that then shows an html “menu” I have made.

Citizen.CreateThread(function()
	while true do
		Wait(0)
		
		local userVec = GetEntityCoords(GetPlayerPed(-1))
		local vec1 = vector3(18.48, -1109.93, 29.6)
		userDistFromMarker = #(userVec - vec1)
		
		if userDistFromMarker <= 5.6 then
			DrawMarker(20, 18.48, -1109.93, 29.6, 0, 0, 0, 0, 0, 0, 0.5, 0.5, 0.5, 0, 230, 38, 100, false, true, 2, true, false, false, false)
		end
		
		if userDistFromMarker <= 0.4 then
			userInMarker = true
			SetTextComponentFormat('STRING')
			AddTextComponentString('Press ~INPUT_CONTEXT~ to open ~y~Blanks & Tanks')
			DisplayHelpTextFromStringLabel(0, 0, 1, -1)
			
			if IsControlJustReleased(0, 38) then
				TriggerEvent('DKGShops:openMenu')
			end
		else
			userInMarker = false
			TriggerEvent('DKGShops:closeMenu')
		end
		
		if IsControlJustPressed(0, 177) then
			TriggerEvent('DKGShops:closeMenu')
		end
	end
end)

Here is my event -

RegisterNetEvent('DKGShops:openMenu')
AddEventHandler('DKGShops:openMenu', function()
	SendNUIMessage({
		ammoMenu = true
	})
end)

RegisterNetEvent('DKGShops:closeMenu')
AddEventHandler('DKGShops:closeMenu', function()
	SendNUIMessage({
		ammoMenu = false
	})
end)

Here is my javascript -

$(function () {
    window.onload = (e) => {
        $('#wrapper').hide();
		window.addEventListener('message', (event) => {
            var item = event.data;
            if (item !== undefined) {
                if (item.ammoMenu == true) {
                    $('#wrapper').show();
                }
                else {
                    $('#wrapper').hide()
                }
            }
        })
    }
})

Should I be using a table for my menu or some other html element? I am lacking the proper knowledge to know how to navigate the html elements using button presses which I think is what I am missing here. So any documentation you folks have on that would be awesome! My searches have been lacking in that area however chances are I am just searching the wrong keywords.

Any help is greatly appreciated and if I have left something out it wasn’t on purpose. Just ask, I will be happy to provide it. Thanks for your time folks, have a good day!

x0Z3ro0x · 2022-02-19T12:25:44.776Z

Friendly Bump and Update -

I’ve managed to make progress on this. Wording my searches a bit differently I was able to find a keydown function for the listener. I found you can also do this through lua and send the NUI message some data for when a button is pressed and by using that you can trigger the HTML effects you want.

I am sure there are much better ways to do it however that’s what I’ve learned so far. When a button press is detected it removes the active class set on an HTML element while adding it to another. I think tables could be used like I was trying earlier however I haven’t tried it yet, Im using orderedlist and list item tags.

Something I haven’t been able to solve is my button presses only register 2 of my list item elements and then stops regardless of my math. You can have other list items in the menu, however it will only navigate two of them. I am thinking this is because I need to assign a way to find the number of elements I want in an HTML document and use that in my code to navigate up and down. Still learning

I’ll get it working. Im far too stuborn not too. In the meantime if anyone has documentation on the subject or some helpful advice you’ve learned I would be happy to read it and very grateful for the knowledge.

My updated listener -

$(function () {
    window.onload = (e) => {
        $('#wrapper').hide();
		window.addEventListener('message', (event) => {
			var item = event.data;
			var index = 0;
            if (item !== undefined && item.type == "menu") {
                if (item.ammoMenu == true) {
                    $('#wrapper').show();
                }
                else {
                    $('#wrapper').hide()
                }
            }
			if (item !== undefined && item.down == true) {
				index--;
				if (index == -1) {
					index = $("#table li").length-1;
				}
				$('li').removeClass('active');
				$($('li')[index]).addClass('active');
			}
			else if (item !== undefined && item.down == false) {
				index++;
				if (index == $("#table li").length) {
					index=0;
				}
				$('li').removeClass('active');
				$($('li')[index]).addClass('active');
			}
			if (item !== undefined && item.type == "menuSubmit") {
				//emitNet('') note to self: this only works with a callback dumbass. Read more.
			}
        })
    }
})

x0Z3ro0x · 2022-02-20T01:42:41.620Z

All done. After screwing around with the callback it became very easy to test with console.logs to see what the code was doing. In doing so I also solved the menu issue and it navigates just fine now. Here is the final code -

Server Side -

ESX = nil

TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end)

RegisterServerEvent('DKGShops:addAmmo')
AddEventHandler('DKGShops:addAmmo', function(int)
	local xPlayer = ESX.GetPlayerFromId(source)
	
	if int == 1 then
		if xPlayer.getMoney() >= 3500 then
			xPlayer.removeMoney(3500)
			xPlayer.addInventoryItem('clip', 1)
			TriggerClientEvent('bulletin:send', source, 'You\'ve just bought an ~b~Ammor Box')
		else
			TriggerClientEvent('bulletin:send', source, 'You don\'t have enough money to buy that!')
		end
	elseif int == 2 then
		if xPlayer.getMoney() >= 17500 then
			xPlayer.removeMoney(17500)
			xPlayer.addInventoryItem('clip', 5)
			TriggerClientEvent('bulletin:send', source, 'You\'ve just bought ~y~five ~b~Ammor Box\'s')
		else
			TriggerClientEvent('bulletin:send', source, 'You don\'t have enough money to buy that!')
		end
	elseif int == 3 then
		if xPlayer.getMoney() >= 35000 then
			xPlayer.removeMoney(35000)
			xPlayer.addInventoryItem('clip', 10)
			TriggerClientEvent('bulletin:send', source, 'You\'ve just bought ~y~ten ~b~Ammor Box\'s')
		else
			TriggerClientEvent('bulletin:send', source, 'You don\'t have enough money to buy that!')
		end
	end
end)

Client Side -

RegisterNetEvent('DKGShops:openMenu')
AddEventHandler('DKGShops:openMenu', function()
	SendNUIMessage({
		type = "menu",
		ammoMenu = true
	})
end)

RegisterNetEvent('DKGShops:closeMenu')
AddEventHandler('DKGShops:closeMenu', function()
	SendNUIMessage({
		type = "menu",
		ammoMenu = false
	})
end)

RegisterNetEvent('DKGShops:nav')
AddEventHandler('DKGShops:nav', function(a)
	if a then
		SendNUIMessage({
			type = "navMenu",
			down = false
		})
	else
		SendNUIMessage({
		type = "navMenu",
		down = true
		})
	end
end)

RegisterNetEvent('DKGShops:submit')
AddEventHandler('DKGShops:submit', function()
	SendNUIMessage({
		type = "menuSubmit",
		submit = true
	})
end)

RegisterNetEvent('DKGShops:randomShit')
AddEventHandler('DKGShops:randomShit', function()
	exports.bulletin:Send("Yay, random shit!")
end)

RegisterNUICallback('menuSubmit', function(data, cb)
	if data.indexNum == 0 then
		TriggerServerEvent('DKGShops:addAmmo', 1)
	elseif data.indexNum == 1 then
		TriggerServerEvent('DKGShops:addAmmo', 2)
	elseif data.indexNum == 2 then
		TriggerServerEvent('DKGShops:addAmmo', 3)
	end
    cb('ok')
end)

Client Threads -

Citizen.CreateThread(function()
	while true do
		Wait(0)
		
		local userVec = GetEntityCoords(GetPlayerPed(-1))
		local vec1 = vector3(18.48, -1109.93, 29.6)
		userDistFromMarker = #(userVec - vec1)
		
		if userDistFromMarker <= 5.6 then
		  --DrawMarker(IconType, PosX, PosY, PosZ, DirX, DirY, DirZ, RotX, RotY, RotZ, ScaleX, ScaleY, ScaleZ, Red, Green, Blue, Opacity, BobUpAndDown, FaceCam, 2, false, false, false, false)
			DrawMarker(20, 18.48, -1109.93, 29.6, 0, 0, 0, 0, 0, 0, 0.5, 0.5, 0.5, 0, 230, 38, 100, false, true, 2, true, false, false, false)
		end
		
		if userDistFromMarker <= 0.4 then
			userInMarker = true
			SetTextComponentFormat('STRING')
			AddTextComponentString('Press ~INPUT_CONTEXT~ to open ~y~Blanks & Tanks')
			DisplayHelpTextFromStringLabel(0, 0, 1, -1)
			
			if IsControlJustReleased(0, 38) then
				TriggerEvent('DKGShops:openMenu')
			end
		else
			userInMarker = false
			TriggerEvent('DKGShops:closeMenu')
		end
		
		if userInMarker then
			if IsControlJustPressed(0, 187) then
				local moveUp = false
				TriggerEvent('DKGShops:nav', moveUp)
			elseif IsControlJustPressed(0, 188) then
				local moveUp = true
				TriggerEvent('DKGShops:nav', moveUp)
			elseif IsControlJustPressed(0, 191) then
				TriggerEvent('DKGShops:submit')
			end
		end
		
		if IsControlJustPressed(0, 177) then
			TriggerEvent('DKGShops:closeMenu')
		end
	end
end)

Listener -

$(function () {
    window.onload = (e) => {
        $('#wrapper').hide();
		var index = 0;
		window.addEventListener('message', (event) => {
			var item = event.data;
            if (item !== undefined && item.type == "menu") {
                if (item.ammoMenu == true) {
                    $('#wrapper').show();
                }
                else {
                    $('#wrapper').hide();
                }
            }
				if (item !== undefined && item.down == true) {
					index++;
					if (index == 3) {
						index = 0;
					}
					//console.log("The index value is - " + index);
					$('li').removeClass('active');
					$($('li')[index]).addClass('active');
				}
				else if (item !== undefined && item.down == false) {
					index--;
					if (index == -1) {
						index = 2;
					}
					//console.log("The index value is - " + index);
					$('li').removeClass('active');
					$($('li')[index]).addClass('active');
				}
			if (item !== undefined && item.type == "menuSubmit") {
				switch (index) {
					case 0:
						itemText = "You just bought an ~b~Ammo Box";
					break;
					case 1:
						itemText = "You just bought ~y~five ~b~Ammo box\'s";
					break;
					case 2:
						itemText = "Like a true American, you bought ~y~ten ~b~Ammo Box\'s"
					break;
				}
				$.post('http://DKGShops/menuSubmit', JSON.stringify({
					itemString: itemText,
					indexNum: index
				}));
			}
        })
    }
})

HTML -

<html>
	<head>
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
		<script src="js/listener.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="wrapper">
			<div id="content">
				<div id="title">
					<a>Blanks & Tanks</a>
				</div>
				<div id="sidebar"></div>
				<ol id="table">
					<li class="active">Ammo Box | $3500</li>
					<li>Ammo Box x5 | $17,500</li>
					<li>Ammo Box x10 | $35,000</li>
				</ol>
			</div>
		</div>
	</body>
</html>

CSS -

#wrapper {
	width: 20%;
	height: 55%;
	position: relative;
	left: 78%;
	top: 43%;
}
#content {
	background-color: rgba(26, 26, 0, 0.8);
	padding: 3%;
}

#title {
	background-color: rgb(220, 172, 11);
	width: 100%;
	height: 5%;
	font-size: 27px;
	text-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
	border-radius: 5px 5px 5px 0px;
}

#sidebar {
	border-left: 1px solid rgb(220, 172, 11);
	position: absolute;
	left: 0px;
	top: 10%;
	left: 3%;
	height: 41%;
}

li {
  display: block;
  position: relative;
  color:white;
  margin: 10px;
  width: 100%;
  height: 12%;
  left: -8.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.active {
    background-color: rgb(174, 9, 9);
	color: gold;
	border: 1px solid rgb(220, 172, 11);
	font-size: 20px;
}

Now that it works I will start to improve on it. For instance a slider for multiple items instead of multiple entries for multiple items. Feel free to use the code here is what it looks like -

system · 2022-03-22T01:43:19.121Z

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.